@fewangsit/wangsvue-presets 1.0.85-alpha.4 → 1.0.85-alpha.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. package/fixedasset/badge/index.js +1 -1
  2. package/fixedasset/buttondownload/index.d.ts +2 -1
  3. package/fixedasset/buttondownload/index.js +6 -2
  4. package/fixedasset/buttonfilter/index.d.ts +13 -4
  5. package/fixedasset/buttonfilter/index.js +20 -7
  6. package/fixedasset/buttonradio/index.d.ts +23 -21
  7. package/fixedasset/buttonradio/index.js +21 -31
  8. package/fixedasset/buttonsearch/index.js +1 -1
  9. package/fixedasset/card/index.js +2 -2
  10. package/fixedasset/datatable/index.js +1 -0
  11. package/fixedasset/dropdown/index.d.ts +56 -39
  12. package/fixedasset/dropdown/index.js +24 -28
  13. package/fixedasset/filtercontainer/index.d.ts +7 -0
  14. package/fixedasset/filtercontainer/index.js +10 -0
  15. package/fixedasset/form/index.js +1 -1
  16. package/fixedasset/global.js +1 -1
  17. package/fixedasset/index.d.ts +4 -2
  18. package/fixedasset/index.js +94 -92
  19. package/fixedasset/index.system.js +2 -2
  20. package/fixedasset/inputcurrency/index.js +1 -1
  21. package/fixedasset/inputnumber/index.d.ts +25 -6
  22. package/fixedasset/inputnumber/index.js +36 -4
  23. package/fixedasset/inputphonenumber/index.d.ts +22 -12
  24. package/fixedasset/inputphonenumber/index.js +20 -7
  25. package/fixedasset/multiselect/index.d.ts +80 -44
  26. package/fixedasset/multiselect/index.js +50 -70
  27. package/fixedasset/style.css +153 -45
  28. package/fixedasset/textarea/index.js +3 -2
  29. package/fixedasset/toggleswitch/index.d.ts +100 -0
  30. package/{wangsvue/inputswitch → fixedasset/toggleswitch}/index.js +44 -17
  31. package/package.json +1 -1
  32. package/wangsvue/buttondownload/index.d.ts +1 -0
  33. package/wangsvue/buttondownload/index.js +1 -0
  34. package/wangsvue/buttonfilter/index.d.ts +3 -2
  35. package/wangsvue/buttonfilter/index.js +5 -4
  36. package/wangsvue/buttonradio/index.d.ts +24 -28
  37. package/wangsvue/buttonradio/index.js +20 -33
  38. package/wangsvue/datatable/index.js +1 -0
  39. package/wangsvue/dropdown/index.d.ts +33 -0
  40. package/wangsvue/dropdown/index.js +15 -6
  41. package/wangsvue/filtercontainer/index.d.ts +7 -0
  42. package/wangsvue/filtercontainer/index.js +10 -0
  43. package/wangsvue/index.d.ts +4 -2
  44. package/wangsvue/index.js +94 -92
  45. package/wangsvue/index.system.js +2 -2
  46. package/wangsvue/inputnumber/index.d.ts +25 -6
  47. package/wangsvue/inputnumber/index.js +36 -4
  48. package/wangsvue/inputphonenumber/index.d.ts +22 -12
  49. package/wangsvue/inputphonenumber/index.js +17 -5
  50. package/wangsvue/multiselect/index.d.ts +52 -4
  51. package/wangsvue/multiselect/index.js +28 -35
  52. package/wangsvue/style.css +158 -38
  53. package/wangsvue/toggleswitch/index.d.ts +105 -0
  54. package/{fixedasset/inputswitch → wangsvue/toggleswitch}/index.js +45 -17
  55. package/fixedasset/inputswitch/index.d.ts +0 -67
  56. package/wangsvue/inputswitch/index.d.ts +0 -67
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
12
12
  var inputphonenumber_1 = require("../inputphonenumber");
