@aristobyte-ui/dropdown 1.0.30 → 1.0.32
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.
- package/dist/index.css +53 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +133 -68
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +132 -67
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.css
CHANGED
|
@@ -1,23 +1,57 @@
|
|
|
1
1
|
/* components/DropdownOption/DropdownOption.module.scss */
|
|
2
2
|
.DropdownOption_module_dropdown-option {
|
|
3
|
+
align-items: center;
|
|
3
4
|
border-radius: 8px;
|
|
4
5
|
color: #ffffff;
|
|
6
|
+
display: flex;
|
|
5
7
|
font-size: 14px;
|
|
6
8
|
font-weight: 500;
|
|
9
|
+
gap: 10px;
|
|
7
10
|
padding: 10px 16px;
|
|
8
11
|
text-align: left;
|
|
9
12
|
transition: all 120ms ease-out;
|
|
10
13
|
width: 100%;
|
|
11
14
|
}
|
|
12
|
-
.DropdownOption_module_dropdown-option:hover {
|
|
15
|
+
.DropdownOption_module_dropdown-option-variant--default:hover {
|
|
13
16
|
background-color: #111827;
|
|
14
17
|
}
|
|
18
|
+
.DropdownOption_module_dropdown-option-variant--primary:hover {
|
|
19
|
+
background-color: #1d4ed8;
|
|
20
|
+
}
|
|
21
|
+
.DropdownOption_module_dropdown-option-variant--secondary:hover {
|
|
22
|
+
background-color: #4338ca;
|
|
23
|
+
}
|
|
24
|
+
.DropdownOption_module_dropdown-option-variant--warning:hover {
|
|
25
|
+
background-color: #b45309;
|
|
26
|
+
}
|
|
27
|
+
.DropdownOption_module_dropdown-option-variant--error:hover {
|
|
28
|
+
background-color: #b91c1c;
|
|
29
|
+
}
|
|
30
|
+
.DropdownOption_module_dropdown-option-variant--success:hover {
|
|
31
|
+
background-color: #15803d;
|
|
32
|
+
}
|
|
33
|
+
.DropdownOption_module_dropdown-option--disabled,
|
|
34
|
+
.DropdownOption_module_dropdown-option--disabled:hover {
|
|
35
|
+
background-color: rgba(31, 41, 55, 0.5);
|
|
36
|
+
cursor: auto;
|
|
37
|
+
opacity: 0.5;
|
|
38
|
+
}
|
|
15
39
|
.DropdownOption_module_dropdown-option__title {
|
|
16
40
|
color: #ffffff;
|
|
17
41
|
}
|
|
18
42
|
.DropdownOption_module_dropdown-option__description {
|
|
19
43
|
color: rgba(255, 255, 255, 0.6);
|
|
20
44
|
}
|
|
45
|
+
.DropdownOption_module_dropdown-option__tick {
|
|
46
|
+
color: rgba(255, 255, 255, 0.6);
|
|
47
|
+
opacity: 0;
|
|
48
|
+
transform: scale(0, 0.7) translate(0, 10px);
|
|
49
|
+
transition: all 120ms ease-out;
|
|
50
|
+
}
|
|
51
|
+
.DropdownOption_module_dropdown-option__tick--active {
|
|
52
|
+
opacity: 1;
|
|
53
|
+
transform: scale(1) translate(0);
|
|
54
|
+
}
|
|
21
55
|
|
|
22
56
|
/* components/Dropdown/Dropdown.module.scss */
|
|
23
57
|
.Dropdown_module_dropdown {
|
|
@@ -26,6 +60,24 @@
|
|
|
26
60
|
.Dropdown_module_dropdown__button {
|
|
27
61
|
width: max-content;
|
|
28
62
|
}
|
|
63
|
+
.Dropdown_module_dropdown__box-variant--default .Dropdown_module_dropdown__box-options {
|
|
64
|
+
background-color: #1f2937;
|
|
65
|
+
}
|
|
66
|
+
.Dropdown_module_dropdown__box-variant--primary .Dropdown_module_dropdown__box-options {
|
|
67
|
+
background-color: #2563eb;
|
|
68
|
+
}
|
|
69
|
+
.Dropdown_module_dropdown__box-variant--secondary .Dropdown_module_dropdown__box-options {
|
|
70
|
+
background-color: #4f46e5;
|
|
71
|
+
}
|
|
72
|
+
.Dropdown_module_dropdown__box-variant--warning .Dropdown_module_dropdown__box-options {
|
|
73
|
+
background-color: #d97706;
|
|
74
|
+
}
|
|
75
|
+
.Dropdown_module_dropdown__box-variant--error .Dropdown_module_dropdown__box-options {
|
|
76
|
+
background-color: #dc2626;
|
|
77
|
+
}
|
|
78
|
+
.Dropdown_module_dropdown__box-variant--success .Dropdown_module_dropdown__box-options {
|
|
79
|
+
background-color: #16a34a;
|
|
80
|
+
}
|
|
29
81
|
.Dropdown_module_dropdown__box-overlay {
|
|
30
82
|
backdrop-filter: blur(12px);
|
|
31
83
|
height: 100%;
|
|
@@ -37,7 +89,6 @@
|
|
|
37
89
|
}
|
|
38
90
|
.Dropdown_module_dropdown__box-options {
|
|
39
91
|
align-items: flex-start;
|
|
40
|
-
background-color: #1f2937;
|
|
41
92
|
border-radius: 8px;
|
|
42
93
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);
|
|
43
94
|
display: flex;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../components/DropdownOption.module.scss","../../node_modules/@aristobyte-ui/utils/styles/_settings.scss","../components/Dropdown.module.scss","../../node_modules/@aristobyte-ui/utils/styles/_settings.scss"],"sourcesContent":["@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.dropdown-option {\n border-radius: 8px; //TODO: change to dynamic\n color: $white;\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n\n &:hover {\n background-color: $color-default-hover;\n }\n\n &__title {\n color: $white;\n }\n\n &__description {\n color: rgba($white, 0.6);\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows === //\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n","@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.dropdown {\n width: max-content;\n\n &__button {\n width: max-content;\n }\n\n &__box {\n &-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n }\n\n &-options {\n align-items: flex-start;\n background-color: $color-default;\n border-radius: 8px; //TODO: change to dynamic\n box-shadow:\n 0 4px 6px rgba(0, 0, 0, 0.04),\n 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition:\n transform 200ms $cubic-bezier-secondary,\n opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n }\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows === //\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";AAEA,CAAAA;AACE,iBAAA;AACA,SCGM;ADFN,aAAA;AACA,eAAA;AACA,WAAA,KAAA;AACA,cAAA;AACA,cAAA,IAAA,MAAA;AACA,SAAA;;AAEA,CAVFA,qCAUE;AACE,oBC8BO;;AD3BT,CAAAC;AACE,SCVI;;ADaN,CAAAC;AACE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AEnBJ,CAAAC;AACE,SAAA;;AAEA,CAAAC;AACE,SAAA;;AAIA,CAAAC;AACE,mBAAA,KAAA;AACA,UAAA;AACA,QAAA;AACA,YAAA;AACA,OAAA;AACA,SAAA;AACA,WAAA;;AAGF,CAAAC;AACE,eAAA;AACA,oBCoBK;ADnBL,iBAAA;AACA,cACE,EAAA,IAAA,IAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,KAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AAEF,WAAA;AACA,kBAAA;AACA,WAAA;AACA,aAAA;AACA,WAAA;AACA,YAAA;AACA,cACE,UAAA,MAAA,aAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,MAAA;AAEF,SAAA;AACA,WAAA;;","names":["dropdown-option","dropdown-option__title","dropdown-option__description","dropdown","dropdown__button","dropdown__box-overlay","dropdown__box-options"]}
|
|
1
|
+
{"version":3,"sources":["../components/DropdownOption.module.scss","../../../../node_modules/@aristobyte-ui/utils/styles/_settings.scss","../components/Dropdown.module.scss","../../../../node_modules/@aristobyte-ui/utils/styles/_settings.scss"],"sourcesContent":["@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.dropdown-option {\n align-items: center;\n border-radius: 8px; //TODO: change to dynamic\n color: $white;\n display: flex;\n font-size: 14px;\n font-weight: 500;\n gap: 10px;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n\n &-variant {\n &--default:hover {\n background-color: $color-default-hover;\n }\n\n &--primary:hover {\n background-color: $color-primary-hover;\n }\n\n &--secondary:hover {\n background-color: $color-secondary-hover;\n }\n\n &--warning:hover {\n background-color: $color-warning-hover;\n }\n\n &--error:hover {\n background-color: $color-error-hover;\n }\n\n &--success:hover {\n background-color: $color-success-hover;\n }\n }\n\n &--disabled,\n &--disabled:hover {\n background-color: $color-default-disabled;\n cursor: auto;\n opacity: 0.5;\n }\n\n &__title {\n color: $white;\n }\n\n &__description {\n color: rgba($white, 0.6);\n }\n\n &__tick {\n color: rgba($white, 0.6);\n opacity: 0;\n transform: scale(0, 0.7) translate(0, 10px);\n transition: all 120ms ease-out;\n\n &--active {\n opacity: 1;\n transform: scale(1) translate(0);\n }\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows === //\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n","@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.dropdown {\n width: max-content;\n\n &__button {\n width: max-content;\n }\n\n &__box {\n &-variant--default &-options {\n background-color: $color-default;\n }\n\n &-variant--primary &-options {\n background-color: $color-primary;\n }\n\n &-variant--secondary &-options {\n background-color: $color-secondary;\n }\n\n &-variant--warning &-options {\n background-color: $color-warning;\n }\n\n &-variant--error &-options {\n background-color: $color-error;\n }\n\n &-variant--success &-options {\n background-color: $color-success;\n }\n\n &-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n }\n\n &-options {\n align-items: flex-start;\n border-radius: 8px; //TODO: change to dynamic\n box-shadow:\n 0 4px 6px rgba(0, 0, 0, 0.04),\n 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition:\n transform 200ms $cubic-bezier-secondary,\n opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n }\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows === //\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";AAEA,CAAAA;AACE,eAAA;AACA,iBAAA;AACA,SCEM;ADDN,WAAA;AACA,aAAA;AACA,eAAA;AACA,OAAA;AACA,WAAA,KAAA;AACA,cAAA;AACA,cAAA,IAAA,MAAA;AACA,SAAA;;AAGE,CAAAC,sDAAA;AACE,oBC0BK;;ADvBP,CAAAC,sDAAA;AACE,oBCgCK;;AD7BP,CAAAC,wDAAA;AACE,oBCwCO;;ADrCT,CAAAC,sDAAA;AACE,oBCkEM;;AD/DR,CAAAC,oDAAA;AACE,oBC0CI;;ADvCN,CAAAC,sDAAA;AACE,oBCgDM;;AD5CV,CAAAC;AAAA,CAAAA,+CAAA;AAEE,oBCyDqB,KAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;ADxDrB,UAAA;AACA,WAAA;;AAGF,CAAAC;AACE,SC1CI;;AD6CN,CAAAC;AACE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AAGF,CAAAC;AACE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AACA,WAAA;AACA,aAAA,MAAA,CAAA,EAAA,KAAA,UAAA,CAAA,EAAA;AACA,cAAA,IAAA,MAAA;;AAEA,CAAAC;AACE,WAAA;AACA,aAAA,MAAA,GAAA,UAAA;;;;AE9DN,CAAAC;AACE,SAAA;;AAEA,CAAAC;AACE,SAAA;;AAIA,CAAAC,+CAAA,CAAAC;AACE,oBC+BK;;AD5BP,CAAAC,+CAAA,CAJAD;AAKE,oBCqCK;;ADlCP,CAAAE,iDAAA,CARAF;AASE,oBC6CO;;AD1CT,CAAAG,+CAAA,CAZAH;AAaE,oBCuEM;;ADpER,CAAAI,6CAAA,CAhBAJ;AAiBE,oBC+CI;;AD5CN,CAAAK,+CAAA,CApBAL;AAqBE,oBCqDM;;ADlDR,CAAAM;AACE,mBAAA,KAAA;AACA,UAAA;AACA,QAAA;AACA,YAAA;AACA,OAAA;AACA,SAAA;AACA,WAAA;;AAGF,CAlCAN;AAmCE,eAAA;AACA,iBAAA;AACA,cACE,EAAA,IAAA,IAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,KAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AAEF,WAAA;AACA,kBAAA;AACA,WAAA;AACA,aAAA;AACA,WAAA;AACA,YAAA;AACA,cACE,UAAA,MAAA,aAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,MAAA;AAEF,SAAA;AACA,WAAA;;","names":["dropdown-option","dropdown-option-variant--default","dropdown-option-variant--primary","dropdown-option-variant--secondary","dropdown-option-variant--warning","dropdown-option-variant--error","dropdown-option-variant--success","dropdown-option--disabled","dropdown-option__title","dropdown-option__description","dropdown-option__tick","dropdown-option__tick--active","dropdown","dropdown__button","dropdown__box-variant--default","dropdown__box-options","dropdown__box-variant--primary","dropdown__box-variant--secondary","dropdown__box-variant--warning","dropdown__box-variant--error","dropdown__box-variant--success","dropdown__box-overlay"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,22 +1,29 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { IButton } from '@aristobyte-ui/button';
|
|
2
3
|
|
|
3
4
|
interface IDropdownOption {
|
|
5
|
+
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
6
|
+
appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
|
|
4
7
|
children: string;
|
|
5
8
|
value: string;
|
|
6
9
|
onChange?: () => void;
|
|
7
|
-
|
|
10
|
+
selectedValues?: string[];
|
|
8
11
|
description?: string;
|
|
9
12
|
icon?: string;
|
|
10
13
|
disabled?: boolean;
|
|
14
|
+
choice?: "multiple" | "single";
|
|
11
15
|
}
|
|
12
16
|
declare const DropdownOption: React.FC<IDropdownOption>;
|
|
13
17
|
|
|
14
18
|
interface IDropdown {
|
|
15
19
|
children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
|
|
16
20
|
value: string;
|
|
21
|
+
button?: Omit<IButton, "children" | "dangerouslySetInnerHTML">;
|
|
22
|
+
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
17
23
|
appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
|
|
18
24
|
onChange?: (newValue: string) => void;
|
|
19
25
|
initiallyOpened?: boolean;
|
|
26
|
+
choice?: "multiple" | "single";
|
|
20
27
|
placeholder?: string;
|
|
21
28
|
disabled?: boolean;
|
|
22
29
|
className?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,22 +1,29 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { IButton } from '@aristobyte-ui/button';
|
|
2
3
|
|
|
3
4
|
interface IDropdownOption {
|
|
5
|
+
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
6
|
+
appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
|
|
4
7
|
children: string;
|
|
5
8
|
value: string;
|
|
6
9
|
onChange?: () => void;
|
|
7
|
-
|
|
10
|
+
selectedValues?: string[];
|
|
8
11
|
description?: string;
|
|
9
12
|
icon?: string;
|
|
10
13
|
disabled?: boolean;
|
|
14
|
+
choice?: "multiple" | "single";
|
|
11
15
|
}
|
|
12
16
|
declare const DropdownOption: React.FC<IDropdownOption>;
|
|
13
17
|
|
|
14
18
|
interface IDropdown {
|
|
15
19
|
children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
|
|
16
20
|
value: string;
|
|
21
|
+
button?: Omit<IButton, "children" | "dangerouslySetInnerHTML">;
|
|
22
|
+
variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
|
|
17
23
|
appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
|
|
18
24
|
onChange?: (newValue: string) => void;
|
|
19
25
|
initiallyOpened?: boolean;
|
|
26
|
+
choice?: "multiple" | "single";
|
|
20
27
|
placeholder?: string;
|
|
21
28
|
disabled?: boolean;
|
|
22
29
|
className?: string;
|
package/dist/index.js
CHANGED
|
@@ -38,43 +38,82 @@ __export(index_exports, {
|
|
|
38
38
|
module.exports = __toCommonJS(index_exports);
|
|
39
39
|
|
|
40
40
|
// components/Dropdown/index.tsx
|
|
41
|
-
var
|
|
41
|
+
var React2 = __toESM(require("react"));
|
|
42
42
|
var import_framer_motion = require("framer-motion");
|
|
43
43
|
|
|
44
|
+
// components/DropdownOption/index.tsx
|
|
45
|
+
var React = __toESM(require("react"));
|
|
46
|
+
|
|
44
47
|
// components/DropdownOption/DropdownOption.module.scss
|
|
45
48
|
var DropdownOption_module_default = {
|
|
46
49
|
"dropdown-option": "DropdownOption_module_dropdown-option",
|
|
50
|
+
"dropdown-option-variant--default": "DropdownOption_module_dropdown-option-variant--default",
|
|
51
|
+
"dropdown-option-variant--primary": "DropdownOption_module_dropdown-option-variant--primary",
|
|
52
|
+
"dropdown-option-variant--secondary": "DropdownOption_module_dropdown-option-variant--secondary",
|
|
53
|
+
"dropdown-option-variant--warning": "DropdownOption_module_dropdown-option-variant--warning",
|
|
54
|
+
"dropdown-option-variant--error": "DropdownOption_module_dropdown-option-variant--error",
|
|
55
|
+
"dropdown-option-variant--success": "DropdownOption_module_dropdown-option-variant--success",
|
|
56
|
+
"dropdown-option--disabled": "DropdownOption_module_dropdown-option--disabled",
|
|
47
57
|
"dropdown-option__title": "DropdownOption_module_dropdown-option__title",
|
|
48
|
-
"dropdown-option__description": "DropdownOption_module_dropdown-option__description"
|
|
58
|
+
"dropdown-option__description": "DropdownOption_module_dropdown-option__description",
|
|
59
|
+
"dropdown-option__tick": "DropdownOption_module_dropdown-option__tick",
|
|
60
|
+
"dropdown-option__tick--active": "DropdownOption_module_dropdown-option__tick--active"
|
|
49
61
|
};
|
|
50
62
|
|
|
51
63
|
// components/DropdownOption/index.tsx
|
|
64
|
+
var import_utils = require("@aristobyte-ui/utils");
|
|
52
65
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
53
66
|
var DropdownOption = ({
|
|
67
|
+
variant,
|
|
54
68
|
children,
|
|
55
|
-
|
|
56
|
-
|
|
69
|
+
value,
|
|
70
|
+
selectedValues,
|
|
57
71
|
onChange,
|
|
58
72
|
// icon,
|
|
59
|
-
description
|
|
60
|
-
|
|
73
|
+
description,
|
|
74
|
+
disabled
|
|
61
75
|
}) => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
76
|
+
const uniqueId = React.useId();
|
|
77
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
78
|
+
"button",
|
|
79
|
+
{
|
|
80
|
+
disabled,
|
|
81
|
+
className: `${DropdownOption_module_default["dropdown-option"]} ${DropdownOption_module_default[`dropdown-option-variant--${variant}`]} ${disabled ? DropdownOption_module_default["dropdown-option--disabled"] : ""}`,
|
|
82
|
+
onClick: onChange,
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DropdownOption_module_default["dropdown-option__content"], children: [
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: DropdownOption_module_default["dropdown-option__title"], children }),
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: DropdownOption_module_default["dropdown-option__description"], children: description })
|
|
87
|
+
] }),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
className: `${DropdownOption_module_default["dropdown-option__tick"]} ${(selectedValues == null ? void 0 : selectedValues.includes(value)) ? DropdownOption_module_default["dropdown-option__tick--active"] : ""}`,
|
|
92
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.Icons.Success, { size: 18 })
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
uniqueId
|
|
98
|
+
);
|
|
66
99
|
};
|
|
67
100
|
|
|
68
101
|
// components/Dropdown/index.tsx
|
|
69
102
|
var import_button = require("@aristobyte-ui/button");
|
|
70
|
-
var
|
|
103
|
+
var import_utils2 = require("@aristobyte-ui/utils");
|
|
71
104
|
|
|
72
105
|
// components/Dropdown/Dropdown.module.scss
|
|
73
106
|
var Dropdown_module_default = {
|
|
74
107
|
dropdown: "Dropdown_module_dropdown",
|
|
75
108
|
dropdown__button: "Dropdown_module_dropdown__button",
|
|
76
|
-
"dropdown__box-
|
|
77
|
-
"dropdown__box-options": "Dropdown_module_dropdown__box-options"
|
|
109
|
+
"dropdown__box-variant--default": "Dropdown_module_dropdown__box-variant--default",
|
|
110
|
+
"dropdown__box-options": "Dropdown_module_dropdown__box-options",
|
|
111
|
+
"dropdown__box-variant--primary": "Dropdown_module_dropdown__box-variant--primary",
|
|
112
|
+
"dropdown__box-variant--secondary": "Dropdown_module_dropdown__box-variant--secondary",
|
|
113
|
+
"dropdown__box-variant--warning": "Dropdown_module_dropdown__box-variant--warning",
|
|
114
|
+
"dropdown__box-variant--error": "Dropdown_module_dropdown__box-variant--error",
|
|
115
|
+
"dropdown__box-variant--success": "Dropdown_module_dropdown__box-variant--success",
|
|
116
|
+
"dropdown__box-overlay": "Dropdown_module_dropdown__box-overlay"
|
|
78
117
|
};
|
|
79
118
|
|
|
80
119
|
// components/Dropdown/index.tsx
|
|
@@ -85,24 +124,29 @@ var Dropdown = ({
|
|
|
85
124
|
value,
|
|
86
125
|
onChange,
|
|
87
126
|
appearance = "outline",
|
|
127
|
+
variant = "default",
|
|
88
128
|
placeholder = "Select",
|
|
129
|
+
choice = "single",
|
|
89
130
|
className = "",
|
|
90
131
|
initiallyOpened = false,
|
|
91
|
-
disabled = false
|
|
132
|
+
disabled = false,
|
|
133
|
+
button = {}
|
|
92
134
|
}) => {
|
|
93
|
-
const [isOpened, setIsOpened] =
|
|
94
|
-
const [selected, setSelected] =
|
|
95
|
-
|
|
135
|
+
const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
|
|
136
|
+
const [selected, setSelected] = React2.useState(
|
|
137
|
+
value ? [value] : []
|
|
138
|
+
);
|
|
139
|
+
const [position, setPosition] = React2.useState({
|
|
96
140
|
top: 0,
|
|
97
141
|
left: 0,
|
|
98
142
|
width: 0
|
|
99
143
|
});
|
|
100
|
-
const [dropdownHeight, setDropdownHeight] =
|
|
101
|
-
const [buttonHeight, setButtonHeight] =
|
|
102
|
-
const buttonRef =
|
|
103
|
-
const boxRef =
|
|
104
|
-
const uniqueId =
|
|
105
|
-
|
|
144
|
+
const [dropdownHeight, setDropdownHeight] = React2.useState(0);
|
|
145
|
+
const [buttonHeight, setButtonHeight] = React2.useState(0);
|
|
146
|
+
const buttonRef = React2.useRef(null);
|
|
147
|
+
const boxRef = React2.useRef(null);
|
|
148
|
+
const uniqueId = React2.useId();
|
|
149
|
+
React2.useLayoutEffect(() => {
|
|
106
150
|
if (!isOpened) {
|
|
107
151
|
return;
|
|
108
152
|
}
|
|
@@ -113,18 +157,29 @@ var Dropdown = ({
|
|
|
113
157
|
setButtonHeight(buttonRef.current.getBoundingClientRect().height);
|
|
114
158
|
}
|
|
115
159
|
}, [isOpened]);
|
|
116
|
-
const options =
|
|
117
|
-
(child) =>
|
|
160
|
+
const options = React2.Children.toArray(children).filter(
|
|
161
|
+
(child) => React2.isValidElement(child) && child.type === DropdownOption
|
|
118
162
|
);
|
|
119
163
|
const isValidValue = () => {
|
|
120
164
|
return !!options.find(({ props }) => props.value === value);
|
|
121
165
|
};
|
|
122
166
|
const handleChange = (currentRadioValue) => {
|
|
123
167
|
onChange == null ? void 0 : onChange(currentRadioValue);
|
|
124
|
-
|
|
125
|
-
|
|
168
|
+
if (!choice) {
|
|
169
|
+
setSelected([currentRadioValue]);
|
|
170
|
+
setIsOpened(false);
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
if (choice === "single") {
|
|
174
|
+
setSelected([currentRadioValue]);
|
|
175
|
+
}
|
|
176
|
+
if (choice === "multiple") {
|
|
177
|
+
setSelected(
|
|
178
|
+
(prev) => prev.includes(currentRadioValue) ? prev.filter((v) => v !== currentRadioValue) : [...prev, currentRadioValue]
|
|
179
|
+
);
|
|
180
|
+
}
|
|
126
181
|
};
|
|
127
|
-
const handleToggle = () => {
|
|
182
|
+
const handleToggle = (e) => {
|
|
128
183
|
var _a;
|
|
129
184
|
if (disabled) return;
|
|
130
185
|
const rect = (_a = buttonRef.current) == null ? void 0 : _a.getBoundingClientRect();
|
|
@@ -138,6 +193,7 @@ var Dropdown = ({
|
|
|
138
193
|
width: rect.width
|
|
139
194
|
};
|
|
140
195
|
setPosition(finalPosition);
|
|
196
|
+
if (button == null ? void 0 : button.onClick) button.onClick(e);
|
|
141
197
|
setIsOpened((prev) => !prev);
|
|
142
198
|
};
|
|
143
199
|
if (!isValidValue()) {
|
|
@@ -149,52 +205,61 @@ var Dropdown = ({
|
|
|
149
205
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${Dropdown_module_default["dropdown"]} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
150
206
|
import_button.Button,
|
|
151
207
|
{
|
|
152
|
-
...{ ref: buttonRef },
|
|
153
|
-
className: Dropdown_module_default["dropdown__button"],
|
|
154
|
-
appearance,
|
|
155
208
|
onClick: handleToggle,
|
|
156
|
-
|
|
209
|
+
className: `${Dropdown_module_default["dropdown__button"]} ${(button == null ? void 0 : button.className) || ""}`,
|
|
210
|
+
appearance: (button == null ? void 0 : button.appearance) || appearance,
|
|
211
|
+
variant: (button == null ? void 0 : button.variant) || variant,
|
|
212
|
+
disabled: (button == null ? void 0 : button.disabled) || disabled,
|
|
213
|
+
...{ ref: buttonRef },
|
|
157
214
|
children: placeholder
|
|
158
215
|
}
|
|
159
216
|
) }),
|
|
160
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
{
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
exit: { opacity: 0 },
|
|
168
|
-
transition: { duration: 0.3, ease: "easeIn" },
|
|
169
|
-
onClick: () => setIsOpened(false)
|
|
170
|
-
}
|
|
171
|
-
),
|
|
172
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
173
|
-
import_framer_motion.motion.div,
|
|
174
|
-
{
|
|
175
|
-
ref: boxRef,
|
|
176
|
-
className: Dropdown_module_default["dropdown__box-options"],
|
|
177
|
-
initial: { opacity: 0, y: 20, scale: 0.95 },
|
|
178
|
-
animate: { opacity: 1, y: 0, scale: 1 },
|
|
179
|
-
exit: { opacity: 0, y: 20, scale: 0.95 },
|
|
180
|
-
transition: { duration: 0.2, ease: "easeIn" },
|
|
181
|
-
style: {
|
|
182
|
-
top: position.top,
|
|
183
|
-
left: position.left,
|
|
184
|
-
width: position.width
|
|
185
|
-
},
|
|
186
|
-
children: options.map(({ props }) => /* @__PURE__ */ (0, import_react.createElement)(
|
|
187
|
-
DropdownOption,
|
|
217
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_utils2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
218
|
+
"div",
|
|
219
|
+
{
|
|
220
|
+
className: `${Dropdown_module_default["dropdown__box"]} ${Dropdown_module_default[`dropdown__box-variant--${variant}`]}`,
|
|
221
|
+
children: [
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
223
|
+
import_framer_motion.motion.div,
|
|
188
224
|
{
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
225
|
+
className: Dropdown_module_default["dropdown__box-overlay"],
|
|
226
|
+
initial: { opacity: 0 },
|
|
227
|
+
animate: { opacity: 1 },
|
|
228
|
+
exit: { opacity: 0 },
|
|
229
|
+
transition: { duration: 0.3, ease: "easeIn" },
|
|
230
|
+
onClick: () => setIsOpened(false)
|
|
193
231
|
}
|
|
194
|
-
)
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
232
|
+
),
|
|
233
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
234
|
+
import_framer_motion.motion.div,
|
|
235
|
+
{
|
|
236
|
+
ref: boxRef,
|
|
237
|
+
className: Dropdown_module_default["dropdown__box-options"],
|
|
238
|
+
initial: { opacity: 0, y: 20, scale: 0.95 },
|
|
239
|
+
animate: { opacity: 1, y: 0, scale: 1 },
|
|
240
|
+
exit: { opacity: 0, y: 20, scale: 0.95 },
|
|
241
|
+
transition: { duration: 0.2, ease: "easeIn" },
|
|
242
|
+
style: {
|
|
243
|
+
top: position.top,
|
|
244
|
+
left: position.left,
|
|
245
|
+
width: position.width
|
|
246
|
+
},
|
|
247
|
+
children: options.map(({ props }) => /* @__PURE__ */ (0, import_react.createElement)(
|
|
248
|
+
DropdownOption,
|
|
249
|
+
{
|
|
250
|
+
...props,
|
|
251
|
+
variant,
|
|
252
|
+
appearance,
|
|
253
|
+
key: `${props.value}-${uniqueId}`,
|
|
254
|
+
selectedValues: selected,
|
|
255
|
+
onChange: () => handleChange(props.value)
|
|
256
|
+
}
|
|
257
|
+
))
|
|
258
|
+
}
|
|
259
|
+
)
|
|
260
|
+
]
|
|
261
|
+
}
|
|
262
|
+
) }) })
|
|
198
263
|
] });
|
|
199
264
|
};
|
|
200
265
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../index.ts","../components/Dropdown/index.tsx","../components/DropdownOption/DropdownOption.module.scss","../components/DropdownOption/index.tsx","../components/Dropdown/Dropdown.module.scss"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\nimport styles from \"./Dropdown.module.scss\";\n\nexport interface IDropdown {\n children:\n | React.ReactElement<IDropdownOption>\n | React.ReactElement<IDropdownOption>[];\n value: string;\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n onChange?: (newValue: string) => void;\n initiallyOpened?: boolean;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\ntype PositionType = {\n top: 0;\n left: 0;\n width: 0;\n};\n\nexport const Dropdown: React.FC<IDropdown> = ({\n children,\n value,\n onChange,\n appearance = \"outline\",\n placeholder = \"Select\",\n className = \"\",\n initiallyOpened = false,\n disabled = false,\n}) => {\n const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n const [selected, setSelected] = React.useState<string>(value);\n const [position, setPosition] = React.useState<PositionType>({\n top: 0,\n left: 0,\n width: 0,\n });\n const [dropdownHeight, setDropdownHeight] = React.useState(0);\n const [buttonHeight, setButtonHeight] = React.useState(0);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const boxRef = React.useRef<HTMLDivElement>(null);\n const uniqueId = React.useId();\n\n React.useLayoutEffect(() => {\n if (!isOpened) {\n return;\n }\n\n if (boxRef.current) {\n setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n }\n\n if (buttonRef.current) {\n setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n }\n }, [isOpened]);\n\n const options = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<IDropdownOption> =>\n React.isValidElement(child) && child.type === DropdownOption\n );\n\n const isValidValue = () => {\n return !!options.find(({ props }) => props.value === value);\n };\n\n const handleChange = (currentRadioValue: string) => {\n onChange?.(currentRadioValue);\n setSelected(currentRadioValue);\n setIsOpened(false);\n };\n\n const handleToggle = () => {\n if (disabled) return;\n\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n\n const shouldOpenUpwards =\n dropdownHeight > 0 &&\n spaceBelow < dropdownHeight &&\n spaceAbove > dropdownHeight;\n\n const finalPosition = {\n top: shouldOpenUpwards\n ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n : rect.top + window.scrollY + buttonHeight + 6,\n left: rect.left + window.scrollX,\n width: rect.width,\n } as PositionType;\n\n setPosition(finalPosition);\n setIsOpened((prev) => !prev);\n };\n\n if (!isValidValue()) {\n throw new Error(\n 'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n );\n }\n\n return (\n <>\n <div className={`${styles[\"dropdown\"]} ${className}`}>\n <Button\n {...{ ref: buttonRef }}\n className={styles[\"dropdown__button\"]}\n appearance={appearance}\n onClick={handleToggle}\n disabled={disabled}\n >\n {placeholder}\n </Button>\n </div>\n\n <Portal>\n <AnimatePresence>\n {isOpened && (\n <div className={styles[\"dropdown__box\"]}>\n <motion.div\n className={styles[\"dropdown__box-overlay\"]}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, ease: \"easeIn\" }}\n onClick={() => setIsOpened(false)}\n />\n <motion.div\n ref={boxRef}\n className={styles[\"dropdown__box-options\"]}\n initial={{ opacity: 0, y: 20, scale: 0.95 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 20, scale: 0.95 }}\n transition={{ duration: 0.2, ease: \"easeIn\" }}\n style={{\n top: position.top,\n left: position.left,\n width: position.width,\n }}\n >\n {options.map(({ props }) => (\n <DropdownOption\n {...props}\n key={`${props.value}-${uniqueId}`}\n selectedValue={selected}\n onChange={() => handleChange(props.value)}\n />\n ))}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </Portal>\n </>\n );\n};\n",".dropdown-option {\n border-radius: 8px;\n color: #ffffff;\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n}\n.dropdown-option:hover {\n background-color: #111827;\n}\n.dropdown-option__title {\n color: #ffffff;\n}\n.dropdown-option__description {\n color: rgba(255, 255, 255, 0.6);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd25PcHRpb24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duT3B0aW9uLm1vZHVsZS5zY3NzIiwiLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFO0VBQ0EsT0NHTTtFREZOO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFLGtCQzhCTzs7QUQzQlQ7RUFDRSxPQ1ZJOztBRGFOO0VBQ0UiLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiQGFyaXN0b2J5dGUtdWkvdXRpbHMvc3R5bGVzL3NldHRpbmdzXCIgYXMgKjtcblxuLmRyb3Bkb3duLW9wdGlvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDhweDsgLy9UT0RPOiBjaGFuZ2UgdG8gZHluYW1pY1xuICBjb2xvcjogJHdoaXRlO1xuICBmb250LXNpemU6IDE0cHg7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIHBhZGRpbmc6IDEwcHggMTZweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgdHJhbnNpdGlvbjogYWxsIDEyMG1zIGVhc2Utb3V0O1xuICB3aWR0aDogMTAwJTtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZGVmYXVsdC1ob3ZlcjtcbiAgfVxuXG4gICZfX3RpdGxlIHtcbiAgICBjb2xvcjogJHdoaXRlO1xuICB9XG5cbiAgJl9fZGVzY3JpcHRpb24ge1xuICAgIGNvbG9yOiByZ2JhKCR3aGl0ZSwgMC42KTtcbiAgfVxufVxuIiwiLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAvL1xuLy8gICAgICAgIEFyaXN0b0J5dGUgVUkgLSBTdHlsZSBTZXR0aW5ncyAgICAgICAvL1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAvL1xuXG4vLyA9PT0gRGVzaWduIFRva2VucyDigJQgQ29sb3IgUGFsZXR0ZSA9PT0gLy9cblxuLy8gQmFzZVxuJHdoaXRlOiAjZmZmZmZmO1xuJGJsYWNrOiAjMDAwMDAwO1xuJHRyYW5zcGFyZW50OiB0cmFuc3BhcmVudDtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJGJsYWNrLXRyYW5zcGFyZW50LTEwMDogcmdiYSgwLCAwLCAwLCAwLjEpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTIwMDogcmdiYSgwLCAwLCAwLCAwLjIpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTMwMDogcmdiYSgwLCAwLCAwLCAwLjMpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTQwMDogcmdiYSgwLCAwLCAwLCAwLjQpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTUwMDogcmdiYSgwLCAwLCAwLCAwLjUpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTYwMDogcmdiYSgwLCAwLCAwLCAwLjYpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTcwMDogcmdiYSgwLCAwLCAwLCAwLjcpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTgwMDogcmdiYSgwLCAwLCAwLCAwLjgpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTkwMDogcmdiYSgwLCAwLCAwLCAwLjkpO1xuXG4vLyA9PT0gQmxhY2sgVHJhbnNwYXJlbnQgU2NhbGUgPT09IC8vXG4kd2hpdGUtdHJhbnNwYXJlbnQtMTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNDAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtODAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtOTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOSk7XG5cbi8vID09PSBOZXV0cmFsIFNjYWxlIChHcmV5KSA9PT0gLy9cbiRncmV5LTUwOiAjZjlmYWZiO1xuJGdyZXktMTAwOiAjZjNmNGY2O1xuJGdyZXktMjAwOiAjZTVlN2ViO1xuJGdyZXktMzAwOiAjZDFkNWRiO1xuJGdyZXktNDAwOiAjOWNhM2FmO1xuJGdyZXktNTAwOiAjNmI3MjgwO1xuJGdyZXktNjAwOiAjNGI1NTYzO1xuJGdyZXktNzAwOiAjMzc0MTUxO1xuJGdyZXktODAwOiAjMWYyOTM3O1xuJGdyZXktOTAwOiAjMTExODI3O1xuXG4vLyA9PT0gUHJpbWFyeSBTY2FsZSAoQmx1ZSkgPT09IC8vXG4kYmx1ZS01MDogI2VmZjZmZjtcbiRibHVlLTEwMDogI2RiZWFmZTtcbiRibHVlLTIwMDogI2JmZGJmZTtcbiRibHVlLTMwMDogIzkzYzVmZDtcbiRibHVlLTQwMDogIzYwYTVmYTtcbiRibHVlLTUwMDogIzNiODJmNjtcbiRibHVlLTYwMDogIzI1NjNlYjsgLy8gTWFpblxuJGJsdWUtNzAwOiAjMWQ0ZWQ4OyAvLyBIb3ZlclxuJGJsdWUtODAwOiAjMWU0MGFmO1xuJGJsdWUtOTAwOiAjMWUzYThhO1xuXG4vLyA9PT0gU2Vjb25kYXJ5IFNjYWxlIChJbmRpZ28pID09PSAvL1xuJGluZGlnby01MDogI2VlZjJmZjtcbiRpbmRpZ28tMTAwOiAjZTBlN2ZmO1xuJGluZGlnby0yMDA6ICNjN2QyZmU7XG4kaW5kaWdvLTMwMDogI2E1YjRmYztcbiRpbmRpZ28tNDAwOiAjODE4Y2Y4O1xuJGluZGlnby01MDA6ICM2MzY2ZjE7XG4kaW5kaWdvLTYwMDogIzRmNDZlNTsgLy8gTWFpblxuJGluZGlnby03MDA6ICM0MzM4Y2E7IC8vIEhvdmVyXG5cbi8vID09PSBFcnJvciBTY2FsZSAoUmVkKSA9PT0gLy9cbiRyZWQtNTA6ICNmZWYyZjI7XG4kcmVkLTEwMDogI2ZlZTJlMjtcbiRyZWQtMjAwOiAjZmVjYWNhO1xuJHJlZC0zMDA6ICNmY2E1YTU7XG4kcmVkLTQwMDogI2Y4NzE3MTtcbiRyZWQtNTAwOiAjZWY0NDQ0O1xuJHJlZC02MDA6ICNkYzI2MjY7IC8vIE1haW5cbiRyZWQtNzAwOiAjYjkxYzFjOyAvLyBIb3ZlclxuXG4vLyA9PT0gU3VjY2VzcyBTY2FsZSAoR3JlZW4pID09PSAvL1xuJGdyZWVuLTUwOiAjZjBmZGY0O1xuJGdyZWVuLTEwMDogI2RjZmNlNztcbiRncmVlbi0yMDA6ICNiYmY3ZDA7XG4kZ3JlZW4tMzAwOiAjODZlZmFjO1xuJGdyZWVuLTQwMDogIzRhZGU4MDtcbiRncmVlbi01MDA6ICMyMmM1NWU7XG4kZ3JlZW4tNjAwOiAjMTZhMzRhOyAvLyBNYWluXG4kZ3JlZW4tNzAwOiAjMTU4MDNkOyAvLyBIb3ZlclxuXG4vLyA9PT0gV2FybmluZyBTY2FsZSAoQW1iZXIpID09PSAvL1xuJGFtYmVyLTUwOiAjZmZmYmViO1xuJGFtYmVyLTEwMDogI2ZlZjNjNztcbiRhbWJlci0yMDA6ICNmZGU2OGE7XG4kYW1iZXItMzAwOiAjZmNkMzRkO1xuJGFtYmVyLTQwMDogI2ZiYmYyNDtcbiRhbWJlci01MDA6ICNmNTllMGI7XG4kYW1iZXItNjAwOiAjZDk3NzA2OyAvLyBNYWluXG4kYW1iZXItNzAwOiAjYjQ1MzA5OyAvLyBIb3ZlclxuXG4vLyA9PT0gU2VtYW50aWMgVG9rZW5zID09PSAvL1xuJGNvbG9yLWRlZmF1bHQ6ICRncmV5LTgwMDtcbiRjb2xvci1kZWZhdWx0LWhvdmVyOiAkZ3JleS05MDA7XG4kY29sb3ItZGVmYXVsdC1kaXNhYmxlZDogcmdiYSgkY29sb3ItZGVmYXVsdCwgMC41KTtcblxuJGNvbG9yLXByaW1hcnk6ICRibHVlLTYwMDtcbiRjb2xvci1wcmltYXJ5LWhvdmVyOiAkYmx1ZS03MDA7XG4kY29sb3ItcHJpbWFyeS1kaXNhYmxlZDogcmdiYSgkY29sb3ItcHJpbWFyeSwgMC41KTtcblxuJGNvbG9yLXNlY29uZGFyeTogJGluZGlnby02MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWhvdmVyOiAkaW5kaWdvLTcwMDtcbiRjb2xvci1zZWNvbmRhcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXNlY29uZGFyeSwgMC41KTtcblxuJGNvbG9yLWVycm9yOiAkcmVkLTYwMDtcbiRjb2xvci1lcnJvci1ob3ZlcjogJHJlZC03MDA7XG4kY29sb3ItZXJyb3ItZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWVycm9yLCAwLjUpO1xuXG4kY29sb3Itc3VjY2VzczogJGdyZWVuLTYwMDtcbiRjb2xvci1zdWNjZXNzLWhvdmVyOiAkZ3JlZW4tNzAwO1xuJGNvbG9yLXN1Y2Nlc3MtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXN1Y2Nlc3MsIDAuNSk7XG5cbiRjb2xvci13YXJuaW5nOiAkYW1iZXItNjAwO1xuJGNvbG9yLXdhcm5pbmctaG92ZXI6ICRhbWJlci03MDA7XG4kY29sb3Itd2FybmluZy1kaXNhYmxlZDogcmdiYSgkY29sb3Itd2FybmluZywgMC41KTtcblxuJHRleHQtY29sb3Itd2hpdGU6ICR3aGl0ZTtcbiR0ZXh0LWNvbG9yLWJsYWNrOiAkYmxhY2s7XG4kdGV4dC1jb2xvci13aGl0ZS1kaXNhYmxlZDogcmdiYSgkd2hpdGUsIDAuNSk7XG4kdGV4dC1jb2xvci1ibGFjay1kaXNhYmxlZDogcmdiYSgkYmxhY2ssIDAuNSk7XG5cbi8vID09PSBTaGFkb3dzID09PSAvL1xuJHNoYWRvdy1zbTogMCAxcHggMnB4IDAgcmdiYSgkYmxhY2ssIDAuMDUpO1xuJHNoYWRvdy1tZDpcbiAgMCA0cHggNnB4IC0xcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgMnB4IDRweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjA2KTtcbiRzaGFkb3ctbGc6XG4gIDAgMTBweCAxNXB4IC0zcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgNHB4IDZweCAtMnB4IHJnYmEoJGJsYWNrLCAwLjA1KTtcblxuLy8gPT09IEZvbnQgZmFtaWxpZXMgPT09IC8vXG4kZm9udC1mYW1pbHktc2FuczogXCJJbnRlclwiLCBzYW5zLXNlcmlmO1xuJGZvbnQtZmFtaWx5LXNlcmlmOiBcIkdlb3JnaWFcIiwgc2VyaWY7XG4kZm9udC1mYW1pbHktbW9ubzogXCJGaXJhIENvZGVcIiwgbW9ub3NwYWNlO1xuXG4vLyA9PT0gRm9udCB3ZWlnaHRzID09PSAvL1xuJGZvbnQtd2VpZ2h0LXJlZ3VsYXI6IDQwMDtcbiRmb250LXdlaWdodC1tZWRpdW06IDUwMDtcbiRmb250LXdlaWdodC1zZW1pYm9sZDogNjAwO1xuJGZvbnQtd2VpZ2h0LWJvbGQ6IDcwMDtcblxuLy8gPT09IExpbmUgaGVpZ2h0cyA9PT0gLy9cbiRsaW5lLWhlaWdodC10aWdodDogMS4yO1xuJGxpbmUtaGVpZ2h0LXNudWc6IDEuMzc1O1xuJGxpbmUtaGVpZ2h0LW5vcm1hbDogMS41O1xuJGxpbmUtaGVpZ2h0LWxvb3NlOiAxLjYyNTtcblxuLy8gPT09IEZvbnQgU2l6ZXMg4oCUIFNlbWFudGljIFRva2VucyA9PT0gLy9cblxuLy8gPT09IFRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtaGVybzogM3JlbTsgLy8gNDhweFxuJGZvbnQtc2l6ZS10aXRsZS0xOiAyLjI1cmVtOyAvLyAzNnB4XG4kZm9udC1zaXplLXRpdGxlLTI6IDEuODc1cmVtOyAvLyAzMHB4XG4kZm9udC1zaXplLXRpdGxlLTM6IDEuNXJlbTsgLy8gMjRweFxuXG4vLyA9PT0gU3VidGl0bGVzID09PSAvL1xuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0xOiAxLjI1cmVtOyAvLyAyMHB4XG4kZm9udC1zaXplLXN1YnRpdGxlLTI6IDEuMTI1cmVtOyAvLyAxOHB4XG5cbi8vID09PSBCb2R5IHRleHQgPT09IC8vXG4kZm9udC1zaXplLWJvZHktbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYm9keS1tZDogMC45Mzc1cmVtOyAvLyAxNXB4XG4kZm9udC1zaXplLWJvZHktc206IDAuODc1cmVtOyAvLyAxNHB4XG5cbi8vID09PSBDYXB0aW9ucyAvIERlc2NyaXB0aW9ucyA9PT0gLy9cbiRmb250LXNpemUtY2FwdGlvbjogMC43NXJlbTsgLy8gMTJweFxuJGZvbnQtc2l6ZS1mb290bm90ZTogMC42ODc1cmVtOyAvLyAxMXB4XG5cbi8vID09PSBCdXR0b25zID09PSAvL1xuJGZvbnQtc2l6ZS1idXR0b24tbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYnV0dG9uLW1kOiAwLjg3NXJlbTsgLy8gMTRweFxuJGZvbnQtc2l6ZS1idXR0b24tc206IDAuNzVyZW07IC8vIDEycHhcblxuLy8gPT09IEFuaW1hdGlvbnMgPT09IC8vXG5cbiRjdWJpYy1iZXppZXItcHJpbWFyeTogY3ViaWMtYmV6aWVyKDAuNTUsIC0wLjE5LCAwLjU5LCAwLjk1KTtcbiRjdWJpYy1iZXppZXItc2Vjb25kYXJ5OiBjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxLjI3NSk7XG4iXX0= */","import * as React from \"react\";\n\nimport styles from \"./DropdownOption.module.scss\";\n\nexport interface IDropdownOption {\n children: string;\n value: string;\n onChange?: () => void;\n selectedValue?: string;\n description?: string;\n icon?: string;\n disabled?: boolean;\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n children,\n // value,\n // selectedValue,\n onChange,\n // icon,\n description,\n // disabled,\n}) => {\n // const isSelected = selectedValue === value;\n return (\n <button className={styles[\"dropdown-option\"]} onClick={onChange}>\n <div className={styles[\"dropdown-option__content\"]}>\n <h3 className={styles[\"dropdown-option__title\"]}>{children}</h3>\n <p className={styles[\"dropdown-option__description\"]}>{description}</p>\n </div>\n </button>\n );\n};\n",".dropdown {\n width: max-content;\n}\n.dropdown__button {\n width: max-content;\n}\n.dropdown__box-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n}\n.dropdown__box-options {\n align-items: flex-start;\n background-color: #1f2937;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duLm1vZHVsZS5zY3NzIiwiLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFOztBQUVBO0VBQ0U7O0FBSUE7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRjtFQUNFO0VBQ0Esa0JDb0JLO0VEbkJMO0VBQ0EsWUFDRTtFQUVGO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBLFlBQ0U7RUFFRjtFQUNBIiwic291cmNlc0NvbnRlbnQiOlsiQHVzZSBcIkBhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9zZXR0aW5nc1wiIGFzICo7XG5cbi5kcm9wZG93biB7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcblxuICAmX19idXR0b24ge1xuICAgIHdpZHRoOiBtYXgtY29udGVudDtcbiAgfVxuXG4gICZfX2JveCB7XG4gICAgJi1vdmVybGF5IHtcbiAgICAgIGJhY2tkcm9wLWZpbHRlcjogYmx1cigxMnB4KTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgICB0b3A6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHotaW5kZXg6IDk5OTk5OTk5OTk5O1xuICAgIH1cblxuICAgICYtb3B0aW9ucyB7XG4gICAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0O1xuICAgICAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gICAgICBib3gtc2hhZG93OlxuICAgICAgICAwIDRweCA2cHggcmdiYSgwLCAwLCAwLCAwLjA0KSxcbiAgICAgICAgMCAxMnB4IDI0cHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgbWluLXdpZHRoOiAzMDBweDtcbiAgICAgIHBhZGRpbmc6IDRweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIHRyYW5zZm9ybSAyMDBtcyAkY3ViaWMtYmV6aWVyLXNlY29uZGFyeSxcbiAgICAgICAgb3BhY2l0eSAxNTBtcyBlYXNlO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk5OTtcbiAgICB9XG4gIH1cbn1cbiIsIi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cbi8vICAgICAgICBBcmlzdG9CeXRlIFVJIC0gU3R5bGUgU2V0dGluZ3MgICAgICAgLy9cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cblxuLy8gPT09IERlc2lnbiBUb2tlbnMg4oCUIENvbG9yIFBhbGV0dGUgPT09IC8vXG5cbi8vIEJhc2VcbiR3aGl0ZTogI2ZmZmZmZjtcbiRibGFjazogIzAwMDAwMDtcbiR0cmFuc3BhcmVudDogdHJhbnNwYXJlbnQ7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiRibGFjay10cmFuc3BhcmVudC0xMDA6IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiRibGFjay10cmFuc3BhcmVudC0yMDA6IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiRibGFjay10cmFuc3BhcmVudC0zMDA6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiRibGFjay10cmFuc3BhcmVudC00MDA6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiRibGFjay10cmFuc3BhcmVudC01MDA6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiRibGFjay10cmFuc3BhcmVudC02MDA6IHJnYmEoMCwgMCwgMCwgMC42KTtcbiRibGFjay10cmFuc3BhcmVudC03MDA6IHJnYmEoMCwgMCwgMCwgMC43KTtcbiRibGFjay10cmFuc3BhcmVudC04MDA6IHJnYmEoMCwgMCwgMCwgMC44KTtcbiRibGFjay10cmFuc3BhcmVudC05MDA6IHJnYmEoMCwgMCwgMCwgMC45KTtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJHdoaXRlLXRyYW5zcGFyZW50LTEwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTIwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTMwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTQwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTUwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTYwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjYpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTcwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTgwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjgpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTkwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjkpO1xuXG4vLyA9PT0gTmV1dHJhbCBTY2FsZSAoR3JleSkgPT09IC8vXG4kZ3JleS01MDogI2Y5ZmFmYjtcbiRncmV5LTEwMDogI2YzZjRmNjtcbiRncmV5LTIwMDogI2U1ZTdlYjtcbiRncmV5LTMwMDogI2QxZDVkYjtcbiRncmV5LTQwMDogIzljYTNhZjtcbiRncmV5LTUwMDogIzZiNzI4MDtcbiRncmV5LTYwMDogIzRiNTU2MztcbiRncmV5LTcwMDogIzM3NDE1MTtcbiRncmV5LTgwMDogIzFmMjkzNztcbiRncmV5LTkwMDogIzExMTgyNztcblxuLy8gPT09IFByaW1hcnkgU2NhbGUgKEJsdWUpID09PSAvL1xuJGJsdWUtNTA6ICNlZmY2ZmY7XG4kYmx1ZS0xMDA6ICNkYmVhZmU7XG4kYmx1ZS0yMDA6ICNiZmRiZmU7XG4kYmx1ZS0zMDA6ICM5M2M1ZmQ7XG4kYmx1ZS00MDA6ICM2MGE1ZmE7XG4kYmx1ZS01MDA6ICMzYjgyZjY7XG4kYmx1ZS02MDA6ICMyNTYzZWI7IC8vIE1haW5cbiRibHVlLTcwMDogIzFkNGVkODsgLy8gSG92ZXJcbiRibHVlLTgwMDogIzFlNDBhZjtcbiRibHVlLTkwMDogIzFlM2E4YTtcblxuLy8gPT09IFNlY29uZGFyeSBTY2FsZSAoSW5kaWdvKSA9PT0gLy9cbiRpbmRpZ28tNTA6ICNlZWYyZmY7XG4kaW5kaWdvLTEwMDogI2UwZTdmZjtcbiRpbmRpZ28tMjAwOiAjYzdkMmZlO1xuJGluZGlnby0zMDA6ICNhNWI0ZmM7XG4kaW5kaWdvLTQwMDogIzgxOGNmODtcbiRpbmRpZ28tNTAwOiAjNjM2NmYxO1xuJGluZGlnby02MDA6ICM0ZjQ2ZTU7IC8vIE1haW5cbiRpbmRpZ28tNzAwOiAjNDMzOGNhOyAvLyBIb3ZlclxuXG4vLyA9PT0gRXJyb3IgU2NhbGUgKFJlZCkgPT09IC8vXG4kcmVkLTUwOiAjZmVmMmYyO1xuJHJlZC0xMDA6ICNmZWUyZTI7XG4kcmVkLTIwMDogI2ZlY2FjYTtcbiRyZWQtMzAwOiAjZmNhNWE1O1xuJHJlZC00MDA6ICNmODcxNzE7XG4kcmVkLTUwMDogI2VmNDQ0NDtcbiRyZWQtNjAwOiAjZGMyNjI2OyAvLyBNYWluXG4kcmVkLTcwMDogI2I5MWMxYzsgLy8gSG92ZXJcblxuLy8gPT09IFN1Y2Nlc3MgU2NhbGUgKEdyZWVuKSA9PT0gLy9cbiRncmVlbi01MDogI2YwZmRmNDtcbiRncmVlbi0xMDA6ICNkY2ZjZTc7XG4kZ3JlZW4tMjAwOiAjYmJmN2QwO1xuJGdyZWVuLTMwMDogIzg2ZWZhYztcbiRncmVlbi00MDA6ICM0YWRlODA7XG4kZ3JlZW4tNTAwOiAjMjJjNTVlO1xuJGdyZWVuLTYwMDogIzE2YTM0YTsgLy8gTWFpblxuJGdyZWVuLTcwMDogIzE1ODAzZDsgLy8gSG92ZXJcblxuLy8gPT09IFdhcm5pbmcgU2NhbGUgKEFtYmVyKSA9PT0gLy9cbiRhbWJlci01MDogI2ZmZmJlYjtcbiRhbWJlci0xMDA6ICNmZWYzYzc7XG4kYW1iZXItMjAwOiAjZmRlNjhhO1xuJGFtYmVyLTMwMDogI2ZjZDM0ZDtcbiRhbWJlci00MDA6ICNmYmJmMjQ7XG4kYW1iZXItNTAwOiAjZjU5ZTBiO1xuJGFtYmVyLTYwMDogI2Q5NzcwNjsgLy8gTWFpblxuJGFtYmVyLTcwMDogI2I0NTMwOTsgLy8gSG92ZXJcblxuLy8gPT09IFNlbWFudGljIFRva2VucyA9PT0gLy9cbiRjb2xvci1kZWZhdWx0OiAkZ3JleS04MDA7XG4kY29sb3ItZGVmYXVsdC1ob3ZlcjogJGdyZXktOTAwO1xuJGNvbG9yLWRlZmF1bHQtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWRlZmF1bHQsIDAuNSk7XG5cbiRjb2xvci1wcmltYXJ5OiAkYmx1ZS02MDA7XG4kY29sb3ItcHJpbWFyeS1ob3ZlcjogJGJsdWUtNzAwO1xuJGNvbG9yLXByaW1hcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXByaW1hcnksIDAuNSk7XG5cbiRjb2xvci1zZWNvbmRhcnk6ICRpbmRpZ28tNjAwO1xuJGNvbG9yLXNlY29uZGFyeS1ob3ZlcjogJGluZGlnby03MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1zZWNvbmRhcnksIDAuNSk7XG5cbiRjb2xvci1lcnJvcjogJHJlZC02MDA7XG4kY29sb3ItZXJyb3ItaG92ZXI6ICRyZWQtNzAwO1xuJGNvbG9yLWVycm9yLWRpc2FibGVkOiByZ2JhKCRjb2xvci1lcnJvciwgMC41KTtcblxuJGNvbG9yLXN1Y2Nlc3M6ICRncmVlbi02MDA7XG4kY29sb3Itc3VjY2Vzcy1ob3ZlcjogJGdyZWVuLTcwMDtcbiRjb2xvci1zdWNjZXNzLWRpc2FibGVkOiByZ2JhKCRjb2xvci1zdWNjZXNzLCAwLjUpO1xuXG4kY29sb3Itd2FybmluZzogJGFtYmVyLTYwMDtcbiRjb2xvci13YXJuaW5nLWhvdmVyOiAkYW1iZXItNzAwO1xuJGNvbG9yLXdhcm5pbmctZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXdhcm5pbmcsIDAuNSk7XG5cbiR0ZXh0LWNvbG9yLXdoaXRlOiAkd2hpdGU7XG4kdGV4dC1jb2xvci1ibGFjazogJGJsYWNrO1xuJHRleHQtY29sb3Itd2hpdGUtZGlzYWJsZWQ6IHJnYmEoJHdoaXRlLCAwLjUpO1xuJHRleHQtY29sb3ItYmxhY2stZGlzYWJsZWQ6IHJnYmEoJGJsYWNrLCAwLjUpO1xuXG4vLyA9PT0gU2hhZG93cyA9PT0gLy9cbiRzaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYmEoJGJsYWNrLCAwLjA1KTtcbiRzaGFkb3ctbWQ6XG4gIDAgNHB4IDZweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDJweCA0cHggLTFweCByZ2JhKCRibGFjaywgMC4wNik7XG4kc2hhZG93LWxnOlxuICAwIDEwcHggMTVweCAtM3B4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDRweCA2cHggLTJweCByZ2JhKCRibGFjaywgMC4wNSk7XG5cbi8vID09PSBGb250IGZhbWlsaWVzID09PSAvL1xuJGZvbnQtZmFtaWx5LXNhbnM6IFwiSW50ZXJcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1zZXJpZjogXCJHZW9yZ2lhXCIsIHNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IFwiRmlyYSBDb2RlXCIsIG1vbm9zcGFjZTtcblxuLy8gPT09IEZvbnQgd2VpZ2h0cyA9PT0gLy9cbiRmb250LXdlaWdodC1yZWd1bGFyOiA0MDA7XG4kZm9udC13ZWlnaHQtbWVkaXVtOiA1MDA7XG4kZm9udC13ZWlnaHQtc2VtaWJvbGQ6IDYwMDtcbiRmb250LXdlaWdodC1ib2xkOiA3MDA7XG5cbi8vID09PSBMaW5lIGhlaWdodHMgPT09IC8vXG4kbGluZS1oZWlnaHQtdGlnaHQ6IDEuMjtcbiRsaW5lLWhlaWdodC1zbnVnOiAxLjM3NTtcbiRsaW5lLWhlaWdodC1ub3JtYWw6IDEuNTtcbiRsaW5lLWhlaWdodC1sb29zZTogMS42MjU7XG5cbi8vID09PSBGb250IFNpemVzIOKAlCBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG5cbi8vID09PSBUaXRsZXMgPT09IC8vXG4kZm9udC1zaXplLWhlcm86IDNyZW07IC8vIDQ4cHhcbiRmb250LXNpemUtdGl0bGUtMTogMi4yNXJlbTsgLy8gMzZweFxuJGZvbnQtc2l6ZS10aXRsZS0yOiAxLjg3NXJlbTsgLy8gMzBweFxuJGZvbnQtc2l6ZS10aXRsZS0zOiAxLjVyZW07IC8vIDI0cHhcblxuLy8gPT09IFN1YnRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtc3VidGl0bGUtMTogMS4yNXJlbTsgLy8gMjBweFxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0yOiAxLjEyNXJlbTsgLy8gMThweFxuXG4vLyA9PT0gQm9keSB0ZXh0ID09PSAvL1xuJGZvbnQtc2l6ZS1ib2R5LWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJvZHktbWQ6IDAuOTM3NXJlbTsgLy8gMTVweFxuJGZvbnQtc2l6ZS1ib2R5LXNtOiAwLjg3NXJlbTsgLy8gMTRweFxuXG4vLyA9PT0gQ2FwdGlvbnMgLyBEZXNjcmlwdGlvbnMgPT09IC8vXG4kZm9udC1zaXplLWNhcHRpb246IDAuNzVyZW07IC8vIDEycHhcbiRmb250LXNpemUtZm9vdG5vdGU6IDAuNjg3NXJlbTsgLy8gMTFweFxuXG4vLyA9PT0gQnV0dG9ucyA9PT0gLy9cbiRmb250LXNpemUtYnV0dG9uLWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJ1dHRvbi1tZDogMC44NzVyZW07IC8vIDE0cHhcbiRmb250LXNpemUtYnV0dG9uLXNtOiAwLjc1cmVtOyAvLyAxMnB4XG5cbi8vID09PSBBbmltYXRpb25zID09PSAvL1xuXG4kY3ViaWMtYmV6aWVyLXByaW1hcnk6IGN1YmljLWJlemllcigwLjU1LCAtMC4xOSwgMC41OSwgMC45NSk7XG4kY3ViaWMtYmV6aWVyLXNlY29uZGFyeTogY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpO1xuIl19 */"],"mappings":"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","names":["dropdown-option","dropdown-option__title","dropdown-option__description","dropdown","dropdown__button","dropdown__box-overlay","dropdown__box-options","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../index.ts","../components/Dropdown/index.tsx","../components/DropdownOption/index.tsx","../components/DropdownOption/DropdownOption.module.scss","../components/Dropdown/Dropdown.module.scss"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button, type IButton } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\nimport styles from \"./Dropdown.module.scss\";\n\nexport interface IDropdown {\n children:\n | React.ReactElement<IDropdownOption>\n | React.ReactElement<IDropdownOption>[];\n value: string;\n button?: Omit<IButton, \"children\" | \"dangerouslySetInnerHTML\">;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n onChange?: (newValue: string) => void;\n initiallyOpened?: boolean;\n choice?: \"multiple\" | \"single\";\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\ntype PositionType = {\n top: 0;\n left: 0;\n width: 0;\n};\n\nexport const Dropdown: React.FC<IDropdown> = ({\n children,\n value,\n onChange,\n appearance = \"outline\",\n variant = \"default\",\n placeholder = \"Select\",\n choice = \"single\",\n className = \"\",\n initiallyOpened = false,\n disabled = false,\n button = {},\n}) => {\n const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n const [selected, setSelected] = React.useState<string[]>(\n value ? [value] : []\n );\n const [position, setPosition] = React.useState<PositionType>({\n top: 0,\n left: 0,\n width: 0,\n });\n const [dropdownHeight, setDropdownHeight] = React.useState(0);\n const [buttonHeight, setButtonHeight] = React.useState(0);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const boxRef = React.useRef<HTMLDivElement>(null);\n const uniqueId = React.useId();\n\n React.useLayoutEffect(() => {\n if (!isOpened) {\n return;\n }\n\n if (boxRef.current) {\n setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n }\n\n if (buttonRef.current) {\n setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n }\n }, [isOpened]);\n\n const options = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<IDropdownOption> =>\n React.isValidElement(child) && child.type === DropdownOption\n );\n\n const isValidValue = () => {\n return !!options.find(({ props }) => props.value === value);\n };\n\n const handleChange = (currentRadioValue: string) => {\n onChange?.(currentRadioValue);\n if (!choice) {\n setSelected([currentRadioValue]);\n setIsOpened(false);\n return;\n }\n\n if (choice === \"single\") {\n setSelected([currentRadioValue]);\n }\n\n if (choice === \"multiple\") {\n setSelected((prev) =>\n prev.includes(currentRadioValue)\n ? prev.filter((v) => v !== currentRadioValue)\n : [...prev, currentRadioValue]\n );\n }\n };\n\n const handleToggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled) return;\n\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n\n const shouldOpenUpwards =\n dropdownHeight > 0 &&\n spaceBelow < dropdownHeight &&\n spaceAbove > dropdownHeight;\n\n const finalPosition = {\n top: shouldOpenUpwards\n ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n : rect.top + window.scrollY + buttonHeight + 6,\n left: rect.left + window.scrollX,\n width: rect.width,\n } as PositionType;\n\n setPosition(finalPosition);\n\n if (button?.onClick) button.onClick(e);\n\n setIsOpened((prev) => !prev);\n };\n\n if (!isValidValue()) {\n throw new Error(\n 'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n );\n }\n\n return (\n <>\n <div className={`${styles[\"dropdown\"]} ${className}`}>\n <Button\n onClick={handleToggle}\n className={`${styles[\"dropdown__button\"]} ${button?.className || \"\"}`}\n appearance={button?.appearance || appearance}\n variant={button?.variant || variant}\n disabled={button?.disabled || disabled}\n {...{ ref: buttonRef }}\n >\n {placeholder}\n </Button>\n </div>\n\n <Portal>\n <AnimatePresence>\n {isOpened && (\n <div\n className={`${styles[\"dropdown__box\"]} ${styles[`dropdown__box-variant--${variant}`]}`}\n >\n <motion.div\n className={styles[\"dropdown__box-overlay\"]}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, ease: \"easeIn\" }}\n onClick={() => setIsOpened(false)}\n />\n <motion.div\n ref={boxRef}\n className={styles[\"dropdown__box-options\"]}\n initial={{ opacity: 0, y: 20, scale: 0.95 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 20, scale: 0.95 }}\n transition={{ duration: 0.2, ease: \"easeIn\" }}\n style={{\n top: position.top,\n left: position.left,\n width: position.width,\n }}\n >\n {options.map(({ props }) => (\n <DropdownOption\n {...props}\n variant={variant}\n appearance={appearance}\n key={`${props.value}-${uniqueId}`}\n selectedValues={selected}\n onChange={() => handleChange(props.value)}\n />\n ))}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </Portal>\n </>\n );\n};\n","import * as React from \"react\";\n\nimport styles from \"./DropdownOption.module.scss\";\nimport { Icons } from \"@aristobyte-ui/utils\";\n\nexport interface IDropdownOption {\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n children: string;\n value: string;\n onChange?: () => void;\n selectedValues?: string[];\n description?: string;\n icon?: string;\n disabled?: boolean;\n choice?: \"multiple\" | \"single\";\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n variant,\n children,\n value,\n selectedValues,\n onChange,\n // icon,\n description,\n disabled,\n}) => {\n const uniqueId = React.useId();\n return (\n <button\n key={uniqueId}\n disabled={disabled}\n className={`${styles[\"dropdown-option\"]} ${styles[`dropdown-option-variant--${variant}`]} ${disabled ? styles[\"dropdown-option--disabled\"] : \"\"}`}\n onClick={onChange}\n >\n <div className={styles[\"dropdown-option__content\"]}>\n <h3 className={styles[\"dropdown-option__title\"]}>{children}</h3>\n <p className={styles[\"dropdown-option__description\"]}>{description}</p>\n </div>\n <div\n className={`${styles[\"dropdown-option__tick\"]} ${selectedValues?.includes(value) ? styles[\"dropdown-option__tick--active\"] : \"\"}`}\n >\n <Icons.Success size={18} />\n </div>\n </button>\n );\n};\n",".dropdown-option {\n align-items: center;\n border-radius: 8px;\n color: #ffffff;\n display: flex;\n font-size: 14px;\n font-weight: 500;\n gap: 10px;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n}\n.dropdown-option-variant--default:hover {\n background-color: #111827;\n}\n.dropdown-option-variant--primary:hover {\n background-color: #1d4ed8;\n}\n.dropdown-option-variant--secondary:hover {\n background-color: #4338ca;\n}\n.dropdown-option-variant--warning:hover {\n background-color: #b45309;\n}\n.dropdown-option-variant--error:hover {\n background-color: #b91c1c;\n}\n.dropdown-option-variant--success:hover {\n background-color: #15803d;\n}\n.dropdown-option--disabled, .dropdown-option--disabled:hover {\n background-color: rgba(31, 41, 55, 0.5);\n cursor: auto;\n opacity: 0.5;\n}\n.dropdown-option__title {\n color: #ffffff;\n}\n.dropdown-option__description {\n color: rgba(255, 255, 255, 0.6);\n}\n.dropdown-option__tick {\n color: rgba(255, 255, 255, 0.6);\n opacity: 0;\n transform: scale(0, 0.7) translate(0, 10px);\n transition: all 120ms ease-out;\n}\n.dropdown-option__tick--active {\n opacity: 1;\n transform: scale(1) translate(0);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd25PcHRpb24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duT3B0aW9uLm1vZHVsZS5zY3NzIiwiLi4vLi4vLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFO0VBQ0E7RUFDQSxPQ0VNO0VERE47RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRTtFQUNFLGtCQzBCSzs7QUR2QlA7RUFDRSxrQkNnQ0s7O0FEN0JQO0VBQ0Usa0JDd0NPOztBRHJDVDtFQUNFLGtCQ2tFTTs7QUQvRFI7RUFDRSxrQkMwQ0k7O0FEdkNOO0VBQ0Usa0JDZ0RNOztBRDVDVjtFQUVFLGtCQ3lEcUI7RUR4RHJCO0VBQ0E7O0FBR0Y7RUFDRSxPQzFDSTs7QUQ2Q047RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0U7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIkB1c2UgXCJAYXJpc3RvYnl0ZS11aS91dGlscy9zdHlsZXMvc2V0dGluZ3NcIiBhcyAqO1xuXG4uZHJvcGRvd24tb3B0aW9uIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gIGNvbG9yOiAkd2hpdGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbiAgZ2FwOiAxMHB4O1xuICBwYWRkaW5nOiAxMHB4IDE2cHg7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHRyYW5zaXRpb246IGFsbCAxMjBtcyBlYXNlLW91dDtcbiAgd2lkdGg6IDEwMCU7XG5cbiAgJi12YXJpYW50IHtcbiAgICAmLS1kZWZhdWx0OmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0LWhvdmVyO1xuICAgIH1cblxuICAgICYtLXByaW1hcnk6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJGNvbG9yLXByaW1hcnktaG92ZXI7XG4gICAgfVxuXG4gICAgJi0tc2Vjb25kYXJ5OmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1zZWNvbmRhcnktaG92ZXI7XG4gICAgfVxuXG4gICAgJi0td2FybmluZzpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itd2FybmluZy1ob3ZlcjtcbiAgICB9XG5cbiAgICAmLS1lcnJvcjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZXJyb3ItaG92ZXI7XG4gICAgfVxuXG4gICAgJi0tc3VjY2Vzczpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itc3VjY2Vzcy1ob3ZlcjtcbiAgICB9XG4gIH1cblxuICAmLS1kaXNhYmxlZCxcbiAgJi0tZGlzYWJsZWQ6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0LWRpc2FibGVkO1xuICAgIGN1cnNvcjogYXV0bztcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cblxuICAmX190aXRsZSB7XG4gICAgY29sb3I6ICR3aGl0ZTtcbiAgfVxuXG4gICZfX2Rlc2NyaXB0aW9uIHtcbiAgICBjb2xvcjogcmdiYSgkd2hpdGUsIDAuNik7XG4gIH1cblxuICAmX190aWNrIHtcbiAgICBjb2xvcjogcmdiYSgkd2hpdGUsIDAuNik7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAsIDAuNykgdHJhbnNsYXRlKDAsIDEwcHgpO1xuICAgIHRyYW5zaXRpb246IGFsbCAxMjBtcyBlYXNlLW91dDtcblxuICAgICYtLWFjdGl2ZSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKSB0cmFuc2xhdGUoMCk7XG4gICAgfVxuICB9XG59XG4iLCIvLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09IC8vXG4vLyAgICAgICAgQXJpc3RvQnl0ZSBVSSAtIFN0eWxlIFNldHRpbmdzICAgICAgIC8vXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09IC8vXG5cbi8vID09PSBEZXNpZ24gVG9rZW5zIOKAlCBDb2xvciBQYWxldHRlID09PSAvL1xuXG4vLyBCYXNlXG4kd2hpdGU6ICNmZmZmZmY7XG4kYmxhY2s6ICMwMDAwMDA7XG4kdHJhbnNwYXJlbnQ6IHRyYW5zcGFyZW50O1xuXG4vLyA9PT0gQmxhY2sgVHJhbnNwYXJlbnQgU2NhbGUgPT09IC8vXG4kYmxhY2stdHJhbnNwYXJlbnQtMTAwOiByZ2JhKDAsIDAsIDAsIDAuMSk7XG4kYmxhY2stdHJhbnNwYXJlbnQtMjAwOiByZ2JhKDAsIDAsIDAsIDAuMik7XG4kYmxhY2stdHJhbnNwYXJlbnQtMzAwOiByZ2JhKDAsIDAsIDAsIDAuMyk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNDAwOiByZ2JhKDAsIDAsIDAsIDAuNCk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNTAwOiByZ2JhKDAsIDAsIDAsIDAuNSk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNjAwOiByZ2JhKDAsIDAsIDAsIDAuNik7XG4kYmxhY2stdHJhbnNwYXJlbnQtNzAwOiByZ2JhKDAsIDAsIDAsIDAuNyk7XG4kYmxhY2stdHJhbnNwYXJlbnQtODAwOiByZ2JhKDAsIDAsIDAsIDAuOCk7XG4kYmxhY2stdHJhbnNwYXJlbnQtOTAwOiByZ2JhKDAsIDAsIDAsIDAuOSk7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiR3aGl0ZS10cmFuc3BhcmVudC0xMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKTtcbiR3aGl0ZS10cmFuc3BhcmVudC0yMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4yKTtcbiR3aGl0ZS10cmFuc3BhcmVudC0zMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zKTtcbiR3aGl0ZS10cmFuc3BhcmVudC00MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC40KTtcbiR3aGl0ZS10cmFuc3BhcmVudC01MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KTtcbiR3aGl0ZS10cmFuc3BhcmVudC02MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC42KTtcbiR3aGl0ZS10cmFuc3BhcmVudC03MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC43KTtcbiR3aGl0ZS10cmFuc3BhcmVudC04MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC44KTtcbiR3aGl0ZS10cmFuc3BhcmVudC05MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC45KTtcblxuLy8gPT09IE5ldXRyYWwgU2NhbGUgKEdyZXkpID09PSAvL1xuJGdyZXktNTA6ICNmOWZhZmI7XG4kZ3JleS0xMDA6ICNmM2Y0ZjY7XG4kZ3JleS0yMDA6ICNlNWU3ZWI7XG4kZ3JleS0zMDA6ICNkMWQ1ZGI7XG4kZ3JleS00MDA6ICM5Y2EzYWY7XG4kZ3JleS01MDA6ICM2YjcyODA7XG4kZ3JleS02MDA6ICM0YjU1NjM7XG4kZ3JleS03MDA6ICMzNzQxNTE7XG4kZ3JleS04MDA6ICMxZjI5Mzc7XG4kZ3JleS05MDA6ICMxMTE4Mjc7XG5cbi8vID09PSBQcmltYXJ5IFNjYWxlIChCbHVlKSA9PT0gLy9cbiRibHVlLTUwOiAjZWZmNmZmO1xuJGJsdWUtMTAwOiAjZGJlYWZlO1xuJGJsdWUtMjAwOiAjYmZkYmZlO1xuJGJsdWUtMzAwOiAjOTNjNWZkO1xuJGJsdWUtNDAwOiAjNjBhNWZhO1xuJGJsdWUtNTAwOiAjM2I4MmY2O1xuJGJsdWUtNjAwOiAjMjU2M2ViOyAvLyBNYWluXG4kYmx1ZS03MDA6ICMxZDRlZDg7IC8vIEhvdmVyXG4kYmx1ZS04MDA6ICMxZTQwYWY7XG4kYmx1ZS05MDA6ICMxZTNhOGE7XG5cbi8vID09PSBTZWNvbmRhcnkgU2NhbGUgKEluZGlnbykgPT09IC8vXG4kaW5kaWdvLTUwOiAjZWVmMmZmO1xuJGluZGlnby0xMDA6ICNlMGU3ZmY7XG4kaW5kaWdvLTIwMDogI2M3ZDJmZTtcbiRpbmRpZ28tMzAwOiAjYTViNGZjO1xuJGluZGlnby00MDA6ICM4MThjZjg7XG4kaW5kaWdvLTUwMDogIzYzNjZmMTtcbiRpbmRpZ28tNjAwOiAjNGY0NmU1OyAvLyBNYWluXG4kaW5kaWdvLTcwMDogIzQzMzhjYTsgLy8gSG92ZXJcblxuLy8gPT09IEVycm9yIFNjYWxlIChSZWQpID09PSAvL1xuJHJlZC01MDogI2ZlZjJmMjtcbiRyZWQtMTAwOiAjZmVlMmUyO1xuJHJlZC0yMDA6ICNmZWNhY2E7XG4kcmVkLTMwMDogI2ZjYTVhNTtcbiRyZWQtNDAwOiAjZjg3MTcxO1xuJHJlZC01MDA6ICNlZjQ0NDQ7XG4kcmVkLTYwMDogI2RjMjYyNjsgLy8gTWFpblxuJHJlZC03MDA6ICNiOTFjMWM7IC8vIEhvdmVyXG5cbi8vID09PSBTdWNjZXNzIFNjYWxlIChHcmVlbikgPT09IC8vXG4kZ3JlZW4tNTA6ICNmMGZkZjQ7XG4kZ3JlZW4tMTAwOiAjZGNmY2U3O1xuJGdyZWVuLTIwMDogI2JiZjdkMDtcbiRncmVlbi0zMDA6ICM4NmVmYWM7XG4kZ3JlZW4tNDAwOiAjNGFkZTgwO1xuJGdyZWVuLTUwMDogIzIyYzU1ZTtcbiRncmVlbi02MDA6ICMxNmEzNGE7IC8vIE1haW5cbiRncmVlbi03MDA6ICMxNTgwM2Q7IC8vIEhvdmVyXG5cbi8vID09PSBXYXJuaW5nIFNjYWxlIChBbWJlcikgPT09IC8vXG4kYW1iZXItNTA6ICNmZmZiZWI7XG4kYW1iZXItMTAwOiAjZmVmM2M3O1xuJGFtYmVyLTIwMDogI2ZkZTY4YTtcbiRhbWJlci0zMDA6ICNmY2QzNGQ7XG4kYW1iZXItNDAwOiAjZmJiZjI0O1xuJGFtYmVyLTUwMDogI2Y1OWUwYjtcbiRhbWJlci02MDA6ICNkOTc3MDY7IC8vIE1haW5cbiRhbWJlci03MDA6ICNiNDUzMDk7IC8vIEhvdmVyXG5cbi8vID09PSBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG4kY29sb3ItZGVmYXVsdDogJGdyZXktODAwO1xuJGNvbG9yLWRlZmF1bHQtaG92ZXI6ICRncmV5LTkwMDtcbiRjb2xvci1kZWZhdWx0LWRpc2FibGVkOiByZ2JhKCRjb2xvci1kZWZhdWx0LCAwLjUpO1xuXG4kY29sb3ItcHJpbWFyeTogJGJsdWUtNjAwO1xuJGNvbG9yLXByaW1hcnktaG92ZXI6ICRibHVlLTcwMDtcbiRjb2xvci1wcmltYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1wcmltYXJ5LCAwLjUpO1xuXG4kY29sb3Itc2Vjb25kYXJ5OiAkaW5kaWdvLTYwMDtcbiRjb2xvci1zZWNvbmRhcnktaG92ZXI6ICRpbmRpZ28tNzAwO1xuJGNvbG9yLXNlY29uZGFyeS1kaXNhYmxlZDogcmdiYSgkY29sb3Itc2Vjb25kYXJ5LCAwLjUpO1xuXG4kY29sb3ItZXJyb3I6ICRyZWQtNjAwO1xuJGNvbG9yLWVycm9yLWhvdmVyOiAkcmVkLTcwMDtcbiRjb2xvci1lcnJvci1kaXNhYmxlZDogcmdiYSgkY29sb3ItZXJyb3IsIDAuNSk7XG5cbiRjb2xvci1zdWNjZXNzOiAkZ3JlZW4tNjAwO1xuJGNvbG9yLXN1Y2Nlc3MtaG92ZXI6ICRncmVlbi03MDA7XG4kY29sb3Itc3VjY2Vzcy1kaXNhYmxlZDogcmdiYSgkY29sb3Itc3VjY2VzcywgMC41KTtcblxuJGNvbG9yLXdhcm5pbmc6ICRhbWJlci02MDA7XG4kY29sb3Itd2FybmluZy1ob3ZlcjogJGFtYmVyLTcwMDtcbiRjb2xvci13YXJuaW5nLWRpc2FibGVkOiByZ2JhKCRjb2xvci13YXJuaW5nLCAwLjUpO1xuXG4kdGV4dC1jb2xvci13aGl0ZTogJHdoaXRlO1xuJHRleHQtY29sb3ItYmxhY2s6ICRibGFjaztcbiR0ZXh0LWNvbG9yLXdoaXRlLWRpc2FibGVkOiByZ2JhKCR3aGl0ZSwgMC41KTtcbiR0ZXh0LWNvbG9yLWJsYWNrLWRpc2FibGVkOiByZ2JhKCRibGFjaywgMC41KTtcblxuLy8gPT09IFNoYWRvd3MgPT09IC8vXG4kc2hhZG93LXNtOiAwIDFweCAycHggMCByZ2JhKCRibGFjaywgMC4wNSk7XG4kc2hhZG93LW1kOlxuICAwIDRweCA2cHggLTFweCByZ2JhKCRibGFjaywgMC4xKSxcbiAgMCAycHggNHB4IC0xcHggcmdiYSgkYmxhY2ssIDAuMDYpO1xuJHNoYWRvdy1sZzpcbiAgMCAxMHB4IDE1cHggLTNweCByZ2JhKCRibGFjaywgMC4xKSxcbiAgMCA0cHggNnB4IC0ycHggcmdiYSgkYmxhY2ssIDAuMDUpO1xuXG4vLyA9PT0gRm9udCBmYW1pbGllcyA9PT0gLy9cbiRmb250LWZhbWlseS1zYW5zOiBcIkludGVyXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktc2VyaWY6IFwiR2VvcmdpYVwiLCBzZXJpZjtcbiRmb250LWZhbWlseS1tb25vOiBcIkZpcmEgQ29kZVwiLCBtb25vc3BhY2U7XG5cbi8vID09PSBGb250IHdlaWdodHMgPT09IC8vXG4kZm9udC13ZWlnaHQtcmVndWxhcjogNDAwO1xuJGZvbnQtd2VpZ2h0LW1lZGl1bTogNTAwO1xuJGZvbnQtd2VpZ2h0LXNlbWlib2xkOiA2MDA7XG4kZm9udC13ZWlnaHQtYm9sZDogNzAwO1xuXG4vLyA9PT0gTGluZSBoZWlnaHRzID09PSAvL1xuJGxpbmUtaGVpZ2h0LXRpZ2h0OiAxLjI7XG4kbGluZS1oZWlnaHQtc251ZzogMS4zNzU7XG4kbGluZS1oZWlnaHQtbm9ybWFsOiAxLjU7XG4kbGluZS1oZWlnaHQtbG9vc2U6IDEuNjI1O1xuXG4vLyA9PT0gRm9udCBTaXplcyDigJQgU2VtYW50aWMgVG9rZW5zID09PSAvL1xuXG4vLyA9PT0gVGl0bGVzID09PSAvL1xuJGZvbnQtc2l6ZS1oZXJvOiAzcmVtOyAvLyA0OHB4XG4kZm9udC1zaXplLXRpdGxlLTE6IDIuMjVyZW07IC8vIDM2cHhcbiRmb250LXNpemUtdGl0bGUtMjogMS44NzVyZW07IC8vIDMwcHhcbiRmb250LXNpemUtdGl0bGUtMzogMS41cmVtOyAvLyAyNHB4XG5cbi8vID09PSBTdWJ0aXRsZXMgPT09IC8vXG4kZm9udC1zaXplLXN1YnRpdGxlLTE6IDEuMjVyZW07IC8vIDIwcHhcbiRmb250LXNpemUtc3VidGl0bGUtMjogMS4xMjVyZW07IC8vIDE4cHhcblxuLy8gPT09IEJvZHkgdGV4dCA9PT0gLy9cbiRmb250LXNpemUtYm9keS1sZzogMXJlbTsgLy8gMTZweFxuJGZvbnQtc2l6ZS1ib2R5LW1kOiAwLjkzNzVyZW07IC8vIDE1cHhcbiRmb250LXNpemUtYm9keS1zbTogMC44NzVyZW07IC8vIDE0cHhcblxuLy8gPT09IENhcHRpb25zIC8gRGVzY3JpcHRpb25zID09PSAvL1xuJGZvbnQtc2l6ZS1jYXB0aW9uOiAwLjc1cmVtOyAvLyAxMnB4XG4kZm9udC1zaXplLWZvb3Rub3RlOiAwLjY4NzVyZW07IC8vIDExcHhcblxuLy8gPT09IEJ1dHRvbnMgPT09IC8vXG4kZm9udC1zaXplLWJ1dHRvbi1sZzogMXJlbTsgLy8gMTZweFxuJGZvbnQtc2l6ZS1idXR0b24tbWQ6IDAuODc1cmVtOyAvLyAxNHB4XG4kZm9udC1zaXplLWJ1dHRvbi1zbTogMC43NXJlbTsgLy8gMTJweFxuXG4vLyA9PT0gQW5pbWF0aW9ucyA9PT0gLy9cblxuJGN1YmljLWJlemllci1wcmltYXJ5OiBjdWJpYy1iZXppZXIoMC41NSwgLTAuMTksIDAuNTksIDAuOTUpO1xuJGN1YmljLWJlemllci1zZWNvbmRhcnk6IGN1YmljLWJlemllcigwLjE3NSwgMC44ODUsIDAuMzIsIDEuMjc1KTtcbiJdfQ== */",".dropdown {\n width: max-content;\n}\n.dropdown__button {\n width: max-content;\n}\n.dropdown__box-variant--default .dropdown__box-options {\n background-color: #1f2937;\n}\n.dropdown__box-variant--primary .dropdown__box-options {\n background-color: #2563eb;\n}\n.dropdown__box-variant--secondary .dropdown__box-options {\n background-color: #4f46e5;\n}\n.dropdown__box-variant--warning .dropdown__box-options {\n background-color: #d97706;\n}\n.dropdown__box-variant--error .dropdown__box-options {\n background-color: #dc2626;\n}\n.dropdown__box-variant--success .dropdown__box-options {\n background-color: #16a34a;\n}\n.dropdown__box-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n}\n.dropdown__box-options {\n align-items: flex-start;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duLm1vZHVsZS5zY3NzIiwiLi4vLi4vLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFOztBQUVBO0VBQ0U7O0FBSUE7RUFDRSxrQkMrQks7O0FENUJQO0VBQ0Usa0JDcUNLOztBRGxDUDtFQUNFLGtCQzZDTzs7QUQxQ1Q7RUFDRSxrQkN1RU07O0FEcEVSO0VBQ0Usa0JDK0NJOztBRDVDTjtFQUNFLGtCQ3FETTs7QURsRFI7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRjtFQUNFO0VBQ0E7RUFDQSxZQUNFO0VBRUY7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0EsWUFDRTtFQUVGO0VBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiQGFyaXN0b2J5dGUtdWkvdXRpbHMvc3R5bGVzL3NldHRpbmdzXCIgYXMgKjtcblxuLmRyb3Bkb3duIHtcbiAgd2lkdGg6IG1heC1jb250ZW50O1xuXG4gICZfX2J1dHRvbiB7XG4gICAgd2lkdGg6IG1heC1jb250ZW50O1xuICB9XG5cbiAgJl9fYm94IHtcbiAgICAmLXZhcmlhbnQtLWRlZmF1bHQgJi1vcHRpb25zIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0O1xuICAgIH1cblxuICAgICYtdmFyaWFudC0tcHJpbWFyeSAmLW9wdGlvbnMge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJGNvbG9yLXByaW1hcnk7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS1zZWNvbmRhcnkgJi1vcHRpb25zIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1zZWNvbmRhcnk7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS13YXJuaW5nICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itd2FybmluZztcbiAgICB9XG5cbiAgICAmLXZhcmlhbnQtLWVycm9yICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZXJyb3I7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS1zdWNjZXNzICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itc3VjY2VzcztcbiAgICB9XG5cbiAgICAmLW92ZXJsYXkge1xuICAgICAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEycHgpO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk5OTk5OTk5OTk7XG4gICAgfVxuXG4gICAgJi1vcHRpb25zIHtcbiAgICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICAgICAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gICAgICBib3gtc2hhZG93OlxuICAgICAgICAwIDRweCA2cHggcmdiYSgwLCAwLCAwLCAwLjA0KSxcbiAgICAgICAgMCAxMnB4IDI0cHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgbWluLXdpZHRoOiAzMDBweDtcbiAgICAgIHBhZGRpbmc6IDRweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIHRyYW5zZm9ybSAyMDBtcyAkY3ViaWMtYmV6aWVyLXNlY29uZGFyeSxcbiAgICAgICAgb3BhY2l0eSAxNTBtcyBlYXNlO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk5OTtcbiAgICB9XG4gIH1cbn1cbiIsIi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cbi8vICAgICAgICBBcmlzdG9CeXRlIFVJIC0gU3R5bGUgU2V0dGluZ3MgICAgICAgLy9cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cblxuLy8gPT09IERlc2lnbiBUb2tlbnMg4oCUIENvbG9yIFBhbGV0dGUgPT09IC8vXG5cbi8vIEJhc2VcbiR3aGl0ZTogI2ZmZmZmZjtcbiRibGFjazogIzAwMDAwMDtcbiR0cmFuc3BhcmVudDogdHJhbnNwYXJlbnQ7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiRibGFjay10cmFuc3BhcmVudC0xMDA6IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiRibGFjay10cmFuc3BhcmVudC0yMDA6IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiRibGFjay10cmFuc3BhcmVudC0zMDA6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiRibGFjay10cmFuc3BhcmVudC00MDA6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiRibGFjay10cmFuc3BhcmVudC01MDA6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiRibGFjay10cmFuc3BhcmVudC02MDA6IHJnYmEoMCwgMCwgMCwgMC42KTtcbiRibGFjay10cmFuc3BhcmVudC03MDA6IHJnYmEoMCwgMCwgMCwgMC43KTtcbiRibGFjay10cmFuc3BhcmVudC04MDA6IHJnYmEoMCwgMCwgMCwgMC44KTtcbiRibGFjay10cmFuc3BhcmVudC05MDA6IHJnYmEoMCwgMCwgMCwgMC45KTtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJHdoaXRlLXRyYW5zcGFyZW50LTEwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTIwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTMwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTQwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTUwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTYwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjYpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTcwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTgwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjgpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTkwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjkpO1xuXG4vLyA9PT0gTmV1dHJhbCBTY2FsZSAoR3JleSkgPT09IC8vXG4kZ3JleS01MDogI2Y5ZmFmYjtcbiRncmV5LTEwMDogI2YzZjRmNjtcbiRncmV5LTIwMDogI2U1ZTdlYjtcbiRncmV5LTMwMDogI2QxZDVkYjtcbiRncmV5LTQwMDogIzljYTNhZjtcbiRncmV5LTUwMDogIzZiNzI4MDtcbiRncmV5LTYwMDogIzRiNTU2MztcbiRncmV5LTcwMDogIzM3NDE1MTtcbiRncmV5LTgwMDogIzFmMjkzNztcbiRncmV5LTkwMDogIzExMTgyNztcblxuLy8gPT09IFByaW1hcnkgU2NhbGUgKEJsdWUpID09PSAvL1xuJGJsdWUtNTA6ICNlZmY2ZmY7XG4kYmx1ZS0xMDA6ICNkYmVhZmU7XG4kYmx1ZS0yMDA6ICNiZmRiZmU7XG4kYmx1ZS0zMDA6ICM5M2M1ZmQ7XG4kYmx1ZS00MDA6ICM2MGE1ZmE7XG4kYmx1ZS01MDA6ICMzYjgyZjY7XG4kYmx1ZS02MDA6ICMyNTYzZWI7IC8vIE1haW5cbiRibHVlLTcwMDogIzFkNGVkODsgLy8gSG92ZXJcbiRibHVlLTgwMDogIzFlNDBhZjtcbiRibHVlLTkwMDogIzFlM2E4YTtcblxuLy8gPT09IFNlY29uZGFyeSBTY2FsZSAoSW5kaWdvKSA9PT0gLy9cbiRpbmRpZ28tNTA6ICNlZWYyZmY7XG4kaW5kaWdvLTEwMDogI2UwZTdmZjtcbiRpbmRpZ28tMjAwOiAjYzdkMmZlO1xuJGluZGlnby0zMDA6ICNhNWI0ZmM7XG4kaW5kaWdvLTQwMDogIzgxOGNmODtcbiRpbmRpZ28tNTAwOiAjNjM2NmYxO1xuJGluZGlnby02MDA6ICM0ZjQ2ZTU7IC8vIE1haW5cbiRpbmRpZ28tNzAwOiAjNDMzOGNhOyAvLyBIb3ZlclxuXG4vLyA9PT0gRXJyb3IgU2NhbGUgKFJlZCkgPT09IC8vXG4kcmVkLTUwOiAjZmVmMmYyO1xuJHJlZC0xMDA6ICNmZWUyZTI7XG4kcmVkLTIwMDogI2ZlY2FjYTtcbiRyZWQtMzAwOiAjZmNhNWE1O1xuJHJlZC00MDA6ICNmODcxNzE7XG4kcmVkLTUwMDogI2VmNDQ0NDtcbiRyZWQtNjAwOiAjZGMyNjI2OyAvLyBNYWluXG4kcmVkLTcwMDogI2I5MWMxYzsgLy8gSG92ZXJcblxuLy8gPT09IFN1Y2Nlc3MgU2NhbGUgKEdyZWVuKSA9PT0gLy9cbiRncmVlbi01MDogI2YwZmRmNDtcbiRncmVlbi0xMDA6ICNkY2ZjZTc7XG4kZ3JlZW4tMjAwOiAjYmJmN2QwO1xuJGdyZWVuLTMwMDogIzg2ZWZhYztcbiRncmVlbi00MDA6ICM0YWRlODA7XG4kZ3JlZW4tNTAwOiAjMjJjNTVlO1xuJGdyZWVuLTYwMDogIzE2YTM0YTsgLy8gTWFpblxuJGdyZWVuLTcwMDogIzE1ODAzZDsgLy8gSG92ZXJcblxuLy8gPT09IFdhcm5pbmcgU2NhbGUgKEFtYmVyKSA9PT0gLy9cbiRhbWJlci01MDogI2ZmZmJlYjtcbiRhbWJlci0xMDA6ICNmZWYzYzc7XG4kYW1iZXItMjAwOiAjZmRlNjhhO1xuJGFtYmVyLTMwMDogI2ZjZDM0ZDtcbiRhbWJlci00MDA6ICNmYmJmMjQ7XG4kYW1iZXItNTAwOiAjZjU5ZTBiO1xuJGFtYmVyLTYwMDogI2Q5NzcwNjsgLy8gTWFpblxuJGFtYmVyLTcwMDogI2I0NTMwOTsgLy8gSG92ZXJcblxuLy8gPT09IFNlbWFudGljIFRva2VucyA9PT0gLy9cbiRjb2xvci1kZWZhdWx0OiAkZ3JleS04MDA7XG4kY29sb3ItZGVmYXVsdC1ob3ZlcjogJGdyZXktOTAwO1xuJGNvbG9yLWRlZmF1bHQtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWRlZmF1bHQsIDAuNSk7XG5cbiRjb2xvci1wcmltYXJ5OiAkYmx1ZS02MDA7XG4kY29sb3ItcHJpbWFyeS1ob3ZlcjogJGJsdWUtNzAwO1xuJGNvbG9yLXByaW1hcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXByaW1hcnksIDAuNSk7XG5cbiRjb2xvci1zZWNvbmRhcnk6ICRpbmRpZ28tNjAwO1xuJGNvbG9yLXNlY29uZGFyeS1ob3ZlcjogJGluZGlnby03MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1zZWNvbmRhcnksIDAuNSk7XG5cbiRjb2xvci1lcnJvcjogJHJlZC02MDA7XG4kY29sb3ItZXJyb3ItaG92ZXI6ICRyZWQtNzAwO1xuJGNvbG9yLWVycm9yLWRpc2FibGVkOiByZ2JhKCRjb2xvci1lcnJvciwgMC41KTtcblxuJGNvbG9yLXN1Y2Nlc3M6ICRncmVlbi02MDA7XG4kY29sb3Itc3VjY2Vzcy1ob3ZlcjogJGdyZWVuLTcwMDtcbiRjb2xvci1zdWNjZXNzLWRpc2FibGVkOiByZ2JhKCRjb2xvci1zdWNjZXNzLCAwLjUpO1xuXG4kY29sb3Itd2FybmluZzogJGFtYmVyLTYwMDtcbiRjb2xvci13YXJuaW5nLWhvdmVyOiAkYW1iZXItNzAwO1xuJGNvbG9yLXdhcm5pbmctZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXdhcm5pbmcsIDAuNSk7XG5cbiR0ZXh0LWNvbG9yLXdoaXRlOiAkd2hpdGU7XG4kdGV4dC1jb2xvci1ibGFjazogJGJsYWNrO1xuJHRleHQtY29sb3Itd2hpdGUtZGlzYWJsZWQ6IHJnYmEoJHdoaXRlLCAwLjUpO1xuJHRleHQtY29sb3ItYmxhY2stZGlzYWJsZWQ6IHJnYmEoJGJsYWNrLCAwLjUpO1xuXG4vLyA9PT0gU2hhZG93cyA9PT0gLy9cbiRzaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYmEoJGJsYWNrLCAwLjA1KTtcbiRzaGFkb3ctbWQ6XG4gIDAgNHB4IDZweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDJweCA0cHggLTFweCByZ2JhKCRibGFjaywgMC4wNik7XG4kc2hhZG93LWxnOlxuICAwIDEwcHggMTVweCAtM3B4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDRweCA2cHggLTJweCByZ2JhKCRibGFjaywgMC4wNSk7XG5cbi8vID09PSBGb250IGZhbWlsaWVzID09PSAvL1xuJGZvbnQtZmFtaWx5LXNhbnM6IFwiSW50ZXJcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1zZXJpZjogXCJHZW9yZ2lhXCIsIHNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IFwiRmlyYSBDb2RlXCIsIG1vbm9zcGFjZTtcblxuLy8gPT09IEZvbnQgd2VpZ2h0cyA9PT0gLy9cbiRmb250LXdlaWdodC1yZWd1bGFyOiA0MDA7XG4kZm9udC13ZWlnaHQtbWVkaXVtOiA1MDA7XG4kZm9udC13ZWlnaHQtc2VtaWJvbGQ6IDYwMDtcbiRmb250LXdlaWdodC1ib2xkOiA3MDA7XG5cbi8vID09PSBMaW5lIGhlaWdodHMgPT09IC8vXG4kbGluZS1oZWlnaHQtdGlnaHQ6IDEuMjtcbiRsaW5lLWhlaWdodC1zbnVnOiAxLjM3NTtcbiRsaW5lLWhlaWdodC1ub3JtYWw6IDEuNTtcbiRsaW5lLWhlaWdodC1sb29zZTogMS42MjU7XG5cbi8vID09PSBGb250IFNpemVzIOKAlCBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG5cbi8vID09PSBUaXRsZXMgPT09IC8vXG4kZm9udC1zaXplLWhlcm86IDNyZW07IC8vIDQ4cHhcbiRmb250LXNpemUtdGl0bGUtMTogMi4yNXJlbTsgLy8gMzZweFxuJGZvbnQtc2l6ZS10aXRsZS0yOiAxLjg3NXJlbTsgLy8gMzBweFxuJGZvbnQtc2l6ZS10aXRsZS0zOiAxLjVyZW07IC8vIDI0cHhcblxuLy8gPT09IFN1YnRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtc3VidGl0bGUtMTogMS4yNXJlbTsgLy8gMjBweFxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0yOiAxLjEyNXJlbTsgLy8gMThweFxuXG4vLyA9PT0gQm9keSB0ZXh0ID09PSAvL1xuJGZvbnQtc2l6ZS1ib2R5LWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJvZHktbWQ6IDAuOTM3NXJlbTsgLy8gMTVweFxuJGZvbnQtc2l6ZS1ib2R5LXNtOiAwLjg3NXJlbTsgLy8gMTRweFxuXG4vLyA9PT0gQ2FwdGlvbnMgLyBEZXNjcmlwdGlvbnMgPT09IC8vXG4kZm9udC1zaXplLWNhcHRpb246IDAuNzVyZW07IC8vIDEycHhcbiRmb250LXNpemUtZm9vdG5vdGU6IDAuNjg3NXJlbTsgLy8gMTFweFxuXG4vLyA9PT0gQnV0dG9ucyA9PT0gLy9cbiRmb250LXNpemUtYnV0dG9uLWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJ1dHRvbi1tZDogMC44NzVyZW07IC8vIDE0cHhcbiRmb250LXNpemUtYnV0dG9uLXNtOiAwLjc1cmVtOyAvLyAxMnB4XG5cbi8vID09PSBBbmltYXRpb25zID09PSAvL1xuXG4kY3ViaWMtYmV6aWVyLXByaW1hcnk6IGN1YmljLWJlemllcigwLjU1LCAtMC4xOSwgMC41OSwgMC45NSk7XG4kY3ViaWMtYmV6aWVyLXNlY29uZGFyeTogY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpO1xuIl19 */"],"mappings":"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","names":["React","dropdown-option","dropdown-option-variant--default","dropdown-option-variant--primary","dropdown-option-variant--secondary","dropdown-option-variant--warning","dropdown-option-variant--error","dropdown-option-variant--success","dropdown-option--disabled","dropdown-option__title","dropdown-option__description","dropdown-option__tick","dropdown-option__tick--active","import_utils","dropdown","dropdown__button","dropdown__box-variant--default","dropdown__box-options","dropdown__box-variant--primary","dropdown__box-variant--secondary","dropdown__box-variant--warning","dropdown__box-variant--error","dropdown__box-variant--success","dropdown__box-overlay","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -2,31 +2,64 @@
|
|
|
2
2
|
import "./index.css";
|
|
3
3
|
|
|
4
4
|
// components/Dropdown/index.tsx
|
|
5
|
-
import * as
|
|
5
|
+
import * as React2 from "react";
|
|
6
6
|
import { AnimatePresence, motion } from "framer-motion";
|
|
7
7
|
|
|
8
|
+
// components/DropdownOption/index.tsx
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
|
|
8
11
|
// components/DropdownOption/DropdownOption.module.scss
|
|
9
12
|
var DropdownOption_module_default = {
|
|
10
13
|
"dropdown-option": "DropdownOption_module_dropdown-option",
|
|
14
|
+
"dropdown-option-variant--default": "DropdownOption_module_dropdown-option-variant--default",
|
|
15
|
+
"dropdown-option-variant--primary": "DropdownOption_module_dropdown-option-variant--primary",
|
|
16
|
+
"dropdown-option-variant--secondary": "DropdownOption_module_dropdown-option-variant--secondary",
|
|
17
|
+
"dropdown-option-variant--warning": "DropdownOption_module_dropdown-option-variant--warning",
|
|
18
|
+
"dropdown-option-variant--error": "DropdownOption_module_dropdown-option-variant--error",
|
|
19
|
+
"dropdown-option-variant--success": "DropdownOption_module_dropdown-option-variant--success",
|
|
20
|
+
"dropdown-option--disabled": "DropdownOption_module_dropdown-option--disabled",
|
|
11
21
|
"dropdown-option__title": "DropdownOption_module_dropdown-option__title",
|
|
12
|
-
"dropdown-option__description": "DropdownOption_module_dropdown-option__description"
|
|
22
|
+
"dropdown-option__description": "DropdownOption_module_dropdown-option__description",
|
|
23
|
+
"dropdown-option__tick": "DropdownOption_module_dropdown-option__tick",
|
|
24
|
+
"dropdown-option__tick--active": "DropdownOption_module_dropdown-option__tick--active"
|
|
13
25
|
};
|
|
14
26
|
|
|
15
27
|
// components/DropdownOption/index.tsx
|
|
28
|
+
import { Icons } from "@aristobyte-ui/utils";
|
|
16
29
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
30
|
var DropdownOption = ({
|
|
31
|
+
variant,
|
|
18
32
|
children,
|
|
19
|
-
|
|
20
|
-
|
|
33
|
+
value,
|
|
34
|
+
selectedValues,
|
|
21
35
|
onChange,
|
|
22
36
|
// icon,
|
|
23
|
-
description
|
|
24
|
-
|
|
37
|
+
description,
|
|
38
|
+
disabled
|
|
25
39
|
}) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
40
|
+
const uniqueId = React.useId();
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
"button",
|
|
43
|
+
{
|
|
44
|
+
disabled,
|
|
45
|
+
className: `${DropdownOption_module_default["dropdown-option"]} ${DropdownOption_module_default[`dropdown-option-variant--${variant}`]} ${disabled ? DropdownOption_module_default["dropdown-option--disabled"] : ""}`,
|
|
46
|
+
onClick: onChange,
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxs("div", { className: DropdownOption_module_default["dropdown-option__content"], children: [
|
|
49
|
+
/* @__PURE__ */ jsx("h3", { className: DropdownOption_module_default["dropdown-option__title"], children }),
|
|
50
|
+
/* @__PURE__ */ jsx("p", { className: DropdownOption_module_default["dropdown-option__description"], children: description })
|
|
51
|
+
] }),
|
|
52
|
+
/* @__PURE__ */ jsx(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
className: `${DropdownOption_module_default["dropdown-option__tick"]} ${(selectedValues == null ? void 0 : selectedValues.includes(value)) ? DropdownOption_module_default["dropdown-option__tick--active"] : ""}`,
|
|
56
|
+
children: /* @__PURE__ */ jsx(Icons.Success, { size: 18 })
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
uniqueId
|
|
62
|
+
);
|
|
30
63
|
};
|
|
31
64
|
|
|
32
65
|
// components/Dropdown/index.tsx
|
|
@@ -37,8 +70,14 @@ import { Portal } from "@aristobyte-ui/utils";
|
|
|
37
70
|
var Dropdown_module_default = {
|
|
38
71
|
dropdown: "Dropdown_module_dropdown",
|
|
39
72
|
dropdown__button: "Dropdown_module_dropdown__button",
|
|
40
|
-
"dropdown__box-
|
|
41
|
-
"dropdown__box-options": "Dropdown_module_dropdown__box-options"
|
|
73
|
+
"dropdown__box-variant--default": "Dropdown_module_dropdown__box-variant--default",
|
|
74
|
+
"dropdown__box-options": "Dropdown_module_dropdown__box-options",
|
|
75
|
+
"dropdown__box-variant--primary": "Dropdown_module_dropdown__box-variant--primary",
|
|
76
|
+
"dropdown__box-variant--secondary": "Dropdown_module_dropdown__box-variant--secondary",
|
|
77
|
+
"dropdown__box-variant--warning": "Dropdown_module_dropdown__box-variant--warning",
|
|
78
|
+
"dropdown__box-variant--error": "Dropdown_module_dropdown__box-variant--error",
|
|
79
|
+
"dropdown__box-variant--success": "Dropdown_module_dropdown__box-variant--success",
|
|
80
|
+
"dropdown__box-overlay": "Dropdown_module_dropdown__box-overlay"
|
|
42
81
|
};
|
|
43
82
|
|
|
44
83
|
// components/Dropdown/index.tsx
|
|
@@ -49,24 +88,29 @@ var Dropdown = ({
|
|
|
49
88
|
value,
|
|
50
89
|
onChange,
|
|
51
90
|
appearance = "outline",
|
|
91
|
+
variant = "default",
|
|
52
92
|
placeholder = "Select",
|
|
93
|
+
choice = "single",
|
|
53
94
|
className = "",
|
|
54
95
|
initiallyOpened = false,
|
|
55
|
-
disabled = false
|
|
96
|
+
disabled = false,
|
|
97
|
+
button = {}
|
|
56
98
|
}) => {
|
|
57
|
-
const [isOpened, setIsOpened] =
|
|
58
|
-
const [selected, setSelected] =
|
|
59
|
-
|
|
99
|
+
const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
|
|
100
|
+
const [selected, setSelected] = React2.useState(
|
|
101
|
+
value ? [value] : []
|
|
102
|
+
);
|
|
103
|
+
const [position, setPosition] = React2.useState({
|
|
60
104
|
top: 0,
|
|
61
105
|
left: 0,
|
|
62
106
|
width: 0
|
|
63
107
|
});
|
|
64
|
-
const [dropdownHeight, setDropdownHeight] =
|
|
65
|
-
const [buttonHeight, setButtonHeight] =
|
|
66
|
-
const buttonRef =
|
|
67
|
-
const boxRef =
|
|
68
|
-
const uniqueId =
|
|
69
|
-
|
|
108
|
+
const [dropdownHeight, setDropdownHeight] = React2.useState(0);
|
|
109
|
+
const [buttonHeight, setButtonHeight] = React2.useState(0);
|
|
110
|
+
const buttonRef = React2.useRef(null);
|
|
111
|
+
const boxRef = React2.useRef(null);
|
|
112
|
+
const uniqueId = React2.useId();
|
|
113
|
+
React2.useLayoutEffect(() => {
|
|
70
114
|
if (!isOpened) {
|
|
71
115
|
return;
|
|
72
116
|
}
|
|
@@ -77,18 +121,29 @@ var Dropdown = ({
|
|
|
77
121
|
setButtonHeight(buttonRef.current.getBoundingClientRect().height);
|
|
78
122
|
}
|
|
79
123
|
}, [isOpened]);
|
|
80
|
-
const options =
|
|
81
|
-
(child) =>
|
|
124
|
+
const options = React2.Children.toArray(children).filter(
|
|
125
|
+
(child) => React2.isValidElement(child) && child.type === DropdownOption
|
|
82
126
|
);
|
|
83
127
|
const isValidValue = () => {
|
|
84
128
|
return !!options.find(({ props }) => props.value === value);
|
|
85
129
|
};
|
|
86
130
|
const handleChange = (currentRadioValue) => {
|
|
87
131
|
onChange == null ? void 0 : onChange(currentRadioValue);
|
|
88
|
-
|
|
89
|
-
|
|
132
|
+
if (!choice) {
|
|
133
|
+
setSelected([currentRadioValue]);
|
|
134
|
+
setIsOpened(false);
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
if (choice === "single") {
|
|
138
|
+
setSelected([currentRadioValue]);
|
|
139
|
+
}
|
|
140
|
+
if (choice === "multiple") {
|
|
141
|
+
setSelected(
|
|
142
|
+
(prev) => prev.includes(currentRadioValue) ? prev.filter((v) => v !== currentRadioValue) : [...prev, currentRadioValue]
|
|
143
|
+
);
|
|
144
|
+
}
|
|
90
145
|
};
|
|
91
|
-
const handleToggle = () => {
|
|
146
|
+
const handleToggle = (e) => {
|
|
92
147
|
var _a;
|
|
93
148
|
if (disabled) return;
|
|
94
149
|
const rect = (_a = buttonRef.current) == null ? void 0 : _a.getBoundingClientRect();
|
|
@@ -102,6 +157,7 @@ var Dropdown = ({
|
|
|
102
157
|
width: rect.width
|
|
103
158
|
};
|
|
104
159
|
setPosition(finalPosition);
|
|
160
|
+
if (button == null ? void 0 : button.onClick) button.onClick(e);
|
|
105
161
|
setIsOpened((prev) => !prev);
|
|
106
162
|
};
|
|
107
163
|
if (!isValidValue()) {
|
|
@@ -113,52 +169,61 @@ var Dropdown = ({
|
|
|
113
169
|
/* @__PURE__ */ jsx2("div", { className: `${Dropdown_module_default["dropdown"]} ${className}`, children: /* @__PURE__ */ jsx2(
|
|
114
170
|
Button,
|
|
115
171
|
{
|
|
116
|
-
...{ ref: buttonRef },
|
|
117
|
-
className: Dropdown_module_default["dropdown__button"],
|
|
118
|
-
appearance,
|
|
119
172
|
onClick: handleToggle,
|
|
120
|
-
|
|
173
|
+
className: `${Dropdown_module_default["dropdown__button"]} ${(button == null ? void 0 : button.className) || ""}`,
|
|
174
|
+
appearance: (button == null ? void 0 : button.appearance) || appearance,
|
|
175
|
+
variant: (button == null ? void 0 : button.variant) || variant,
|
|
176
|
+
disabled: (button == null ? void 0 : button.disabled) || disabled,
|
|
177
|
+
...{ ref: buttonRef },
|
|
121
178
|
children: placeholder
|
|
122
179
|
}
|
|
123
180
|
) }),
|
|
124
|
-
/* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs2(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
animate: { opacity: 1, y: 0, scale: 1 },
|
|
143
|
-
exit: { opacity: 0, y: 20, scale: 0.95 },
|
|
144
|
-
transition: { duration: 0.2, ease: "easeIn" },
|
|
145
|
-
style: {
|
|
146
|
-
top: position.top,
|
|
147
|
-
left: position.left,
|
|
148
|
-
width: position.width
|
|
149
|
-
},
|
|
150
|
-
children: options.map(({ props }) => /* @__PURE__ */ createElement(
|
|
151
|
-
DropdownOption,
|
|
181
|
+
/* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs2(
|
|
182
|
+
"div",
|
|
183
|
+
{
|
|
184
|
+
className: `${Dropdown_module_default["dropdown__box"]} ${Dropdown_module_default[`dropdown__box-variant--${variant}`]}`,
|
|
185
|
+
children: [
|
|
186
|
+
/* @__PURE__ */ jsx2(
|
|
187
|
+
motion.div,
|
|
188
|
+
{
|
|
189
|
+
className: Dropdown_module_default["dropdown__box-overlay"],
|
|
190
|
+
initial: { opacity: 0 },
|
|
191
|
+
animate: { opacity: 1 },
|
|
192
|
+
exit: { opacity: 0 },
|
|
193
|
+
transition: { duration: 0.3, ease: "easeIn" },
|
|
194
|
+
onClick: () => setIsOpened(false)
|
|
195
|
+
}
|
|
196
|
+
),
|
|
197
|
+
/* @__PURE__ */ jsx2(
|
|
198
|
+
motion.div,
|
|
152
199
|
{
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
200
|
+
ref: boxRef,
|
|
201
|
+
className: Dropdown_module_default["dropdown__box-options"],
|
|
202
|
+
initial: { opacity: 0, y: 20, scale: 0.95 },
|
|
203
|
+
animate: { opacity: 1, y: 0, scale: 1 },
|
|
204
|
+
exit: { opacity: 0, y: 20, scale: 0.95 },
|
|
205
|
+
transition: { duration: 0.2, ease: "easeIn" },
|
|
206
|
+
style: {
|
|
207
|
+
top: position.top,
|
|
208
|
+
left: position.left,
|
|
209
|
+
width: position.width
|
|
210
|
+
},
|
|
211
|
+
children: options.map(({ props }) => /* @__PURE__ */ createElement(
|
|
212
|
+
DropdownOption,
|
|
213
|
+
{
|
|
214
|
+
...props,
|
|
215
|
+
variant,
|
|
216
|
+
appearance,
|
|
217
|
+
key: `${props.value}-${uniqueId}`,
|
|
218
|
+
selectedValues: selected,
|
|
219
|
+
onChange: () => handleChange(props.value)
|
|
220
|
+
}
|
|
221
|
+
))
|
|
157
222
|
}
|
|
158
|
-
)
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
223
|
+
)
|
|
224
|
+
]
|
|
225
|
+
}
|
|
226
|
+
) }) })
|
|
162
227
|
] });
|
|
163
228
|
};
|
|
164
229
|
export {
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../components/Dropdown/index.tsx","../components/DropdownOption/DropdownOption.module.scss","../components/DropdownOption/index.tsx","../components/Dropdown/Dropdown.module.scss"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\nimport styles from \"./Dropdown.module.scss\";\n\nexport interface IDropdown {\n children:\n | React.ReactElement<IDropdownOption>\n | React.ReactElement<IDropdownOption>[];\n value: string;\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n onChange?: (newValue: string) => void;\n initiallyOpened?: boolean;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\ntype PositionType = {\n top: 0;\n left: 0;\n width: 0;\n};\n\nexport const Dropdown: React.FC<IDropdown> = ({\n children,\n value,\n onChange,\n appearance = \"outline\",\n placeholder = \"Select\",\n className = \"\",\n initiallyOpened = false,\n disabled = false,\n}) => {\n const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n const [selected, setSelected] = React.useState<string>(value);\n const [position, setPosition] = React.useState<PositionType>({\n top: 0,\n left: 0,\n width: 0,\n });\n const [dropdownHeight, setDropdownHeight] = React.useState(0);\n const [buttonHeight, setButtonHeight] = React.useState(0);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const boxRef = React.useRef<HTMLDivElement>(null);\n const uniqueId = React.useId();\n\n React.useLayoutEffect(() => {\n if (!isOpened) {\n return;\n }\n\n if (boxRef.current) {\n setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n }\n\n if (buttonRef.current) {\n setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n }\n }, [isOpened]);\n\n const options = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<IDropdownOption> =>\n React.isValidElement(child) && child.type === DropdownOption\n );\n\n const isValidValue = () => {\n return !!options.find(({ props }) => props.value === value);\n };\n\n const handleChange = (currentRadioValue: string) => {\n onChange?.(currentRadioValue);\n setSelected(currentRadioValue);\n setIsOpened(false);\n };\n\n const handleToggle = () => {\n if (disabled) return;\n\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n\n const shouldOpenUpwards =\n dropdownHeight > 0 &&\n spaceBelow < dropdownHeight &&\n spaceAbove > dropdownHeight;\n\n const finalPosition = {\n top: shouldOpenUpwards\n ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n : rect.top + window.scrollY + buttonHeight + 6,\n left: rect.left + window.scrollX,\n width: rect.width,\n } as PositionType;\n\n setPosition(finalPosition);\n setIsOpened((prev) => !prev);\n };\n\n if (!isValidValue()) {\n throw new Error(\n 'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n );\n }\n\n return (\n <>\n <div className={`${styles[\"dropdown\"]} ${className}`}>\n <Button\n {...{ ref: buttonRef }}\n className={styles[\"dropdown__button\"]}\n appearance={appearance}\n onClick={handleToggle}\n disabled={disabled}\n >\n {placeholder}\n </Button>\n </div>\n\n <Portal>\n <AnimatePresence>\n {isOpened && (\n <div className={styles[\"dropdown__box\"]}>\n <motion.div\n className={styles[\"dropdown__box-overlay\"]}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, ease: \"easeIn\" }}\n onClick={() => setIsOpened(false)}\n />\n <motion.div\n ref={boxRef}\n className={styles[\"dropdown__box-options\"]}\n initial={{ opacity: 0, y: 20, scale: 0.95 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 20, scale: 0.95 }}\n transition={{ duration: 0.2, ease: \"easeIn\" }}\n style={{\n top: position.top,\n left: position.left,\n width: position.width,\n }}\n >\n {options.map(({ props }) => (\n <DropdownOption\n {...props}\n key={`${props.value}-${uniqueId}`}\n selectedValue={selected}\n onChange={() => handleChange(props.value)}\n />\n ))}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </Portal>\n </>\n );\n};\n",".dropdown-option {\n border-radius: 8px;\n color: #ffffff;\n font-size: 14px;\n font-weight: 500;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n}\n.dropdown-option:hover {\n background-color: #111827;\n}\n.dropdown-option__title {\n color: #ffffff;\n}\n.dropdown-option__description {\n color: rgba(255, 255, 255, 0.6);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd25PcHRpb24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duT3B0aW9uLm1vZHVsZS5zY3NzIiwiLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFO0VBQ0EsT0NHTTtFREZOO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFLGtCQzhCTzs7QUQzQlQ7RUFDRSxPQ1ZJOztBRGFOO0VBQ0UiLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiQGFyaXN0b2J5dGUtdWkvdXRpbHMvc3R5bGVzL3NldHRpbmdzXCIgYXMgKjtcblxuLmRyb3Bkb3duLW9wdGlvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDhweDsgLy9UT0RPOiBjaGFuZ2UgdG8gZHluYW1pY1xuICBjb2xvcjogJHdoaXRlO1xuICBmb250LXNpemU6IDE0cHg7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIHBhZGRpbmc6IDEwcHggMTZweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgdHJhbnNpdGlvbjogYWxsIDEyMG1zIGVhc2Utb3V0O1xuICB3aWR0aDogMTAwJTtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZGVmYXVsdC1ob3ZlcjtcbiAgfVxuXG4gICZfX3RpdGxlIHtcbiAgICBjb2xvcjogJHdoaXRlO1xuICB9XG5cbiAgJl9fZGVzY3JpcHRpb24ge1xuICAgIGNvbG9yOiByZ2JhKCR3aGl0ZSwgMC42KTtcbiAgfVxufVxuIiwiLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAvL1xuLy8gICAgICAgIEFyaXN0b0J5dGUgVUkgLSBTdHlsZSBTZXR0aW5ncyAgICAgICAvL1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAvL1xuXG4vLyA9PT0gRGVzaWduIFRva2VucyDigJQgQ29sb3IgUGFsZXR0ZSA9PT0gLy9cblxuLy8gQmFzZVxuJHdoaXRlOiAjZmZmZmZmO1xuJGJsYWNrOiAjMDAwMDAwO1xuJHRyYW5zcGFyZW50OiB0cmFuc3BhcmVudDtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJGJsYWNrLXRyYW5zcGFyZW50LTEwMDogcmdiYSgwLCAwLCAwLCAwLjEpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTIwMDogcmdiYSgwLCAwLCAwLCAwLjIpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTMwMDogcmdiYSgwLCAwLCAwLCAwLjMpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTQwMDogcmdiYSgwLCAwLCAwLCAwLjQpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTUwMDogcmdiYSgwLCAwLCAwLCAwLjUpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTYwMDogcmdiYSgwLCAwLCAwLCAwLjYpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTcwMDogcmdiYSgwLCAwLCAwLCAwLjcpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTgwMDogcmdiYSgwLCAwLCAwLCAwLjgpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTkwMDogcmdiYSgwLCAwLCAwLCAwLjkpO1xuXG4vLyA9PT0gQmxhY2sgVHJhbnNwYXJlbnQgU2NhbGUgPT09IC8vXG4kd2hpdGUtdHJhbnNwYXJlbnQtMTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNDAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtODAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtOTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOSk7XG5cbi8vID09PSBOZXV0cmFsIFNjYWxlIChHcmV5KSA9PT0gLy9cbiRncmV5LTUwOiAjZjlmYWZiO1xuJGdyZXktMTAwOiAjZjNmNGY2O1xuJGdyZXktMjAwOiAjZTVlN2ViO1xuJGdyZXktMzAwOiAjZDFkNWRiO1xuJGdyZXktNDAwOiAjOWNhM2FmO1xuJGdyZXktNTAwOiAjNmI3MjgwO1xuJGdyZXktNjAwOiAjNGI1NTYzO1xuJGdyZXktNzAwOiAjMzc0MTUxO1xuJGdyZXktODAwOiAjMWYyOTM3O1xuJGdyZXktOTAwOiAjMTExODI3O1xuXG4vLyA9PT0gUHJpbWFyeSBTY2FsZSAoQmx1ZSkgPT09IC8vXG4kYmx1ZS01MDogI2VmZjZmZjtcbiRibHVlLTEwMDogI2RiZWFmZTtcbiRibHVlLTIwMDogI2JmZGJmZTtcbiRibHVlLTMwMDogIzkzYzVmZDtcbiRibHVlLTQwMDogIzYwYTVmYTtcbiRibHVlLTUwMDogIzNiODJmNjtcbiRibHVlLTYwMDogIzI1NjNlYjsgLy8gTWFpblxuJGJsdWUtNzAwOiAjMWQ0ZWQ4OyAvLyBIb3ZlclxuJGJsdWUtODAwOiAjMWU0MGFmO1xuJGJsdWUtOTAwOiAjMWUzYThhO1xuXG4vLyA9PT0gU2Vjb25kYXJ5IFNjYWxlIChJbmRpZ28pID09PSAvL1xuJGluZGlnby01MDogI2VlZjJmZjtcbiRpbmRpZ28tMTAwOiAjZTBlN2ZmO1xuJGluZGlnby0yMDA6ICNjN2QyZmU7XG4kaW5kaWdvLTMwMDogI2E1YjRmYztcbiRpbmRpZ28tNDAwOiAjODE4Y2Y4O1xuJGluZGlnby01MDA6ICM2MzY2ZjE7XG4kaW5kaWdvLTYwMDogIzRmNDZlNTsgLy8gTWFpblxuJGluZGlnby03MDA6ICM0MzM4Y2E7IC8vIEhvdmVyXG5cbi8vID09PSBFcnJvciBTY2FsZSAoUmVkKSA9PT0gLy9cbiRyZWQtNTA6ICNmZWYyZjI7XG4kcmVkLTEwMDogI2ZlZTJlMjtcbiRyZWQtMjAwOiAjZmVjYWNhO1xuJHJlZC0zMDA6ICNmY2E1YTU7XG4kcmVkLTQwMDogI2Y4NzE3MTtcbiRyZWQtNTAwOiAjZWY0NDQ0O1xuJHJlZC02MDA6ICNkYzI2MjY7IC8vIE1haW5cbiRyZWQtNzAwOiAjYjkxYzFjOyAvLyBIb3ZlclxuXG4vLyA9PT0gU3VjY2VzcyBTY2FsZSAoR3JlZW4pID09PSAvL1xuJGdyZWVuLTUwOiAjZjBmZGY0O1xuJGdyZWVuLTEwMDogI2RjZmNlNztcbiRncmVlbi0yMDA6ICNiYmY3ZDA7XG4kZ3JlZW4tMzAwOiAjODZlZmFjO1xuJGdyZWVuLTQwMDogIzRhZGU4MDtcbiRncmVlbi01MDA6ICMyMmM1NWU7XG4kZ3JlZW4tNjAwOiAjMTZhMzRhOyAvLyBNYWluXG4kZ3JlZW4tNzAwOiAjMTU4MDNkOyAvLyBIb3ZlclxuXG4vLyA9PT0gV2FybmluZyBTY2FsZSAoQW1iZXIpID09PSAvL1xuJGFtYmVyLTUwOiAjZmZmYmViO1xuJGFtYmVyLTEwMDogI2ZlZjNjNztcbiRhbWJlci0yMDA6ICNmZGU2OGE7XG4kYW1iZXItMzAwOiAjZmNkMzRkO1xuJGFtYmVyLTQwMDogI2ZiYmYyNDtcbiRhbWJlci01MDA6ICNmNTllMGI7XG4kYW1iZXItNjAwOiAjZDk3NzA2OyAvLyBNYWluXG4kYW1iZXItNzAwOiAjYjQ1MzA5OyAvLyBIb3ZlclxuXG4vLyA9PT0gU2VtYW50aWMgVG9rZW5zID09PSAvL1xuJGNvbG9yLWRlZmF1bHQ6ICRncmV5LTgwMDtcbiRjb2xvci1kZWZhdWx0LWhvdmVyOiAkZ3JleS05MDA7XG4kY29sb3ItZGVmYXVsdC1kaXNhYmxlZDogcmdiYSgkY29sb3ItZGVmYXVsdCwgMC41KTtcblxuJGNvbG9yLXByaW1hcnk6ICRibHVlLTYwMDtcbiRjb2xvci1wcmltYXJ5LWhvdmVyOiAkYmx1ZS03MDA7XG4kY29sb3ItcHJpbWFyeS1kaXNhYmxlZDogcmdiYSgkY29sb3ItcHJpbWFyeSwgMC41KTtcblxuJGNvbG9yLXNlY29uZGFyeTogJGluZGlnby02MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWhvdmVyOiAkaW5kaWdvLTcwMDtcbiRjb2xvci1zZWNvbmRhcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXNlY29uZGFyeSwgMC41KTtcblxuJGNvbG9yLWVycm9yOiAkcmVkLTYwMDtcbiRjb2xvci1lcnJvci1ob3ZlcjogJHJlZC03MDA7XG4kY29sb3ItZXJyb3ItZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWVycm9yLCAwLjUpO1xuXG4kY29sb3Itc3VjY2VzczogJGdyZWVuLTYwMDtcbiRjb2xvci1zdWNjZXNzLWhvdmVyOiAkZ3JlZW4tNzAwO1xuJGNvbG9yLXN1Y2Nlc3MtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXN1Y2Nlc3MsIDAuNSk7XG5cbiRjb2xvci13YXJuaW5nOiAkYW1iZXItNjAwO1xuJGNvbG9yLXdhcm5pbmctaG92ZXI6ICRhbWJlci03MDA7XG4kY29sb3Itd2FybmluZy1kaXNhYmxlZDogcmdiYSgkY29sb3Itd2FybmluZywgMC41KTtcblxuJHRleHQtY29sb3Itd2hpdGU6ICR3aGl0ZTtcbiR0ZXh0LWNvbG9yLWJsYWNrOiAkYmxhY2s7XG4kdGV4dC1jb2xvci13aGl0ZS1kaXNhYmxlZDogcmdiYSgkd2hpdGUsIDAuNSk7XG4kdGV4dC1jb2xvci1ibGFjay1kaXNhYmxlZDogcmdiYSgkYmxhY2ssIDAuNSk7XG5cbi8vID09PSBTaGFkb3dzID09PSAvL1xuJHNoYWRvdy1zbTogMCAxcHggMnB4IDAgcmdiYSgkYmxhY2ssIDAuMDUpO1xuJHNoYWRvdy1tZDpcbiAgMCA0cHggNnB4IC0xcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgMnB4IDRweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjA2KTtcbiRzaGFkb3ctbGc6XG4gIDAgMTBweCAxNXB4IC0zcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgNHB4IDZweCAtMnB4IHJnYmEoJGJsYWNrLCAwLjA1KTtcblxuLy8gPT09IEZvbnQgZmFtaWxpZXMgPT09IC8vXG4kZm9udC1mYW1pbHktc2FuczogXCJJbnRlclwiLCBzYW5zLXNlcmlmO1xuJGZvbnQtZmFtaWx5LXNlcmlmOiBcIkdlb3JnaWFcIiwgc2VyaWY7XG4kZm9udC1mYW1pbHktbW9ubzogXCJGaXJhIENvZGVcIiwgbW9ub3NwYWNlO1xuXG4vLyA9PT0gRm9udCB3ZWlnaHRzID09PSAvL1xuJGZvbnQtd2VpZ2h0LXJlZ3VsYXI6IDQwMDtcbiRmb250LXdlaWdodC1tZWRpdW06IDUwMDtcbiRmb250LXdlaWdodC1zZW1pYm9sZDogNjAwO1xuJGZvbnQtd2VpZ2h0LWJvbGQ6IDcwMDtcblxuLy8gPT09IExpbmUgaGVpZ2h0cyA9PT0gLy9cbiRsaW5lLWhlaWdodC10aWdodDogMS4yO1xuJGxpbmUtaGVpZ2h0LXNudWc6IDEuMzc1O1xuJGxpbmUtaGVpZ2h0LW5vcm1hbDogMS41O1xuJGxpbmUtaGVpZ2h0LWxvb3NlOiAxLjYyNTtcblxuLy8gPT09IEZvbnQgU2l6ZXMg4oCUIFNlbWFudGljIFRva2VucyA9PT0gLy9cblxuLy8gPT09IFRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtaGVybzogM3JlbTsgLy8gNDhweFxuJGZvbnQtc2l6ZS10aXRsZS0xOiAyLjI1cmVtOyAvLyAzNnB4XG4kZm9udC1zaXplLXRpdGxlLTI6IDEuODc1cmVtOyAvLyAzMHB4XG4kZm9udC1zaXplLXRpdGxlLTM6IDEuNXJlbTsgLy8gMjRweFxuXG4vLyA9PT0gU3VidGl0bGVzID09PSAvL1xuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0xOiAxLjI1cmVtOyAvLyAyMHB4XG4kZm9udC1zaXplLXN1YnRpdGxlLTI6IDEuMTI1cmVtOyAvLyAxOHB4XG5cbi8vID09PSBCb2R5IHRleHQgPT09IC8vXG4kZm9udC1zaXplLWJvZHktbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYm9keS1tZDogMC45Mzc1cmVtOyAvLyAxNXB4XG4kZm9udC1zaXplLWJvZHktc206IDAuODc1cmVtOyAvLyAxNHB4XG5cbi8vID09PSBDYXB0aW9ucyAvIERlc2NyaXB0aW9ucyA9PT0gLy9cbiRmb250LXNpemUtY2FwdGlvbjogMC43NXJlbTsgLy8gMTJweFxuJGZvbnQtc2l6ZS1mb290bm90ZTogMC42ODc1cmVtOyAvLyAxMXB4XG5cbi8vID09PSBCdXR0b25zID09PSAvL1xuJGZvbnQtc2l6ZS1idXR0b24tbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYnV0dG9uLW1kOiAwLjg3NXJlbTsgLy8gMTRweFxuJGZvbnQtc2l6ZS1idXR0b24tc206IDAuNzVyZW07IC8vIDEycHhcblxuLy8gPT09IEFuaW1hdGlvbnMgPT09IC8vXG5cbiRjdWJpYy1iZXppZXItcHJpbWFyeTogY3ViaWMtYmV6aWVyKDAuNTUsIC0wLjE5LCAwLjU5LCAwLjk1KTtcbiRjdWJpYy1iZXppZXItc2Vjb25kYXJ5OiBjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxLjI3NSk7XG4iXX0= */","import * as React from \"react\";\n\nimport styles from \"./DropdownOption.module.scss\";\n\nexport interface IDropdownOption {\n children: string;\n value: string;\n onChange?: () => void;\n selectedValue?: string;\n description?: string;\n icon?: string;\n disabled?: boolean;\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n children,\n // value,\n // selectedValue,\n onChange,\n // icon,\n description,\n // disabled,\n}) => {\n // const isSelected = selectedValue === value;\n return (\n <button className={styles[\"dropdown-option\"]} onClick={onChange}>\n <div className={styles[\"dropdown-option__content\"]}>\n <h3 className={styles[\"dropdown-option__title\"]}>{children}</h3>\n <p className={styles[\"dropdown-option__description\"]}>{description}</p>\n </div>\n </button>\n );\n};\n",".dropdown {\n width: max-content;\n}\n.dropdown__button {\n width: max-content;\n}\n.dropdown__box-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n}\n.dropdown__box-options {\n align-items: flex-start;\n background-color: #1f2937;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duLm1vZHVsZS5zY3NzIiwiLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFOztBQUVBO0VBQ0U7O0FBSUE7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRjtFQUNFO0VBQ0Esa0JDb0JLO0VEbkJMO0VBQ0EsWUFDRTtFQUVGO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBLFlBQ0U7RUFFRjtFQUNBIiwic291cmNlc0NvbnRlbnQiOlsiQHVzZSBcIkBhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9zZXR0aW5nc1wiIGFzICo7XG5cbi5kcm9wZG93biB7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcblxuICAmX19idXR0b24ge1xuICAgIHdpZHRoOiBtYXgtY29udGVudDtcbiAgfVxuXG4gICZfX2JveCB7XG4gICAgJi1vdmVybGF5IHtcbiAgICAgIGJhY2tkcm9wLWZpbHRlcjogYmx1cigxMnB4KTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgICB0b3A6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHotaW5kZXg6IDk5OTk5OTk5OTk5O1xuICAgIH1cblxuICAgICYtb3B0aW9ucyB7XG4gICAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0O1xuICAgICAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gICAgICBib3gtc2hhZG93OlxuICAgICAgICAwIDRweCA2cHggcmdiYSgwLCAwLCAwLCAwLjA0KSxcbiAgICAgICAgMCAxMnB4IDI0cHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgbWluLXdpZHRoOiAzMDBweDtcbiAgICAgIHBhZGRpbmc6IDRweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIHRyYW5zZm9ybSAyMDBtcyAkY3ViaWMtYmV6aWVyLXNlY29uZGFyeSxcbiAgICAgICAgb3BhY2l0eSAxNTBtcyBlYXNlO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk5OTtcbiAgICB9XG4gIH1cbn1cbiIsIi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cbi8vICAgICAgICBBcmlzdG9CeXRlIFVJIC0gU3R5bGUgU2V0dGluZ3MgICAgICAgLy9cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cblxuLy8gPT09IERlc2lnbiBUb2tlbnMg4oCUIENvbG9yIFBhbGV0dGUgPT09IC8vXG5cbi8vIEJhc2VcbiR3aGl0ZTogI2ZmZmZmZjtcbiRibGFjazogIzAwMDAwMDtcbiR0cmFuc3BhcmVudDogdHJhbnNwYXJlbnQ7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiRibGFjay10cmFuc3BhcmVudC0xMDA6IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiRibGFjay10cmFuc3BhcmVudC0yMDA6IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiRibGFjay10cmFuc3BhcmVudC0zMDA6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiRibGFjay10cmFuc3BhcmVudC00MDA6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiRibGFjay10cmFuc3BhcmVudC01MDA6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiRibGFjay10cmFuc3BhcmVudC02MDA6IHJnYmEoMCwgMCwgMCwgMC42KTtcbiRibGFjay10cmFuc3BhcmVudC03MDA6IHJnYmEoMCwgMCwgMCwgMC43KTtcbiRibGFjay10cmFuc3BhcmVudC04MDA6IHJnYmEoMCwgMCwgMCwgMC44KTtcbiRibGFjay10cmFuc3BhcmVudC05MDA6IHJnYmEoMCwgMCwgMCwgMC45KTtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJHdoaXRlLXRyYW5zcGFyZW50LTEwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTIwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTMwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTQwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTUwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTYwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjYpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTcwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTgwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjgpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTkwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjkpO1xuXG4vLyA9PT0gTmV1dHJhbCBTY2FsZSAoR3JleSkgPT09IC8vXG4kZ3JleS01MDogI2Y5ZmFmYjtcbiRncmV5LTEwMDogI2YzZjRmNjtcbiRncmV5LTIwMDogI2U1ZTdlYjtcbiRncmV5LTMwMDogI2QxZDVkYjtcbiRncmV5LTQwMDogIzljYTNhZjtcbiRncmV5LTUwMDogIzZiNzI4MDtcbiRncmV5LTYwMDogIzRiNTU2MztcbiRncmV5LTcwMDogIzM3NDE1MTtcbiRncmV5LTgwMDogIzFmMjkzNztcbiRncmV5LTkwMDogIzExMTgyNztcblxuLy8gPT09IFByaW1hcnkgU2NhbGUgKEJsdWUpID09PSAvL1xuJGJsdWUtNTA6ICNlZmY2ZmY7XG4kYmx1ZS0xMDA6ICNkYmVhZmU7XG4kYmx1ZS0yMDA6ICNiZmRiZmU7XG4kYmx1ZS0zMDA6ICM5M2M1ZmQ7XG4kYmx1ZS00MDA6ICM2MGE1ZmE7XG4kYmx1ZS01MDA6ICMzYjgyZjY7XG4kYmx1ZS02MDA6ICMyNTYzZWI7IC8vIE1haW5cbiRibHVlLTcwMDogIzFkNGVkODsgLy8gSG92ZXJcbiRibHVlLTgwMDogIzFlNDBhZjtcbiRibHVlLTkwMDogIzFlM2E4YTtcblxuLy8gPT09IFNlY29uZGFyeSBTY2FsZSAoSW5kaWdvKSA9PT0gLy9cbiRpbmRpZ28tNTA6ICNlZWYyZmY7XG4kaW5kaWdvLTEwMDogI2UwZTdmZjtcbiRpbmRpZ28tMjAwOiAjYzdkMmZlO1xuJGluZGlnby0zMDA6ICNhNWI0ZmM7XG4kaW5kaWdvLTQwMDogIzgxOGNmODtcbiRpbmRpZ28tNTAwOiAjNjM2NmYxO1xuJGluZGlnby02MDA6ICM0ZjQ2ZTU7IC8vIE1haW5cbiRpbmRpZ28tNzAwOiAjNDMzOGNhOyAvLyBIb3ZlclxuXG4vLyA9PT0gRXJyb3IgU2NhbGUgKFJlZCkgPT09IC8vXG4kcmVkLTUwOiAjZmVmMmYyO1xuJHJlZC0xMDA6ICNmZWUyZTI7XG4kcmVkLTIwMDogI2ZlY2FjYTtcbiRyZWQtMzAwOiAjZmNhNWE1O1xuJHJlZC00MDA6ICNmODcxNzE7XG4kcmVkLTUwMDogI2VmNDQ0NDtcbiRyZWQtNjAwOiAjZGMyNjI2OyAvLyBNYWluXG4kcmVkLTcwMDogI2I5MWMxYzsgLy8gSG92ZXJcblxuLy8gPT09IFN1Y2Nlc3MgU2NhbGUgKEdyZWVuKSA9PT0gLy9cbiRncmVlbi01MDogI2YwZmRmNDtcbiRncmVlbi0xMDA6ICNkY2ZjZTc7XG4kZ3JlZW4tMjAwOiAjYmJmN2QwO1xuJGdyZWVuLTMwMDogIzg2ZWZhYztcbiRncmVlbi00MDA6ICM0YWRlODA7XG4kZ3JlZW4tNTAwOiAjMjJjNTVlO1xuJGdyZWVuLTYwMDogIzE2YTM0YTsgLy8gTWFpblxuJGdyZWVuLTcwMDogIzE1ODAzZDsgLy8gSG92ZXJcblxuLy8gPT09IFdhcm5pbmcgU2NhbGUgKEFtYmVyKSA9PT0gLy9cbiRhbWJlci01MDogI2ZmZmJlYjtcbiRhbWJlci0xMDA6ICNmZWYzYzc7XG4kYW1iZXItMjAwOiAjZmRlNjhhO1xuJGFtYmVyLTMwMDogI2ZjZDM0ZDtcbiRhbWJlci00MDA6ICNmYmJmMjQ7XG4kYW1iZXItNTAwOiAjZjU5ZTBiO1xuJGFtYmVyLTYwMDogI2Q5NzcwNjsgLy8gTWFpblxuJGFtYmVyLTcwMDogI2I0NTMwOTsgLy8gSG92ZXJcblxuLy8gPT09IFNlbWFudGljIFRva2VucyA9PT0gLy9cbiRjb2xvci1kZWZhdWx0OiAkZ3JleS04MDA7XG4kY29sb3ItZGVmYXVsdC1ob3ZlcjogJGdyZXktOTAwO1xuJGNvbG9yLWRlZmF1bHQtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWRlZmF1bHQsIDAuNSk7XG5cbiRjb2xvci1wcmltYXJ5OiAkYmx1ZS02MDA7XG4kY29sb3ItcHJpbWFyeS1ob3ZlcjogJGJsdWUtNzAwO1xuJGNvbG9yLXByaW1hcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXByaW1hcnksIDAuNSk7XG5cbiRjb2xvci1zZWNvbmRhcnk6ICRpbmRpZ28tNjAwO1xuJGNvbG9yLXNlY29uZGFyeS1ob3ZlcjogJGluZGlnby03MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1zZWNvbmRhcnksIDAuNSk7XG5cbiRjb2xvci1lcnJvcjogJHJlZC02MDA7XG4kY29sb3ItZXJyb3ItaG92ZXI6ICRyZWQtNzAwO1xuJGNvbG9yLWVycm9yLWRpc2FibGVkOiByZ2JhKCRjb2xvci1lcnJvciwgMC41KTtcblxuJGNvbG9yLXN1Y2Nlc3M6ICRncmVlbi02MDA7XG4kY29sb3Itc3VjY2Vzcy1ob3ZlcjogJGdyZWVuLTcwMDtcbiRjb2xvci1zdWNjZXNzLWRpc2FibGVkOiByZ2JhKCRjb2xvci1zdWNjZXNzLCAwLjUpO1xuXG4kY29sb3Itd2FybmluZzogJGFtYmVyLTYwMDtcbiRjb2xvci13YXJuaW5nLWhvdmVyOiAkYW1iZXItNzAwO1xuJGNvbG9yLXdhcm5pbmctZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXdhcm5pbmcsIDAuNSk7XG5cbiR0ZXh0LWNvbG9yLXdoaXRlOiAkd2hpdGU7XG4kdGV4dC1jb2xvci1ibGFjazogJGJsYWNrO1xuJHRleHQtY29sb3Itd2hpdGUtZGlzYWJsZWQ6IHJnYmEoJHdoaXRlLCAwLjUpO1xuJHRleHQtY29sb3ItYmxhY2stZGlzYWJsZWQ6IHJnYmEoJGJsYWNrLCAwLjUpO1xuXG4vLyA9PT0gU2hhZG93cyA9PT0gLy9cbiRzaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYmEoJGJsYWNrLCAwLjA1KTtcbiRzaGFkb3ctbWQ6XG4gIDAgNHB4IDZweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDJweCA0cHggLTFweCByZ2JhKCRibGFjaywgMC4wNik7XG4kc2hhZG93LWxnOlxuICAwIDEwcHggMTVweCAtM3B4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDRweCA2cHggLTJweCByZ2JhKCRibGFjaywgMC4wNSk7XG5cbi8vID09PSBGb250IGZhbWlsaWVzID09PSAvL1xuJGZvbnQtZmFtaWx5LXNhbnM6IFwiSW50ZXJcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1zZXJpZjogXCJHZW9yZ2lhXCIsIHNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IFwiRmlyYSBDb2RlXCIsIG1vbm9zcGFjZTtcblxuLy8gPT09IEZvbnQgd2VpZ2h0cyA9PT0gLy9cbiRmb250LXdlaWdodC1yZWd1bGFyOiA0MDA7XG4kZm9udC13ZWlnaHQtbWVkaXVtOiA1MDA7XG4kZm9udC13ZWlnaHQtc2VtaWJvbGQ6IDYwMDtcbiRmb250LXdlaWdodC1ib2xkOiA3MDA7XG5cbi8vID09PSBMaW5lIGhlaWdodHMgPT09IC8vXG4kbGluZS1oZWlnaHQtdGlnaHQ6IDEuMjtcbiRsaW5lLWhlaWdodC1zbnVnOiAxLjM3NTtcbiRsaW5lLWhlaWdodC1ub3JtYWw6IDEuNTtcbiRsaW5lLWhlaWdodC1sb29zZTogMS42MjU7XG5cbi8vID09PSBGb250IFNpemVzIOKAlCBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG5cbi8vID09PSBUaXRsZXMgPT09IC8vXG4kZm9udC1zaXplLWhlcm86IDNyZW07IC8vIDQ4cHhcbiRmb250LXNpemUtdGl0bGUtMTogMi4yNXJlbTsgLy8gMzZweFxuJGZvbnQtc2l6ZS10aXRsZS0yOiAxLjg3NXJlbTsgLy8gMzBweFxuJGZvbnQtc2l6ZS10aXRsZS0zOiAxLjVyZW07IC8vIDI0cHhcblxuLy8gPT09IFN1YnRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtc3VidGl0bGUtMTogMS4yNXJlbTsgLy8gMjBweFxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0yOiAxLjEyNXJlbTsgLy8gMThweFxuXG4vLyA9PT0gQm9keSB0ZXh0ID09PSAvL1xuJGZvbnQtc2l6ZS1ib2R5LWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJvZHktbWQ6IDAuOTM3NXJlbTsgLy8gMTVweFxuJGZvbnQtc2l6ZS1ib2R5LXNtOiAwLjg3NXJlbTsgLy8gMTRweFxuXG4vLyA9PT0gQ2FwdGlvbnMgLyBEZXNjcmlwdGlvbnMgPT09IC8vXG4kZm9udC1zaXplLWNhcHRpb246IDAuNzVyZW07IC8vIDEycHhcbiRmb250LXNpemUtZm9vdG5vdGU6IDAuNjg3NXJlbTsgLy8gMTFweFxuXG4vLyA9PT0gQnV0dG9ucyA9PT0gLy9cbiRmb250LXNpemUtYnV0dG9uLWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJ1dHRvbi1tZDogMC44NzVyZW07IC8vIDE0cHhcbiRmb250LXNpemUtYnV0dG9uLXNtOiAwLjc1cmVtOyAvLyAxMnB4XG5cbi8vID09PSBBbmltYXRpb25zID09PSAvL1xuXG4kY3ViaWMtYmV6aWVyLXByaW1hcnk6IGN1YmljLWJlemllcigwLjU1LCAtMC4xOSwgMC41OSwgMC45NSk7XG4kY3ViaWMtYmV6aWVyLXNlY29uZGFyeTogY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpO1xuIl19 */"],"mappings":"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","names":["dropdown-option","dropdown-option__title","dropdown-option__description","dropdown","dropdown__button","dropdown__box-overlay","dropdown__box-options","jsx","jsxs"]}
|
|
1
|
+
{"version":3,"sources":["../components/Dropdown/index.tsx","../components/DropdownOption/index.tsx","../components/DropdownOption/DropdownOption.module.scss","../components/Dropdown/Dropdown.module.scss"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button, type IButton } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\nimport styles from \"./Dropdown.module.scss\";\n\nexport interface IDropdown {\n children:\n | React.ReactElement<IDropdownOption>\n | React.ReactElement<IDropdownOption>[];\n value: string;\n button?: Omit<IButton, \"children\" | \"dangerouslySetInnerHTML\">;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n onChange?: (newValue: string) => void;\n initiallyOpened?: boolean;\n choice?: \"multiple\" | \"single\";\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\ntype PositionType = {\n top: 0;\n left: 0;\n width: 0;\n};\n\nexport const Dropdown: React.FC<IDropdown> = ({\n children,\n value,\n onChange,\n appearance = \"outline\",\n variant = \"default\",\n placeholder = \"Select\",\n choice = \"single\",\n className = \"\",\n initiallyOpened = false,\n disabled = false,\n button = {},\n}) => {\n const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n const [selected, setSelected] = React.useState<string[]>(\n value ? [value] : []\n );\n const [position, setPosition] = React.useState<PositionType>({\n top: 0,\n left: 0,\n width: 0,\n });\n const [dropdownHeight, setDropdownHeight] = React.useState(0);\n const [buttonHeight, setButtonHeight] = React.useState(0);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const boxRef = React.useRef<HTMLDivElement>(null);\n const uniqueId = React.useId();\n\n React.useLayoutEffect(() => {\n if (!isOpened) {\n return;\n }\n\n if (boxRef.current) {\n setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n }\n\n if (buttonRef.current) {\n setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n }\n }, [isOpened]);\n\n const options = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<IDropdownOption> =>\n React.isValidElement(child) && child.type === DropdownOption\n );\n\n const isValidValue = () => {\n return !!options.find(({ props }) => props.value === value);\n };\n\n const handleChange = (currentRadioValue: string) => {\n onChange?.(currentRadioValue);\n if (!choice) {\n setSelected([currentRadioValue]);\n setIsOpened(false);\n return;\n }\n\n if (choice === \"single\") {\n setSelected([currentRadioValue]);\n }\n\n if (choice === \"multiple\") {\n setSelected((prev) =>\n prev.includes(currentRadioValue)\n ? prev.filter((v) => v !== currentRadioValue)\n : [...prev, currentRadioValue]\n );\n }\n };\n\n const handleToggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled) return;\n\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n\n const shouldOpenUpwards =\n dropdownHeight > 0 &&\n spaceBelow < dropdownHeight &&\n spaceAbove > dropdownHeight;\n\n const finalPosition = {\n top: shouldOpenUpwards\n ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n : rect.top + window.scrollY + buttonHeight + 6,\n left: rect.left + window.scrollX,\n width: rect.width,\n } as PositionType;\n\n setPosition(finalPosition);\n\n if (button?.onClick) button.onClick(e);\n\n setIsOpened((prev) => !prev);\n };\n\n if (!isValidValue()) {\n throw new Error(\n 'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n );\n }\n\n return (\n <>\n <div className={`${styles[\"dropdown\"]} ${className}`}>\n <Button\n onClick={handleToggle}\n className={`${styles[\"dropdown__button\"]} ${button?.className || \"\"}`}\n appearance={button?.appearance || appearance}\n variant={button?.variant || variant}\n disabled={button?.disabled || disabled}\n {...{ ref: buttonRef }}\n >\n {placeholder}\n </Button>\n </div>\n\n <Portal>\n <AnimatePresence>\n {isOpened && (\n <div\n className={`${styles[\"dropdown__box\"]} ${styles[`dropdown__box-variant--${variant}`]}`}\n >\n <motion.div\n className={styles[\"dropdown__box-overlay\"]}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, ease: \"easeIn\" }}\n onClick={() => setIsOpened(false)}\n />\n <motion.div\n ref={boxRef}\n className={styles[\"dropdown__box-options\"]}\n initial={{ opacity: 0, y: 20, scale: 0.95 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 20, scale: 0.95 }}\n transition={{ duration: 0.2, ease: \"easeIn\" }}\n style={{\n top: position.top,\n left: position.left,\n width: position.width,\n }}\n >\n {options.map(({ props }) => (\n <DropdownOption\n {...props}\n variant={variant}\n appearance={appearance}\n key={`${props.value}-${uniqueId}`}\n selectedValues={selected}\n onChange={() => handleChange(props.value)}\n />\n ))}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </Portal>\n </>\n );\n};\n","import * as React from \"react\";\n\nimport styles from \"./DropdownOption.module.scss\";\nimport { Icons } from \"@aristobyte-ui/utils\";\n\nexport interface IDropdownOption {\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n children: string;\n value: string;\n onChange?: () => void;\n selectedValues?: string[];\n description?: string;\n icon?: string;\n disabled?: boolean;\n choice?: \"multiple\" | \"single\";\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n variant,\n children,\n value,\n selectedValues,\n onChange,\n // icon,\n description,\n disabled,\n}) => {\n const uniqueId = React.useId();\n return (\n <button\n key={uniqueId}\n disabled={disabled}\n className={`${styles[\"dropdown-option\"]} ${styles[`dropdown-option-variant--${variant}`]} ${disabled ? styles[\"dropdown-option--disabled\"] : \"\"}`}\n onClick={onChange}\n >\n <div className={styles[\"dropdown-option__content\"]}>\n <h3 className={styles[\"dropdown-option__title\"]}>{children}</h3>\n <p className={styles[\"dropdown-option__description\"]}>{description}</p>\n </div>\n <div\n className={`${styles[\"dropdown-option__tick\"]} ${selectedValues?.includes(value) ? styles[\"dropdown-option__tick--active\"] : \"\"}`}\n >\n <Icons.Success size={18} />\n </div>\n </button>\n );\n};\n",".dropdown-option {\n align-items: center;\n border-radius: 8px;\n color: #ffffff;\n display: flex;\n font-size: 14px;\n font-weight: 500;\n gap: 10px;\n padding: 10px 16px;\n text-align: left;\n transition: all 120ms ease-out;\n width: 100%;\n}\n.dropdown-option-variant--default:hover {\n background-color: #111827;\n}\n.dropdown-option-variant--primary:hover {\n background-color: #1d4ed8;\n}\n.dropdown-option-variant--secondary:hover {\n background-color: #4338ca;\n}\n.dropdown-option-variant--warning:hover {\n background-color: #b45309;\n}\n.dropdown-option-variant--error:hover {\n background-color: #b91c1c;\n}\n.dropdown-option-variant--success:hover {\n background-color: #15803d;\n}\n.dropdown-option--disabled, .dropdown-option--disabled:hover {\n background-color: rgba(31, 41, 55, 0.5);\n cursor: auto;\n opacity: 0.5;\n}\n.dropdown-option__title {\n color: #ffffff;\n}\n.dropdown-option__description {\n color: rgba(255, 255, 255, 0.6);\n}\n.dropdown-option__tick {\n color: rgba(255, 255, 255, 0.6);\n opacity: 0;\n transform: scale(0, 0.7) translate(0, 10px);\n transition: all 120ms ease-out;\n}\n.dropdown-option__tick--active {\n opacity: 1;\n transform: scale(1) translate(0);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd25PcHRpb24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duT3B0aW9uLm1vZHVsZS5zY3NzIiwiLi4vLi4vLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFO0VBQ0E7RUFDQSxPQ0VNO0VERE47RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRTtFQUNFLGtCQzBCSzs7QUR2QlA7RUFDRSxrQkNnQ0s7O0FEN0JQO0VBQ0Usa0JDd0NPOztBRHJDVDtFQUNFLGtCQ2tFTTs7QUQvRFI7RUFDRSxrQkMwQ0k7O0FEdkNOO0VBQ0Usa0JDZ0RNOztBRDVDVjtFQUVFLGtCQ3lEcUI7RUR4RHJCO0VBQ0E7O0FBR0Y7RUFDRSxPQzFDSTs7QUQ2Q047RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0U7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIkB1c2UgXCJAYXJpc3RvYnl0ZS11aS91dGlscy9zdHlsZXMvc2V0dGluZ3NcIiBhcyAqO1xuXG4uZHJvcGRvd24tb3B0aW9uIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gIGNvbG9yOiAkd2hpdGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbiAgZ2FwOiAxMHB4O1xuICBwYWRkaW5nOiAxMHB4IDE2cHg7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHRyYW5zaXRpb246IGFsbCAxMjBtcyBlYXNlLW91dDtcbiAgd2lkdGg6IDEwMCU7XG5cbiAgJi12YXJpYW50IHtcbiAgICAmLS1kZWZhdWx0OmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0LWhvdmVyO1xuICAgIH1cblxuICAgICYtLXByaW1hcnk6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJGNvbG9yLXByaW1hcnktaG92ZXI7XG4gICAgfVxuXG4gICAgJi0tc2Vjb25kYXJ5OmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1zZWNvbmRhcnktaG92ZXI7XG4gICAgfVxuXG4gICAgJi0td2FybmluZzpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itd2FybmluZy1ob3ZlcjtcbiAgICB9XG5cbiAgICAmLS1lcnJvcjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZXJyb3ItaG92ZXI7XG4gICAgfVxuXG4gICAgJi0tc3VjY2Vzczpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itc3VjY2Vzcy1ob3ZlcjtcbiAgICB9XG4gIH1cblxuICAmLS1kaXNhYmxlZCxcbiAgJi0tZGlzYWJsZWQ6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0LWRpc2FibGVkO1xuICAgIGN1cnNvcjogYXV0bztcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cblxuICAmX190aXRsZSB7XG4gICAgY29sb3I6ICR3aGl0ZTtcbiAgfVxuXG4gICZfX2Rlc2NyaXB0aW9uIHtcbiAgICBjb2xvcjogcmdiYSgkd2hpdGUsIDAuNik7XG4gIH1cblxuICAmX190aWNrIHtcbiAgICBjb2xvcjogcmdiYSgkd2hpdGUsIDAuNik7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAsIDAuNykgdHJhbnNsYXRlKDAsIDEwcHgpO1xuICAgIHRyYW5zaXRpb246IGFsbCAxMjBtcyBlYXNlLW91dDtcblxuICAgICYtLWFjdGl2ZSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKSB0cmFuc2xhdGUoMCk7XG4gICAgfVxuICB9XG59XG4iLCIvLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09IC8vXG4vLyAgICAgICAgQXJpc3RvQnl0ZSBVSSAtIFN0eWxlIFNldHRpbmdzICAgICAgIC8vXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09IC8vXG5cbi8vID09PSBEZXNpZ24gVG9rZW5zIOKAlCBDb2xvciBQYWxldHRlID09PSAvL1xuXG4vLyBCYXNlXG4kd2hpdGU6ICNmZmZmZmY7XG4kYmxhY2s6ICMwMDAwMDA7XG4kdHJhbnNwYXJlbnQ6IHRyYW5zcGFyZW50O1xuXG4vLyA9PT0gQmxhY2sgVHJhbnNwYXJlbnQgU2NhbGUgPT09IC8vXG4kYmxhY2stdHJhbnNwYXJlbnQtMTAwOiByZ2JhKDAsIDAsIDAsIDAuMSk7XG4kYmxhY2stdHJhbnNwYXJlbnQtMjAwOiByZ2JhKDAsIDAsIDAsIDAuMik7XG4kYmxhY2stdHJhbnNwYXJlbnQtMzAwOiByZ2JhKDAsIDAsIDAsIDAuMyk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNDAwOiByZ2JhKDAsIDAsIDAsIDAuNCk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNTAwOiByZ2JhKDAsIDAsIDAsIDAuNSk7XG4kYmxhY2stdHJhbnNwYXJlbnQtNjAwOiByZ2JhKDAsIDAsIDAsIDAuNik7XG4kYmxhY2stdHJhbnNwYXJlbnQtNzAwOiByZ2JhKDAsIDAsIDAsIDAuNyk7XG4kYmxhY2stdHJhbnNwYXJlbnQtODAwOiByZ2JhKDAsIDAsIDAsIDAuOCk7XG4kYmxhY2stdHJhbnNwYXJlbnQtOTAwOiByZ2JhKDAsIDAsIDAsIDAuOSk7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiR3aGl0ZS10cmFuc3BhcmVudC0xMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKTtcbiR3aGl0ZS10cmFuc3BhcmVudC0yMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4yKTtcbiR3aGl0ZS10cmFuc3BhcmVudC0zMDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zKTtcbiR3aGl0ZS10cmFuc3BhcmVudC00MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC40KTtcbiR3aGl0ZS10cmFuc3BhcmVudC01MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KTtcbiR3aGl0ZS10cmFuc3BhcmVudC02MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC42KTtcbiR3aGl0ZS10cmFuc3BhcmVudC03MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC43KTtcbiR3aGl0ZS10cmFuc3BhcmVudC04MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC44KTtcbiR3aGl0ZS10cmFuc3BhcmVudC05MDA6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC45KTtcblxuLy8gPT09IE5ldXRyYWwgU2NhbGUgKEdyZXkpID09PSAvL1xuJGdyZXktNTA6ICNmOWZhZmI7XG4kZ3JleS0xMDA6ICNmM2Y0ZjY7XG4kZ3JleS0yMDA6ICNlNWU3ZWI7XG4kZ3JleS0zMDA6ICNkMWQ1ZGI7XG4kZ3JleS00MDA6ICM5Y2EzYWY7XG4kZ3JleS01MDA6ICM2YjcyODA7XG4kZ3JleS02MDA6ICM0YjU1NjM7XG4kZ3JleS03MDA6ICMzNzQxNTE7XG4kZ3JleS04MDA6ICMxZjI5Mzc7XG4kZ3JleS05MDA6ICMxMTE4Mjc7XG5cbi8vID09PSBQcmltYXJ5IFNjYWxlIChCbHVlKSA9PT0gLy9cbiRibHVlLTUwOiAjZWZmNmZmO1xuJGJsdWUtMTAwOiAjZGJlYWZlO1xuJGJsdWUtMjAwOiAjYmZkYmZlO1xuJGJsdWUtMzAwOiAjOTNjNWZkO1xuJGJsdWUtNDAwOiAjNjBhNWZhO1xuJGJsdWUtNTAwOiAjM2I4MmY2O1xuJGJsdWUtNjAwOiAjMjU2M2ViOyAvLyBNYWluXG4kYmx1ZS03MDA6ICMxZDRlZDg7IC8vIEhvdmVyXG4kYmx1ZS04MDA6ICMxZTQwYWY7XG4kYmx1ZS05MDA6ICMxZTNhOGE7XG5cbi8vID09PSBTZWNvbmRhcnkgU2NhbGUgKEluZGlnbykgPT09IC8vXG4kaW5kaWdvLTUwOiAjZWVmMmZmO1xuJGluZGlnby0xMDA6ICNlMGU3ZmY7XG4kaW5kaWdvLTIwMDogI2M3ZDJmZTtcbiRpbmRpZ28tMzAwOiAjYTViNGZjO1xuJGluZGlnby00MDA6ICM4MThjZjg7XG4kaW5kaWdvLTUwMDogIzYzNjZmMTtcbiRpbmRpZ28tNjAwOiAjNGY0NmU1OyAvLyBNYWluXG4kaW5kaWdvLTcwMDogIzQzMzhjYTsgLy8gSG92ZXJcblxuLy8gPT09IEVycm9yIFNjYWxlIChSZWQpID09PSAvL1xuJHJlZC01MDogI2ZlZjJmMjtcbiRyZWQtMTAwOiAjZmVlMmUyO1xuJHJlZC0yMDA6ICNmZWNhY2E7XG4kcmVkLTMwMDogI2ZjYTVhNTtcbiRyZWQtNDAwOiAjZjg3MTcxO1xuJHJlZC01MDA6ICNlZjQ0NDQ7XG4kcmVkLTYwMDogI2RjMjYyNjsgLy8gTWFpblxuJHJlZC03MDA6ICNiOTFjMWM7IC8vIEhvdmVyXG5cbi8vID09PSBTdWNjZXNzIFNjYWxlIChHcmVlbikgPT09IC8vXG4kZ3JlZW4tNTA6ICNmMGZkZjQ7XG4kZ3JlZW4tMTAwOiAjZGNmY2U3O1xuJGdyZWVuLTIwMDogI2JiZjdkMDtcbiRncmVlbi0zMDA6ICM4NmVmYWM7XG4kZ3JlZW4tNDAwOiAjNGFkZTgwO1xuJGdyZWVuLTUwMDogIzIyYzU1ZTtcbiRncmVlbi02MDA6ICMxNmEzNGE7IC8vIE1haW5cbiRncmVlbi03MDA6ICMxNTgwM2Q7IC8vIEhvdmVyXG5cbi8vID09PSBXYXJuaW5nIFNjYWxlIChBbWJlcikgPT09IC8vXG4kYW1iZXItNTA6ICNmZmZiZWI7XG4kYW1iZXItMTAwOiAjZmVmM2M3O1xuJGFtYmVyLTIwMDogI2ZkZTY4YTtcbiRhbWJlci0zMDA6ICNmY2QzNGQ7XG4kYW1iZXItNDAwOiAjZmJiZjI0O1xuJGFtYmVyLTUwMDogI2Y1OWUwYjtcbiRhbWJlci02MDA6ICNkOTc3MDY7IC8vIE1haW5cbiRhbWJlci03MDA6ICNiNDUzMDk7IC8vIEhvdmVyXG5cbi8vID09PSBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG4kY29sb3ItZGVmYXVsdDogJGdyZXktODAwO1xuJGNvbG9yLWRlZmF1bHQtaG92ZXI6ICRncmV5LTkwMDtcbiRjb2xvci1kZWZhdWx0LWRpc2FibGVkOiByZ2JhKCRjb2xvci1kZWZhdWx0LCAwLjUpO1xuXG4kY29sb3ItcHJpbWFyeTogJGJsdWUtNjAwO1xuJGNvbG9yLXByaW1hcnktaG92ZXI6ICRibHVlLTcwMDtcbiRjb2xvci1wcmltYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1wcmltYXJ5LCAwLjUpO1xuXG4kY29sb3Itc2Vjb25kYXJ5OiAkaW5kaWdvLTYwMDtcbiRjb2xvci1zZWNvbmRhcnktaG92ZXI6ICRpbmRpZ28tNzAwO1xuJGNvbG9yLXNlY29uZGFyeS1kaXNhYmxlZDogcmdiYSgkY29sb3Itc2Vjb25kYXJ5LCAwLjUpO1xuXG4kY29sb3ItZXJyb3I6ICRyZWQtNjAwO1xuJGNvbG9yLWVycm9yLWhvdmVyOiAkcmVkLTcwMDtcbiRjb2xvci1lcnJvci1kaXNhYmxlZDogcmdiYSgkY29sb3ItZXJyb3IsIDAuNSk7XG5cbiRjb2xvci1zdWNjZXNzOiAkZ3JlZW4tNjAwO1xuJGNvbG9yLXN1Y2Nlc3MtaG92ZXI6ICRncmVlbi03MDA7XG4kY29sb3Itc3VjY2Vzcy1kaXNhYmxlZDogcmdiYSgkY29sb3Itc3VjY2VzcywgMC41KTtcblxuJGNvbG9yLXdhcm5pbmc6ICRhbWJlci02MDA7XG4kY29sb3Itd2FybmluZy1ob3ZlcjogJGFtYmVyLTcwMDtcbiRjb2xvci13YXJuaW5nLWRpc2FibGVkOiByZ2JhKCRjb2xvci13YXJuaW5nLCAwLjUpO1xuXG4kdGV4dC1jb2xvci13aGl0ZTogJHdoaXRlO1xuJHRleHQtY29sb3ItYmxhY2s6ICRibGFjaztcbiR0ZXh0LWNvbG9yLXdoaXRlLWRpc2FibGVkOiByZ2JhKCR3aGl0ZSwgMC41KTtcbiR0ZXh0LWNvbG9yLWJsYWNrLWRpc2FibGVkOiByZ2JhKCRibGFjaywgMC41KTtcblxuLy8gPT09IFNoYWRvd3MgPT09IC8vXG4kc2hhZG93LXNtOiAwIDFweCAycHggMCByZ2JhKCRibGFjaywgMC4wNSk7XG4kc2hhZG93LW1kOlxuICAwIDRweCA2cHggLTFweCByZ2JhKCRibGFjaywgMC4xKSxcbiAgMCAycHggNHB4IC0xcHggcmdiYSgkYmxhY2ssIDAuMDYpO1xuJHNoYWRvdy1sZzpcbiAgMCAxMHB4IDE1cHggLTNweCByZ2JhKCRibGFjaywgMC4xKSxcbiAgMCA0cHggNnB4IC0ycHggcmdiYSgkYmxhY2ssIDAuMDUpO1xuXG4vLyA9PT0gRm9udCBmYW1pbGllcyA9PT0gLy9cbiRmb250LWZhbWlseS1zYW5zOiBcIkludGVyXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktc2VyaWY6IFwiR2VvcmdpYVwiLCBzZXJpZjtcbiRmb250LWZhbWlseS1tb25vOiBcIkZpcmEgQ29kZVwiLCBtb25vc3BhY2U7XG5cbi8vID09PSBGb250IHdlaWdodHMgPT09IC8vXG4kZm9udC13ZWlnaHQtcmVndWxhcjogNDAwO1xuJGZvbnQtd2VpZ2h0LW1lZGl1bTogNTAwO1xuJGZvbnQtd2VpZ2h0LXNlbWlib2xkOiA2MDA7XG4kZm9udC13ZWlnaHQtYm9sZDogNzAwO1xuXG4vLyA9PT0gTGluZSBoZWlnaHRzID09PSAvL1xuJGxpbmUtaGVpZ2h0LXRpZ2h0OiAxLjI7XG4kbGluZS1oZWlnaHQtc251ZzogMS4zNzU7XG4kbGluZS1oZWlnaHQtbm9ybWFsOiAxLjU7XG4kbGluZS1oZWlnaHQtbG9vc2U6IDEuNjI1O1xuXG4vLyA9PT0gRm9udCBTaXplcyDigJQgU2VtYW50aWMgVG9rZW5zID09PSAvL1xuXG4vLyA9PT0gVGl0bGVzID09PSAvL1xuJGZvbnQtc2l6ZS1oZXJvOiAzcmVtOyAvLyA0OHB4XG4kZm9udC1zaXplLXRpdGxlLTE6IDIuMjVyZW07IC8vIDM2cHhcbiRmb250LXNpemUtdGl0bGUtMjogMS44NzVyZW07IC8vIDMwcHhcbiRmb250LXNpemUtdGl0bGUtMzogMS41cmVtOyAvLyAyNHB4XG5cbi8vID09PSBTdWJ0aXRsZXMgPT09IC8vXG4kZm9udC1zaXplLXN1YnRpdGxlLTE6IDEuMjVyZW07IC8vIDIwcHhcbiRmb250LXNpemUtc3VidGl0bGUtMjogMS4xMjVyZW07IC8vIDE4cHhcblxuLy8gPT09IEJvZHkgdGV4dCA9PT0gLy9cbiRmb250LXNpemUtYm9keS1sZzogMXJlbTsgLy8gMTZweFxuJGZvbnQtc2l6ZS1ib2R5LW1kOiAwLjkzNzVyZW07IC8vIDE1cHhcbiRmb250LXNpemUtYm9keS1zbTogMC44NzVyZW07IC8vIDE0cHhcblxuLy8gPT09IENhcHRpb25zIC8gRGVzY3JpcHRpb25zID09PSAvL1xuJGZvbnQtc2l6ZS1jYXB0aW9uOiAwLjc1cmVtOyAvLyAxMnB4XG4kZm9udC1zaXplLWZvb3Rub3RlOiAwLjY4NzVyZW07IC8vIDExcHhcblxuLy8gPT09IEJ1dHRvbnMgPT09IC8vXG4kZm9udC1zaXplLWJ1dHRvbi1sZzogMXJlbTsgLy8gMTZweFxuJGZvbnQtc2l6ZS1idXR0b24tbWQ6IDAuODc1cmVtOyAvLyAxNHB4XG4kZm9udC1zaXplLWJ1dHRvbi1zbTogMC43NXJlbTsgLy8gMTJweFxuXG4vLyA9PT0gQW5pbWF0aW9ucyA9PT0gLy9cblxuJGN1YmljLWJlemllci1wcmltYXJ5OiBjdWJpYy1iZXppZXIoMC41NSwgLTAuMTksIDAuNTksIDAuOTUpO1xuJGN1YmljLWJlemllci1zZWNvbmRhcnk6IGN1YmljLWJlemllcigwLjE3NSwgMC44ODUsIDAuMzIsIDEuMjc1KTtcbiJdfQ== */",".dropdown {\n width: max-content;\n}\n.dropdown__button {\n width: max-content;\n}\n.dropdown__box-variant--default .dropdown__box-options {\n background-color: #1f2937;\n}\n.dropdown__box-variant--primary .dropdown__box-options {\n background-color: #2563eb;\n}\n.dropdown__box-variant--secondary .dropdown__box-options {\n background-color: #4f46e5;\n}\n.dropdown__box-variant--warning .dropdown__box-options {\n background-color: #d97706;\n}\n.dropdown__box-variant--error .dropdown__box-options {\n background-color: #dc2626;\n}\n.dropdown__box-variant--success .dropdown__box-options {\n background-color: #16a34a;\n}\n.dropdown__box-overlay {\n backdrop-filter: blur(12px);\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 99999999999;\n}\n.dropdown__box-options {\n align-items: flex-start;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n opacity: 1;\n min-width: 300px;\n padding: 4px;\n position: absolute;\n transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;\n width: 100%;\n z-index: 99999999999;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duLm1vZHVsZS5zY3NzIiwiLi4vLi4vLi4vLi4vbm9kZV9tb2R1bGVzL0BhcmlzdG9ieXRlLXVpL3V0aWxzL3N0eWxlcy9fc2V0dGluZ3Muc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFOztBQUVBO0VBQ0U7O0FBSUE7RUFDRSxrQkMrQks7O0FENUJQO0VBQ0Usa0JDcUNLOztBRGxDUDtFQUNFLGtCQzZDTzs7QUQxQ1Q7RUFDRSxrQkN1RU07O0FEcEVSO0VBQ0Usa0JDK0NJOztBRDVDTjtFQUNFLGtCQ3FETTs7QURsRFI7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFHRjtFQUNFO0VBQ0E7RUFDQSxZQUNFO0VBRUY7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0EsWUFDRTtFQUVGO0VBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiQGFyaXN0b2J5dGUtdWkvdXRpbHMvc3R5bGVzL3NldHRpbmdzXCIgYXMgKjtcblxuLmRyb3Bkb3duIHtcbiAgd2lkdGg6IG1heC1jb250ZW50O1xuXG4gICZfX2J1dHRvbiB7XG4gICAgd2lkdGg6IG1heC1jb250ZW50O1xuICB9XG5cbiAgJl9fYm94IHtcbiAgICAmLXZhcmlhbnQtLWRlZmF1bHQgJi1vcHRpb25zIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1kZWZhdWx0O1xuICAgIH1cblxuICAgICYtdmFyaWFudC0tcHJpbWFyeSAmLW9wdGlvbnMge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJGNvbG9yLXByaW1hcnk7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS1zZWNvbmRhcnkgJi1vcHRpb25zIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRjb2xvci1zZWNvbmRhcnk7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS13YXJuaW5nICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itd2FybmluZztcbiAgICB9XG5cbiAgICAmLXZhcmlhbnQtLWVycm9yICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZXJyb3I7XG4gICAgfVxuXG4gICAgJi12YXJpYW50LS1zdWNjZXNzICYtb3B0aW9ucyB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3Itc3VjY2VzcztcbiAgICB9XG5cbiAgICAmLW92ZXJsYXkge1xuICAgICAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEycHgpO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk5OTk5OTk5OTk7XG4gICAgfVxuXG4gICAgJi1vcHRpb25zIHtcbiAgICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICAgICAgYm9yZGVyLXJhZGl1czogOHB4OyAvL1RPRE86IGNoYW5nZSB0byBkeW5hbWljXG4gICAgICBib3gtc2hhZG93OlxuICAgICAgICAwIDRweCA2cHggcmdiYSgwLCAwLCAwLCAwLjA0KSxcbiAgICAgICAgMCAxMnB4IDI0cHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgbWluLXdpZHRoOiAzMDBweDtcbiAgICAgIHBhZGRpbmc6IDRweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIHRyYW5zZm9ybSAyMDBtcyAkY3ViaWMtYmV6aWVyLXNlY29uZGFyeSxcbiAgICAgICAgb3BhY2l0eSAxNTBtcyBlYXNlO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk5OTtcbiAgICB9XG4gIH1cbn1cbiIsIi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cbi8vICAgICAgICBBcmlzdG9CeXRlIFVJIC0gU3R5bGUgU2V0dGluZ3MgICAgICAgLy9cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gLy9cblxuLy8gPT09IERlc2lnbiBUb2tlbnMg4oCUIENvbG9yIFBhbGV0dGUgPT09IC8vXG5cbi8vIEJhc2VcbiR3aGl0ZTogI2ZmZmZmZjtcbiRibGFjazogIzAwMDAwMDtcbiR0cmFuc3BhcmVudDogdHJhbnNwYXJlbnQ7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT0gLy9cbiRibGFjay10cmFuc3BhcmVudC0xMDA6IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiRibGFjay10cmFuc3BhcmVudC0yMDA6IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiRibGFjay10cmFuc3BhcmVudC0zMDA6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiRibGFjay10cmFuc3BhcmVudC00MDA6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiRibGFjay10cmFuc3BhcmVudC01MDA6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiRibGFjay10cmFuc3BhcmVudC02MDA6IHJnYmEoMCwgMCwgMCwgMC42KTtcbiRibGFjay10cmFuc3BhcmVudC03MDA6IHJnYmEoMCwgMCwgMCwgMC43KTtcbiRibGFjay10cmFuc3BhcmVudC04MDA6IHJnYmEoMCwgMCwgMCwgMC44KTtcbiRibGFjay10cmFuc3BhcmVudC05MDA6IHJnYmEoMCwgMCwgMCwgMC45KTtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PSAvL1xuJHdoaXRlLXRyYW5zcGFyZW50LTEwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTIwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTMwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTQwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTUwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTYwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjYpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTcwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTgwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjgpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTkwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjkpO1xuXG4vLyA9PT0gTmV1dHJhbCBTY2FsZSAoR3JleSkgPT09IC8vXG4kZ3JleS01MDogI2Y5ZmFmYjtcbiRncmV5LTEwMDogI2YzZjRmNjtcbiRncmV5LTIwMDogI2U1ZTdlYjtcbiRncmV5LTMwMDogI2QxZDVkYjtcbiRncmV5LTQwMDogIzljYTNhZjtcbiRncmV5LTUwMDogIzZiNzI4MDtcbiRncmV5LTYwMDogIzRiNTU2MztcbiRncmV5LTcwMDogIzM3NDE1MTtcbiRncmV5LTgwMDogIzFmMjkzNztcbiRncmV5LTkwMDogIzExMTgyNztcblxuLy8gPT09IFByaW1hcnkgU2NhbGUgKEJsdWUpID09PSAvL1xuJGJsdWUtNTA6ICNlZmY2ZmY7XG4kYmx1ZS0xMDA6ICNkYmVhZmU7XG4kYmx1ZS0yMDA6ICNiZmRiZmU7XG4kYmx1ZS0zMDA6ICM5M2M1ZmQ7XG4kYmx1ZS00MDA6ICM2MGE1ZmE7XG4kYmx1ZS01MDA6ICMzYjgyZjY7XG4kYmx1ZS02MDA6ICMyNTYzZWI7IC8vIE1haW5cbiRibHVlLTcwMDogIzFkNGVkODsgLy8gSG92ZXJcbiRibHVlLTgwMDogIzFlNDBhZjtcbiRibHVlLTkwMDogIzFlM2E4YTtcblxuLy8gPT09IFNlY29uZGFyeSBTY2FsZSAoSW5kaWdvKSA9PT0gLy9cbiRpbmRpZ28tNTA6ICNlZWYyZmY7XG4kaW5kaWdvLTEwMDogI2UwZTdmZjtcbiRpbmRpZ28tMjAwOiAjYzdkMmZlO1xuJGluZGlnby0zMDA6ICNhNWI0ZmM7XG4kaW5kaWdvLTQwMDogIzgxOGNmODtcbiRpbmRpZ28tNTAwOiAjNjM2NmYxO1xuJGluZGlnby02MDA6ICM0ZjQ2ZTU7IC8vIE1haW5cbiRpbmRpZ28tNzAwOiAjNDMzOGNhOyAvLyBIb3ZlclxuXG4vLyA9PT0gRXJyb3IgU2NhbGUgKFJlZCkgPT09IC8vXG4kcmVkLTUwOiAjZmVmMmYyO1xuJHJlZC0xMDA6ICNmZWUyZTI7XG4kcmVkLTIwMDogI2ZlY2FjYTtcbiRyZWQtMzAwOiAjZmNhNWE1O1xuJHJlZC00MDA6ICNmODcxNzE7XG4kcmVkLTUwMDogI2VmNDQ0NDtcbiRyZWQtNjAwOiAjZGMyNjI2OyAvLyBNYWluXG4kcmVkLTcwMDogI2I5MWMxYzsgLy8gSG92ZXJcblxuLy8gPT09IFN1Y2Nlc3MgU2NhbGUgKEdyZWVuKSA9PT0gLy9cbiRncmVlbi01MDogI2YwZmRmNDtcbiRncmVlbi0xMDA6ICNkY2ZjZTc7XG4kZ3JlZW4tMjAwOiAjYmJmN2QwO1xuJGdyZWVuLTMwMDogIzg2ZWZhYztcbiRncmVlbi00MDA6ICM0YWRlODA7XG4kZ3JlZW4tNTAwOiAjMjJjNTVlO1xuJGdyZWVuLTYwMDogIzE2YTM0YTsgLy8gTWFpblxuJGdyZWVuLTcwMDogIzE1ODAzZDsgLy8gSG92ZXJcblxuLy8gPT09IFdhcm5pbmcgU2NhbGUgKEFtYmVyKSA9PT0gLy9cbiRhbWJlci01MDogI2ZmZmJlYjtcbiRhbWJlci0xMDA6ICNmZWYzYzc7XG4kYW1iZXItMjAwOiAjZmRlNjhhO1xuJGFtYmVyLTMwMDogI2ZjZDM0ZDtcbiRhbWJlci00MDA6ICNmYmJmMjQ7XG4kYW1iZXItNTAwOiAjZjU5ZTBiO1xuJGFtYmVyLTYwMDogI2Q5NzcwNjsgLy8gTWFpblxuJGFtYmVyLTcwMDogI2I0NTMwOTsgLy8gSG92ZXJcblxuLy8gPT09IFNlbWFudGljIFRva2VucyA9PT0gLy9cbiRjb2xvci1kZWZhdWx0OiAkZ3JleS04MDA7XG4kY29sb3ItZGVmYXVsdC1ob3ZlcjogJGdyZXktOTAwO1xuJGNvbG9yLWRlZmF1bHQtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWRlZmF1bHQsIDAuNSk7XG5cbiRjb2xvci1wcmltYXJ5OiAkYmx1ZS02MDA7XG4kY29sb3ItcHJpbWFyeS1ob3ZlcjogJGJsdWUtNzAwO1xuJGNvbG9yLXByaW1hcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXByaW1hcnksIDAuNSk7XG5cbiRjb2xvci1zZWNvbmRhcnk6ICRpbmRpZ28tNjAwO1xuJGNvbG9yLXNlY29uZGFyeS1ob3ZlcjogJGluZGlnby03MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1zZWNvbmRhcnksIDAuNSk7XG5cbiRjb2xvci1lcnJvcjogJHJlZC02MDA7XG4kY29sb3ItZXJyb3ItaG92ZXI6ICRyZWQtNzAwO1xuJGNvbG9yLWVycm9yLWRpc2FibGVkOiByZ2JhKCRjb2xvci1lcnJvciwgMC41KTtcblxuJGNvbG9yLXN1Y2Nlc3M6ICRncmVlbi02MDA7XG4kY29sb3Itc3VjY2Vzcy1ob3ZlcjogJGdyZWVuLTcwMDtcbiRjb2xvci1zdWNjZXNzLWRpc2FibGVkOiByZ2JhKCRjb2xvci1zdWNjZXNzLCAwLjUpO1xuXG4kY29sb3Itd2FybmluZzogJGFtYmVyLTYwMDtcbiRjb2xvci13YXJuaW5nLWhvdmVyOiAkYW1iZXItNzAwO1xuJGNvbG9yLXdhcm5pbmctZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXdhcm5pbmcsIDAuNSk7XG5cbiR0ZXh0LWNvbG9yLXdoaXRlOiAkd2hpdGU7XG4kdGV4dC1jb2xvci1ibGFjazogJGJsYWNrO1xuJHRleHQtY29sb3Itd2hpdGUtZGlzYWJsZWQ6IHJnYmEoJHdoaXRlLCAwLjUpO1xuJHRleHQtY29sb3ItYmxhY2stZGlzYWJsZWQ6IHJnYmEoJGJsYWNrLCAwLjUpO1xuXG4vLyA9PT0gU2hhZG93cyA9PT0gLy9cbiRzaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYmEoJGJsYWNrLCAwLjA1KTtcbiRzaGFkb3ctbWQ6XG4gIDAgNHB4IDZweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDJweCA0cHggLTFweCByZ2JhKCRibGFjaywgMC4wNik7XG4kc2hhZG93LWxnOlxuICAwIDEwcHggMTVweCAtM3B4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDRweCA2cHggLTJweCByZ2JhKCRibGFjaywgMC4wNSk7XG5cbi8vID09PSBGb250IGZhbWlsaWVzID09PSAvL1xuJGZvbnQtZmFtaWx5LXNhbnM6IFwiSW50ZXJcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1zZXJpZjogXCJHZW9yZ2lhXCIsIHNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IFwiRmlyYSBDb2RlXCIsIG1vbm9zcGFjZTtcblxuLy8gPT09IEZvbnQgd2VpZ2h0cyA9PT0gLy9cbiRmb250LXdlaWdodC1yZWd1bGFyOiA0MDA7XG4kZm9udC13ZWlnaHQtbWVkaXVtOiA1MDA7XG4kZm9udC13ZWlnaHQtc2VtaWJvbGQ6IDYwMDtcbiRmb250LXdlaWdodC1ib2xkOiA3MDA7XG5cbi8vID09PSBMaW5lIGhlaWdodHMgPT09IC8vXG4kbGluZS1oZWlnaHQtdGlnaHQ6IDEuMjtcbiRsaW5lLWhlaWdodC1zbnVnOiAxLjM3NTtcbiRsaW5lLWhlaWdodC1ub3JtYWw6IDEuNTtcbiRsaW5lLWhlaWdodC1sb29zZTogMS42MjU7XG5cbi8vID09PSBGb250IFNpemVzIOKAlCBTZW1hbnRpYyBUb2tlbnMgPT09IC8vXG5cbi8vID09PSBUaXRsZXMgPT09IC8vXG4kZm9udC1zaXplLWhlcm86IDNyZW07IC8vIDQ4cHhcbiRmb250LXNpemUtdGl0bGUtMTogMi4yNXJlbTsgLy8gMzZweFxuJGZvbnQtc2l6ZS10aXRsZS0yOiAxLjg3NXJlbTsgLy8gMzBweFxuJGZvbnQtc2l6ZS10aXRsZS0zOiAxLjVyZW07IC8vIDI0cHhcblxuLy8gPT09IFN1YnRpdGxlcyA9PT0gLy9cbiRmb250LXNpemUtc3VidGl0bGUtMTogMS4yNXJlbTsgLy8gMjBweFxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0yOiAxLjEyNXJlbTsgLy8gMThweFxuXG4vLyA9PT0gQm9keSB0ZXh0ID09PSAvL1xuJGZvbnQtc2l6ZS1ib2R5LWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJvZHktbWQ6IDAuOTM3NXJlbTsgLy8gMTVweFxuJGZvbnQtc2l6ZS1ib2R5LXNtOiAwLjg3NXJlbTsgLy8gMTRweFxuXG4vLyA9PT0gQ2FwdGlvbnMgLyBEZXNjcmlwdGlvbnMgPT09IC8vXG4kZm9udC1zaXplLWNhcHRpb246IDAuNzVyZW07IC8vIDEycHhcbiRmb250LXNpemUtZm9vdG5vdGU6IDAuNjg3NXJlbTsgLy8gMTFweFxuXG4vLyA9PT0gQnV0dG9ucyA9PT0gLy9cbiRmb250LXNpemUtYnV0dG9uLWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJ1dHRvbi1tZDogMC44NzVyZW07IC8vIDE0cHhcbiRmb250LXNpemUtYnV0dG9uLXNtOiAwLjc1cmVtOyAvLyAxMnB4XG5cbi8vID09PSBBbmltYXRpb25zID09PSAvL1xuXG4kY3ViaWMtYmV6aWVyLXByaW1hcnk6IGN1YmljLWJlemllcigwLjU1LCAtMC4xOSwgMC41OSwgMC45NSk7XG4kY3ViaWMtYmV6aWVyLXNlY29uZGFyeTogY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpO1xuIl19 */"],"mappings":"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","names":["React","dropdown-option","dropdown-option-variant--default","dropdown-option-variant--primary","dropdown-option-variant--secondary","dropdown-option-variant--warning","dropdown-option-variant--error","dropdown-option-variant--success","dropdown-option--disabled","dropdown-option__title","dropdown-option__description","dropdown-option__tick","dropdown-option__tick--active","dropdown","dropdown__button","dropdown__box-variant--default","dropdown__box-options","dropdown__box-variant--primary","dropdown__box-variant--secondary","dropdown__box-variant--warning","dropdown__box-variant--error","dropdown__box-variant--success","dropdown__box-overlay","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/dropdown",
|
|
3
3
|
"description": "react dropdown component with trigger button, dropdownoptions, placement variants, fully typed typescript support, and composable integration with aristobyte ui button",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.32",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"main": "dist/index.js",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"check-types": "tsc --noEmit"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@aristobyte-ui/button": "^1.0.
|
|
62
|
-
"@aristobyte-ui/utils": "^1.0.
|
|
61
|
+
"@aristobyte-ui/button": "^1.0.32",
|
|
62
|
+
"@aristobyte-ui/utils": "^1.0.32",
|
|
63
63
|
"esbuild-sass-plugin": "^3.3.1",
|
|
64
64
|
"framer-motion": "^12.23.9",
|
|
65
65
|
"react": "^19.1.0",
|
|
@@ -69,8 +69,8 @@
|
|
|
69
69
|
"tsup": "^8.5.0"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@aristobyte-ui/eslint-config": "^1.0.
|
|
73
|
-
"@aristobyte-ui/typescript-config": "^1.0.
|
|
72
|
+
"@aristobyte-ui/eslint-config": "^1.0.32",
|
|
73
|
+
"@aristobyte-ui/typescript-config": "^1.0.32",
|
|
74
74
|
"@turbo/gen": "^2.5.0",
|
|
75
75
|
"@types/node": "^24.3.0",
|
|
76
76
|
"@types/react": "19.1.0",
|