@ctlyst.id/internal-ui 2.1.1 → 2.1.3
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/alert/components/alert-context.d.ts +4 -0
- package/dist/components/alert/components/alert.d.ts +1 -1
- package/dist/components/breadcrumb/__stories__/breadcrumb.stories.d.ts +2 -1
- package/dist/components/breadcrumb/components/bread-crumb.d.ts +1 -0
- package/dist/components/button/__stories__/button.stories.d.ts +1 -0
- package/dist/components/header/__stories__/header.stories.d.ts +3 -1
- package/dist/components/header/components/header.d.ts +7 -0
- package/dist/components/header/components/logo.d.ts +8 -0
- package/dist/components/header/components/profile.d.ts +2 -0
- package/dist/components/header/components/version.d.ts +1 -0
- package/dist/components/header/types.d.ts +1 -1
- package/dist/components/tabs/__stories__/tabs.stories.d.ts +1 -0
- package/dist/components/tabs/components/tab.d.ts +1 -0
- package/dist/config/__stories__/foundations.stories.d.ts +1 -0
- package/dist/config/theme/components/alert.d.ts +6 -16
- package/dist/config/theme/components/checkbox.d.ts +6 -7
- package/dist/config/theme/components/chips.d.ts +9 -8
- package/dist/internal-ui.cjs.development.js +205 -128
- 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 +208 -131
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +4 -4
@@ -75,6 +75,10 @@ const STATUSES = {
|
|
75
75
|
error: {
|
76
76
|
icon: WarningIcon,
|
77
77
|
colorScheme: 'danger'
|
78
|
+
},
|
79
|
+
neutral: {
|
80
|
+
icon: InfoIcon,
|
81
|
+
colorScheme: 'neutral'
|
78
82
|
}
|
79
83
|
};
|
80
84
|
function getStatusColorScheme(status) {
|
@@ -174,10 +178,9 @@ function AlertAction({
|
|
174
178
|
const css = styles.action;
|
175
179
|
return /*#__PURE__*/React__default.createElement(Button, {
|
176
180
|
"data-test-id": "alert-action",
|
177
|
-
className: utils.cx('chakra-
|
181
|
+
className: utils.cx('chakra-alert__action', className),
|
178
182
|
variant: "link",
|
179
|
-
|
180
|
-
fontWeight: "700",
|
183
|
+
fontWeight: "semibold",
|
181
184
|
__css: css
|
182
185
|
}, children);
|
183
186
|
}
|
@@ -265,10 +268,10 @@ const Badge = props => {
|
|
265
268
|
...rest
|
266
269
|
} = props;
|
267
270
|
return /*#__PURE__*/React__default.createElement(react.Badge, Object.assign({
|
268
|
-
borderRadius: pill ?
|
271
|
+
borderRadius: pill ? 'xl' : 'sm',
|
269
272
|
variant: "primary-solid",
|
270
|
-
|
271
|
-
|
273
|
+
px: "2",
|
274
|
+
h: "4.5",
|
272
275
|
display: "inline-flex",
|
273
276
|
alignItems: "center",
|
274
277
|
justifyContent: "space-between",
|
@@ -287,9 +290,10 @@ const BreadCrumb = props => {
|
|
287
290
|
parents,
|
288
291
|
className,
|
289
292
|
disableHome,
|
290
|
-
spacing = 2
|
293
|
+
spacing = 2,
|
294
|
+
backButton
|
291
295
|
} = props;
|
292
|
-
const [
|
296
|
+
const [neutral600, primary500] = react.useToken('colors', ['neutral.600', 'primary.500']);
|
293
297
|
return /*#__PURE__*/React.createElement(react.Box, {
|
294
298
|
"data-test-id": "CT_component_breadcrumb_breadcrumb",
|
295
299
|
className: className,
|
@@ -300,22 +304,29 @@ const BreadCrumb = props => {
|
|
300
304
|
}, /*#__PURE__*/React.createElement(react.Box, {
|
301
305
|
display: "flex",
|
302
306
|
alignItems: "center"
|
303
|
-
}, /*#__PURE__*/React.createElement(
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
307
|
+
}, backButton && /*#__PURE__*/React.createElement(Button, {
|
308
|
+
variant: "icon",
|
309
|
+
"data-test-id": "button",
|
310
|
+
size: "md",
|
311
|
+
mr: "2",
|
312
|
+
onClick: backButton
|
313
|
+
}, /*#__PURE__*/React.createElement(fi.FiChevronLeft, {
|
314
|
+
size: react.theme.sizes[5]
|
315
|
+
})), /*#__PURE__*/React.createElement(react.Text, {
|
316
|
+
pr: "2",
|
317
|
+
textStyle: "heading.6",
|
318
|
+
color: "neutral.700"
|
308
319
|
}, title), /*#__PURE__*/React.createElement(react.Box, {
|
309
|
-
h: "
|
320
|
+
h: "5.5",
|
310
321
|
borderLeft: "1px solid",
|
311
|
-
borderColor:
|
322
|
+
borderColor: neutral600
|
312
323
|
}), /*#__PURE__*/React.createElement(react.Breadcrumb, {
|
313
324
|
separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
|
314
|
-
color:
|
315
|
-
size:
|
325
|
+
color: neutral600,
|
326
|
+
size: react.theme.sizes['3.5']
|
316
327
|
}),
|
317
|
-
pl: 2
|
318
|
-
pr: 4,
|
328
|
+
pl: "2",
|
329
|
+
pr: "4",
|
319
330
|
spacing: spacing,
|
320
331
|
sx: {
|
321
332
|
ol: {
|
@@ -335,8 +346,8 @@ const BreadCrumb = props => {
|
|
335
346
|
}
|
336
347
|
}, /*#__PURE__*/React.createElement(fi.FiHome, {
|
337
348
|
className: "align-top",
|
338
|
-
size:
|
339
|
-
color:
|
349
|
+
size: react.theme.sizes['3.5'],
|
350
|
+
color: primary500
|
340
351
|
}))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
|
341
352
|
key: val.name
|
342
353
|
}, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
|
@@ -352,18 +363,16 @@ const BreadCrumb = props => {
|
|
352
363
|
textDecoration: 'none'
|
353
364
|
}
|
354
365
|
}, /*#__PURE__*/React.createElement(react.Text, {
|
355
|
-
color: val.disable ?
|
356
|
-
|
357
|
-
fontWeight: 400
|
366
|
+
color: val.disable ? neutral600 : primary500,
|
367
|
+
textStyle: "text.sm"
|
358
368
|
}, val.name)))), /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
|
359
369
|
_hover: {
|
360
370
|
textDecor: 'none',
|
361
371
|
cursor: 'default'
|
362
372
|
}
|
363
373
|
}, /*#__PURE__*/React.createElement(react.Text, {
|
364
|
-
color:
|
365
|
-
|
366
|
-
fontWeight: 400
|
374
|
+
color: "neutral.600",
|
375
|
+
textStyle: "text.sm"
|
367
376
|
}, title))))), children && /*#__PURE__*/React.createElement(react.Box, null, children));
|
368
377
|
};
|
369
378
|
BreadCrumb.defaultProps = {
|
@@ -371,7 +380,8 @@ BreadCrumb.defaultProps = {
|
|
371
380
|
parents: undefined,
|
372
381
|
className: undefined,
|
373
382
|
disableHome: undefined,
|
374
|
-
spacing: 2
|
383
|
+
spacing: 2,
|
384
|
+
backButton: undefined
|
375
385
|
};
|
376
386
|
|
377
387
|
const CardCustom = /*#__PURE__*/React.forwardRef(({
|
@@ -1943,17 +1953,38 @@ TextareaField.defaultProps = {
|
|
1943
1953
|
isLoading: undefined
|
1944
1954
|
};
|
1945
1955
|
|
1946
|
-
const
|
1947
|
-
|
1948
|
-
|
1949
|
-
|
1950
|
-
|
1951
|
-
|
1952
|
-
|
1953
|
-
|
1954
|
-
|
1956
|
+
const Logo = ({
|
1957
|
+
url,
|
1958
|
+
imageUrl,
|
1959
|
+
height
|
1960
|
+
}) => {
|
1961
|
+
if (url) return /*#__PURE__*/React__default.createElement(react.Box, {
|
1962
|
+
as: "a",
|
1963
|
+
href: url,
|
1964
|
+
cursor: "pointer",
|
1965
|
+
target: "_self"
|
1966
|
+
}, /*#__PURE__*/React__default.createElement(react.Image, {
|
1967
|
+
w: "100%",
|
1968
|
+
h: height !== null && height !== void 0 ? height : 9,
|
1969
|
+
maxH: height !== null && height !== void 0 ? height : 9,
|
1970
|
+
src: imageUrl,
|
1971
|
+
alt: imageUrl
|
1972
|
+
}));
|
1973
|
+
return /*#__PURE__*/React__default.createElement(react.Image, {
|
1974
|
+
w: "100%",
|
1975
|
+
h: height !== null && height !== void 0 ? height : 9,
|
1976
|
+
maxH: height !== null && height !== void 0 ? height : 9,
|
1977
|
+
src: imageUrl,
|
1978
|
+
alt: imageUrl
|
1979
|
+
});
|
1980
|
+
};
|
1981
|
+
Logo.defaultProps = {
|
1982
|
+
url: undefined,
|
1983
|
+
height: undefined
|
1984
|
+
};
|
1955
1985
|
|
1956
1986
|
const Profile = ({
|
1987
|
+
brandColor,
|
1957
1988
|
data,
|
1958
1989
|
onLogout
|
1959
1990
|
}) => {
|
@@ -1979,27 +2010,31 @@ const Profile = ({
|
|
1979
2010
|
onClick: onToggle
|
1980
2011
|
}, /*#__PURE__*/React.createElement(react.HStack, null, /*#__PURE__*/React.createElement(react.VStack, {
|
1981
2012
|
alignItems: "flex-end",
|
1982
|
-
spacing:
|
1983
|
-
ml: "2"
|
2013
|
+
spacing: 0,
|
2014
|
+
ml: "2",
|
2015
|
+
color: "primary.500"
|
1984
2016
|
}, /*#__PURE__*/React.createElement(react.Text, {
|
1985
|
-
|
2017
|
+
textStyle: "text.xs",
|
1986
2018
|
mb: 1,
|
1987
|
-
|
1988
|
-
|
1989
|
-
|
1990
|
-
}, data === null || data === void 0 ? void 0 : data.
|
1991
|
-
|
1992
|
-
|
1993
|
-
|
1994
|
-
|
1995
|
-
}, (data === null || data === void 0 ? void 0 : data.office)
|
1996
|
-
|
1997
|
-
|
1998
|
-
|
1999
|
-
|
2000
|
-
|
2001
|
-
|
2002
|
-
|
2019
|
+
color: "neutral.800"
|
2020
|
+
}, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Flex, null, (data === null || data === void 0 ? void 0 : data.userRole) && /*#__PURE__*/React.createElement(react.Text, {
|
2021
|
+
textStyle: "text.xs"
|
2022
|
+
}, (data === null || data === void 0 ? void 0 : data.userRole) || 'user'), /*#__PURE__*/React.createElement(react.Box, {
|
2023
|
+
h: "3",
|
2024
|
+
mx: "1",
|
2025
|
+
borderLeft: "1px solid",
|
2026
|
+
borderColor: "neutral.400"
|
2027
|
+
}), typeof (data === null || data === void 0 ? void 0 : data.office) === 'object' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Text, {
|
2028
|
+
textStyle: "text.xs"
|
2029
|
+
}, data.office[0]), data.office.length > 1 && /*#__PURE__*/React.createElement(Badge, {
|
2030
|
+
ml: "1",
|
2031
|
+
pill: true,
|
2032
|
+
variant: "neutral-light"
|
2033
|
+
}, data.office.length - 1, "+")) : /*#__PURE__*/React.createElement(react.Text, {
|
2034
|
+
textStyle: "text.xs"
|
2035
|
+
}, (data === null || data === void 0 ? void 0 : data.office) || 'office'))), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
|
2036
|
+
size: "sm",
|
2037
|
+
bg: brandColor,
|
2003
2038
|
color: "white",
|
2004
2039
|
name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
|
2005
2040
|
})))), /*#__PURE__*/React.createElement(react.PopoverContent, {
|
@@ -2021,12 +2056,13 @@ const Profile = ({
|
|
2021
2056
|
color: 'white'
|
2022
2057
|
},
|
2023
2058
|
onClick: onLogout,
|
2024
|
-
|
2059
|
+
textStyle: "text.xs"
|
2025
2060
|
}, /*#__PURE__*/React.createElement(fi.FiPower, null), /*#__PURE__*/React.createElement(react.Text, {
|
2026
2061
|
ml: 2
|
2027
2062
|
}, "Logout")))));
|
2028
2063
|
};
|
2029
2064
|
Profile.defaultProps = {
|
2065
|
+
brandColor: 'primary.500',
|
2030
2066
|
data: undefined,
|
2031
2067
|
onLogout: undefined
|
2032
2068
|
};
|
@@ -2062,22 +2098,22 @@ function environmentName(env) {
|
|
2062
2098
|
|
2063
2099
|
/* eslint-disable react-hooks/rules-of-hooks */
|
2064
2100
|
const Version = ({
|
2101
|
+
hideEnv,
|
2065
2102
|
version,
|
2066
2103
|
environment,
|
2067
2104
|
onOpenModalRelease
|
2068
2105
|
}) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(react.Badge, {
|
2069
2106
|
"data-test-id": "dzl3esjhCphobaaIXpiUE",
|
2070
|
-
|
2071
|
-
|
2072
|
-
fontSize: "text.xs",
|
2107
|
+
variant: "neutral-light",
|
2108
|
+
textStyle: "text.xs",
|
2073
2109
|
py: 1,
|
2074
2110
|
px: 2.5,
|
2075
|
-
fontWeight: "
|
2111
|
+
fontWeight: "semibold",
|
2076
2112
|
textTransform: "lowercase",
|
2077
2113
|
borderRadius: "md",
|
2078
2114
|
onClick: onOpenModalRelease,
|
2079
2115
|
cursor: onOpenModalRelease ? 'pointer' : 'auto'
|
2080
|
-
}, version), environmentName(environment) !== null && version && /*#__PURE__*/React.createElement(react.Box, {
|
2116
|
+
}, version), !hideEnv && environmentName(environment) !== null && version && /*#__PURE__*/React.createElement(react.Box, {
|
2081
2117
|
background: "primary.50",
|
2082
2118
|
color: "primary.500",
|
2083
2119
|
fontSize: "text.xs",
|
@@ -2087,45 +2123,78 @@ const Version = ({
|
|
2087
2123
|
borderRadius: "md"
|
2088
2124
|
}, environmentName(environment)));
|
2089
2125
|
Version.defaultProps = {
|
2126
|
+
hideEnv: false,
|
2090
2127
|
environment: undefined,
|
2091
2128
|
version: undefined,
|
2092
2129
|
onOpenModalRelease: undefined
|
2093
2130
|
};
|
2094
2131
|
|
2095
2132
|
const Header = ({
|
2133
|
+
brandColor,
|
2096
2134
|
data,
|
2097
2135
|
onLogout,
|
2098
2136
|
onOpenModalRelease,
|
2099
2137
|
hideSwitchMode,
|
2138
|
+
mainLogo = 'https://assets.voila.id/xms/logo-xms.jpg',
|
2139
|
+
centerLogo = 'https://assets.voila.id/xms/logo-voila-black.png?v=1',
|
2140
|
+
mainLogoSize,
|
2141
|
+
centerLogoSize = 4,
|
2142
|
+
hideEnv = false,
|
2143
|
+
urlLogo,
|
2144
|
+
children,
|
2100
2145
|
...props
|
2101
2146
|
}) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
|
2102
|
-
minH:
|
2103
|
-
bg:
|
2104
|
-
|
2105
|
-
px:
|
2106
|
-
py:
|
2147
|
+
minH: 15,
|
2148
|
+
bg: "white",
|
2149
|
+
shadow: "raised",
|
2150
|
+
px: 6,
|
2151
|
+
py: 3
|
2107
2152
|
}, props), /*#__PURE__*/React.createElement(react.Flex, {
|
2108
|
-
|
2153
|
+
w: "full",
|
2109
2154
|
alignItems: "center",
|
2110
|
-
justifyContent: "space-between"
|
2111
|
-
|
2112
|
-
|
2155
|
+
justifyContent: "space-between",
|
2156
|
+
pos: "relative"
|
2157
|
+
}, /*#__PURE__*/React.createElement(react.Flex, {
|
2113
2158
|
alignItems: "center"
|
2114
|
-
}, /*#__PURE__*/React.createElement(
|
2159
|
+
}, /*#__PURE__*/React.createElement(Logo, {
|
2160
|
+
url: urlLogo,
|
2161
|
+
imageUrl: mainLogo,
|
2162
|
+
height: mainLogoSize
|
2163
|
+
}), children && children), /*#__PURE__*/React.createElement(react.HStack, {
|
2164
|
+
w: "fit-content",
|
2165
|
+
spacing: 2,
|
2166
|
+
alignItems: "center",
|
2167
|
+
pos: "absolute",
|
2168
|
+
left: "50%",
|
2169
|
+
transform: "translate(-50%,0)"
|
2170
|
+
}, /*#__PURE__*/React.createElement(Logo, {
|
2171
|
+
url: urlLogo,
|
2172
|
+
imageUrl: centerLogo,
|
2173
|
+
height: centerLogoSize
|
2174
|
+
}), /*#__PURE__*/React.createElement(Version, {
|
2175
|
+
hideEnv: hideEnv,
|
2115
2176
|
version: data === null || data === void 0 ? void 0 : data.version,
|
2116
2177
|
environment: data === null || data === void 0 ? void 0 : data.environment,
|
2117
2178
|
onOpenModalRelease: onOpenModalRelease
|
2118
2179
|
})), /*#__PURE__*/React.createElement(react.Flex, {
|
2119
2180
|
alignItems: "center"
|
2120
2181
|
}, !hideSwitchMode && /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
|
2182
|
+
brandColor: brandColor,
|
2121
2183
|
data: data,
|
2122
2184
|
onLogout: onLogout
|
2123
2185
|
}))));
|
2124
2186
|
Header.defaultProps = {
|
2187
|
+
brandColor: undefined,
|
2125
2188
|
data: undefined,
|
2126
2189
|
onLogout: undefined,
|
2127
2190
|
onOpenModalRelease: undefined,
|
2128
|
-
hideSwitchMode:
|
2191
|
+
hideSwitchMode: true,
|
2192
|
+
mainLogo: undefined,
|
2193
|
+
mainLogoSize: undefined,
|
2194
|
+
centerLogo: undefined,
|
2195
|
+
centerLogoSize: undefined,
|
2196
|
+
hideEnv: false,
|
2197
|
+
urlLogo: undefined
|
2129
2198
|
};
|
2130
2199
|
|
2131
2200
|
const ModalBody = /*#__PURE__*/React__default.forwardRef(({
|
@@ -2166,8 +2235,8 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
|
|
2166
2235
|
return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
|
2167
2236
|
ref: ref,
|
2168
2237
|
background: react.useColorModeValue('neutral.200', 'mirage.900'),
|
2169
|
-
borderTopRadius:
|
2170
|
-
|
2238
|
+
borderTopRadius: "md",
|
2239
|
+
textStyle: "text-lg"
|
2171
2240
|
}, rest), children);
|
2172
2241
|
});
|
2173
2242
|
|
@@ -2326,8 +2395,8 @@ const PaginationButton = /*#__PURE__*/react.forwardRef(({
|
|
2326
2395
|
ref: ref,
|
2327
2396
|
className: className,
|
2328
2397
|
style: style,
|
2329
|
-
borderRadius:
|
2330
|
-
fontWeight:
|
2398
|
+
borderRadius: "full",
|
2399
|
+
fontWeight: "semibold",
|
2331
2400
|
m: 0,
|
2332
2401
|
px: 3,
|
2333
2402
|
py: 2,
|
@@ -2423,8 +2492,8 @@ const Pagination = ({
|
|
2423
2492
|
width: 2
|
2424
2493
|
})
|
2425
2494
|
})), /*#__PURE__*/React.createElement(react.Box, {
|
2426
|
-
|
2427
|
-
borderRadius:
|
2495
|
+
bg: "neutral.300",
|
2496
|
+
borderRadius: "full"
|
2428
2497
|
}, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
|
2429
2498
|
"data-test-id": "Pagination-Button",
|
2430
2499
|
color: previousButtonColor,
|
@@ -3099,19 +3168,34 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
|
|
3099
3168
|
const isSelected = !!tabProps['aria-selected'];
|
3100
3169
|
const styles = react.useMultiStyleConfig('Tabs', tabProps);
|
3101
3170
|
return /*#__PURE__*/React.createElement(react.Button, Object.assign({
|
3102
|
-
|
3171
|
+
"data-test-id": props['data-test-id'],
|
3172
|
+
p: 4,
|
3103
3173
|
fontSize: "text.md",
|
3104
3174
|
_selected: {
|
3105
|
-
borderColor:
|
3106
|
-
color:
|
3107
|
-
transform: 'translateY(-2px)'
|
3175
|
+
borderColor: 'primary.400',
|
3176
|
+
color: 'primary.500',
|
3177
|
+
transform: 'translateY(-2px)',
|
3178
|
+
_hover: {
|
3179
|
+
'& .chakra-badge': {
|
3180
|
+
bg: 'primary.500'
|
3181
|
+
},
|
3182
|
+
color: 'primary.500'
|
3183
|
+
}
|
3108
3184
|
},
|
3109
|
-
color:
|
3185
|
+
color: "black.medium",
|
3110
3186
|
_focus: {
|
3111
3187
|
bg: 'none'
|
3112
3188
|
},
|
3189
|
+
_hover: {
|
3190
|
+
'& .chakra-badge': {
|
3191
|
+
bg: 'primary.400'
|
3192
|
+
},
|
3193
|
+
color: 'primary.400'
|
3194
|
+
},
|
3113
3195
|
__css: styles.tab
|
3114
|
-
}, tabProps), /*#__PURE__*/React.createElement(react.Flex,
|
3196
|
+
}, tabProps), /*#__PURE__*/React.createElement(react.Flex, {
|
3197
|
+
alignItems: "center"
|
3198
|
+
}, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
|
3115
3199
|
isSelected
|
3116
3200
|
}), tabProps.children, (_props$rightAddon = props.rightAddon) === null || _props$rightAddon === void 0 ? void 0 : _props$rightAddon.call(props, {
|
3117
3201
|
isSelected
|
@@ -3226,6 +3310,7 @@ const {
|
|
3226
3310
|
defineMultiStyleConfig
|
3227
3311
|
} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.alertAnatomy.keys);
|
3228
3312
|
const $fg = /*#__PURE__*/styledSystem.cssVar('alert-fg');
|
3313
|
+
const $ac = /*#__PURE__*/styledSystem.cssVar('alert-ac');
|
3229
3314
|
const $bg = /*#__PURE__*/styledSystem.cssVar('alert-bg');
|
3230
3315
|
const baseStyle = /*#__PURE__*/definePartsStyle({
|
3231
3316
|
container: {
|
@@ -3235,8 +3320,8 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
|
|
3235
3320
|
borderRadius: 'md'
|
3236
3321
|
},
|
3237
3322
|
title: {
|
3238
|
-
fontWeight: '
|
3239
|
-
|
3323
|
+
fontWeight: 'regular',
|
3324
|
+
textStyle: 'text.sm',
|
3240
3325
|
marginEnd: '2'
|
3241
3326
|
},
|
3242
3327
|
description: {
|
@@ -3250,6 +3335,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
|
|
3250
3335
|
h: '4'
|
3251
3336
|
},
|
3252
3337
|
action: {
|
3338
|
+
color: $ac.reference,
|
3253
3339
|
'& +.chakra-alert__close': {
|
3254
3340
|
ml: '3'
|
3255
3341
|
}
|
@@ -3269,16 +3355,13 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
|
|
3269
3355
|
});
|
3270
3356
|
function getBg(props) {
|
3271
3357
|
const {
|
3272
|
-
theme,
|
3273
3358
|
colorScheme: c
|
3274
3359
|
} = props;
|
3275
|
-
const darkBg = themeTools.transparentize(`${c}.200`, 0.16)(theme);
|
3276
3360
|
return {
|
3277
|
-
light: `colors.${c}.50
|
3278
|
-
dark: darkBg
|
3361
|
+
light: c === 'neutral' ? `colors.${c}.300` : `colors.${c}.50`
|
3279
3362
|
};
|
3280
3363
|
}
|
3281
|
-
const
|
3364
|
+
const variantLight = /*#__PURE__*/definePartsStyle(props => {
|
3282
3365
|
const {
|
3283
3366
|
colorScheme: c
|
3284
3367
|
} = props;
|
@@ -3287,10 +3370,6 @@ const variantSubtle = /*#__PURE__*/definePartsStyle(props => {
|
|
3287
3370
|
container: {
|
3288
3371
|
[$fg.variable]: `colors.${c}.700`,
|
3289
3372
|
[$bg.variable]: bg.light,
|
3290
|
-
_dark: {
|
3291
|
-
[$fg.variable]: `colors.${c}.200`,
|
3292
|
-
[$bg.variable]: bg.dark
|
3293
|
-
},
|
3294
3373
|
color: $fg.reference
|
3295
3374
|
}
|
3296
3375
|
};
|
@@ -3302,24 +3381,19 @@ const variantSolid = /*#__PURE__*/definePartsStyle(props => {
|
|
3302
3381
|
return {
|
3303
3382
|
container: {
|
3304
3383
|
[$fg.variable]: `colors.white.high`,
|
3305
|
-
[$bg.variable]: `colors.${c}.500
|
3306
|
-
_dark: {
|
3307
|
-
[$fg.variable]: `colors.gray.900`,
|
3308
|
-
[$bg.variable]: `colors.${c}.200`
|
3309
|
-
},
|
3310
|
-
color: $fg.reference
|
3384
|
+
[$bg.variable]: c === 'neutral' ? `colors.${c}.700` : `colors.${c}.500`
|
3311
3385
|
}
|
3312
3386
|
};
|
3313
3387
|
});
|
3314
3388
|
const variants = {
|
3315
|
-
|
3389
|
+
light: variantLight,
|
3316
3390
|
solid: variantSolid
|
3317
3391
|
};
|
3318
3392
|
const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
|
3319
3393
|
baseStyle,
|
3320
3394
|
variants,
|
3321
3395
|
defaultProps: {
|
3322
|
-
variant: '
|
3396
|
+
variant: 'light',
|
3323
3397
|
colorScheme: 'info'
|
3324
3398
|
}
|
3325
3399
|
});
|
@@ -3327,9 +3401,9 @@ const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
|
|
3327
3401
|
const Badge$1 = {
|
3328
3402
|
baseStyle: {
|
3329
3403
|
display: 'inline-block',
|
3330
|
-
fontSize:
|
3331
|
-
fontWeight:
|
3332
|
-
lineHeight: '
|
3404
|
+
fontSize: 'text.xs',
|
3405
|
+
fontWeight: 'semibold',
|
3406
|
+
lineHeight: '14',
|
3333
3407
|
textTransform: 'none',
|
3334
3408
|
px: 2,
|
3335
3409
|
py: '0.5'
|
@@ -3681,19 +3755,18 @@ const {
|
|
3681
3755
|
} = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
|
3682
3756
|
const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
|
3683
3757
|
control: {
|
3684
|
-
borderRadius: '
|
3685
|
-
|
3686
|
-
|
3758
|
+
borderRadius: 'sm',
|
3759
|
+
w: 4,
|
3760
|
+
h: 4,
|
3687
3761
|
border: '1px solid'
|
3688
3762
|
},
|
3689
3763
|
icon: {
|
3690
3764
|
color: 'neutral.50'
|
3691
3765
|
},
|
3692
3766
|
label: {
|
3693
|
-
|
3694
|
-
lineHeight: '18px',
|
3767
|
+
textStyle: 'text.sm',
|
3695
3768
|
color: 'black.high',
|
3696
|
-
ml:
|
3769
|
+
ml: 2
|
3697
3770
|
},
|
3698
3771
|
_disabled: {
|
3699
3772
|
background: 'neutral.200',
|
@@ -3719,10 +3792,10 @@ const errors = /*#__PURE__*/definePartsStyle$1({
|
|
3719
3792
|
}
|
3720
3793
|
},
|
3721
3794
|
label: {
|
3722
|
-
|
3795
|
+
textStyle: 'text.xs'
|
3723
3796
|
},
|
3724
3797
|
icon: {
|
3725
|
-
fontSize: '
|
3798
|
+
fontSize: '8px'
|
3726
3799
|
}
|
3727
3800
|
});
|
3728
3801
|
const unstyled = /*#__PURE__*/definePartsStyle$1({
|
@@ -3756,13 +3829,13 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
|
|
3756
3829
|
}
|
3757
3830
|
},
|
3758
3831
|
label: {
|
3759
|
-
|
3832
|
+
textStyle: 'text.xs',
|
3760
3833
|
_disabled: {
|
3761
3834
|
opacity: 1
|
3762
3835
|
}
|
3763
3836
|
},
|
3764
3837
|
icon: {
|
3765
|
-
fontSize: '
|
3838
|
+
fontSize: '8px'
|
3766
3839
|
}
|
3767
3840
|
});
|
3768
3841
|
const variants$1 = {
|
@@ -3785,14 +3858,17 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
|
|
3785
3858
|
} = props;
|
3786
3859
|
const defaultProps = {
|
3787
3860
|
color: 'primary.500',
|
3788
|
-
|
3789
|
-
borderRadius: '
|
3861
|
+
textStyle: 'text.sm',
|
3862
|
+
borderRadius: '2xl',
|
3790
3863
|
borderWidth: '1px',
|
3791
3864
|
borderColor: 'primary.500',
|
3792
3865
|
bg: 'white.high',
|
3793
|
-
|
3794
|
-
|
3795
|
-
cursor: 'default'
|
3866
|
+
px: 3,
|
3867
|
+
py: 1,
|
3868
|
+
cursor: 'default',
|
3869
|
+
_hover: {
|
3870
|
+
bg: 'primary.50'
|
3871
|
+
}
|
3796
3872
|
};
|
3797
3873
|
let chipsProps = {
|
3798
3874
|
...defaultProps
|
@@ -3800,7 +3876,10 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
|
|
3800
3876
|
if (isActive) {
|
3801
3877
|
const isActiveProps = {
|
3802
3878
|
bg: 'primary.500',
|
3803
|
-
color: 'white.high'
|
3879
|
+
color: 'white.high',
|
3880
|
+
_hover: {
|
3881
|
+
bg: 'primary.500'
|
3882
|
+
}
|
3804
3883
|
};
|
3805
3884
|
chipsProps = {
|
3806
3885
|
...chipsProps,
|
@@ -3825,13 +3904,11 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
|
|
3825
3904
|
},
|
3826
3905
|
sizes: {
|
3827
3906
|
sm: {
|
3828
|
-
|
3829
|
-
lineHeight: 4
|
3907
|
+
textStyle: 'text.sm'
|
3830
3908
|
},
|
3831
3909
|
md: {
|
3832
|
-
|
3833
|
-
|
3834
|
-
lineHeight: 5
|
3910
|
+
textStyle: 'text.md',
|
3911
|
+
py: 2
|
3835
3912
|
}
|
3836
3913
|
},
|
3837
3914
|
defaultProps: {
|