@starasia/dropdown 3.2.0 → 3.4.0

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 (6) hide show
  1. package/dist/dropdown.es.js +329 -309
  2. package/dist/dropdown.umd.js +111 -93
  3. package/dist/index.d.ts +0 -1
  4. package/dist/interface.d.ts +9 -8
  5. package/package.json +6 -6
  6. package/dist/SelectField.d.ts +0 -3
package/dist/dropdown.es.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsxs as p, jsx as n, Fragment as G } from "react/jsx-runtime";
2
- import J, { useState as O, useRef as L, useEffect as x, forwardRef as Y } from "react";
3
- const _ = `@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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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: 400px;
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
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 === */
@@ -500,15 +518,15 @@ const _ = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
500
518
  width: 100%;
501
519
  }
502
520
  `;
503
- function nn(e) {
504
- const [l, i] = O(e), d = L(null), o = (r) => {
505
- d.current && !d.current.contains(r.target) && i(!1);
521
+ function ln(e) {
522
+ const [p, d] = F(e), s = I(null), o = (r) => {
523
+ s.current && !s.current.contains(r.target) && d(!1);
506
524
  };
507
525
  return x(() => (document.addEventListener("click", o, !0), () => {
508
526
  document.removeEventListener("click", o, !0);
509
- }), []), { ref: d, isComponentVisible: l, setIsComponentVisible: i };
527
+ }), []), { ref: s, isComponentVisible: p, setIsComponentVisible: d };
510
528
  }
511
- const en = ({ ...e }) => /* @__PURE__ */ p(
529
+ const pn = ({ ...e }) => /* @__PURE__ */ l(
512
530
  "svg",
513
531
  {
514
532
  xmlns: "http://www.w3.org/2000/svg",
@@ -540,112 +558,111 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
540
558
  )
541
559
  ]
542
560
  }