13
13
  exports.default = {
14
14
  currency: function (ctx) { return ({
15
- 'class': __spreadArray(__spreadArray([], (0, inputphonenumber_1.commonClasses)(ctx), true), ['rounded-l rounded-r-none h-[30px]'], false),
15
+ 'class': __spreadArray(__spreadArray([], (0, inputphonenumber_1.commonClasses)(ctx), true), ['rounded-l rounded-r-none'], false),
16
16
  'data-wv-section': 'currency',
17
17
  }); },
18
18
  value: function (ctx) { return ({
@@ -6,17 +6,22 @@ declare namespace _default {
6
6
  class: string[];
7
7
  };
8
8
  namespace input {
9
- export function root_1({ parent }: {
9
+ export function root_1({ parent, context }: {
10
10
  parent: any;
11
+ context: any;
11
12
  }): {
12
13
  class: string[];
13
14
  };
14
15
  export { root_1 as root };
15
16
  }
16
- namespace buttongroup {
17
+ namespace inputresizer {
17
18
  let _class: string[];
18
19
  export { _class as class };
19
20
  }
21
+ namespace buttongroup {
22
+ let _class_1: string[];
23
+ export { _class_1 as class };
24
+ }
20
25
  namespace incrementbutton {
21
26
  export function root_2({ parent }: {
22
27
  parent: any;
@@ -25,8 +30,8 @@ declare namespace _default {
25
30
  };
26
31
  export { root_2 as root };
27
32
  export namespace label {
28
- let _class_1: string;
29
- export { _class_1 as class };
33
+ let _class_2: string;
34
+ export { _class_2 as class };
30
35
  }
31
36
  }
32
37
  namespace decrementbutton {
@@ -37,10 +42,24 @@ declare namespace _default {
37
42
  };
38
43
  export { root_3 as root };
39
44
  export namespace label_1 {
40
- let _class_2: string;
41
- export { _class_2 as class };
45
+ let _class_3: string;
46
+ export { _class_3 as class };
42
47
  }
43
48
  export { label_1 as label };
44
49
  }
50
+ function incrementicon({ props }: {
51
+ props: any;
52
+ }): {
53
+ class: (string | {
54
+ '!text-general-200': any;
55
+ })[];
56
+ };
57
+ function decrementicon({ props }: {
58
+ props: any;
59
+ }): {
60
+ class: (string | {
61
+ '!text-general-200': any;
62
+ })[];
63
+ };
45
64
  }
46
65
  export default _default;
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ var inputclass = 'text-xs font-medium tracking-[0.02em] leading-[18px]';
4
+ var inputheight = 'h-[26px]';
3
5
  exports.default = {
4
6
  root: function (_a) {
5
7
  var props = _a.props, parent = _a.parent;
@@ -8,7 +10,7 @@ exports.default = {
8
10
  // Layout
9
11
  'flex items-center self-stretch shrink-0 grow',
10
12
  //Size
11
- 'h-full',
13
+ inputheight,
12
14
  // Spacing
13
15
  'py-1 px-3',
14
16
  // Border
@@ -19,17 +21,25 @@ exports.default = {
19
21
  },
20
22
  input: {
21
23
  root: function (_a) {
22
- var parent = _a.parent;
24
+ var parent = _a.parent, context = _a.context;
23
25
  return ({
24
26
  class: [
25
27
  'border-0 h-full w-full outline-none',
26
28
  'bg-inherit',
27
- 'text-xs font-normal',
28
- 'placeholder:text-general-200',
29
+ inputclass,
30
+ 'placeholder:text-general-200 placeholder:font-light',
31
+ context.disabled ? 'text-general-200' : 'text-general-800',
29
32
  ],
30
33
  });
31
34
  },
32
35
  },
36
+ inputresizer: {
37
+ class: [
38
+ inputclass,
39
+ inputheight,
40
+ 'user-select-none py-1 px-3 block min-w-4 text-transparent',
41
+ ],
42
+ },
33
43
  buttongroup: {
34
44
  class: ['flex'],
35
45
  },
@@ -55,4 +65,26 @@ exports.default = {
55
65
  class: 'h-0 w-0',
56
66
  },
57
67
  },
68
+ incrementicon: function (_a) {
69
+ var props = _a.props;
70
+ return ({
71
+ class: [
72
+ '!text-base text-general-500',
73
+ {
74
+ '!text-general-200': props.disabled,
75
+ },
76
+ ],
77
+ });
78
+ },
79
+ decrementicon: function (_a) {
80
+ var props = _a.props;
81
+ return ({
82
+ class: [
83
+ '!text-base text-general-500',
84
+ {
85
+ '!text-general-200': props.disabled,
86
+ },
87
+ ],
88
+ });
89
+ },
58
90
  };
@@ -11,18 +11,28 @@ export function commonClasses({ isFirefoxBased, invalidInput }: {
11
11
  'ring-[0.5px]'?: undefined;
12
12
  })[];
13
13
  declare namespace _default {
14
- function dialcode(ctx: any): {
15
- class: (string | {
16
- 'ring-[1px]': any;
17
- 'ring-[0.5px]': boolean;
18
- '!ring-danger-500'?: undefined;
19
- } | {
20
- '!ring-danger-500': any;
21
- 'ring-[1px]'?: undefined;
22
- 'ring-[0.5px]'?: undefined;
23
- })[];
24
- };
25
- function inputnumber(ctx: any): {
14
+ namespace dialcode {
15
+ function root(ctx: any): {
16
+ class: (string | {
17
+ 'ring-[1px]': any;
18
+ 'ring-[0.5px]': boolean;
19
+ '!ring-danger-500'?: undefined;
20
+ } | {
21
+ '!ring-danger-500': any;
22
+ 'ring-[1px]'?: undefined;
23
+ 'ring-[0.5px]'?: undefined;
24
+ })[];
25
+ };
26
+ function dropdownicon({ state }: {
27
+ state: any;
28
+ }): {
29
+ class: (string | {
30
+ 'rotate-180': any;
31
+ })[];
32
+ icon: string;
33
+ };
34
+ }
35
+ function input(ctx: any): {
26
36
  class: (string | {
27
37
  'ring-[1px]': any;
28
38
  'ring-[0.5px]': boolean;
@@ -10,25 +10,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.commonClasses = void 0;
13
+ var index_js_1 = require("../multiselect/index.js");
13
14
  var commonClasses = function (_a) {
14
15
  var isFirefoxBased = _a.isFirefoxBased, invalidInput = _a.invalidInput;
15
16
  return [
16
17
  { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
17
18
  { '!ring-danger-500': invalidInput },
18
19
  'ring-inset',
19
- 'ring-general-400',
20
+ 'ring-general-200',
20
21
  '[&:has(:focus)]:bg-none',
21
- '[&:has(:focus)]:ring-primary-400',
22
+ '[&:has(:focus)]:ring-primary-500',
23
+ '[&:has(:focus)]:ring-1',
22
24
  'bg-white',
23
25
  'z-[0] [&:has(:focus)]:z-[12]',
24
26
  ];
25
27
  };
26
28
  exports.commonClasses = commonClasses;
27
29
  exports.default = {
28
- dialcode: function (ctx) { return ({
29
- class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-l rounded-r-none'], false),
30
- }); },
31
- inputnumber: function (ctx) { return ({
32
- class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-r rounded-l-none -ml-[1px]'], false),
30
+ dialcode: {
31
+ root: function (ctx) { return ({
32
+ class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-l rounded-r-none'], false),
33
+ }); },
34
+ dropdownicon: function (_a) {
35
+ var state = _a.state;
36
+ return index_js_1.default.dropdownicon({ state: state });
37
+ },
38
+ },
39
+ input: function (ctx) { return ({
40
+ class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), [
41
+ 'rounded-r rounded-l-none -ml-[1px]',
42
+ 'focus:bg-none',
43
+ 'focus:ring-primary-500',
44
+ 'focus:ring-1',
45
+ ], false),
33
46
  }); },
34
47
  };
@@ -16,23 +16,57 @@ declare namespace _default {
16
16
  props: any;
17
17
  }): {
18
18
  class: (string | {
19
- '!leading-5': boolean;
20
- 'text-general-200'?: undefined;
21
- 'text-grayscale-900'?: undefined;
22
- } | {
23
19
  'text-general-200': boolean;
24
20
  'text-grayscale-900': any;
25
- '!leading-5'?: undefined;
26
21
  })[];
27
22
  };
28
- export namespace token {
29
- let _class_1: string[];
23
+ export let token: {
24
+ class: (string | {
25
+ 'text-general-400 bg-general-100': any;
26
+ 'text-success-500 bg-success-100': boolean;
27
+ 'text-primary-500 bg-primary-50': boolean;
28
+ 'text-grayscale-800 bg-grayscale-200': boolean;
29
+ 'text-warning-600 bg-warning-100': boolean;
30
+ 'text-danger-600 bg-danger-100': boolean;
31
+ })[];
32
+ 'data-wv-name': string;
33
+ 'data-wv-section': string;
34
+ };
35
+ export let tokenLabel: {
36
+ class: (string | {
37
+ 'caret-primary-700': any;
38
+ 'cursor-default': boolean;
39
+ })[];
40
+ };
41
+ export let removeTokenIcon: {
42
+ class: (string | {
43
+ 'text-primary-500': boolean;
44
+ 'text-success-500': boolean;
45
+ 'text-danger-600': boolean;
46
+ 'text-warning-600': boolean;
47
+ 'text-grayscale-800 hover:bg-grayscale-300': boolean;
48
+ 'text-general-400': any;
49
+ })[];
50
+ 'icon-class': string;
51
+ 'data-wv-section': string;
52
+ };
53
+ export namespace loadingplaceholder {
54
+ let _class_1: string;
30
55
  export { _class_1 as class };
31
56
  }
32
- export namespace removeTokenIcon {
33
- let _class_2: string[];
57
+ export namespace loadingicon {
58
+ let _class_2: string;
34
59
  export { _class_2 as class };
60
+ export let icon: string;
35
61
  }
62
+ export function dropdownicon({ state }: {
63
+ state: any;
64
+ }): {
65
+ class: (string | {
66
+ 'rotate-180': any;
67
+ })[];
68
+ icon: string;
69
+ };
36
70
  export namespace trigger {
37
71
  let _class_3: string[];
38
72
  export { _class_3 as class };
@@ -155,60 +189,60 @@ declare namespace _default {
155
189
  context: any;
156
190
  }): {
157
191
  class: (string | {
158
- '!font-medium': any;
159
- 'text-surface-600'?: undefined;
160
- 'bg-primary-50 text-surface-700'?: undefined;
161
- 'bg-primary-50 text-primary-500'?: undefined;
162
- 'text-surface-700'?: undefined;
192
+ 'text-general-800': boolean;
193
+ 'text-general-400'?: undefined;
194
+ 'bg-primary-50'?: undefined;
195
+ 'text-primary-500'?: undefined;
196
+ 'text-general-900'?: undefined;
163
197
  'pointer-events-none cursor-default'?: undefined;
164
198
  'cursor-pointer'?: undefined;
165
199
  } | {
166
- 'text-surface-600': any;
167
- '!font-medium'?: undefined;
168
- 'bg-primary-50 text-surface-700'?: undefined;
169
- 'bg-primary-50 text-primary-500'?: undefined;
170
- 'text-surface-700'?: undefined;
200
+ 'text-general-400': any;
201
+ 'text-general-800'?: undefined;
202
+ 'bg-primary-50'?: undefined;
203
+ 'text-primary-500'?: undefined;
204
+ 'text-general-900'?: undefined;
171
205
  'pointer-events-none cursor-default'?: undefined;
172
206
  'cursor-pointer'?: undefined;
173
207
  } | {
174
- 'bg-primary-50 text-surface-700': boolean;
175
- '!font-medium'?: undefined;
176
- 'text-surface-600'?: undefined;
177
- 'bg-primary-50 text-primary-500'?: undefined;
178
- 'text-surface-700'?: undefined;
208
+ 'bg-primary-50': any;
209
+ 'text-general-800'?: undefined;
210
+ 'text-general-400'?: undefined;
211
+ 'text-primary-500'?: undefined;
212
+ 'text-general-900'?: undefined;
179
213
  'pointer-events-none cursor-default'?: undefined;
180
214
  'cursor-pointer'?: undefined;
181
215
  } | {
182
- 'bg-primary-50 text-primary-500': any;
183
- '!font-medium'?: undefined;
184
- 'text-surface-600'?: undefined;
185
- 'bg-primary-50 text-surface-700'?: undefined;
186
- 'text-surface-700'?: undefined;
216
+ 'text-primary-500': any;
217
+ 'text-general-800'?: undefined;
218
+ 'text-general-400'?: undefined;
219
+ 'bg-primary-50'?: undefined;
220
+ 'text-general-900'?: undefined;
187
221
  'pointer-events-none cursor-default'?: undefined;
188
222
  'cursor-pointer'?: undefined;
189
223
  } | {
190
- 'text-surface-700': any;
191
- '!font-medium'?: undefined;
192
- 'text-surface-600'?: undefined;
193
- 'bg-primary-50 text-surface-700'?: undefined;
194
- 'bg-primary-50 text-primary-500'?: undefined;
224
+ 'text-general-900': any;
225
+ 'text-general-800'?: undefined;
226
+ 'text-general-400'?: undefined;
227
+ 'bg-primary-50'?: undefined;
228
+ 'text-primary-500'?: undefined;
195
229
  'pointer-events-none cursor-default'?: undefined;
196
230
  'cursor-pointer'?: undefined;
197
231
  } | {
198
232
  'pointer-events-none cursor-default': any;
199
- '!font-medium'?: undefined;
200
- 'text-surface-600'?: undefined;
201
- 'bg-primary-50 text-surface-700'?: undefined;
202
- 'bg-primary-50 text-primary-500'?: undefined;
203
- 'text-surface-700'?: undefined;
233
+ 'text-general-800'?: undefined;
234
+ 'text-general-400'?: undefined;
235
+ 'bg-primary-50'?: undefined;
236
+ 'text-primary-500'?: undefined;
237
+ 'text-general-900'?: undefined;
204
238
  'cursor-pointer'?: undefined;
205
239
  } | {
206
240
  'cursor-pointer': boolean;
207
- '!font-medium'?: undefined;
208
- 'text-surface-600'?: undefined;
209
- 'bg-primary-50 text-surface-700'?: undefined;
210
- 'bg-primary-50 text-primary-500'?: undefined;
211
- 'text-surface-700'?: undefined;
241
+ 'text-general-800'?: undefined;
242
+ 'text-general-400'?: undefined;
243
+ 'bg-primary-50'?: undefined;
244
+ 'text-primary-500'?: undefined;
245
+ 'text-general-900'?: undefined;
212
246
  'pointer-events-none cursor-default'?: undefined;
213
247
  })[];
214
248
  };
@@ -231,6 +265,8 @@ declare namespace _default {
231
265
  export namespace filtericon {
232
266
  let _class_15: string[];
233
267
  export { _class_15 as class };
268
+ let icon_1: string;
269
+ export { icon_1 as icon };
234
270
  }
235
271
  export namespace clearicon {
236
272
  let _class_16: string[];
@@ -20,7 +20,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
20
20
  return to.concat(ar || Array.prototype.slice.call(from));
21
21
  };
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
- var index_js_1 = require("../checkbox/index.js");
23
+ var index_js_1 = require("../badge/index.js");
24
+ var index_js_2 = require("../checkbox/index.js");
24
25
  exports.default = {
25
26
  root: function (_a) {
26
27
  var props = _a.props, state = _a.state;
@@ -39,7 +40,7 @@ exports.default = {
39
40
  });
40
41
  },
41
42
  labelContainer: {
42
- class: 'overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] px-3 pr-0',
43
+ class: 'overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] h-[26px] px-3 pr-0',
43
44
  },
44
45
  label: function (_a) {
45
46
  var _b, _c;
@@ -50,9 +51,6 @@ exports.default = {
50
51
  'h-max',
51
52
  //Font
52
53
  'text-xs font-normal',
53
- {
54
- '!leading-5': props.modelValue == null,
55
- },
56
54
  //Shape
57
55
  'rounded-none',
58
56
  // Color
@@ -63,40 +61,31 @@ exports.default = {
63
61
  // Transitions
64
62
  'transition duration-200',
65
63
  // Misc
66
- 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
64
+ 'overflow-hidden overflow-x-auto scrollbar-w-none whitespace-nowrap cursor-pointer overflow-ellipsis',
67
65
  ],
68
66
  });
69
67
  },
70
- token: {
71
- class: [
72
- // Flexbox
73
- 'inline-flex items-center gap-1',
74
- // Spacing
75
- 'py-1 px-2',
76
- // Shape
77
- 'rounded-[50px]',
78
- 'text-xs',
79
- 'font-normal',
80
- 'leading-[12px]',
81
- 'tracking-[0.03em]',
82
- 'items-center',
83
- 'text-grayscale-900',
84
- 'bg-grayscale-500',
85
- ],
68
+ token: index_js_1.default.root({ props: { severity: 'dark' } }),
69
+ tokenLabel: index_js_1.default.input({ props: {}, context: {} }),
70
+ removeTokenIcon: index_js_1.default.removebutton({
71
+ props: { badgeSeverity: 'dark' },
72
+ }),
73
+ loadingplaceholder: {
74
+ class: 'text-general-200 font-light',
86
75
  },
87
- removeTokenIcon: {
88
- class: [
89
- // Shape
90
- 'rounded-md leading-6',
91
- // Spacing
92
- 'ml-2',
93
- // Size
94
- 'w-4 h-4',
95
- // Transition
96
- 'transition duration-200 ease-in-out',
97
- // Misc
98
- 'cursor-pointer',
99
- ],
76
+ loadingicon: {
77
+ class: 'text-xs animate-spin duration-200 !text-general-500',
78
+ icon: 'spinner',
79
+ },
80
+ dropdownicon: function (_a) {
81
+ var state = _a.state;
82
+ return ({
83
+ class: [
84
+ 'w-full h-full transition-transform !text-general-500',
85
+ { 'rotate-180': state.isShowOverlay },
86
+ ],
87
+ icon: 'arrow-drop-down',
88
+ });
100
89
  },
101
90
  trigger: {
102
91
  class: [
@@ -124,12 +113,10 @@ exports.default = {
124
113
  'mt-2',
125
114
  'max-w-[30vw]',
126
115
  // Shape
127
- 'border-0',
128
116
  'rounded-lg',
129
117
  'shadow-panel',
130
118
  // Color
131
- 'bg-surface-0',
132
- 'text-surface-800',
119
+ 'bg-grayscale-100',
133
120
  ],
134
121
  },
135
122
  header: {
@@ -139,13 +126,8 @@ exports.default = {
139
126
  'py-3 px-4',
140
127
  'm-0',
141
128
  //Shape
142
- 'border-[0.5px] border-b-0',
143
- 'rounded-tl-md',
144
- 'rounded-tr-md',
145
- // Color
146
- 'text-surface-700',
147
- 'bg-primary-400',
148
- 'border-grayscale-900',
129
+ 'rounded-tl-lg',
130
+ 'rounded-tr-lg',
149
131
  ],
150
132
  },
151
133
  headerCheckboxContainer: {
@@ -164,10 +146,10 @@ exports.default = {
164
146
  'select-none',
165
147
  ],
166
148
  },
167
- headerCheckbox: __assign(__assign({}, index_js_1.default), { root: {
168
- class: __spreadArray(['!mx-auto'], index_js_1.default.root.class, true),
149
+ headerCheckbox: __assign(__assign({}, index_js_2.default), { root: {
150
+ class: __spreadArray(['!mx-auto'], index_js_2.default.root.class, true),
169
151
  } }),
170
- itemCheckbox: index_js_1.default,
152
+ itemCheckbox: index_js_2.default,
171
153
  closeButton: {
172
154
  class: ['hidden'],
173
155
  },
@@ -185,10 +167,8 @@ exports.default = {
185
167
  // Sizing
186
168
  'max-h-[15rem]',
187
169
  // Shape
188
- 'border-[0.5px]',
189
170
  // Color
190
171
  'bg-white',
191
- 'border-grayscale-900',
192
172
  // Misc
193
173
  'overflow-auto',
194
174
  'rounded-br-lg',
@@ -203,7 +183,7 @@ exports.default = {
203
183
  return ({
204
184
  class: [
205
185
  // Font
206
- 'text-xs font-normal',
186
+ 'text-xs font-medium tracking-[0.02em]',
207
187
  // Flexbox
208
188
  'flex items-center gap-2',
209
189
  // Position
@@ -213,26 +193,22 @@ exports.default = {
213
193
  'rounded-none',
214
194
  // Spacing
215
195
  'm-0',
216
- 'py-2 px-4',
196
+ 'py-1.5 px-4',
217
197
  // Color
218
- { '!font-medium': context.selected },
219
198
  {
220
- 'text-surface-700': !context.focused && !context.selected && !context.disabled,
199
+ 'text-general-800': !context.focused && !context.selected && !context.disabled,
221
200
  },
222
201
  {
223
- 'text-surface-600': !context.focused && !context.selected && context.disabled,
202
+ 'text-general-400': !context.focused && !context.selected && context.disabled,
224
203
  },
204
+ { 'bg-primary-50': context.focused },
225
205
  {
226
- 'bg-primary-50 text-surface-700': context.focused && !context.selected,
206
+ 'text-primary-500': context.focused || context.selected,
227
207
  },
228
208
  {
229
- 'bg-primary-50 text-primary-500': context.focused && context.selected,
230
- },
231
- {
232
- 'text-surface-700': !context.focused && context.selected,
209
+ 'text-general-900': !context.focused && context.selected,
233
210
  },
234
211
  //States
235
- 'hover:bg-primary-bg-weak hover:text-primary',
236
212
  'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
237
213
  // Misc
238
214
  { 'pointer-events-none cursor-default': context.disabled },
@@ -262,25 +238,28 @@ exports.default = {
262
238
  },
263
239
  filtercontainer: {
264
240
  class: [
265
- 'flex flex-row-reverse items-center relative w-full gap-2',
241
+ 'flex items-center relative w-full gap-2',
266
242
  // Font
267
243
  'text-[0.7rem]',
268
244
  'leading-4',
269
245
  // Sizing
270
- 'w-full',
246
+ 'w-full py-2 px-3',
271
247
  //Color
272
- 'text-grayscale-900',
273
- 'bg-primary-400',
248
+ 'text-general-100',
249
+ 'bg-white',
274
250
  // Shape
275
- 'border-b border-primary-100',
251
+ 'ring-inset ring-1 ring-general-500',
252
+ 'rounded-[6px]',
276
253
  ],
277
254
  },
278
255
  filterinput: {
279
256
  class: [
280
257
  'w-full',
281
- 'bg-primary-400',
282
- 'text-white',
283
- 'placeholder:text-primary-100',
258
+ 'text-general-800',
259
+ 'text-xs tracking-[0.02em]',
260
+ 'font-medium',
261
+ 'placeholder:text-general-200',
262
+ 'placeholder:font-light',
284
263
  // Misc
285
264
  'appearance-none',
286
265
  // State
@@ -288,7 +267,8 @@ exports.default = {
288
267
  ],
289
268
  },
290
269
  filtericon: {
291
- class: ['absolute', 'top-1/2 right-3', '-mt-2'],
270
+ class: ['text-base text-general-400'],
271
+ icon: 'search',
292
272
  },
293
273
  clearicon: {
294
274
  class: [