@ctlyst.id/internal-ui 2.1.5 → 2.1.7

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,11 @@ 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 { ToastContainer } from 'react-toastify';
25
26
 
26
27
  /* eslint-disable react/require-default-props */
27
28
  function CheckIcon() {
@@ -135,6 +136,9 @@ const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
135
136
  __css: styles
136
137
  });
137
138
  });
139
+ Loader.defaultProps = {
140
+ size: 'md'
141
+ };
138
142
 
139
143
  const Button = /*#__PURE__*/forwardRef$1((props, ref) => {
140
144
  const {
@@ -263,9 +267,6 @@ const Badge = props => {
263
267
  } = props;
264
268
  return /*#__PURE__*/React__default.createElement(Badge$2, Object.assign({
265
269
  borderRadius: pill ? 'xl' : 'sm',
266
- variant: "primary-solid",
267
- px: "2",
268
- h: "4.5",
269
270
  display: "inline-flex",
270
271
  alignItems: "center",
271
272
  justifyContent: "space-between",
@@ -1679,7 +1680,13 @@ const Datepicker = ({
1679
1680
  "data-test-id": "bcpJJyCP0z_RIAGZXDU6s",
1680
1681
  onClick: onClear,
1681
1682
  cursor: "pointer"
1682
- }))), !isError ? /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, null, error));
1683
+ }))), !isError ? /*#__PURE__*/React__default.createElement(FormHelperText, {
1684
+ fontSize: "text.xs",
1685
+ mt: 1
1686
+ }, helperText) : /*#__PURE__*/React__default.createElement(FormErrorMessage, {
1687
+ fontSize: "text.xs",
1688
+ mt: 1
1689
+ }, error));
1683
1690
  };