543
- ), rn = ({ isChecked: e }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
544
- /* @__PURE__ */ p("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
- ] }), on = Y(
578
+ )
579
+ }
580
+ ), hn = dn(
564
581
  ({
565
582
  positionDropdown: e,
566
- dropdownLists: l,
567
- isComponentVisible: i,
568
- searchAble: d,
583
+ dropdownLists: p,
584
+ isComponentVisible: d,
585
+ searchAble: s,
569
586
  onSearch: o,
570
587
  value: r,
571
- handleChangeValue: c,
572
- multiSelect: u,
573
- searchValue: y,
574
- highlightedIndex: h,
575
- footer: g,
576
- groupLabel: S,
577
- onSelectAll: I
578
- }, j) => {
579
- const z = L([]);
588
+ handleChangeValue: k,
589
+ multiSelect: h,
590
+ searchValue: H,
591
+ highlightedIndex: g,
592
+ footer: A,
593
+ groupLabel: j,
594
+ onSelectAll: D
595
+ }, M) => {
596
+ const z = I([]);
580
597
  x(() => {
581
598
  var a;
582
- h >= 0 && z.current[h] && ((a = z.current[h]) == null || a.scrollIntoView({ block: "nearest" }));
583
- }, [h]);
584
- const A = d ? /* @__PURE__ */ p("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
585
- /* @__PURE__ */ n(en, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
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: [
602
+ /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
586
603
  /* @__PURE__ */ n(
587
604
  "input",
588
605
  {
589
606
  onChange: (a) => {
590
607
  o && o(a.target.value);
591
608
  },
592
- value: y,
609
+ value: H,
593
610
  autoFocus: !0,
594
611
  placeholder: "Search..."
595
612
  }
596
613
  )
597
614
  ] }) : null;
598
- return /* @__PURE__ */ n(G, { children: i ? /* @__PURE__ */ p(
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: j,
620
+ ref: M,
604
621
  children: [
605
- e !== "top" && A,
606
- /* @__PURE__ */ p(
622
+ e !== "top" && O,
623
+ /* @__PURE__ */ l(
607
624
  "div",
608
625
  {
609
- className: `sa-input-dropdwon-item-container ${u ? "multi" : ""}`,
626
+ className: `sa-input-dropdwon-item-container ${h ? "multi" : ""}`,
610
627
  children: [
611
- S && /* @__PURE__ */ p("div", { className: "sa-input-dropdown-section-header", children: [
612
- /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: S }),
613
- u && I && /* @__PURE__ */ n(
628
+ j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
629
+ /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
630
+ h && D && /* @__PURE__ */ n(
614
631
  "button",
615
632
  {
616
633
  className: "sa-input-dropdown-section-select-all",
617
634
  onClick: (a) => {
618
- a.stopPropagation(), I();
635
+ a.stopPropagation(), D();
619
636
  },
620
637
  children: "Select all"
621
638
  }
622
639
  )
623
640
  ] }),
624
- l.map((a, B) => {
625
- const C = !!(r != null && r.find((b) => b.value === a.value));
626
- return /* @__PURE__ */ p(
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
- C ? "active" : "",
632
- B === h ? "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: (b) => {
636
- z.current[B] = b;
653
+ ref: (R) => {
654
+ z.current[B] = R;
637
655
  },
638
- onClick: () => c(a.label, a.value),
656
+ onClick: () => k(a.label, a.value),
639
657
  children: [
640
- u && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(rn, { isChecked: C }) }),
641
- a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: J.cloneElement(a.icon, { width: 16 }) }),
642
- /* @__PURE__ */ p("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
- C ? "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 en = ({ ...e }) => /* @__PURE__ */ p(
656
673
  {
657
674
  className: [
658
675
  "sa-input-dropdwon-item-text-description",
659
- C ? "active" : "",
660
676
  a.disable ? "sa-input-dropdwon-item-disable" : ""
661
677
  ].filter(Boolean).join(" "),
662
678
  children: a.description
@@ -671,206 +687,243 @@ const en = ({ ...e }) => /* @__PURE__ */ p(
671
687
  ]
672
688
  }
673
689
  ),
674
- e === "top" && A,
675
- g && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: g })
690
+ e === "top" && O,
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
- ), an = ({
696
+ ), wn = ({
681
697
  children: e,
682
- handleChangePosition: l
698
+ handleChangePosition: p
683
699
  }) => {
684
- const i = L(null);
700
+ const d = I(null);
685
701
  x(() => {
686
- var c;
702
+ var k;
687
703
  const o = () => {
688
- if (i.current) {
689
- let u = i.current.parentElement;
690
- for (; u && !d(u); )
691
- u = u.parentElement;
692
- u && l();
704
+ if (d.current) {
705
+ let h = d.current.parentElement;
706
+ for (; h && !s(h); )
707
+ h = h.parentElement;
708
+ h && p();
693
709
  }
694
710
  };
695
- let r = (c = i.current) == null ? void 0 : c.parentElement;
696
- for (; r && !d(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 d = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
703
- return /* @__PURE__ */ n("div", { ref: i, children: e });
704
- }, V = "sa-input-dropdown-styles", tn = (e) => {
705
- if (!document.getElementById(V)) {
706
- const l = document.createElement("style");
707
- l.id = V, l.textContent = e, document.head.appendChild(l);
718
+ const s = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
719
+ return /* @__PURE__ */ n("div", { ref: d, children: e });
720
+ }, Q = "sa-input-dropdown-styles", un = (e) => {
721
+ if (!document.getElementById(Q)) {
722
+ const p = document.createElement("style");
723
+ p.id = Q, p.textContent = e, document.head.appendChild(p);
708
724
  }
709
725
  };
710
- tn(_);
711
- const K = ({
726
+ un(sn);
727
+ const mn = ({
712
728
  dropdownLists: e,
713
- onChange: l,
714
- defaultValue: i,
715
- value: d,
729
+ onChange: p,
730
+ defaultValue: d,
731
+ value: s,
716
732
  size: o = "md",
717
733
  multiSelect: r,
718
- searchAble: c,
719
- iconLeft: u,
720
- placeholder: y,
721
- onSearch: h,
722
- error: g,
723
- onBlur: S,
724
- onFocus: I,
725
- disable: j,
734
+ searchAble: k,
735
+ iconLeft: h,
736
+ placeholder: H,
737
+ onSearch: g,
738
+ error: A,
739
+ onBlur: j,
740
+ onFocus: D,
741
+ disable: M,
726
742
  searchValue: z,
727
- variant: A = "standard",
743
+ variant: O = "outline",
728
744
  footer: a,
729
745
  groupLabel: B,
730
- onSelectAll: C
746
+ onSelectAll: W,
747
+ /* field wrapper */
748
+ label: L,
749
+ labelPosition: R = "outside-top",
750
+ required: U,
751
+ optional: X,
752
+ description: y,
753
+ helperText: N,
754
+ errorText: w
731
755
  }) => {
732
- const b = d !== void 0, W = L(), [w, R] = O(
733
- b ? d || [] : i || []
734
- ), [U, q] = O(""), [v, F] = O(-1), m = L(null), { isComponentVisible: k, ref: H, setIsComponentVisible: D } = nn(!1), M = () => {
735
- D((t) => !t);
736
- }, P = (t, 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) => {
737
761
  if (r)
738
- if (w == null ? void 0 : w.find((f) => f.value === s)) {
739
- const f = w.filter((Q) => Q.value !== s);
740
- b || R(f), l(f);
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);
741
765
  } else {
742
- const f = [...w, { label: t, value: s }];
743
- b || R(f), l(f);
766
+ const u = [...c, { label: t, value: i }];
767
+ E || S(u), p(u);
744
768
  }
745
769
  else {
746
- const N = [{ label: t, value: s }];
747
- b || R(N), l(N), D(!1);
770
+ const b = [{ label: t, value: i }];
771
+ E || S(b), p(b), P(!1);
748
772
  }
749
773
  };
750
774
  x(() => {
751
- b && R(d || []);
752
- }, [d]), x(() => {
753
- b || JSON.stringify(W.current) === JSON.stringify(i) || (W.current = i, R(W.current || []));
754
- }, [i]);
755
- const X = () => w.length ? r ? w == null ? void 0 : w.map((t, s) => /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-item", children: [
775
+ E && S(s || []);
776
+ }, [s]), x(() => {
777
+ E || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, S($.current || []));
778
+ }, [d]);
779
+ const rn = () => c.length ? r ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
756
780
  /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
757
781
  /* @__PURE__ */ n(
758
- sn,
782
+ fn,
759
783
  {
760
- onClick: () => P(t.label, t.value)
784
+ onClick: (b) => {
785
+ b.stopPropagation(), K(t.label, t.value);
786
+ }
761
787
  }
762
788
  )
763
- ] }, s)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: w == null ? void 0 : w[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: y }), E = () => {
764
- if (H.current && m.current) {
765
- const t = window.innerHeight, s = H.current.getBoundingClientRect(), N = m.current.getBoundingClientRect(), f = s.bottom + N.height;
766
- m.current.style.left = `${s.left}px`, m.current.style.width = `${s.width}px`, f >= t - 10 ? (m.current.style.top = `${s.top - N.height - 5}px`, q("top")) : (m.current.style.top = `${s.top + s.height + 4}px`, q("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"));
767
793
  }
768
794
  };
769
- x(() => (window.addEventListener("scroll", E), window.addEventListener("resize", E), () => {
770
- window.removeEventListener("scroll", E), window.removeEventListener("resize", E);
795
+ x(() => (window.addEventListener("scroll", C), window.addEventListener("resize", C), () => {
796
+ window.removeEventListener("scroll", C), window.removeEventListener("resize", C);
771
797
  }), []), x(() => {
772
- E();
773
- }, [k]), x(() => {
774
- k || F(-1);
775
- }, [k]);
776
- const Z = (t) => {
777
- if (!k) {
778
- (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), D(!0));
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));
779
805
  return;
780
806
  }
781
807
  switch (t.key) {
782
808
  case "ArrowDown": {
783
809
  t.preventDefault();
784
- const s = T(e, v, 1);
785
- s !== -1 && F(s);
810
+ const i = Y(e, f, 1);
811
+ i !== -1 && V(i);
786
812
  break;
787
813
  }
788
814
  case "ArrowUp": {
789
815
  t.preventDefault();
790
- const s = T(e, v, -1);
791
- s !== -1 && F(s);
816
+ const i = Y(e, f, -1);
817
+ i !== -1 && V(i);
792
818
  break;
793
819
  }
794
820
  case "Enter": {
795
- t.preventDefault(), v >= 0 && e[v] && !e[v].disable && P(
796
- e[v].label,
797
- e[v].value
821
+ t.preventDefault(), f >= 0 && e[f] && !e[f].disable && K(
822
+ e[f].label,
823
+ e[f].value
798
824
  );
799
825
  break;
800
826
  }
801
- case "Escape": {
802
- D(!1);
827
+ case "Escape":
828
+ P(!1);
803
829
  break;
804
- }
805
830
  }
806
- }, $ = dn(o);
807
- return /* @__PURE__ */ n(an, { handleChangePosition: E, children: /* @__PURE__ */ p(
831
+ }, G = o === "lg" || o === "xl" ? 20 : 16, J = /* @__PURE__ */ n(wn, { handleChangePosition: C, children: /* @__PURE__ */ l(
808
832
  "div",
809
833
  {
810
834
  className: [
811
835
  "sa-input-dropdown-container",
812
- A,
836
+ O,
813
837
  `sa-input-dropdown-size-${o}`,
814
- k ? "active" : "",
815
- g ? "error" : "",
816
- j ? "disable" : ""
838
+ m ? "active" : "",
839
+ T ? "error" : "",
840
+ M ? "disable" : ""
817
841
  ].filter(Boolean).join(" "),
818
- ref: H,
819
- onClick: M,
820
- onKeyDown: Z,
842
+ ref: q,
843
+ onClick: en,
844
+ onKeyDown: on,
821
845
  tabIndex: 0,
822
- onBlur: S,
823
- onFocus: I,
846
+ onBlur: j,
847
+ onFocus: D,
824
848
  children: [
825
- /* @__PURE__ */ p("div", { className: "sa-input-dropdown-preview-container", children: [
826
- u ? /* @__PURE__ */ n(G, { children: J.cloneElement(u, {
827
- width: $,
828
- color: "var(--sa-dropdown-placeholder)",
829
- style: { color: "var(--sa-dropdown-placeholder)" }
830
- }) }) : null,
831
- /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: X() }),
832
- k ? /* @__PURE__ */ n(pn, { width: $ }) : /* @__PURE__ */ n(ln, { width: $ })
849
+ /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
850
+ h ? _.cloneElement(h, {
851
+ width: G,
852
+ style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
853
+ }) : null,
854
+ /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: rn() }),
855
+ m ? /* @__PURE__ */ n(xn, { width: G }) : /* @__PURE__ */ n(bn, { width: G })
833
856
  ] }),
834
857
  /* @__PURE__ */ n(
835
- on,
858
+ hn,
836
859
  {
837
860
  dropdownLists: e,
838
- handleChangeValue: P,
839
- isComponentVisible: k,
840
- positionDropdown: U,
841
- searchAble: !!c,
842
- value: w,
843
- onSearch: h,
844
- ref: m,
861
+ handleChangeValue: K,
862
+ isComponentVisible: m,
863
+ positionDropdown: nn,
864
+ searchAble: !!k,
865
+ value: c,
866
+ onSearch: g,
867
+ ref: v,
845
868
  multiSelect: r,
846
869
  searchValue: z,
847
- highlightedIndex: v,
870
+ highlightedIndex: f,
848
871
  footer: a,
849
872
  groupLabel: B,
850
- onSelectAll: C
873
+ onSelectAll: W
851
874
  }
852
875
  )
853
876
  ]
854
877
  }
855
878
  ) });
856
- }, T = (e, l, i) => {
857
- const d = e.length;
858
- let o = l + i;
859
- for (; o >= 0 && o < d; ) {
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: "*" })
885
+ ] }),
886
+ y && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: y })
887
+ ] }),
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 })
892
+ ] })
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: "*" })
898
+ ] }),
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 })
908
+ ] });
909
+ }, Y = (e, p, d) => {
910
+ const s = e.length;
911
+ let o = p + d;
912
+ for (; o >= 0 && o < s; ) {
860
913
  if (!e[o].disable)
861
914
  return o;
862
- o += i;
915
+ o += d;
863
916
  }
864
- if (i === 1) {
865
- for (let r = 0; r < d; r++)
917
+ if (d === 1) {
918
+ for (let r = 0; r < s; r++)
866
919
  if (!e[r].disable)
867
920
  return r;
868
921
  } else
869
- for (let r = d - 1; r >= 0; r--)
922
+ for (let r = s - 1; r >= 0; r--)
870
923
  if (!e[r].disable)
871
924
  return r;
872
925
  return -1;
873
- }, dn = (e) => e === "lg" || e === "xl" ? 20 : 16, sn = (e) => /* @__PURE__ */ n(
926
+ }, fn = (e) => /* @__PURE__ */ n(
874
927
  "svg",
875
928
  {
876
929
  xmlns: "http://www.w3.org/2000/svg",
@@ -878,6 +931,7 @@ const K = ({
878
931
  height: "14",
879
932
  viewBox: "0 0 18 18",
880
933
  fill: "none",
934
+ style: { flexShrink: 0, cursor: "pointer" },
881
935
  ...e,
882
936
  children: /* @__PURE__ */ n(
883
937
  "path",
@@ -890,7 +944,7 @@ const K = ({
890
944
  }
891
945
  )
892
946
  }
893
- ), ln = ({ width: e = 16 }) => /* @__PURE__ */ n(
947
+ ), bn = ({ width: e = 16 }) => /* @__PURE__ */ n(
894
948
  "svg",
895
949
  {
896
950
  xmlns: "http://www.w3.org/2000/svg",
@@ -910,7 +964,7 @@ const K = ({
910
964
  }
911
965
  )
912
966
  }
913
- ), pn = ({ width: e = 16 }) => /* @__PURE__ */ n(
967
+ ), xn = ({ width: e = 16 }) => /* @__PURE__ */ n(
914
968
  "svg",
915
969
  {
916
970
  xmlns: "http://www.w3.org/2000/svg",
@@ -930,41 +984,7 @@ const K = ({
930
984
  }
931
985
  )
932
986
  }
933
- ), wn = ({
934
- label: e,
935
- labelPosition: l = "top",
936
- required: i,
937
- optional: d,
938
- helperText: o,
939
- helperTextTop: r,
940
- errorMessage: c,
941
- error: u,
942
- ...y
943
- }) => {
944
- const h = u || !!c, g = e ? /* @__PURE__ */ p("div", { className: "sa-select-field-label-row", children: [
945
- /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: e }),
946
- d && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
947
- i && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
948
- ] }) : null;
949
- return l === "left" ? /* @__PURE__ */ p("div", { className: "sa-select-field sa-select-field-left", children: [
950
- /* @__PURE__ */ p("div", { className: "sa-select-field-left-label", children: [
951
- g,
952
- r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r })
953
- ] }),
954
- /* @__PURE__ */ p("div", { className: "sa-select-field-input-wrap", children: [
955
- /* @__PURE__ */ n(K, { ...y, error: h }),
956
- o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
957
- c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
958
- ] })
959
- ] }) : /* @__PURE__ */ p("div", { className: "sa-select-field", children: [
960
- g,
961
- r && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: r }),
962
- /* @__PURE__ */ n(K, { ...y, error: h }),
963
- o && !c && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: o }),
964
- c && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: c })
965
- ] });
966
- };
987
+ );
967
988
  export {
968
- K as Dropdown,
969
- wn as SelectField
989
+ mn as Dropdown
970
990
  };