@starasia/dropdown 3.3.0 → 3.4.1

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 (3) hide show
  1. package/dist/dropdown.es.js +292 -276
  2. package/dist/dropdown.umd.js +111 -93
  3. package/package.json +1 -1
package/dist/dropdown.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsxs as t, jsx as n, Fragment as sn } from "react/jsx-runtime";
2
- import Y, { useState as P, useRef as I, useEffect as v, forwardRef as tn } from "react";
3
- const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
1
+ import { jsxs as l, jsx as n, Fragment as tn } from "react/jsx-runtime";
2
+ import _, { useState as F, useRef as I, useEffect as x, forwardRef as dn } from "react";
3
+ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
4
4
  * {
5
5
  margin: 0;
6
6
  padding: 0;
@@ -9,59 +9,62 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
9
9
  }
10
10
 
11
11
  :root {
12
- --sa-dropdown-brand: var(--sa-background-brand, #04254f);
12
+ --sa-dropdown-brand: var(--sa-border-brand, #031f43);
13
+ --sa-dropdown-brand-ring: var(--sa-color-brand-100, #90caf9);
13
14
  --sa-dropdown-brand-subtle: var(--sa-color-brand-200, #99b3db);
14
15
  --sa-dropdown-bg: var(--sa-background-primary, #ffffff);
15
16
  --sa-dropdown-bg-neutral: var(--sa-background-neutral, #f0f1f2);
17
+ --sa-dropdown-bg-selected: #f8f8f8;
18
+ --sa-dropdown-bg-hover: rgba(0, 0, 0, 0.04);
16
19
  --sa-dropdown-bg-disabled: var(--sa-background-neutral, #f0f1f2);
17
20
  --sa-dropdown-bg-error: #fff0f3;
18
21
  --sa-dropdown-border-subtle: rgba(11, 18, 14, 0.14);
19
- --sa-dropdown-border-active: var(--sa-background-brand, #04254f);
22
+ --sa-dropdown-border-active: var(--sa-border-brand, #031f43);
20
23
  --sa-dropdown-border-error-subtle: #ffb3c1;
21
24
  --sa-dropdown-border-error: var(--sa-color-error-500, #ff4d6d);
22
25
  --sa-dropdown-color-disable: var(--sa-color-gray-300, #dddee1);
23
26
  --sa-dropdown-placeholder: var(--sa-text-subtle, #505258);
24
27
  --sa-dropdown-placeholder-subtle: #6b6e76;
25
28
  --sa-dropdown-text-primary: var(--sa-text-primary, #292a2e);
26
- --sa-dropdown-text-secondary: var(--sa-text-subtle, #6b6e76);
29
+ --sa-dropdown-text-secondary: #6b6e76;
27
30
  --sa-dropdown-text-error: #a4133c;
28
31
  --sa-dropdown-text-info: #0073ab;
29
- --sa-dropdown-ring-active: 0px 0px 0px 1.2px var(--sa-color-brand-200, #99b3db);
32
+ --sa-dropdown-ring-active: 0px 0px 0px 1.2px var(--sa-dropdown-brand-ring);
30
33
  --sa-dropdown-shadow-panel: 0px 8px 12px 0px rgba(30, 31, 33, 0.15), 0px 0px 1px 0px rgba(30, 31, 33, 0.31);
31
34
  --sa-dropdown-radius: var(--sa-radii-sm, 6px);
32
35
  }
33
36
 
34
37
  /* === SIZE VARIANTS === */
35
38
  .sa-input-dropdown-size-sm {
36
- --baseFont: var(--sa-font-size-xs, 12px);
39
+ --baseFont: 12px;
37
40
  --height: 32px;
38
41
  --borderRadius: var(--sa-dropdown-radius);
39
- --paddingInline: var(--sa-spacing-sm, 8px);
40
- --paddingBlock: var(--sa-spacing-xs, 4px);
42
+ --paddingInline: 12px;
43
+ --paddingBlock: 4px;
41
44
  --iconSize: 16px;
42
45
  }
43
46
  .sa-input-dropdown-size-md {
44
- --baseFont: var(--sa-font-size-sm, 14px);
47
+ --baseFont: 14px;
45
48
  --height: 40px;
46
49
  --borderRadius: var(--sa-dropdown-radius);
47
- --paddingInline: var(--sa-spacing-3, 12px);
48
- --paddingBlock: var(--sa-spacing-sm, 8px);
50
+ --paddingInline: 12px;
51
+ --paddingBlock: 8px;
49
52
  --iconSize: 16px;
50
53
  }
51
54
  .sa-input-dropdown-size-lg {
52
- --baseFont: var(--sa-font-size-md, 16px);
55
+ --baseFont: 14px;
53
56
  --height: 48px;
54
57
  --borderRadius: var(--sa-dropdown-radius);
55
- --paddingInline: var(--sa-spacing-3, 12px);
56
- --paddingBlock: var(--sa-spacing-sm, 8px);
58
+ --paddingInline: 12px;
59
+ --paddingBlock: 12px;
57
60
  --iconSize: 20px;
58
61
  }
59
62
  .sa-input-dropdown-size-xl {
60
- --baseFont: var(--sa-font-size-md, 16px);
63
+ --baseFont: 16px;
61
64
  --height: 56px;
62
65
  --borderRadius: var(--sa-dropdown-radius);
63
- --paddingInline: var(--sa-spacing-3, 12px);
64
- --paddingBlock: var(--sa-spacing-sm, 8px);
66
+ --paddingInline: 16px;
67
+ --paddingBlock: 16px;
65
68
  --iconSize: 20px;
66
69
  }
67
70
 
@@ -77,6 +80,8 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
77
80
  cursor: pointer;
78
81
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
79
82
  outline: none;
83
+ box-sizing: border-box;
84
+ width: 100%;
80
85
  }
81
86
  .sa-input-dropdown-container:focus-visible {
82
87
  outline: none;
@@ -89,7 +94,7 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
89
94
  border-radius: var(--borderRadius);
90
95
  }
91
96
  .sa-input-dropdown-container.standard.active {
92
- border-color: var(--sa-dropdown-border-active);
97
+ border: 1px solid var(--sa-dropdown-border-active);
93
98
  box-shadow: var(--sa-dropdown-ring-active);
94
99
  }
95
100
  .sa-input-dropdown-container.standard.error {
@@ -111,12 +116,12 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
111
116
  border-radius: var(--borderRadius);
112
117
  }
113
118
  .sa-input-dropdown-container.outline.active {
114
- border: 1px solid var(--sa-dropdown-border-active);
115
- box-shadow: var(--sa-dropdown-ring-active);
119
+ border: 1.2px solid var(--sa-dropdown-border-active);
120
+ box-shadow: none;
116
121
  }
117
122
  .sa-input-dropdown-container.outline.error {
118
- background-color: var(--sa-dropdown-bg-error);
119
- border: 1px solid var(--sa-dropdown-border-error-subtle);
123
+ background-color: transparent;
124
+ border: 0.8px solid var(--sa-dropdown-border-error-subtle);
120
125
  }
121
126
  .sa-input-dropdown-container.outline.disable {
122
127
  background-color: var(--sa-dropdown-bg-disabled);
@@ -134,11 +139,11 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
134
139
  border-radius: 0;
135
140
  }
136
141
  .sa-input-dropdown-container.flushed.active {
137
- border-bottom: 1px solid var(--sa-dropdown-border-active);
138
- box-shadow: 0px 1.2px 0px 0px var(--sa-color-brand-200, #99b3db);
142
+ border-bottom: 1.2px solid var(--sa-dropdown-border-active);
143
+ box-shadow: none;
139
144
  }
140
145
  .sa-input-dropdown-container.flushed.error {
141
- border-bottom: 1px solid var(--sa-dropdown-border-error-subtle);
146
+ border-bottom: 0.8px solid var(--sa-dropdown-border-error-subtle);
142
147
  }
143
148
  .sa-input-dropdown-container.flushed.disable {
144
149
  cursor: not-allowed;
@@ -150,34 +155,36 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
150
155
  .sa-input-dropdown-preview-container {
151
156
  display: flex;
152
157
  flex-direction: row;
153
- gap: var(--sa-spacing-sm, 8px);
158
+ gap: 8px;
154
159
  align-items: center;
155
160
  justify-content: space-between;
156
161
  width: 100%;
157
- overflow-y: hidden;
162
+ min-width: 0;
158
163
  }
159
164
 
160
165
  .sa-input-dropdown-container-preview-item {
161
166
  flex: 1;
162
167
  display: flex;
163
- gap: var(--sa-spacing-xs, 4px);
168
+ gap: 4px;
164
169
  flex-wrap: wrap;
165
170
  align-items: center;
166
- overflow-y: auto;
167
- padding-block: 4px;
171
+ min-width: 0;
168
172
  }
169
173
 
170
174
  .sa-input-dropdown-preview-item {
171
- border: 1px solid var(--sa-dropdown-brand);
172
- padding-inline: var(--paddingInline);
173
- border-radius: var(--sa-dropdown-radius);
175
+ border: 0.8px solid var(--sa-dropdown-border-subtle);
176
+ padding-inline: 8px;
177
+ padding-block: 2px;
178
+ border-radius: 4px;
174
179
  background-color: var(--sa-color-brand-50, #e6edf6);
175
180
  color: var(--sa-dropdown-brand);
176
181
  height: max-content;
177
- font-size: var(--baseFont);
182
+ font-size: 12px;
183
+ font-weight: 500;
178
184
  display: flex;
179
185
  align-items: center;
180
186
  gap: 4px;
187
+ line-height: normal;
181
188
  }
182
189
 
183
190
  .sa-input-dropdown-placeholder {
@@ -195,12 +202,13 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
195
202
  background-color: var(--sa-dropdown-bg);
196
203
  border-radius: var(--sa-dropdown-radius);
197
204
  box-shadow: var(--sa-dropdown-shadow-panel);
198
- max-height: 320px;
205
+ max-height: min(540px, calc(100vh - 80px));
199
206
  overflow: hidden;
200
207
  z-index: 999;
201
208
  width: 100%;
202
209
  display: flex;
203
210
  flex-direction: column;
211
+ font-family: "Poppins", sans-serif;
204
212
  }
205
213
 
206
214
  /* === SEARCH BAR === */
@@ -208,12 +216,12 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
208
216
  flex-shrink: 0;
209
217
  display: flex;
210
218
  align-items: center;
211
- height: 36px;
212
- min-height: 36px;
219
+ height: 32px;
220
+ min-height: 32px;
213
221
  border-bottom: 0.8px solid var(--sa-dropdown-border-subtle);
214
- gap: var(--sa-spacing-sm, 8px);
215
- padding-inline: var(--sa-spacing-3, 12px);
216
- padding-block: var(--sa-spacing-sm, 8px);
222
+ gap: 8px;
223
+ padding-inline: 12px;
224
+ padding-block: 8px;
217
225
  background: var(--sa-dropdown-bg);
218
226
 
219
227
  & input {
@@ -221,8 +229,11 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
221
229
  outline: none;
222
230
  background-color: transparent;
223
231
  border: none;
224
- font-size: var(--baseFont, 14px);
232
+ font-size: 12px;
233
+ font-weight: 400;
225
234
  color: var(--sa-dropdown-text-primary);
235
+ line-height: normal;
236
+ padding: 0;
226
237
  }
227
238
  & input::placeholder {
228
239
  color: var(--sa-dropdown-placeholder-subtle);
@@ -234,11 +245,9 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
234
245
  flex: 1 1 0;
235
246
  overflow-y: auto;
236
247
  min-height: 0;
237
- padding: var(--sa-spacing-sm, 8px);
248
+ padding: 8px 8px 8px 8px;
238
249
  display: flex;
239
250
  flex-direction: column;
240
- }
241
- .sa-input-dropdwon-item-container.multi {
242
251
  gap: 4px;
243
252
  }
244
253
 
@@ -248,8 +257,7 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
248
257
  align-items: center;
249
258
  justify-content: space-between;
250
259
  gap: 12px;
251
- padding-inline: 4px;
252
- padding-bottom: 4px;
260
+ padding: 0 4px 4px 4px;
253
261
  font-size: 12px;
254
262
  font-weight: 500;
255
263
  flex-shrink: 0;
@@ -274,33 +282,52 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
274
282
 
275
283
  /* === LIST ITEMS === */
276
284
  .sa-input-dropdwon-item {
277
- min-height: 36px;
285
+ min-height: 40px;
278
286
  box-sizing: border-box;
279
- padding-left: var(--sa-spacing-sm, 8px);
280
- padding-right: var(--sa-spacing-3, 12px);
281
- padding-block: var(--sa-spacing-xs, 4px);
287
+ padding: 4px 12px 4px 8px;
282
288
  display: flex;
283
289
  align-items: center;
284
290
  cursor: pointer;
285
- gap: var(--sa-spacing-sm, 8px);
291
+ gap: 8px;
286
292
  border-radius: var(--sa-dropdown-radius);
287
293
  overflow: hidden;
288
294
  flex-shrink: 0;
295
+ font-size: 14px;
296
+ transition: background-color 0.12s ease;
289
297
  }
290
- .sa-input-dropdwon-item:hover {
291
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
298
+ .sa-input-dropdwon-item.has-description {
299
+ min-height: 32px;
300
+ font-size: 12px;
301
+ }
302
+ .sa-input-dropdwon-item:hover:not(.sa-input-dropdwon-item-disable) {
303
+ background-color: var(--sa-dropdown-bg-hover);
292
304
  }
293
305
  .sa-input-dropdwon-item.active {
294
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 21%, transparent);
306
+ background-color: var(--sa-dropdown-bg-selected);
307
+ }
308
+ .sa-input-dropdwon-item.active:hover {
309
+ background-color: var(--sa-dropdown-bg-selected);
295
310
  }
296
311
  .sa-input-dropdwon-item.highlight {
297
- background-color: color-mix(in srgb, var(--sa-dropdown-brand-subtle) 35%, transparent);
298
- outline: 2px solid color-mix(in srgb, var(--sa-dropdown-brand-subtle) 40%, transparent);
299
- outline-offset: -2px;
312
+ background-color: var(--sa-dropdown-bg-selected);
313
+ outline: 1.2px solid var(--sa-dropdown-border-active);
314
+ outline-offset: -1.2px;
300
315
  }
301
316
  .sa-input-dropdwon-item-disable {
302
317
  color: var(--sa-dropdown-color-disable) !important;
303
318
  pointer-events: none;
319
+ cursor: not-allowed;
320
+ }
321
+
322
+ /* check indicator for selected items in single-select mode */
323
+ .sa-input-dropdwon-item-check {
324
+ flex-shrink: 0;
325
+ width: 20px;
326
+ height: 20px;
327
+ display: flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ color: var(--sa-dropdown-brand);
304
331
  }
305
332
 
306
333
  .sa-input-dropdwon-item-text {
@@ -310,27 +337,24 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
310
337
  overflow: hidden;
311
338
  text-overflow: ellipsis;
312
339
  white-space: nowrap;
313
- }
314
- .sa-input-dropdwon-item-text.active {
315
- color: var(--sa-dropdown-brand);
340
+ line-height: normal;
316
341
  }
317
342
  .sa-input-dropdwon-item-text-description {
318
343
  color: var(--sa-dropdown-text-secondary);
319
- font-size: inherit;
344
+ font-size: 12px;
320
345
  font-weight: 400;
321
346
  overflow: hidden;
322
347
  text-overflow: ellipsis;
323
348
  white-space: nowrap;
324
- }
325
- .sa-input-dropdwon-item-text-description.active {
326
- color: var(--sa-dropdown-brand);
349
+ line-height: normal;
350
+ margin-top: 2px;
327
351
  }
328
352
 
329
353
  /* === FOOTER SLOT === */
330
354
  .sa-input-dropdown-footer {
331
355
  flex-shrink: 0;
332
356
  background: var(--sa-dropdown-bg);
333
- padding: var(--sa-spacing-sm, 8px);
357
+ padding: 8px;
334
358
  border-top: 0.8px solid var(--sa-dropdown-border-subtle);
335
359
  }
336
360
 
@@ -338,25 +362,27 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
338
362
  .sa-select-field {
339
363
  display: flex;
340
364
  flex-direction: column;
341
- gap: 8px;
365
+ gap: 6px;
342
366
  width: 100%;
367
+ font-family: "Poppins", sans-serif;
343
368
  }
344
369
  .sa-select-field-left {
345
370
  flex-direction: row;
346
371
  align-items: flex-start;
372
+ gap: 16px;
347
373
  }
348
374
  .sa-select-field-left-label {
349
375
  display: flex;
350
376
  flex-direction: column;
351
- gap: 8px;
377
+ gap: 4px;
352
378
  flex: 0 0 auto;
353
- width: 50%;
354
- padding-top: 7px;
379
+ width: 35%;
380
+ padding-top: 8px;
355
381
  }
356
382
  .sa-select-field-input-wrap {
357
383
  display: flex;
358
384
  flex-direction: column;
359
- gap: 8px;
385
+ gap: 6px;
360
386
  flex: 1;
361
387
  min-width: 0;
362
388
  }
@@ -364,17 +390,17 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
364
390
  .sa-select-field-label-row {
365
391
  display: flex;
366
392
  align-items: center;
367
- gap: 4px;
393
+ gap: 6px;
368
394
  flex-wrap: wrap;
369
395
  }
370
396
  .sa-select-field-label-text {
371
397
  font-size: 14px;
372
398
  font-weight: 500;
373
399
  color: var(--sa-dropdown-text-primary);
374
- line-height: 1;
400
+ line-height: 1.3;
375
401
  }
376
402
  .sa-select-field-left .sa-select-field-label-text {
377
- font-size: 12px;
403
+ font-size: 14px;
378
404
  }
379
405
  .sa-select-field-required {
380
406
  font-size: 14px;
@@ -382,48 +408,40 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
382
408
  color: var(--sa-dropdown-text-error);
383
409
  line-height: 1;
384
410
  }
385
- .sa-select-field-left .sa-select-field-required {
386
- font-size: 12px;
387
- }
388
411
  .sa-select-field-optional-badge {
389
412
  display: inline-flex;
390
413
  align-items: center;
391
414
  justify-content: center;
392
- padding-inline: 8px;
393
- border: 1px solid var(--sa-dropdown-border-subtle);
415
+ padding: 0 6px;
416
+ border: 0.8px solid var(--sa-dropdown-border-subtle);
394
417
  border-radius: 4px;
395
- background-color: var(--sa-dropdown-bg-neutral);
418
+ background-color: transparent;
396
419
  font-size: 10px;
397
420
  font-weight: 500;
398
- color: var(--sa-dropdown-text-primary);
421
+ color: var(--sa-dropdown-text-secondary);
399
422
  line-height: 18px;
423
+ text-transform: lowercase;
400
424
  }
401
425
  .sa-select-field-helper-top {
402
426
  font-size: 12px;
403
427
  font-weight: 400;
404
428
  color: var(--sa-dropdown-text-secondary);
405
- line-height: 1.5;
406
- }
407
- .sa-select-field-left .sa-select-field-helper-top {
408
- font-size: 10px;
429
+ line-height: 1.4;
430
+ margin: 0;
409
431
  }
410
432
  .sa-select-field-helper {
411
433
  font-size: 12px;
412
434
  font-weight: 400;
413
435
  color: var(--sa-dropdown-text-secondary);
414
- line-height: 1.5;
415
- }
416
- .sa-select-field-left .sa-select-field-helper {
417
- font-size: 10px;
436
+ line-height: 1.4;
437
+ margin: 0;
418
438
  }
419
439
  .sa-select-field-error-msg {
420
440
  font-size: 12px;
421
441
  font-weight: 400;
422
442
  color: var(--sa-dropdown-text-error);
423
- line-height: 1.5;
424
- }
425
- .sa-select-field-left .sa-select-field-error-msg {
426
- font-size: 10px;
443
+ line-height: 1.4;
444
+ margin: 0;
427
445
  }
428
446
 
429
447
  /* === CHECKBOX === */
@@ -501,14 +519,14 @@ const dn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
501
519
  }
502
520
  `;
503
521
  function ln(e) {
504
- const [p, d] = P(e), l = I(null), o = (r) => {
505
- l.current && !l.current.contains(r.target) && d(!1);
522
+ const [p, d] = F(e), s = I(null), o = (r) => {
523
+ s.current && !s.current.contains(r.target) && d(!1);
506
524
  };
507
- return v(() => (document.addEventListener("click", o, !0), () => {
525
+ return x(() => (document.addEventListener("click", o, !0), () => {
508
526
  document.removeEventListener("click", o, !0);
509
- }), []), { ref: l, isComponentVisible: p, setIsComponentVisible: d };
527
+ }), []), { ref: s, isComponentVisible: p, setIsComponentVisible: d };
510
528
  }
511
- const pn = ({ ...e }) => /* @__PURE__ */ t(
529
+ const pn = ({ ...e }) => /* @__PURE__ */ l(
512
530
  "svg",
513
531
  {
514
532
  xmlns: "http://www.w3.org/2000/svg",
@@ -540,48 +558,47 @@ const pn = ({ ...e }) => /* @__PURE__ */ t(
540
558
  )
541
559
  ]
542
560
  }
543
- ), cn = ({ isChecked: e }) => /* @__PURE__ */ t("div", { className: "checkbox-wrapper-30", children: [
544
- /* @__PURE__ */ t("span", { className: "checkbox", children: [
545
- /* @__PURE__ */ n(
546
- "input",
561
+ ), cn = ({ width: e = 16 }) => /* @__PURE__ */ n(
562
+ "svg",
563
+ {
564
+ xmlns: "http://www.w3.org/2000/svg",
565
+ width: e,
566
+ height: e,
567
+ viewBox: "0 0 16 16",
568
+ fill: "none",
569
+ children: /* @__PURE__ */ n(
570
+ "path",
547
571
  {
548
- type: "checkbox",
549
- style: { pointerEvents: "none" },
550
- checked: e
572
+ d: "M3.5 8L6.5 11L12.5 5",
573
+ stroke: "currentColor",
574
+ strokeWidth: "1.5",
575
+ strokeLinecap: "round",
576
+ strokeLinejoin: "round"
551
577
  }
552
- ),
553
- /* @__PURE__ */ n("svg", { children: /* @__PURE__ */ n("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
554
- ] }),
555
- /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ n("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ n(
556
- "path",
557
- {
558
- fill: "none",
559
- stroke: "currentColor",
560
- d: "M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"
561
- }
562
- ) }) })
563
- ] }), hn = tn(
578
+ )
579
+ }
580
+ ), hn = dn(
564
581
  ({
565
582
  positionDropdown: e,
566
583
  dropdownLists: p,
567
584
  isComponentVisible: d,
568
- searchAble: l,
585
+ searchAble: s,
569
586
  onSearch: o,
570
587
  value: r,
571
- handleChangeValue: y,
588
+ handleChangeValue: k,
572
589
  multiSelect: h,
573
- searchValue: F,
574
- highlightedIndex: x,
590
+ searchValue: H,
591
+ highlightedIndex: g,
575
592
  footer: A,
576
- groupLabel: O,
593
+ groupLabel: j,
577
594
  onSelectAll: D
578
- }, H) => {
579
- const R = I([]);
580
- v(() => {
595
+ }, M) => {
596
+ const z = I([]);
597
+ x(() => {
581
598
  var a;
582
- x >= 0 && R.current[x] && ((a = R.current[x]) == null || a.scrollIntoView({ block: "nearest" }));
583
- }, [x]);
584
- const j = l ? /* @__PURE__ */ t("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
599
+ g >= 0 && z.current[g] && ((a = z.current[g]) == null || a.scrollIntoView({ block: "nearest" }));
600
+ }, [g]);
601
+ const O = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
585
602
  /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
586
603
  /* @__PURE__ */ n(
587
604
  "input",
@@ -589,27 +606,27 @@ const pn = ({ ...e }) => /* @__PURE__ */ t(
589
606
  onChange: (a) => {
590
607
  o && o(a.target.value);
591
608
  },
592
- value: F,
609
+ value: H,
593
610
  autoFocus: !0,
594
611
  placeholder: "Search..."
595
612
  }
596
613
  )
597
614
  ] }) : null;
598
- return /* @__PURE__ */ n(sn, { children: d ? /* @__PURE__ */ t(
615
+ return /* @__PURE__ */ n(tn, { children: d ? /* @__PURE__ */ l(
599
616
  "div",
600
617
  {
601
618
  className: "sa-input-dropdown-lists-container",
602
619
  onClick: (a) => a.stopPropagation(),
603
- ref: H,
620
+ ref: M,
604
621
  children: [
605
- e !== "top" && j,
606
- /* @__PURE__ */ t(
622
+ e !== "top" && O,
623
+ /* @__PURE__ */ l(
607
624
  "div",
608
625
  {
609
626
  className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
610
627
  children: [
611
- O && /* @__PURE__ */ t("div", { className: "sa-input-dropdown-section-header", children: [
612
- /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: O }),
628
+ j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
629
+ /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
613
630
  h && D && /* @__PURE__ */ n(
614
631
  "button",
615
632
  {
@@ -621,31 +638,31 @@ const pn = ({ ...e }) => /* @__PURE__ */ t(
621
638
  }
622
639
  )
623
640
  ] }),
624
- p.map((a, S) => {
625
- const N = !!(r != null && r.find((g) => g.value === a.value));
626
- return /* @__PURE__ */ t(
641
+ p.map((a, B) => {
642
+ const W = !!(r != null && r.find((R) => R.value === a.value)), L = !!a.description;
643
+ return /* @__PURE__ */ l(
627
644
  "div",
628
645
  {
629
646
  className: [
630
647
  "sa-input-dropdwon-item",
631
- N ? "active" : "",
632
- S === x ? "highlight" : "",
648
+ L ? "has-description" : "",
649
+ W ? "active" : "",
650
+ B === g ? "highlight" : "",
633
651
  a.disable ? "sa-input-dropdwon-item-disable" : ""
634
652
  ].filter(Boolean).join(" "),
635
- ref: (g) => {
636
- R.current[S] = g;
653
+ ref: (R) => {
654
+ z.current[B] = R;
637
655
  },
638
- onClick: () => y(a.label, a.value),
656
+ onClick: () => k(a.label, a.value),
639
657
  children: [
640
- h && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(cn, { isChecked: N }) }),
641
- a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: Y.cloneElement(a.icon, { width: 16 }) }),
642
- /* @__PURE__ */ t("div", { style: { minWidth: 0, flex: 1 }, children: [
658
+ h && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
659
+ a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0, display: "flex" }, children: _.cloneElement(a.icon, { width: 16 }) }),
660
+ /* @__PURE__ */ l("div", { style: { minWidth: 0, flex: 1 }, children: [
643
661
  /* @__PURE__ */ n(
644
662
  "p",
645
663
  {
646
664
  className: [
647
665
  "sa-input-dropdwon-item-text",
648
- N ? "active" : "",
649
666
  a.disable ? "sa-input-dropdwon-item-disable" : ""
650
667
  ].filter(Boolean).join(" "),
651
668
  children: a.label
@@ -656,7 +673,6 @@ const pn = ({ ...e }) => /* @__PURE__ */ t(
656
673
  {
657
674
  className: [
658
675
  "sa-input-dropdwon-item-text-description",
659
- N ? "active" : "",
660
676
  a.disable ? "sa-input-dropdwon-item-disable" : ""
661
677
  ].filter(Boolean).join(" "),
662
678
  children: a.description
@@ -665,249 +681,249 @@ const pn = ({ ...e }) => /* @__PURE__ */ t(
665
681
  ] })
666
682
  ]
667
683
  },
668
- S
684
+ B
669
685
  );
670
686
  })
671
687
  ]
672
688
  }
673
689
  ),
674
- e === "top" && j,
690
+ e === "top" && O,
675
691
  A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
676
692
  ]
677
693
  }
678
694
  ) : null });
679
695
  }
680
- ), un = ({
696
+ ), wn = ({
681
697
  children: e,
682
698
  handleChangePosition: p
683
699
  }) => {
684
700
  const d = I(null);
685
- v(() => {
686
- var y;
701
+ x(() => {
702
+ var k;
687
703
  const o = () => {
688
704
  if (d.current) {
689
705
  let h = d.current.parentElement;
690
- for (; h && !l(h); )
706
+ for (; h && !s(h); )
691
707
  h = h.parentElement;
692
708
  h && p();
693
709
  }
694
710
  };
695
- let r = (y = d.current) == null ? void 0 : y.parentElement;
696
- for (; r && !l(r); )
711
+ let r = (k = d.current) == null ? void 0 : k.parentElement;
712
+ for (; r && !s(r); )
697
713
  r = r.parentElement;
698
714
  return r && r.addEventListener("scroll", o), o(), () => {
699
715
  r && r.removeEventListener("scroll", o);
700
716
  };
701
717
  }, []);
702
- const l = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
718
+ const s = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
703
719
  return /* @__PURE__ */ n("div", { ref: d, children: e });
704
- }, Z = "sa-input-dropdown-styles", wn = (e) => {
705
- if (!document.getElementById(Z)) {
720
+ }, Q = "sa-input-dropdown-styles", un = (e) => {
721
+ if (!document.getElementById(Q)) {
706
722
  const p = document.createElement("style");
707
- p.id = Z, p.textContent = e, document.head.appendChild(p);
723
+ p.id = Q, p.textContent = e, document.head.appendChild(p);
708
724
  }
709
725
  };
710
- wn(dn);
726
+ un(sn);
711
727
  const mn = ({
712
728
  dropdownLists: e,
713
729
  onChange: p,
714
730
  defaultValue: d,
715
- value: l,
731
+ value: s,
716
732
  size: o = "md",
717
733
  multiSelect: r,
718
- searchAble: y,
734
+ searchAble: k,
719
735
  iconLeft: h,
720
- placeholder: F,
721
- onSearch: x,
736
+ placeholder: H,
737
+ onSearch: g,
722
738
  error: A,
723
- onBlur: O,
739
+ onBlur: j,
724
740
  onFocus: D,
725
- disable: H,
726
- searchValue: R,
727
- variant: j = "outline",
741
+ disable: M,
742
+ searchValue: z,
743
+ variant: O = "outline",
728
744
  footer: a,
729
- groupLabel: S,
730
- onSelectAll: N,
745
+ groupLabel: B,
746
+ onSelectAll: W,
731
747
  /* field wrapper */
732
- label: g,
733
- labelPosition: _ = "outside-top",
734
- required: J,
735
- optional: U,
736
- description: E,
737
- helperText: C,
738
- errorText: u
748
+ label: L,
749
+ labelPosition: R = "outside-top",
750
+ required: U,
751
+ optional: X,
752
+ description: y,
753
+ helperText: N,
754
+ errorText: w
739
755
  }) => {
740
- const z = l !== void 0, M = I(), T = A || !!u, [c, L] = P(
741
- z ? l || [] : d || []
742
- ), [nn, X] = P(""), [b, $] = P(-1), m = I(null), { isComponentVisible: k, ref: q, setIsComponentVisible: W } = ln(!1), en = () => {
743
- W((i) => !i);
744
- }, V = (i, s) => {
756
+ const E = s !== void 0, $ = I(), T = A || !!w, [c, S] = F(
757
+ E ? s || [] : d || []
758
+ ), [nn, Z] = F(""), [f, V] = F(-1), v = I(null), { isComponentVisible: m, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
759
+ P((t) => !t);
760
+ }, K = (t, i) => {
745
761
  if (r)
746
- if (c == null ? void 0 : c.find((w) => w.value === s)) {
747
- const w = c.filter((an) => an.value !== s);
748
- z || L(w), p(w);
762
+ if (c == null ? void 0 : c.find((u) => u.value === i)) {
763
+ const u = c.filter((an) => an.value !== i);
764
+ E || S(u), p(u);
749
765
  } else {
750
- const w = [...c, { label: i, value: s }];
751
- z || L(w), p(w);
766
+ const u = [...c, { label: t, value: i }];
767
+ E || S(u), p(u);
752
768
  }
753
769
  else {
754
- const f = [{ label: i, value: s }];
755
- z || L(f), p(f), W(!1);
770
+ const b = [{ label: t, value: i }];
771
+ E || S(b), p(b), P(!1);
756
772
  }
757
773
  };
758
- v(() => {
759
- z && L(l || []);
760
- }, [l]), v(() => {
761
- z || JSON.stringify(M.current) === JSON.stringify(d) || (M.current = d, L(M.current || []));
774
+ x(() => {
775
+ E && S(s || []);
776
+ }, [s]), x(() => {
777
+ E || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
762
778
  }, [d]);
763
- const rn = () => c.length ? r ? c == null ? void 0 : c.map((i, s) => /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-item", children: [
764
- /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: i == null ? void 0 : i.label }),
779
+ const rn = () => c.length ? r ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
780
+ /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
765
781
  /* @__PURE__ */ n(
766
- bn,
782
+ fn,
767
783
  {
768
- onClick: (f) => {
769
- f.stopPropagation(), V(i.label, i.value);
784
+ onClick: (b) => {
785
+ b.stopPropagation(), K(t.label, t.value);
770
786
  }
771
787
  }
772
788
  )
773
- ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: F }), B = () => {
774
- if (q.current && m.current) {
775
- const i = window.innerHeight, s = q.current.getBoundingClientRect(), f = m.current.getBoundingClientRect(), w = s.bottom + f.height;
776
- m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, w >= i - 10 ? (m.current.style.top = `${s.top - f.height - 5}px`, X("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, X("bottom"));
789
+ ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), C = () => {
790
+ if (q.current && v.current) {
791
+ const t = window.innerHeight, i = q.current.getBoundingClientRect(), b = v.current.getBoundingClientRect(), u = i.bottom + b.height;
792
+ v.current.style.left = `${i.left}px`, v.current.style.width = `${i.width}px`, u >= t - 10 ? (v.current.style.top = `${i.top - b.height - 5}px`, Z("top")) : (v.current.style.top = `${i.top + i.height + 4}px`, Z("bottom"));
777
793
  }
778
794
  };
779
- v(() => (window.addEventListener("scroll", B), window.addEventListener("resize", B), () => {
780
- window.removeEventListener("scroll", B), window.removeEventListener("resize", B);
781
- }), []), v(() => {
782
- B();
783
- }, [k]), v(() => {
784
- k || $(-1);
785
- }, [k]);
786
- const on = (i) => {
787
- if (!k) {
788
- (i.key === "ArrowDown" || i.key === "Enter") && (i.preventDefault(), W(!0));
795
+ x(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
796
+ window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
797
+ }), []), x(() => {
798
+ C();
799
+ }, [m]), x(() => {
800
+ m || V(-1);
801
+ }, [m]);
802
+ const on = (t) => {
803
+ if (!m) {
804
+ (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), P(!0));
789
805
  return;
790
806
  }
791
- switch (i.key) {
807
+ switch (t.key) {
792
808
  case "ArrowDown": {
793
- i.preventDefault();
794
- const s = Q(e, b, 1);
795
- s !== -1 && $(s);
809
+ t.preventDefault();
810
+ const i = Y(e, f, 1);
811
+ i !== -1 && V(i);
796
812
  break;
797
813
  }
798
814
  case "ArrowUp": {
799
- i.preventDefault();
800
- const s = Q(e, b, -1);
801
- s !== -1 && $(s);
815
+ t.preventDefault();
816
+ const i = Y(e, f, -1);
817
+ i !== -1 && V(i);
802
818
  break;
803
819
  }
804
820
  case "Enter": {
805
- i.preventDefault(), b >= 0 && e[b] && !e[b].disable && V(
806
- e[b].label,
807
- e[b].value
821
+ t.preventDefault(), f >= 0 && e[f] && !e[f].disable && K(
822
+ e[f].label,
823
+ e[f].value
808
824
  );
809
825
  break;
810
826
  }
811
827
  case "Escape":
812
- W(!1);
828
+ P(!1);
813
829
  break;
814
830
  }
815
- }, K = o === "lg" || o === "xl" ? 20 : 16, G = /* @__PURE__ */ n(un, { handleChangePosition: B, children: /* @__PURE__ */ t(
831
+ }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: C, children: /* @__PURE__ */ l(
816
832
  "div",
817
833
  {
818
834
  className: [
819
835
  "sa-input-dropdown-container",
820
- j,
836
+ O,
821
837
  `sa-input-dropdown-size-${o}`,
822
- k ? "active" : "",
838
+ m ? "active" : "",
823
839
  T ? "error" : "",
824
- H ? "disable" : ""
840
+ M ? "disable" : ""
825
841
  ].filter(Boolean).join(" "),
826
842
  ref: q,
827
843
  onClick: en,
828
844
  onKeyDown: on,
829
845
  tabIndex: 0,
830
- onBlur: O,
846
+ onBlur: j,
831
847
  onFocus: D,
832
848
  children: [
833
- /* @__PURE__ */ t("div", { className: "sa-input-dropdown-preview-container", children: [
834
- h ? Y.cloneElement(h, {
835
- width: K,
849
+ /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
850
+ h ? _.cloneElement(h, {
851
+ width: G,
836
852
  style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
837
853
  }) : null,
838
854
  /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
839
- k ? /* @__PURE__ */ n(vn, { width: K }) : /* @__PURE__ */ n(fn, { width: K })
855
+ m ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
840
856
  ] }),
841
857
  /* @__PURE__ */ n(
842
858
  hn,
843
859
  {
844
860
  dropdownLists: e,
845
- handleChangeValue: V,
846
- isComponentVisible: k,
861
+ handleChangeValue: K,
862
+ isComponentVisible: m,
847
863
  positionDropdown: nn,
848
- searchAble: !!y,
864
+ searchAble: !!k,
849
865
  value: c,
850
- onSearch: x,
851
- ref: m,
866
+ onSearch: g,
867
+ ref: v,
852
868
  multiSelect: r,
853
- searchValue: R,
854
- highlightedIndex: b,
869
+ searchValue: z,
870
+ highlightedIndex: f,
855
871
  footer: a,
856
- groupLabel: S,
857
- onSelectAll: N
872
+ groupLabel: B,
873
+ onSelectAll: W
858
874
  }
859
875
  )
860
876
  ]
861
877
  }
862
878
  ) });
863
- return g ? _ === "outside-left" ? /* @__PURE__ */ t("div", { className: "sa-select-field sa-select-field-left", children: [
864
- /* @__PURE__ */ t("div", { className: "sa-select-field-left-label", children: [
865
- /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
866
- /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
867
- U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
868
- J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
879
+ return L ? R === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
880
+ /* @__PURE__ */ l("div", { className: "sa-select-field-left-label", children: [
881
+ /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
882
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
883
+ X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
884
+ U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
869
885
  ] }),
870
- E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E })
886
+ y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y })
871
887
  ] }),
872
- /* @__PURE__ */ t("div", { className: "sa-select-field-input-wrap", children: [
873
- G,
874
- C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
875
- u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
888
+ /* @__PURE__ */ l("div", { className: "sa-select-field-input-wrap", children: [
889
+ J,
890
+ N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
891
+ w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
876
892
  ] })
877
- ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
878
- /* @__PURE__ */ t("div", { className: "sa-select-field-label-row", children: [
879
- /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: g }),
880
- U && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
881
- J && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
893
+ ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
894
+ /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
895
+ /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: L }),
896
+ X && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
897
+ U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
882
898
  ] }),
883
- E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
884
- G,
885
- C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
886
- u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
887
- ] }) : /* @__PURE__ */ t("div", { className: "sa-select-field", children: [
888
- E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
889
- G,
890
- C && !u && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
891
- u && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: u })
899
+ y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
900
+ J,
901
+ N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
902
+ w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
903
+ ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
904
+ y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y }),
905
+ J,
906
+ N && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: N }),
907
+ w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
892
908
  ] });
893
- }, Q = (e, p, d) => {
894
- const l = e.length;
909
+ }, Y = (e, p, d) => {
910
+ const s = e.length;
895
911
  let o = p + d;
896
- for (; o >= 0 && o < l; ) {
912
+ for (; o >= 0 && o < s; ) {
897
913
  if (!e[o].disable)
898
914
  return o;
899
915
  o += d;
900
916
  }
901
917
  if (d === 1) {
902
- for (let r = 0; r < l; r++)
918
+ for (let r = 0; r < s; r++)
903
919
  if (!e[r].disable)
904
920
  return r;
905
921
  } else
906
- for (let r = l - 1; r >= 0; r--)
922
+ for (let r = s - 1; r >= 0; r--)
907
923
  if (!e[r].disable)
908
924
  return r;
909
925
  return -1;
910
- }, bn = (e) => /* @__PURE__ */ n(
926
+ }, fn = (e) => /* @__PURE__ */ n(
911
927
  "svg",
912
928
  {
913
929
  xmlns: "http://www.w3.org/2000/svg",
@@ -928,7 +944,7 @@ const mn = ({
928
944
  }
929
945
  )
930
946
  }
931
- ), fn = ({ width: e = 16 }) => /* @__PURE__ */ n(
947
+ ), bn = ({ width: e = 16 }) => /* @__PURE__ */ n(
932
948
  "svg",
933
949
  {
934
950
  xmlns: "http://www.w3.org/2000/svg",
@@ -948,7 +964,7 @@ const mn = ({
948
964
  }
949
965
  )
950
966
  }
951
- ), vn = ({ width: e = 16 }) => /* @__PURE__ */ n(
967
+ ), xn = ({ width: e = 16 }) => /* @__PURE__ */ n(
952
968
  "svg",
953
969
  {
954
970
  xmlns: "http://www.w3.org/2000/svg",