@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.
- package/dist/components/accordion/__stories__/accordion.stories.d.ts +9 -0
- package/dist/components/accordion/components/accordion-indicator.d.ts +1 -0
- package/dist/components/accordion/components/index.d.ts +2 -0
- package/dist/components/accordion/index.d.ts +1 -0
- package/dist/components/badge/__stories__/badge.stories.d.ts +8 -0
- package/dist/components/header/components/header.d.ts +1 -0
- package/dist/components/header/components/profile.d.ts +1 -0
- package/dist/components/loader/components/loader.d.ts +2 -2
- package/dist/components/toast/__stories__/toast.stories.d.ts +13 -0
- package/dist/components/toast/components/toast.d.ts +20 -0
- package/dist/components/toast/index.d.ts +1 -0
- package/dist/config/__stories__/globals.stories.d.ts +10 -0
- package/dist/config/theme/components/accordion.d.ts +53 -0
- package/dist/config/theme/components/alert.d.ts +2 -2
- package/dist/config/theme/components/index.d.ts +1 -0
- package/dist/config/theme/components/switch.d.ts +9 -0
- package/dist/internal-ui.cjs.development.js +233 -132
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +5 -5
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +235 -134
- package/dist/internal-ui.esm.js.map +1 -1
- package/dist/provider/__stories__/provider.stories.d.ts +3 -0
- package/dist/provider/components/provider.d.ts +1 -0
- package/package.json +6 -4
package/dist/internal-ui.esm.js
CHANGED
@@ -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,
|
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:
|
2013
|
+
color: color
|
2010
2014
|
}, /*#__PURE__*/createElement(Text, {
|
2011
2015
|
textStyle: "text.xs",
|
2012
|
-
mb: 1
|
2013
|
-
|
2014
|
-
|
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
|
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
|
2133
|
-
centerLogo
|
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(
|
2141
|
+
}) => /*#__PURE__*/createElement(Flex, Object.assign({
|
2141
2142
|
minH: 15,
|
2142
|
-
bg:
|
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:
|
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.
|
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(
|
3401
|
-
const
|
3402
|
-
|
3403
|
-
|
3404
|
-
const
|
3405
|
-
|
3406
|
-
|
3407
|
-
|
3408
|
-
|
3409
|
-
|
3410
|
-
|
3411
|
-
|
3412
|
-
|
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
|
-
|
3417
|
-
|
3420
|
+
_hover: {
|
3421
|
+
bg: 'neutral.100'
|
3418
3422
|
},
|
3419
|
-
|
3420
|
-
|
3421
|
-
|
3422
|
-
marginEnd: '3',
|
3423
|
-
w: '4',
|
3424
|
-
h: '4'
|
3423
|
+
_disabled: {
|
3424
|
+
opacity: 0.4,
|
3425
|
+
cursor: 'not-allowed'
|
3425
3426
|
},
|
3426
|
-
|
3427
|
-
|
3428
|
-
|
3429
|
-
|
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$
|
3843
|
-
defineMultiStyleConfig: defineMultiStyleConfig$
|
3901
|
+
definePartsStyle: definePartsStyle$2,
|
3902
|
+
defineMultiStyleConfig: defineMultiStyleConfig$2
|
3844
3903
|
} = /*#__PURE__*/createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
|
3845
|
-
const baseStyle$
|
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$
|
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$
|
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$
|
3935
|
-
baseStyle: baseStyle$
|
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$
|
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$
|
4077
|
+
baseStyle: baseStyle$3
|
4016
4078
|
});
|
4017
4079
|
|
4018
4080
|
const {
|
4019
|
-
definePartsStyle: definePartsStyle$
|
4020
|
-
defineMultiStyleConfig: defineMultiStyleConfig$
|
4081
|
+
definePartsStyle: definePartsStyle$3,
|
4082
|
+
defineMultiStyleConfig: defineMultiStyleConfig$3
|
4021
4083
|
} = /*#__PURE__*/createMultiStyleConfigHelpers(inputAnatomy.keys);
|
4022
|
-
const baseStyle$
|
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$
|
4127
|
+
lg: /*#__PURE__*/definePartsStyle$3({
|
4066
4128
|
field: size.lg,
|
4067
4129
|
addon: size.lg
|
4068
4130
|
}),
|
4069
|
-
md: /*#__PURE__*/definePartsStyle$
|
4131
|
+
md: /*#__PURE__*/definePartsStyle$3({
|
4070
4132
|
field: size.md,
|
4071
4133
|
addon: size.md
|
4072
4134
|
}),
|
4073
|
-
sm: /*#__PURE__*/definePartsStyle$
|
4135
|
+
sm: /*#__PURE__*/definePartsStyle$3({
|
4074
4136
|
field: size.sm,
|
4075
4137
|
addon: size.sm
|
4076
4138
|
})
|
4077
4139
|
};
|
4078
|
-
const outline = /*#__PURE__*/definePartsStyle$
|
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$
|
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$
|
4113
|
-
baseStyle: baseStyle$
|
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
|
4132
|
-
|
4133
|
-
|
4134
|
-
|
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%,
|
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$
|
4299
|
+
definePartsStyle: definePartsStyle$4
|
4221
4300
|
} = /*#__PURE__*/createMultiStyleConfigHelpers(popoverAnatomy.keys);
|
4222
4301
|
const Popover = {
|
4223
|
-
baseStyle: props => definePartsStyle$
|
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$
|
4232
|
-
defineMultiStyleConfig: defineMultiStyleConfig$
|
4310
|
+
definePartsStyle: definePartsStyle$5,
|
4311
|
+
defineMultiStyleConfig: defineMultiStyleConfig$4
|
4233
4312
|
} = /*#__PURE__*/createMultiStyleConfigHelpers$1(radioAnatomy.keys);
|
4234
|
-
const baseStyle$
|
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$
|
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$
|
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$
|
4325
|
-
baseStyle: baseStyle$
|
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$
|
4334
|
-
definePartsStyle: definePartsStyle$
|
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$
|
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$
|
4456
|
+
sm: /*#__PURE__*/definePartsStyle$6({
|
4378
4457
|
container: {
|
4379
|
-
[$width.variable]: '
|
4380
|
-
[$height.variable]: '
|
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$
|
4466
|
+
md: /*#__PURE__*/definePartsStyle$6({
|
4384
4467
|
container: {
|
4385
|
-
[$width.variable]: '2.
|
4386
|
-
[$height.variable]: '
|
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$
|
4476
|
+
lg: /*#__PURE__*/definePartsStyle$6({
|
4390
4477
|
container: {
|
4391
|
-
[$width.variable]: '3.
|
4392
|
-
[$height.variable]: '1.
|
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$
|
4397
|
-
baseStyle: baseStyle$
|
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$
|
4406
|
-
definePartsStyle: definePartsStyle$
|
4496
|
+
defineMultiStyleConfig: defineMultiStyleConfig$6,
|
4497
|
+
definePartsStyle: definePartsStyle$7
|
4407
4498
|
} = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
|
4408
|
-
const baseStyle$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
4589
|
-
baseStyle: baseStyle$
|
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
|
-
'
|
4711
|
-
|
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
|
|