@rango-dev/ui 0.29.1-next.0 → 0.29.1-next.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.
Files changed (12) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +3 -3
  3. package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map +1 -1
  4. package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/Select/select.styles.d.ts.map +1 -1
  6. package/dist/widget/ui/src/theme.d.ts +6 -6
  7. package/package.json +2 -5
  8. package/readme.md +1 -0
  9. package/src/components/Alert/Alert.styles.ts +3 -1
  10. package/src/components/QuoteCost/QuoteCost.styles.ts +2 -0
  11. package/src/components/Select/Select.tsx +24 -24
  12. package/src/components/Select/select.styles.ts +30 -54
package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqDxB,CAAC"}
1
+ {"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqDxB,CAAC"}
package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuoteCost.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMrB,CAAC;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwBrB,CAAC"}
1
+ {"version":3,"file":"QuoteCost.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMrB,CAAC;AAQH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA0BrB,CAAC"}
package/dist/widget/ui/src/components/Select/select.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/select.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAIjD,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAExD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuDxB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcxB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoBrB,CAAC"}
1
+ {"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Select/select.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAIjD,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAExD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCxB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOxB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiBrB,CAAC"}
package/dist/widget/ui/src/theme.d.ts CHANGED
@@ -338,11 +338,11 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
338
338
  [x: number]: CSS_1;
339
339
  };
340
340
  } | undefined;
341
- compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
341
+ compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
342
342
  css: CSS_1;
343
343
  })[] | undefined;
344
- defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
345
- } & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
344
+ defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
345
+ } & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
346
346
  xs: string;
347
347
  sm: string;
348
348
  md: string;
@@ -668,11 +668,11 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
668
668
  [x: number]: CSS_1;
669
669
  };
670
670
  } | undefined;
671
- compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
671
+ compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
672
672
  css: CSS_1;
673
673
  })[] | undefined;
674
- defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
675
- } & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
674
+ defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
675
+ } & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
676
676
  xs: string;
677
677
  sm: string;
678
678
  md: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.29.1-next.0",
3
+ "version": "0.29.1-next.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
@@ -50,10 +50,7 @@
50
50
  "react": "^18.2.0",
51
51
  "react-dom": "^18.2.0",
52
52
  "react-is": "^18.2.0",
53
- "storybook": "^7.1.1",
54
- "tsdx": "^0.14.1",
55
- "tslib": "^2.4.1",
56
- "typescript": "^4.8.4"
53
+ "storybook": "^7.1.1"
57
54
  },
