@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.
@@ -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-alert__close', className),
181
+ className: utils.cx('chakra-alert__action', className),
178
182
  variant: "link",
179
- color: "inherit",
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 ? 10 : 4,
271
+ borderRadius: pill ? 'xl' : 'sm',
269
272
  variant: "primary-solid",
270
- padding: "0 8px",
271
- height: "18px",
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 [neutral6, dark5] = react.useToken('colors', ['neutral.600', 'dark.500']);
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(react.Text, {
304
- pr: 2,
305
- fontWeight: 600,
306
- textStyle: "heading.4",
307
- color: react.useColorModeValue('neutral.700', 'white')
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: "22px",
320
+ h: "5.5",
310
321
  borderLeft: "1px solid",
311
- borderColor: react.useColorModeValue(neutral6, 'white')
322
+ borderColor: neutral600
312
323
  }), /*#__PURE__*/React.createElement(react.Breadcrumb, {
313
324
  separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
314
- color: react.useColorModeValue(neutral6, dark5),
315
- size: 14
325
+ color: neutral600,
326
+ size: react.theme.sizes['3.5']
316
327
  }),
317
- pl: 2.5,
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: 16,
339
- color: react.useColorModeValue('#12784A', '#ffffff')
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 ? 'dark.600' : react.useColorModeValue('primary.500', 'white'),
356
- fontSize: "text.sm",
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: react.useColorModeValue(neutral6, 'white'),
365
- fontSize: "text.sm",
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 XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
1947
- height: 8,
1948
- src: react.useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
1949
- });
1950
- const VoilaLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
1951
- src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
1952
- filter: react.useColorModeValue('none', 'invert(1)'),
1953
- maxW: 24
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: -0.5,
1983
- ml: "2"
2013
+ spacing: 0,
2014
+ ml: "2",
2015
+ color: "primary.500"
1984
2016
  }, /*#__PURE__*/React.createElement(react.Text, {
1985
- fontSize: "text.xs",
2017
+ textStyle: "text.xs",
1986
2018
  mb: 1,
1987
- fontWeight: 400,
1988
- lineHeight: "14px",
1989
- color: react.useColorModeValue('neutral.800', 'white')
1990
- }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Text, {
1991
- fontSize: "text.xs",
1992
- fontWeight: 400,
1993
- lineHeight: "14px",
1994
- color: react.useColorModeValue('primary.500', 'success.400')
1995
- }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React.createElement(react.Text, {
1996
- color: "neutral.700",
1997
- display: "inline-block",
1998
- mr: 0.5,
1999
- as: "span"
2000
- }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
2001
- size: 'sm',
2002
- bg: "primary.500",
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
- fontSize: "text.xs"
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
- bg: react.useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
2071
- color: react.useColorModeValue('white', 'secondary.400'),
2072
- fontSize: "text.xs",
2107
+ variant: "neutral-light",
2108
+ textStyle: "text.xs",
2073
2109
  py: 1,
2074
2110
  px: 2.5,
2075
- fontWeight: "bold",
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: 14,
2103
- bg: react.useColorModeValue('white', 'ebony-clay.800'),
2104
- boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
2105
- px: 4,
2106
- py: 1
2147
+ minH: 15,
2148
+ bg: "white",
2149
+ shadow: "raised",
2150
+ px: 6,
2151
+ py: 3
2107
2152
  }, props), /*#__PURE__*/React.createElement(react.Flex, {
2108
- h: 14,
2153
+ w: "full",
2109
2154
  alignItems: "center",
2110
- justifyContent: "space-between"
2111
- }, /*#__PURE__*/React.createElement(XMSLogo, null), /*#__PURE__*/React.createElement(react.HStack, {
2112
- spacing: 2,
2155
+ justifyContent: "space-between",
2156
+ pos: "relative"
2157
+ }, /*#__PURE__*/React.createElement(react.Flex, {
2113
2158
  alignItems: "center"
2114
- }, /*#__PURE__*/React.createElement(VoilaLogo, null), /*#__PURE__*/React.createElement(Version, {
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: false
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: 'md',
2170
- fontSize: 'lg'
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: 50,
2330
- fontWeight: 700,
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
- backgroundColor: react.useColorModeValue('neutral.300', 'mirage.900'),
2427
- borderRadius: 50
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
- p: 3,
3171
+ "data-test-id": props['data-test-id'],
3172
+ p: 4,
3103
3173
  fontSize: "text.md",
3104
3174
  _selected: {
3105
- borderColor: react.useColorModeValue('primary.400', 'primary.300'),
3106
- color: react.useColorModeValue('primary.500', 'primary.300'),
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: react.useColorModeValue('black.high', 'primary.300'),
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, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
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: '400',
3239
- lineHeight: '18px',
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 variantSubtle = /*#__PURE__*/definePartsStyle(props => {
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
- subtle: variantSubtle,
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: 'subtle',
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: 10,
3331
- fontWeight: 600,
3332
- lineHeight: '1.25',
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: '4px',
3685
- width: '16px',
3686
- height: '16px',
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
- fontWeight: '400',
3694
- lineHeight: '18px',
3767
+ textStyle: 'text.sm',
3695
3768
  color: 'black.high',
3696
- ml: '8px'
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
- fontSize: '12px'
3795
+ textStyle: 'text.xs'
3723
3796
  },
3724
3797
  icon: {
3725
- fontSize: '7px'
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
- fontSize: '12px',
3832
+ textStyle: 'text.xs',
3760
3833
  _disabled: {
3761
3834
  opacity: 1
3762
3835
  }
3763
3836
  },
3764
3837
  icon: {
3765
- fontSize: '7px'
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
- fontSize: 'text.small',
3789
- borderRadius: '24px',
3861
+ textStyle: 'text.sm',
3862
+ borderRadius: '2xl',
3790
3863
  borderWidth: '1px',
3791
3864
  borderColor: 'primary.500',
3792
3865
  bg: 'white.high',
3793
- paddingX: 3,
3794
- paddingY: 1,
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
- fontSize: '12px',
3829
- lineHeight: 4
3907
+ textStyle: 'text.sm'
3830
3908
  },
3831
3909
  md: {
3832
- fontSize: '14px',
3833
- paddingY: 2,
3834
- lineHeight: 5
3910
+ textStyle: 'text.md',
3911
+ py: 2
3835
3912
  }
3836
3913
  },
3837
3914
  defaultProps: {