1684
1691
  Datepicker.defaultProps = {
1685
1692
  id: undefined,
@@ -1978,6 +1985,7 @@ Logo.defaultProps = {
1978
1985
  };
1979
1986
 
1980
1987
  const Profile = ({
1988
+ color,
1981
1989
  brandColor,
1982
1990
  data,
1983
1991
  onLogout
@@ -2001,17 +2009,19 @@ const Profile = ({
2001
2009
  textDecor: 'none'
2002
2010
  },
2003
2011
  m: 0,
2004
- onClick: onToggle
2012
+ onClick: onToggle,
2013
+ color: color
2005
2014
  }, /*#__PURE__*/createElement(HStack, null, /*#__PURE__*/createElement(VStack, {
2006
2015
  alignItems: "flex-end",
2007
2016
  spacing: 0,
2008
2017
  ml: "2",
2009
- color: "primary.500"
2018
+ color: color
2010
2019
  }, /*#__PURE__*/createElement(Text, {
2011
2020
  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, {
2021
+ mb: 1
2022
+ }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/createElement(Flex, {
2023
+ alignItems: "center"
2024
+ }, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/createElement(Text, {
2015
2025
  textStyle: "text.xs"
2016
2026
  }, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/createElement(Box, {
2017
2027
  h: "3",
@@ -2058,7 +2068,8 @@ const Profile = ({
2058
2068
  Profile.defaultProps = {
2059
2069
  brandColor: 'primary.500',
2060
2070
  data: undefined,
2061
- onLogout: undefined
2071
+ onLogout: undefined,
2072
+ color: undefined
2062
2073
  };
2063
2074
 
2064
2075
  const SwitchMode = () => {
@@ -2096,15 +2107,9 @@ const Version = ({
2096
2107
  version,
2097
2108
  environment,
2098
2109
  onOpenModalRelease
2099
- }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge$2, {
2110
+ }) => /*#__PURE__*/createElement(Fragment, null, version && /*#__PURE__*/createElement(Badge, {
2100
2111
  "data-test-id": "dzl3esjhCphobaaIXpiUE",
2101
2112
  variant: "neutral-light",
2102
- textStyle: "text.xs",
2103
- py: 1,
2104
- px: 2.5,
2105
- fontWeight: "semibold",
2106
- textTransform: "lowercase",
2107
- borderRadius: "md",
2108
2113
  onClick: onOpenModalRelease,
2109
2114
  cursor: onOpenModalRelease ? 'pointer' : 'auto'
2110
2115
  }, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/createElement(Box, {
@@ -2129,32 +2134,36 @@ const Header = ({
2129
2134
  onLogout,
2130
2135
  onOpenModalRelease,
2131
2136
  hideSwitchMode,
2132
- mainLogo = 'https://assets.voila.id/xms/logo-xms.jpg',
2133
- centerLogo = 'https://assets.voila.id/xms/logo-voila-black.png?v=1',
2137
+ mainLogo,
2138
+ centerLogo,
2134
2139
  mainLogoSize,
2135
2140
  centerLogoSize = 4,
2136
2141
  hideEnv = false,
2137
2142
  urlLogo,
2138
2143
  children,
2144
+ profile,
2139
2145
  ...props
2140
- }) => /*#__PURE__*/createElement(Box, Object.assign({
2146
+ }) => /*#__PURE__*/createElement(Flex, Object.assign({
2141
2147
  minH: 15,
2142
- bg: "white",
2148
+ bg: props.bg,
2149
+ bgColor: props.bgColor,
2143
2150
  shadow: "raised",
2144
2151
  px: 6,
2145
- py: 3
2152
+ py: 3,
2153
+ alignItems: "center"
2146
2154
  }, props), /*#__PURE__*/createElement(Flex, {
2155
+ h: "auto",
2147
2156
  w: "full",
2148
2157
  alignItems: "center",
2149
- justifyContent: "space-between",
2158
+ justifyContent: profile ? 'flex-end' : 'space-between',
2150
2159
  pos: "relative"
2151
- }, /*#__PURE__*/createElement(Flex, {
2160
+ }, mainLogo && /*#__PURE__*/createElement(Flex, {
2152
2161
  alignItems: "center"
2153
2162
  }, /*#__PURE__*/createElement(Logo, {
2154
2163
  url: urlLogo,
2155
2164
  imageUrl: mainLogo,
2156
2165
  height: mainLogoSize
2157
- }), children && children), /*#__PURE__*/createElement(HStack, {
2166
+ }), children && children), centerLogo && /*#__PURE__*/createElement(HStack, {
2158
2167
  w: "fit-content",
2159
2168
  spacing: 2,
2160
2169
  alignItems: "center",
@@ -2170,9 +2179,10 @@ const Header = ({
2170
2179
  version: data === null || data === void 0 ? void 0 : data.version,
2171
2180
  environment: data === null || data === void 0 ? void 0 : data.environment,
2172
2181
  onOpenModalRelease: onOpenModalRelease
2173
- })), /*#__PURE__*/createElement(Flex, {
2182
+ })), profile || /*#__PURE__*/createElement(Flex, {
2174
2183
  alignItems: "center"
2175
2184
  }, !hideSwitchMode && /*#__PURE__*/createElement(SwitchMode, null), /*#__PURE__*/createElement(Profile, {
2185
+ color: props.color,
2176
2186
  brandColor: brandColor,
2177
2187
  data: data,
2178
2188
  onLogout: onLogout
@@ -2188,7 +2198,8 @@ Header.defaultProps = {
2188
2198
  centerLogo: undefined,
2189
2199
  centerLogoSize: undefined,
2190
2200
  hideEnv: false,
2191
- urlLogo: undefined
2201
+ urlLogo: undefined,
2202
+ profile: undefined
2192
2203
  };
2193
2204
 
2194
2205
  const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -3261,7 +3272,7 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
3261
3272
  p: 4,
3262
3273
  fontSize: "text.md",
3263
3274
  _selected: {
3264
- borderColor: 'primary.400',
3275
+ borderColor: 'primary.500',
3265
3276
  color: 'primary.500',
3266
3277
  transform: 'translateY(-2px)',
3267
3278
  _hover: {
@@ -3397,50 +3408,97 @@ Uploader.defaultProps = {
3397
3408
  const {
3398
3409
  definePartsStyle,
3399
3410
  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'
3411
+ } = /*#__PURE__*/createMultiStyleConfigHelpers(accordionAnatomy.keys);
3412
+ const baseStyleContainer = /*#__PURE__*/defineStyle$1({
3413
+ border: 'none'
3414
+ });
3415
+ const baseStyleButton = /*#__PURE__*/defineStyle$1({
3416
+ height: 14,
3417
+ transitionProperty: 'common',
3418
+ transitionDuration: 'normal',
3419
+ gap: 4,
3420
+ fontSize: 'text.md',
3421
+ bg: 'neutral.50',
3422
+ _focusVisible: {
3423
+ bg: 'neutral.100'
3415
3424
  },
3416
- description: {
3417
- lineHeight: '6'
3425
+ _hover: {
3426
+ bg: 'neutral.100'
3418
3427
  },
3419
- icon: {
3420
- color: $fg.reference,
3421
- flexShrink: 0,
3422
- marginEnd: '3',
3423
- w: '4',
3424
- h: '4'
3428
+ _disabled: {
3429
+ opacity: 0.4,
3430
+ cursor: 'not-allowed'
3425
3431
  },
3426
- action: {
3427
- color: $ac.reference,
3428
- '& +.chakra-alert__close': {
3429
- ml: '3'
3432
+ py: 2,
3433
+ px: 4,
3434
+ position: 'relative'
3435
+ });
3436
+ const baseStylePanel = /*#__PURE__*/defineStyle$1({
3437
+ pt: '2',
3438
+ px: '4',
3439
+ pb: '5'
3440
+ });
3441
+ const baseStyleIcon = /*#__PURE__*/defineStyle$1({
3442
+ fontSize: '1.25em'
3443
+ });
3444
+ const baseStyle = /*#__PURE__*/definePartsStyle({
3445
+ container: baseStyleContainer,
3446
+ button: baseStyleButton,
3447
+ panel: baseStylePanel,
3448
+ icon: baseStyleIcon
3449
+ });
3450
+ const accordionTheme = /*#__PURE__*/defineMultiStyleConfig({
3451
+ baseStyle
3452
+ });
3453
+
3454
+ const {
3455
+ definePartsStyle: definePartsStyle$1,
3456
+ defineMultiStyleConfig: defineMultiStyleConfig$1
3457
+ } = /*#__PURE__*/createMultiStyleConfigHelpers(alertAnatomy.keys);
3458
+ const $fg = /*#__PURE__*/cssVar('alert-fg');
3459
+ const $bg = /*#__PURE__*/cssVar('alert-bg');
3460
+ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1(props => {
3461
+ return {
3462
+ container: {
3463
+ bg: $bg.reference,
3464
+ px: '4',
3465
+ py: '2',
3466
+ borderRadius: 'sm'
3467
+ },
3468
+ title: {
3469
+ fontWeight: 'regular',
3470
+ textStyle: 'text.sm',
3471
+ marginEnd: '2'
3472
+ },
3473
+ description: {
3474
+ lineHeight: '6'
3475
+ },
3476
+ icon: {
3477
+ color: $fg.reference,
3478
+ flexShrink: 0,
3479
+ marginEnd: '3',
3480
+ w: '4',
3481
+ h: '4'
3482
+ },
3483
+ action: {
3484
+ color: props.colorScheme === 'neutral' && props.variant === 'light' ? 'primary.500' : 'inherit',
3485
+ '& +.chakra-alert__close': {
3486
+ ml: '3'
3487
+ }
3488
+ },
3489
+ close: {
3490
+ color: $fg.reference,
3491
+ w: '4',
3492
+ h: '4'
3493
+ },
3494
+ spinner: {
3495
+ color: $fg.reference,
3496
+ flexShrink: 0,
3497
+ marginEnd: '3',
3498
+ w: '5',
3499
+ h: '5'
3430
3500
  }
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
- }
3501
+ };
3444
3502
  });
3445
3503
  function getBg(props) {
3446
3504
  const {
@@ -3450,7 +3508,7 @@ function getBg(props) {
3450
3508
  light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
3451
3509
  };
3452
3510
  }
3453
- const variantLight = /*#__PURE__*/definePartsStyle(props => {
3511
+ const variantLight = /*#__PURE__*/definePartsStyle$1(props => {
3454
3512
  const {
3455
3513
  colorScheme: c
3456
3514
  } = props;
@@ -3463,7 +3521,7 @@ const variantLight = /*#__PURE__*/definePartsStyle(props => {
3463
3521
  }
3464
3522
  };
3465
3523
  });
3466
- const variantSolid = /*#__PURE__*/definePartsStyle(props => {
3524
+ const variantSolid = /*#__PURE__*/definePartsStyle$1(props => {
3467
3525
  const {
3468
3526
  colorScheme: c
3469
3527
  } = props;
@@ -3478,8 +3536,8 @@ const variants = {
3478
3536
  light: variantLight,
3479
3537
  solid: variantSolid
3480
3538
  };
3481
- const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
3482
- baseStyle,
3539
+ const alertTheme = /*#__PURE__*/defineMultiStyleConfig$1({
3540
+ baseStyle: baseStyle$1,
3483
3541
  variants,
3484
3542
  defaultProps: {
3485
3543
  variant: 'light',
@@ -3682,6 +3740,12 @@ const Button$1 = /*#__PURE__*/defineStyleConfig({
3682
3740
  },
3683
3741
  _disabled: {
3684
3742
  border: 0
3743
+ },
3744
+ '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)': {
3745
+ marginEnd: '-1px'
3746
+ },
3747
+ '.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)': {
3748
+ marginBottom: '-1px'
3685
3749
  }
3686
3750
  };
3687
3751
  const disabledLoading = {
@@ -3839,10 +3903,10 @@ const CardStyle = /*#__PURE__*/defineStyleConfig({
3839
3903
  });
3840
3904
 
3841
3905
  const {
3842
- definePartsStyle: definePartsStyle$1,
3843
- defineMultiStyleConfig: defineMultiStyleConfig$1
3906
+ definePartsStyle: definePartsStyle$2,
3907
+ defineMultiStyleConfig: defineMultiStyleConfig$2
3844
3908
  } = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
3845
- const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3909
+ const baseStyle$2 = /*#__PURE__*/definePartsStyle$2({
3846
3910
  control: {
3847
3911
  borderRadius: 'sm',
3848
3912
  w: 4,
@@ -3864,7 +3928,7 @@ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3864
3928
  cursor: 'not-allowed'
3865
3929
  }
3866
3930
  });
3867
- const errors = /*#__PURE__*/definePartsStyle$1({
3931
+ const errors = /*#__PURE__*/definePartsStyle$2({
3868
3932
  control: {
3869
3933
  borderColor: 'danger.500',
3870
3934
  _checked: {
@@ -3887,7 +3951,7 @@ const errors = /*#__PURE__*/definePartsStyle$1({
3887
3951
  fontSize: '8px'
3888
3952
  }
3889
3953
  });
3890
- const unstyled = /*#__PURE__*/definePartsStyle$1({
3954
+ const unstyled = /*#__PURE__*/definePartsStyle$2({
3891
3955
  control: {
3892
3956
  borderColor: 'neutral.600',
3893
3957
  _checked: {
@@ -3931,8 +3995,8 @@ const variants$1 = {
3931
3995
  errors,
3932
3996
  unstyled
3933
3997
  };
3934
- const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
3935
- baseStyle: baseStyle$1,
3998
+ const Checkbox = /*#__PURE__*/defineMultiStyleConfig$2({
3999
+ baseStyle: baseStyle$2,
3936
4000
  variants: variants$1,
3937
4001
  defaultProps: {
3938
4002
  variant: 'unstyled'
@@ -3980,7 +4044,10 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
3980
4044
  bg: 'neutral.200',
3981
4045
  color: 'black.low',
3982
4046
  borderColor: 'neutral.200',
3983
- cursor: 'not-allowed'
4047
+ cursor: 'not-allowed',
4048
+ _hover: {
4049
+ bg: 'neutral.200'
4050
+ }
3984
4051
  };
3985
4052
  chipsProps = {
3986
4053
  ...chipsProps,
@@ -4005,21 +4072,21 @@ const Chips$1 = /*#__PURE__*/defineStyleConfig({
4005
4072
  }
4006
4073
  });
4007
4074
 
4008
- const baseStyle$2 = /*#__PURE__*/defineStyle$1({
4075
+ const baseStyle$3 = /*#__PURE__*/defineStyle$1({
4009
4076
  fontSize: 'field.sm',
4010
4077
  fontWeight: 'normal',
4011
4078
  marginEnd: 1,
4012
4079
  mb: 1
4013
4080
  });
4014
4081
  const FormLabel = /*#__PURE__*/defineStyleConfig({
4015
- baseStyle: baseStyle$2
4082
+ baseStyle: baseStyle$3
4016
4083
  });
4017
4084
 
4018
4085
  const {
4019
- definePartsStyle: definePartsStyle$2,
4020
- defineMultiStyleConfig: defineMultiStyleConfig$2
4086
+ definePartsStyle: definePartsStyle$3,
4087
+ defineMultiStyleConfig: defineMultiStyleConfig$3
4021
4088
  } = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
4022
- const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
4089
+ const baseStyle$4 = /*#__PURE__*/definePartsStyle$3({
4023
4090
  field: {
4024
4091
  width: '100%',
4025
4092
  minWidth: 0,
@@ -4062,20 +4129,20 @@ const size = {
4062
4129
  })
4063
4130
  };
4064
4131
  const sizes = {
4065
- lg: /*#__PURE__*/definePartsStyle$2({
4132
+ lg: /*#__PURE__*/definePartsStyle$3({
4066
4133
  field: size.lg,
4067
4134
  addon: size.lg
4068
4135
  }),
4069
- md: /*#__PURE__*/definePartsStyle$2({
4136
+ md: /*#__PURE__*/definePartsStyle$3({
4070
4137
  field: size.md,
4071
4138
  addon: size.md
4072
4139
  }),
4073
- sm: /*#__PURE__*/definePartsStyle$2({
4140
+ sm: /*#__PURE__*/definePartsStyle$3({
4074
4141
  field: size.sm,
4075
4142
  addon: size.sm
4076
4143
  })
4077
4144
  };
4078
- const outline = /*#__PURE__*/definePartsStyle$2(props => {
4145
+ const outline = /*#__PURE__*/definePartsStyle$3(props => {
4079
4146
  const field = {
4080
4147
  border: 0,
4081
4148
  outline: 0,
@@ -4093,7 +4160,7 @@ const outline = /*#__PURE__*/definePartsStyle$2(props => {
4093
4160
  field
4094
4161
  };
4095
4162
  });
4096
- const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
4163
+ const unstyled$1 = /*#__PURE__*/definePartsStyle$3({
4097
4164
  field: {
4098
4165
  bg: 'transparent',
4099
4166
  px: '0',
@@ -4109,8 +4176,8 @@ const variants$2 = {
4109
4176
  outline,
4110
4177
  unstyled: unstyled$1
4111
4178
  };
4112
- const Input = /*#__PURE__*/defineMultiStyleConfig$2({
4113
- baseStyle: baseStyle$3,
4179
+ const Input = /*#__PURE__*/defineMultiStyleConfig$3({
4180
+ baseStyle: baseStyle$4,
4114
4181
  sizes,
4115
4182
  variants: variants$2,
4116
4183
  defaultProps: {
@@ -4129,6 +4196,9 @@ const rotate = /*#__PURE__*/keyframes({
4129
4196
  }
4130
4197
  });
4131
4198
  const getLoaderColor = color => {
4199
+ if (!color) {
4200
+ return 'var(--chakra-colors-white-high)';
4201
+ }
4132
4202
  const colorValue = color.split('.');
4133
4203
  let backgroundColor;
4134
4204
  switch (colorValue.length) {
@@ -4231,10 +4301,10 @@ const LoaderStyle = /*#__PURE__*/defineStyleConfig({
4231
4301
  });
4232
4302
 
4233
4303
  const {
4234
- definePartsStyle: definePartsStyle$3
4304
+ definePartsStyle: definePartsStyle$4
4235
4305
  } = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
4236
4306
  const Popover = {
4237
- baseStyle: props => definePartsStyle$3({
4307
+ baseStyle: props => definePartsStyle$4({
4238
4308
  popper: {
4239
4309
  background: mode('white', 'inherit')(props)
4240
4310
  }
@@ -4242,10 +4312,10 @@ const Popover = {
4242
4312
  };
4243
4313
 
4244
4314
  const {
4245
- definePartsStyle: definePartsStyle$4,
4246
- defineMultiStyleConfig: defineMultiStyleConfig$3
4315
+ definePartsStyle: definePartsStyle$5,
4316
+ defineMultiStyleConfig: defineMultiStyleConfig$4
4247
4317
  } = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
4248
- const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
4318
+ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5({
4249
4319
  control: {
4250
4320
  border: '1px solid',
4251
4321
  width: '16px',
@@ -4261,7 +4331,7 @@ const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
4261
4331
  }
4262
4332
  }
4263
4333
  });
4264
- const errors$1 = /*#__PURE__*/definePartsStyle$4({
4334
+ const errors$1 = /*#__PURE__*/definePartsStyle$5({
4265
4335
  control: {
4266
4336
  borderColor: 'danger.500',
4267
4337
  _checked: {
@@ -4296,7 +4366,7 @@ const errors$1 = /*#__PURE__*/definePartsStyle$4({
4296
4366
  fontSize: '12px'
4297
4367
  }
4298
4368
  });
4299
- const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
4369
+ const unstyled$2 = /*#__PURE__*/definePartsStyle$5({
4300
4370
  control: {
4301
4371
  borderColor: 'neutral.600',
4302
4372
  _checked: {
@@ -4335,8 +4405,8 @@ const variants$3 = {
4335
4405
  errors: errors$1,
4336
4406
  unstyled: unstyled$2
4337
4407
  };
4338
- const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
4339
- baseStyle: baseStyle$4,
4408
+ const Radio = /*#__PURE__*/defineMultiStyleConfig$4({
4409
+ baseStyle: baseStyle$5,
4340
4410
  variants: variants$3,
4341
4411
  defaultProps: {
4342
4412
  variant: 'unstyled'
@@ -4344,8 +4414,8 @@ const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
4344
4414
  });
4345
4415
 
4346
4416
  const {
4347
- defineMultiStyleConfig: defineMultiStyleConfig$4,
4348
- definePartsStyle: definePartsStyle$5
4417
+ defineMultiStyleConfig: defineMultiStyleConfig$5,
4418
+ definePartsStyle: definePartsStyle$6
4349
4419
  } = /*#__PURE__*/createMultiStyleConfigHelpers(switchAnatomy.keys);
4350
4420
  const $width = /*#__PURE__*/cssVar$1('switch-track-width');
4351
4421
  const $height = /*#__PURE__*/cssVar$1('switch-track-height');
@@ -4363,7 +4433,7 @@ const baseStyleThumb = /*#__PURE__*/defineStyle$1({
4363
4433
  transform: `translateX(${$translateX.reference})`
4364
4434
  }
4365
4435
  });
4366
- const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
4436
+ const baseStyle$6 = /*#__PURE__*/definePartsStyle$6(() => ({
4367
4437
  container: {
4368
4438
  [$diff.variable]: diffValue,
4369
4439
  [$translateX.variable]: $diff.reference,
@@ -4388,27 +4458,39 @@ const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
4388
4458
  thumb: baseStyleThumb
4389
4459
  }));
4390
4460
  const sizes$1 = {
4391
- sm: /*#__PURE__*/definePartsStyle$5({
4461
+ sm: /*#__PURE__*/definePartsStyle$6({
4392
4462
  container: {
4393
- [$width.variable]: '2.125rem',
4394
- [$height.variable]: '1.063rem'
4463
+ [$width.variable]: '1.875rem',
4464
+ [$height.variable]: '0.75rem'
4465
+ },
4466
+ thumb: {
4467
+ [$width.variable]: '0.75rem',
4468
+ [$height.variable]: '0.75rem'
4395
4469
  }
4396
4470
  }),
4397
- md: /*#__PURE__*/definePartsStyle$5({
4471
+ md: /*#__PURE__*/definePartsStyle$6({
4398
4472
  container: {
4399
- [$width.variable]: '2.875rem',
4400
- [$height.variable]: '1.5rem'
4473
+ [$width.variable]: '2.375rem',
4474
+ [$height.variable]: '1rem'
4475
+ },
4476
+ thumb: {
4477
+ [$width.variable]: '1rem',
4478
+ [$height.variable]: '1rem'
4401
4479
  }
4402
4480
  }),
4403
- lg: /*#__PURE__*/definePartsStyle$5({
4481
+ lg: /*#__PURE__*/definePartsStyle$6({
4404
4482
  container: {
4405
- [$width.variable]: '3.625rem',
4406
- [$height.variable]: '1.813rem'
4483
+ [$width.variable]: '3.25rem',
4484
+ [$height.variable]: '1.375rem'
4485
+ },
4486
+ thumb: {
4487
+ [$width.variable]: '1.375rem',
4488
+ [$height.variable]: '1.375rem'
4407
4489
  }
4408
4490
  })
4409
4491
  };
4410
- const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
4411
- baseStyle: baseStyle$5,
4492
+ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$5({
4493
+ baseStyle: baseStyle$6,
4412
4494
  sizes: sizes$1,
4413
4495
  defaultProps: {
4414
4496
  size: 'md'
@@ -4416,10 +4498,10 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
4416
4498
  });
4417
4499
 
4418
4500
  const {
4419
- defineMultiStyleConfig: defineMultiStyleConfig$5,
4420
- definePartsStyle: definePartsStyle$6
4501
+ defineMultiStyleConfig: defineMultiStyleConfig$6,
4502
+ definePartsStyle: definePartsStyle$7
4421
4503
  } = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
4422
- const baseStyle$6 = /*#__PURE__*/definePartsStyle$6({
4504
+ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
4423
4505
  table: {
4424
4506
  fontVariantNumeric: 'lining-nums tabular-nums',
4425
4507
  borderCollapse: 'collapse',
@@ -4452,7 +4534,7 @@ const numericStyles = /*#__PURE__*/defineStyle$1({
4452
4534
  textAlign: 'end'
4453
4535
  }
4454
4536
  });
4455
- const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
4537
+ const variantSimple = /*#__PURE__*/definePartsStyle$7(props => {
4456
4538
  const {
4457
4539
  colorScheme: c
4458
4540
  } = props;
@@ -4482,7 +4564,7 @@ const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
4482
4564
  }
4483
4565
  };
4484
4566
  });
4485
- const variantStripe = /*#__PURE__*/definePartsStyle$6(props => {
4567
+ const variantStripe = /*#__PURE__*/definePartsStyle$7(props => {
4486
4568
  const {
4487
4569
  colorScheme: c
4488
4570
  } = props;
@@ -4531,7 +4613,7 @@ const variants$4 = {
4531
4613
  unstyled: /*#__PURE__*/defineStyle$1({})
4532
4614
  };
4533
4615
  const sizes$2 = {
4534
- sm: /*#__PURE__*/definePartsStyle$6({
4616
+ sm: /*#__PURE__*/definePartsStyle$7({
4535
4617
  th: {
4536
4618
  px: '4',
4537
4619
  py: '1',
@@ -4550,7 +4632,7 @@ const sizes$2 = {
4550
4632
  fontSize: 'xs'
4551
4633
  }
4552
4634
  }),
4553
- md: /*#__PURE__*/definePartsStyle$6({
4635
+ md: /*#__PURE__*/definePartsStyle$7({
4554
4636
  th: {
4555
4637
  px: '2',
4556
4638
  py: '4',
@@ -4580,7 +4662,7 @@ const sizes$2 = {
4580
4662
  fontSize: 'sm'
4581
4663
  }
4582
4664
  }),
4583
- lg: /*#__PURE__*/definePartsStyle$6({
4665
+ lg: /*#__PURE__*/definePartsStyle$7({
4584
4666
  th: {
4585
4667
  px: '8',
4586
4668
  py: '4',
@@ -4599,8 +4681,8 @@ const sizes$2 = {
4599
4681
  }
4600
4682
  })
4601
4683
  };
4602
- const tableTheme = /*#__PURE__*/defineMultiStyleConfig$5({
4603
- baseStyle: baseStyle$6,
4684
+ const tableTheme = /*#__PURE__*/defineMultiStyleConfig$6({
4685
+ baseStyle: baseStyle$7,
4604
4686
  variants: variants$4,
4605
4687
  sizes: sizes$2,
4606
4688
  defaultProps: {
@@ -4693,6 +4775,7 @@ const Textarea = /*#__PURE__*/defineStyleConfig$1({
4693
4775
 
4694
4776
  var components = {
4695
4777
  __proto__: null,
4778
+ Accordion: accordionTheme,
4696
4779
  Alert: alertTheme,
4697
4780
  Badge: Badge$1,
4698
4781
  Button: Button$1,
@@ -4721,8 +4804,17 @@ const getTheme = foundations => {
4721
4804
  },
4722
4805
  styles: {
4723
4806
  global: {
4724
- '*::-webkit-scrollbar-thumb': {
4725
- background: 'neutral.400'
4807
+ '&::-webkit-scrollbar': {
4808
+ width: '10px',
4809
+ height: '10px'
4810
+ },
4811
+ '&::-webkit-scrollbar-track': {
4812
+ background: 'white'
4813
+ },
4814
+ '&::-webkit-scrollbar-thumb': {
4815
+ background: 'neutral.400',
4816
+ borderRadius: '24px',
4817
+ border: '2px solid white'
4726
4818
  },
4727
4819
  body: {
4728
4820
  fontSize: 'text.sm',
@@ -4782,7 +4874,7 @@ const Provider = ({
4782
4874
  }), []);
4783
4875
  return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
4784
4876
  value: provider
4785
- }, children);
4877
+ }, /*#__PURE__*/React__default.createElement(ToastContainer, null), children);
4786
4878
  };
4787
4879
  Provider.displayName = 'Provider';
4788
4880