58
55
  "dependencies": {
59
56
  "@radix-ui/react-checkbox": "^1.0.1",
package/readme.md CHANGED
@@ -5,3 +5,4 @@ Rango UI design system components
5
5
  ### Icons
6
6
 
7
7
  Add your svg icon to `svgs/resources/` then run `yarn build:icons`.
8
+
package/src/components/Alert/Alert.styles.ts CHANGED
@@ -4,7 +4,9 @@ export const Container = styled('div', {
4
4
  display: 'flex',
5
5
  flexDirection: 'column',
6
6
  borderRadius: '$xs',
7
-
7
+ '.title_typography': {
8
+ width: '100%',
9
+ },
8
10
  '.title_typography:first-letter': {
9
11
  textTransform: 'uppercase',
10
12
  },
package/src/components/QuoteCost/QuoteCost.styles.ts CHANGED
@@ -31,6 +31,8 @@ const blinker = keyframes({
31
31
  export const itemStyles = css({
32
32
  display: 'flex',
33
33
  alignItems: 'center',
34
+ cursor: 'default',
35
+
34
36
  '&.feeSection': {
35
37
  cursor: 'pointer',
36
38
  '&:hover': {
package/src/components/Select/Select.tsx CHANGED
@@ -3,7 +3,7 @@ import type { PropTypes } from './Select.types';
3
3
  import * as Select from '@radix-ui/react-select';
4
4
  import React, { useEffect, useRef, useState } from 'react';
5
5
 
6
- import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
6
+ import { ChevronDownIcon, ChevronUpIcon, DoneIcon } from '../../icons';
7
7
  import { Typography } from '../Typography';
8
8
 
9
9
  import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
@@ -31,47 +31,47 @@ export function SelectComponent(props: PropTypes) {
31
31
 
32
32
  return (
33
33
  <div ref={selectRef}>
34
- <Select.Root value={value.value} open={open}>
34
+ <Select.Root value={value?.value} open={open}>
35
35
  <SelectTrigger
36
36
  onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
37
37
  onClick={handleToggle}
38
38
  open={open}
39
- aria-label={value.label}>
39
+ aria-label={value?.label}>
40
40
  <Select.Value>
41
41
  <Typography variant="body" size="small">
42
- {value.label}
42
+ {value?.label}
43
43
  </Typography>
44
44
  </Select.Value>
45
45
 
46
46
  <Select.Icon className="SelectIcon">
47
- <ChevronDownIcon size={12} />
47
+ <ChevronDownIcon size={12} color="black" />
48
48
  </Select.Icon>
49
49
  </SelectTrigger>
50
50
  <Select.Portal container={container}>
51
- <SelectContent>
51
+ <SelectContent position="popper" sideOffset={5}>
52
52
  <Select.ScrollUpButton className="SelectScrollButton">
53
53
  <ChevronUpIcon />
54
54
  </Select.ScrollUpButton>
55
55
  <Select.Viewport className="SelectViewport">
56
56
  <Select.Group>
57
- {options.map(
58
- (option) =>
59
- option.value !== value?.value && (
60
- <SelectItem
61
- onClick={() => {
62
- handleItemClick && handleItemClick(option);
63
- handleToggle();
64
- }}
65
- key={option.value}
66
- value={option.value}>
67
- <Select.ItemText>
68
- <Typography variant="body" size="small">
69
- {option.label}
70
- </Typography>
71
- </Select.ItemText>
72
- </SelectItem>
73
- )
74
- )}
57
+ {options.map((option) => (
58
+ <SelectItem
59
+ onClick={() => {
60
+ handleItemClick && handleItemClick(option);
61
+ handleToggle();
62
+ }}
63
+ key={option.value}
64
+ value={option.value}>
65
+ <Select.ItemText>
66
+ <Typography variant="body" size="small">
67
+ {option.label}
68
+ </Typography>
69
+ </Select.ItemText>
70
+ {option.value === value?.value && (
71
+ <DoneIcon size={14} color="secondary" />
72
+ )}
73
+ </SelectItem>
74
+ ))}
75
75
  </Select.Group>
76
76
  </Select.Viewport>
77
77
  <Select.ScrollDownButton className="SelectScrollButton">
package/src/components/Select/select.styles.ts CHANGED
@@ -9,92 +9,68 @@ export const SelectTrigger = styled(Select.Trigger, {
9
9
  justifyContent: 'space-between',
10
10
  alignItems: 'center',
11
11
  cursor: 'pointer',
12
- backgroundColor: '$secondary',
13
12
  padding: '$5 $10',
14
13
  border: 0,
14
+ outline: 0,
15
15
  whiteSpace: 'nowrap',
16
-
16
+ borderRadius: '$sm',
17
+ backgroundColor: '$neutral300',
18
+ [`.${darkTheme} &`]: {
19
+ backgroundColor: '$neutral400',
20
+ },
21
+ width: '100%',
22
+ '&:hover': {
23
+ backgroundColor: '$info100',
24
+ [`.${darkTheme} &`]: {
25
+ backgroundColor: '$neutral',
26
+ },
27
+ },
17
28
  '& svg': {
18
29
  transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
19
30
  },
20
-
31
+ '& ._typography': {
32
+ whiteSpace: 'nowrap',
33
+ },
21
34
  variants: {
22
35
  open: {
23
36
  true: {
24
- borderTopLeftRadius: '$sm',
25
- borderTopRightRadius: '$sm',
26
- '& ._typography, & svg': {
27
- color: '$secondary',
28
- },
29
-
30
37
  '& svg': {
31
38
  transform: 'rotate(180deg)',
32
39
  },
33
- backgroundColor: '$neutral100',
34
- [`.${darkTheme} &`]: {
35
- backgroundColor: '$neutral300',
36
- },
37
40
  },
38
41
  false: {
39
- borderRadius: '$md',
40
- '& ._typography, & svg': {
41
- color: '$background',
42
- [`.${darkTheme} &`]: {
43
- color: '$foreground',
44
- },
45
- },
46
42
  '& svg': {
47
43
  transform: 'rotate(0)',
48
44
  },
49
45
  },
50
46
  },
51
47
  },
52
- width: '100%',
53
- '& ._typography': {
54
- whiteSpace: 'nowrap',
55
- overflow: 'hidden',
56
- textOverflow: 'ellipsis',
57
- width: '52px',
58
- '@xs': {
59
- width: 'auto',
60
- },
61
- },
62
48
  });
63
49
 
64
50
  export const SelectContent = styled(Select.Content, {
65
- padding: '$5 $10',
66
- width: '100%',
67
- position: 'absolute',
68
- top: '38px',
69
- maxHeight: '146px',
51
+ width: 'var(--radix-select-trigger-width)',
52
+ maxHeight: 'var(--radix-select-content-available-height)',
70
53
  overflowY: 'auto',
71
- borderBottomLeftRadius: '$sm',
72
- borderBottomRightRadius: '$sm',
54
+ borderRadius: '$sm',
73
55
  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
74
- backgroundColor: '$neutral100',
75
- [`.${darkTheme} &`]: {
76
- backgroundColor: '$neutral300',
77
- },
56
+ backgroundColor: '$background',
78
57
  });
79
58
 
80
59
  export const SelectItem = styled(Select.Item, {
81
- padding: '$10 0',
82
- borderTop: '1px solid',
83
- borderColor: '$neutral300',
84
- [`.${darkTheme} &`]: {
85
- borderColor: '$neutral400',
86
- },
60
+ padding: '$10',
87
61
  listStyleType: 'none',
62
+ display: 'flex',
63
+ justifyContent: 'space-between',
64
+ alignItems: 'center',
88
65
  cursor: 'pointer',
89
- '&:hover': {
90
- '& ._typography': {
91
- color: '$colors$secondary',
92
- },
93
- },
94
66
  '&:focus': {
95
67
  outline: 'none',
96
- '& ._typography': {
97
- color: '$colors$secondary',
68
+ },
69
+
70
+ '&:hover': {
71
+ backgroundColor: '$info100',
72
+ [`.${darkTheme} &`]: {
73
+ backgroundColor: '$neutral',
98
74
  },
99
75
  },
100
76
  });