se-design 0.0.123 → 0.0.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/assets/style.css +1 -1
  2. package/dist/components/DropdownWithInputTags/index.d.ts +1 -0
  3. package/dist/index23.js +34 -34
  4. package/dist/index23.js.map +1 -1
  5. package/dist/index36.js +113 -101
  6. package/dist/index36.js.map +1 -1
  7. package/dist/index37.js +7 -7
  8. package/dist/index37.js.map +1 -1
  9. package/dist/index43.js +24 -23
  10. package/dist/index43.js.map +1 -1
  11. package/package.json +1 -1
package/dist/assets/style.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.left-\[-8px\]{left:-8px}.right-0{right:0}.right-8{right:2rem}.right-\[-8px\]{right:-8px}.right-\[12px\]{right:12px}.top-0{top:0}.top-8{top:2rem}.top-\[12px\]{top:12px}.top-\[2px\]{top:2px}.top-\[3px\]{top:3px}.top-\[calc\(100\%\+8px\)\]{top:calc(100% + 8px)}.top-full{top:100%}.-z-10{z-index:-10}.z-10{z-index:10}.z-\[1000\]{z-index:1000}.z-\[1200\]{z-index:1200}.z-\[2000\]{z-index:2000}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-\[10px\]{margin-bottom:10px}.mb-\[3px\]{margin-bottom:3px}.mb-\[4px\]{margin-bottom:4px}.mb-\[8px\]{margin-bottom:8px}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-5{margin-left:1.25rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-5{margin-right:1.25rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-3{margin-top:.75rem}.mt-\[100px\]{margin-top:100px}.mt-\[12px\]{margin-top:12px}.mt-\[1vw\]{margin-top:1vw}.mt-\[4px\]{margin-top:4px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-10{height:2.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[15px\]{height:15px}.h-\[1px\]{height:1px}.h-\[40px\]{height:40px}.h-\[48px\]{height:48px}.h-\[6px\]{height:6px}.h-\[initial\]{height:initial}.h-auto{height:auto}.h-fit{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-0{max-height:0px}.max-h-\[1000vh\]{max-height:1000vh}.max-h-\[150px\]{max-height:150px}.min-h-\[45px\]{min-height:45px}.min-h-full{min-height:100%}.w-10{width:2.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\[100\%\]{width:100%}.w-\[100px\]{width:100px}.w-\[104px\]{width:104px}.w-\[124px\]{width:124px}.w-\[147px\]{width:147px}.w-\[15px\]{width:15px}.w-\[1px\]{width:1px}.w-\[350px\]{width:350px}.w-\[385px\]{width:385px}.w-\[48px\]{width:48px}.w-\[70\%\]{width:70%}.w-\[8px\]{width:8px}.w-fit{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-webkit-max-content;width:-moz-max-content;width:max-content}.min-w-24{min-width:6rem}.min-w-\[165px\]{min-width:165px}.min-w-\[212px\]{min-width:212px}.min-w-fit{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.max-w-60{max-width:15rem}.max-w-\[20vw\]{max-width:20vw}.max-w-\[50vw\]{max-width:50vw}.max-w-\[initial\]{max-width:initial}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.translate-x-4{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-\[10px\]{gap:10px}.gap-\[12px\]{gap:12px}.gap-\[2px\]{gap:2px}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-\[12px\]{border-radius:12px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[50\%\]{border-radius:50%}.rounded-\[6px\]{border-radius:6px}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-\[\#1088E7\]{border-color:#1088e7}.border-\[\#C9D4E3\]{border-color:#c9d4e3}.border-\[var\(--color-blue-500\)\]{border-color:var(--color-blue-500)}.border-\[var\(--color-gray-200\)\]{border-color:var(--color-gray-200)}.border-\[var\(--color-gray-300\)\]{border-color:var(--color-gray-300)}.border-\[var\(--color-gray-400\)\]{border-color:var(--color-gray-400)}.border-\[var\(--color-gray-600\)\]{border-color:var(--color-gray-600)}.border-\[var\(--color-green-300\)\]{border-color:var(--color-green-300)}.border-\[var\(--color-green-500\)\]{border-color:var(--color-green-500)}.border-\[var\(--color-red-500\)\]{border-color:var(--color-red-500)}.border-\[var\(--color-white\)\]{border-color:var(--color-white)}.border-\[var\(--color-yellow-700\)\]{border-color:var(--color-yellow-700)}.border-gray-200{border-color:#e5e7eb}.border-transparent{border-color:transparent}.bg-\[\#E5E7EB\]{background-color:#e5e7eb}.bg-\[var\(--color-blue-100\)\]{background-color:var(--color-blue-100)}.bg-\[var\(--color-blue-450\)\]{background-color:var(--color-blue-450)}.bg-\[var\(--color-blue-500\)\]{background-color:var(--color-blue-500)}.bg-\[var\(--color-gray-100\)\]{background-color:var(--color-gray-100)}.bg-\[var\(--color-gray-200\)\]{background-color:var(--color-gray-200)}.bg-\[var\(--color-gray-500\)\]{background-color:var(--color-gray-500)}.bg-\[var\(--color-gray-700\)\]{background-color:var(--color-gray-700)}.bg-\[var\(--color-gray-800\)\]{background-color:var(--color-gray-800)}.bg-\[var\(--color-green-50\)\]{background-color:var(--color-green-50)}.bg-\[var\(--color-green-500\)\]{background-color:var(--color-green-500)}.bg-\[var\(--color-red-50\)\]{background-color:var(--color-red-50)}.bg-\[var\(--color-red-500\)\]{background-color:var(--color-red-500)}.bg-\[var\(--color-white\)\]{background-color:var(--color-white)}.bg-\[var\(--color-yellow-50\)\]{background-color:var(--color-yellow-50)}.bg-white{background-color:#fff}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#3A91DA\]{--tw-gradient-from: #3A91DA var(--tw-gradient-from-position);--tw-gradient-to: rgb(58 145 218 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#2A5092\]{--tw-gradient-to: #2A5092 var(--tw-gradient-to-position)}.stroke-\[var\(--color-gray-600\)\]{stroke:var(--color-gray-600)}.object-contain{object-fit:contain}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-\[3px\]{padding:3px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-\[100px\]{padding-bottom:100px}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-2{padding-right:.5rem}.pr-3\.5{padding-right:.875rem}.pt-2{padding-top:.5rem}.pt-5{padding-top:1.25rem}.pt-\[60px\]{padding-top:60px}.text-left{text-align:left}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.text-\[18px\]{font-size:18px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-\[24px\]{line-height:24px}.leading-normal{line-height:1.5}.text-\[\#0078d4\]{color:#0078d4}.text-\[\#1088e7\]{color:#1088e7}.text-\[\#1B2636\]{color:#1b2636}.text-\[var\(--color-blue-500\)\]{color:var(--color-blue-500)}.text-\[var\(--color-blue-600\)\]{color:var(--color-blue-600)}.text-\[var\(--color-gray-400\)\]{color:var(--color-gray-400)}.text-\[var\(--color-gray-500\)\]{color:var(--color-gray-500)}.text-\[var\(--color-gray-600\)\]{color:var(--color-gray-600)}.text-\[var\(--color-gray-700\)\]{color:var(--color-gray-700)}.text-\[var\(--color-gray-800\)\]{color:var(--color-gray-800)}.text-\[var\(--color-gray-900\)\]{color:var(--color-gray-900)}.text-\[var\(--color-green-500\)\]{color:var(--color-green-500)}.text-\[var\(--color-red-500\)\]{color:var(--color-red-500)}.text-\[var\(--color-white\)\]{color:var(--color-white)}.text-\[var\(--color-yellow-700\)\]{color:var(--color-yellow-700)}.text-black{color:#000}.text-gray-500{color:#6b7280}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.accent-\[\#1088E7\]{accent-color:#1088E7}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-2{outline-width:2px}.outline-offset-2{outline-offset:2px}.outline-\[var\(--color-blue-400\)\]{outline-color:var(--color-blue-400)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-brightness-50{--tw-backdrop-brightness: brightness(.5);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}body{font-family:Inter,sans-serif}img{display:inline-block}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-\[-6px\]:before{content:var(--tw-content);left:-6px}.before\:left-\[calc\(10\%-7px\)\]:before{content:var(--tw-content);left:calc(10% - 7px)}.before\:left-\[calc\(50\%-7px\)\]:before{content:var(--tw-content);left:calc(50% - 7px)}.before\:right-\[-6px\]:before{content:var(--tw-content);right:-6px}.before\:right-\[calc\(10\%\+7px\)\]:before{content:var(--tw-content);right:calc(10% + 7px)}.before\:top-\[-7px\]:before{content:var(--tw-content);top:-7px}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-3\.5:before{content:var(--tw-content);height:.875rem}.before\:w-3\.5:before{content:var(--tw-content);width:.875rem}.before\:rotate-45:before{content:var(--tw-content);--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:rounded-tl-sm:before{content:var(--tw-content);border-top-left-radius:.125rem}.before\:bg-\[var\(--color-gray-800\)\]:before{content:var(--tw-content);background-color:var(--color-gray-800)}.first\:border-l-0:first-child{border-left-width:0px}.last\:text-right:last-child{text-align:right}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-\[var\(--color-gray-500\)\]:hover{border-color:var(--color-gray-500)}.hover\:border-\[var\(--color-green-700\)\]:hover{border-color:var(--color-green-700)}.hover\:border-\[var\(--color-red-500\)\]:hover{border-color:var(--color-red-500)}.hover\:border-\[var\(--color-white\)\]:hover{border-color:var(--color-white)}.hover\:border-\[var\(--color-yellow-900\)\]:hover{border-color:var(--color-yellow-900)}.hover\:bg-\[var\(--color-blue-100\)\]:hover{background-color:var(--color-blue-100)}.hover\:bg-\[var\(--color-blue-450\)\]:hover{background-color:var(--color-blue-450)}.hover\:bg-\[var\(--color-blue-500\)\]:hover{background-color:var(--color-blue-500)}.hover\:bg-\[var\(--color-blue-600\)\]:hover{background-color:var(--color-blue-600)}.hover\:bg-\[var\(--color-gray-100\)\]:hover{background-color:var(--color-gray-100)}.hover\:bg-\[var\(--color-gray-50\)\]:hover{background-color:var(--color-gray-50)}.hover\:bg-\[var\(--color-gray-500\)\]:hover{background-color:var(--color-gray-500)}.hover\:bg-\[var\(--color-green-400\)\]:hover{background-color:var(--color-green-400)}.hover\:bg-\[var\(--color-green-700\)\]:hover{background-color:var(--color-green-700)}.hover\:bg-\[var\(--color-red-50\)\]:hover{background-color:var(--color-red-50)}.hover\:bg-\[var\(--color-red-500\)\]:hover{background-color:var(--color-red-500)}.hover\:bg-\[var\(--color-yellow-50\)\]:hover{background-color:var(--color-yellow-50)}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-\[var\(--color-blue-600\)\]:hover{color:var(--color-blue-600)}.hover\:text-\[var\(--color-gray-900\)\]:hover{color:var(--color-gray-900)}.hover\:text-gray-700:hover{color:#374151}.focus\:border-transparent:focus{border-color:transparent}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:outline:focus-visible{outline-style:solid}.active\:border-transparent:active{border-color:transparent}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:visible{visibility:visible}.se-design-spinner{border:4px solid #008be7!important;border-top:4px solid #d1e0ea!important;border-radius:100%;height:20px!important;width:20px!important;animation:rotate 1.5s infinite linear}.se-design-loading-modal .se-design-spinner{border:4px solid #008be7!important;border-top:4px solid #d1e0ea!important;border-radius:100%;height:20px!important;width:20px!important;animation:rotate 1.5s infinite linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.se-design-table-content-loader td{padding:1rem 1rem 1rem 0}.se-design-table-content-loader td div{height:20px;width:80%;border-radius:72px}.se-design-table-content-loader td:last-child div{width:100%}.se-design-table-content-loader .loading-animation{animation:shimmer 3s infinite linear;background:linear-gradient(to right,#f4f8fd 5%,#f0f3f7 25%,#f4f8fd 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.se-design-checkbox-ctn{display:flex;align-items:center;gap:8px}.se-design-checkbox-ctn .se-design-checkbox{display:flex;align-items:baseline;cursor:pointer;gap:8px}.se-design-checkbox-ctn .se-design-checkbox .checkbox-item{display:flex;position:relative;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease-in-out}.se-design-checkbox-ctn .se-design-checkbox .checkbox-item:after{z-index:1;display:block;content:"";width:16px;height:16px}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]{display:none}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]:checked+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%231088E7'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]:checked:hover+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%230167C2'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.unchecked .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20fill='white'/%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20stroke='%23A1B3CF'%20stroke-width='1.2'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.unchecked:hover .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20fill='%23EAEFF9'/%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20stroke='%23A1B3CF'%20stroke-width='1.2'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.minus-checkbox input[type=checkbox]:checked+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%231088E7'/%3e%3cpath%20d='M12%208H4'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.minus-checkbox input[type=checkbox]:checked:hover+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%230167C2'/%3e%3cpath%20d='M12%208H4'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled,.se-design-checkbox-ctn .se-design-checkbox.disabled-tick,.se-design-checkbox-ctn .se-design-checkbox.disabled-minus-checkbox{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.se-design-checkbox-ctn .se-design-checkbox.disabled .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled-tick .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled-minus-checkbox .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M12%208H4'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .checkbox-label{position:relative;top:1px}.se-design-sidebar-overlay-container{height:100%;background-color:var(--color-white);transition:all .3s ease-in-out}.se-design-sidebar-overlay-container.left-aligned{left:0;transform:translate(-100%);box-shadow:7px 0 14px #00000017}.se-design-sidebar-overlay-container.left-aligned.open-sidebar{transform:translate(0)}.se-design-sidebar-overlay-container.right-aligned{right:0;transform:translate(100%);box-shadow:0 0 24px #0000000d}.se-design-sidebar-overlay-container.right-aligned.open-sidebar{transform:translate(0)}.se-design-sidebar-overlay-container.open-sidebar .overlay-content{opacity:1;height:100%;display:flex;flex-direction:column;width:100%;transition:opacity .3s ease-in-out}.se-design-sidebar-overlay-container.closed-sidebar .overlay-content{opacity:0;position:absolute;transform:inherit}.se-design-sidebar-overlay-container .overlay-close{position:absolute;right:15px;cursor:pointer;top:10px}.se-design-tabs-dropdown .dropdown-src-element{border:none;background-color:transparent;color:var(--color-blue-500);padding:0}.se-design-tabs-dropdown .dropdown-content{min-width:165px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.se-design-tabs-dropdown .popover-content{width:-webkit-max-content;width:-moz-max-content;width:max-content;left:0%!important;transform:translate(-5%)!important;top:120%!important}.banner-ctn .banner-title{font-size:18px;line-height:24px;font-weight:600;color:var(--color-gray-900)}.banner-ctn .banner-description{font-size:16px;line-height:20px;font-weight:400;color:var(--color-gray-700)}.banner-ctn .banner-image-ctn{display:flex;align-items:flex-end;margin-top:14px}@media screen and (min-width: 0px) and (max-width: 767px){.banner-ctn .banner-content-ctn{width:90%}.banner-ctn .banner-image-ctn{display:none}}@media screen and (min-width: 768px) and (max-width: 1023px){.banner-ctn .banner-content-ctn{width:60%}.banner-ctn .banner-image-ctn{display:flex;flex:1;align-items:center;margin:14px 14px 14px 0}}.widget-ctn .widget-title,.widget-ctn .webinar-title{font-size:18px;line-height:24px;font-weight:600}.widget-ctn .widget-description,.widget-ctn .widget-date{font-size:16px;line-height:24px;font-weight:400}.input-with-tags-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;border:1px solid #C9D4E3;cursor:text}.input-with-tags-container:focus-within{border-color:var(--color-blue-500)}.tag-in-inputwithtags{padding:2px 8px;display:flex;align-items:center;gap:4px;border-radius:var(--Corner-radius-6px, 6px);background:var(--Color-Background-Badge-Gray_default, #f2f4f8);color:var(--Color-Text-Body-Secondary, #415575);font-size:16px;text-align:center}.close-icon-in-inputwithtags{cursor:pointer}.input-with-tags-input,.input-with-tags-input:focus{flex-grow:1;border-width:0px;outline:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.dropdown-with-input-tags-wrapper{position:relative;width:100%}.dropdown-with-input-tags-label{display:block;margin-bottom:3px;font-size:14px;line-height:20px;font-weight:400;color:var(--color-gray-700)}.dropdown-with-input-tags-input-container{position:relative;width:100%;background-color:var(--color-white)}.dropdown-with-input-tags-popover{width:100%}.dropdown-with-input-tags-popover .popover-content{max-height:none!important;overflow:visible!important}.dropdown-with-input-tags-content{max-height:196px!important;overflow-y:auto!important;padding:4px 0}.dropdown-with-input-tags-option{padding:0 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background-color .2s ease;min-height:48px;align-items:flex-start;justify-content:center}.dropdown-with-input-tags-option:hover{background-color:var(--color-gray-50)}.dropdown-with-input-tags-option .option-label{font-size:14px;font-weight:500;color:var(--color-gray-900)}.dropdown-with-input-tags-option .option-value{font-size:12px;color:var(--color-gray-600)}.dropdown-with-input-tags-custom-option{border-top:1px solid var(--color-gray-200);background-color:var(--color-blue-50);color:var(--color-blue-700);font-style:italic}.dropdown-with-input-tags-custom-option:hover{background-color:var(--color-blue-100)}.dropdown-with-input-tags-no-options{padding:8px 12px}.dropdown-with-input-tags-no-options-text{font-size:14px;color:var(--color-gray-600);text-align:center;padding:8px 0}.dropdown-with-input-tags-wrapper .input-with-tags-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:1px 12px;border-radius:6px;border:1px solid var(--color-gray-600);cursor:text;max-height:196px;overflow-y:auto}.dropdown-with-input-tags-wrapper .input-with-tags-container:focus-within{border-color:var(--color-blue-500)}.dropdown-with-input-tags-wrapper .tag-in-inputwithtags{padding:2px 8px;display:flex;align-items:center;gap:4px;border-radius:var(--Corner-radius-6px, 6px);background:var(--color-blue-100);color:var(--color-gray-700);text-align:center;font-size:16px;line-height:24px;font-weight:400;margin:6px 0}.dropdown-with-input-tags-wrapper .close-icon-in-inputwithtags{cursor:pointer}.dropdown-with-input-tags-wrapper .input-with-tags-input,.dropdown-with-input-tags-wrapper .input-with-tags-input:focus{flex-grow:1;border-width:0;outline:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:transparent}.main-container{width:100%}.input-container-default{border-radius:6px;border:1px solid var(--color-gray-600);background:var(--color-white);color:var(--color-gray-900);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-error{border-radius:6px;border:1px solid var(--color-red-400);background:var(--color-white);color:var(--color-gray-900);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.se-search-box{min-height:40px;box-sizing:border-box;transition:width .3s ease-in-out;border:1px solid var(--color-gray-600);border-radius:6px;box-shadow:none}.se-search-box:focus-within{border:1px solid var(--color-blue-500)}.se-search-box .search-box-container{width:100%;padding:8px;position:relative;display:flex;align-items:center;justify-content:flex-start;cursor:text}.se-search-box .search-box-container .chips-and-search-box-container{display:flex;align-items:center;flex-grow:1;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:scroll}.se-search-box .search-box-container .search-input-container{display:flex;align-items:center;gap:8px;flex:1;min-width:100px}.se-search-box .search-box-container .search-input{border:none!important;outline:none!important;box-shadow:none!important;width:100%;padding:0;transition:all .2s ease-in-out}.se-search-box .search-box-container .search-input::-ms-input-placeholder{color:var(--color-gray-600)}.se-search-box .search-box-container .search-input::placeholder{color:var(--color-gray-600)}.se-search-box .search-box-container .filter-component-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;display:flex;align-self:stretch;border-left:1px solid var(--color-gray-400);padding-left:8px;margin-left:8px}.se-search-box .search-box-container .img-wrap.cross-icon{cursor:pointer}.se-search-box .search-box-container .img-wrap.cross-icon svg{stroke:transparent}.se-search-box .search-box-container ::-webkit-input-placeholder{color:#c2c2c2;font-size:.875rem}.se-search-box.shrink-box{width:32px!important;cursor:pointer}.progress-bar-ctn .steps-count{font-size:14px;line-height:18px;font-weight:400}.getting-started-widget-ctn .title{font-size:18px;line-height:24px;font-weight:600}.getting-started-widget-ctn .action-item-label{font-size:16px;line-height:24px;font-weight:400}.getting-started-widget-ctn .steps-count{font-size:14px;line-height:18px;font-weight:400}.getting-started-widget-ctn .get-started-progress-bar-ctn{width:100%!important}.se-design-message-bar .message-text{font-size:16px;line-height:24px;font-weight:400}.se-design-message-bar.show{animation:slideInDown .5s ease-in-out forwards;pointer-events:auto}.se-design-message-bar.hide{animation:slideUpOut .5s ease-in-out forwards;pointer-events:none}.se-design-message-bar .alert-btn{display:inline-block!important}.se-design-toast-bar{z-index:1100}.se-design-toast-bar .message-text{font-size:16px;line-height:24px;font-weight:400}.se-design-toast-bar.show{animation:slideInDown .5s ease-in-out forwards;pointer-events:auto}.se-design-toast-bar.hide{animation:slideUpOut .5s ease-in-out forwards;pointer-events:none}@keyframes slideInDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.main-container-autocomplete-se-design{width:100%;position:relative}.input-wrapper{position:relative;width:100%;display:flex;align-items:center}.input-icon-chevron{position:absolute;right:7px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-icon-close{position:absolute;right:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;width:24px;height:24px;transition:background-color .2s ease}.input-icon-close:hover{background-color:#0000000a}.input-container-default{border-radius:var(--Corner-radius-6px, .375rem);border:1px solid var(--Colors-Gray-600, #92a1b9);background:var(--Colors-White-Pure_white, #fff);color:var(--color-gray-900, #1b2636);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-default.with-icon{padding-right:20px}.input-container-default.with-icons{padding-right:45px}.input-container-default:focus-within{border-color:var(--color-blue-500);box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.input-container-error{border-radius:var(--Corner-radius-6px, .375rem);border:1px solid var(--color-red-500);background:var(--Colors-White-Pure_white, #fff);color:var(--color-gray-900, #1b2636);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-error.with-icon{padding-right:20px}.input-container-error.with-icons{padding-right:45px}.label-container{font-size:16px;line-height:24px;color:var(--Color-Text-Body-Secondary, #415575);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.428}.error-and-max-word{display:flex;justify-content:space-between;align-items:center}.error-and-max-word .error-message{font-size:16px;line-height:24px;font-weight:400;color:var(--color-red-500);font-size:.875rem}.error-and-max-word .max-word{font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-700);font-size:1rem}.max-word-container{display:flex;justify-content:end;align-items:center}.max-word-container .max-word{font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-700)}.input-container-disabled{background-color:var(--color-gray-100);cursor:not-allowed}.main-container-autocomplete-se-design .suggestions-list{display:flex;flex-direction:column;position:absolute;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:1000;width:100%;max-height:200px;overflow-y:auto;margin-top:1px;padding:0}.main-container-autocomplete-se-design .suggestion-item{padding:8px 12px;cursor:pointer;font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-900)}.main-container-autocomplete-se-design .suggestion-item:hover{background-color:var(--color-gray-100)}:root{--color-blue-50: #F5F9FD;--color-blue-100: #E9F2FC;--color-blue-200: #D6ECFB;--color-blue-300: #D7E6F9;--color-blue-400: #96CBF5;--color-blue-450: #66B1F1;--color-blue-500: #1088E7;--color-blue-600: #0167C2;--color-gray-50: #F2F4F8;--color-gray-100: #EAEFF9;--color-gray-200: #E4E9F1;--color-gray-300: #E1E4EB;--color-gray-400: #C9D4E3;--color-gray-500: #A1B3CF;--color-gray-600: #92A1B9;--color-gray-650: #5679AE;--color-gray-700: #415575;--color-gray-800: #2D3A48;--color-gray-900: #1B2636;--color-green-50: #E5F7ED;--color-green-400: #7BE79C;--color-green-500: #56CF8A;--color-green-600: #3DB370;--color-green-700: #219653;--color-yellow-50: #FFF2D7;--color-yellow-700: #954A29;--color-yellow-800: #682E15;--color-red-50: #FEEBE6;--color-red-500: #FE4773;--color-red-600: #E83560;--color-red-700: #CB384E;--color-white: #FFFFFF;--color-purple-50: #F6F3FF;--color-purple-100: #F5EBFD;--color-purple-200: #F1E4FF;--color-purple-300: #EAD5FF;--color-purple-800: #9335F0}.phone-input-container-se-design-main{border-radius:6px;border:1px solid var(--color-gray-600);background:var(--color-white);position:relative;width:100%;height:40px;display:flex;align-items:center}.phone-input-container-se-design-main:focus-within{border:1px solid var(--color-blue-500)}.phone-input-container-se-design-main.error{border:1px solid var(--color-red-500)}.phone-input-container-se-design{display:flex;align-items:center;padding:var(--Spacer-8px, 8px) var(--Spacer-12px, 12px);gap:12px;align-self:stretch}.phone-input-container-se-design .divider{width:1px;height:24px;background-color:#ccc;margin:0 12px}.phone-input-container-se-design-country-code{cursor:pointer;display:flex;align-items:center;gap:10px}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list{display:flex;flex-direction:column;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:1000;width:100%;max-height:200px;overflow-y:auto;margin-top:4px;padding:0}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list .search-input-wrapper{display:flex;align-items:center;position:relative}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list .search-icon{position:absolute;left:8px;pointer-events:none}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item{padding:8px 12px;cursor:pointer;font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-900);display:flex;align-items:center;gap:10px}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item:hover{background-color:var(--color-gray-100)}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-input{border:none!important;outline:none!important;padding-left:30px;flex:1;border-bottom:1px solid var(--color-gray-300)!important;height:100%}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-input:focus-within{border-color:var(--color-blue-500);box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-no-resuts{cursor:not-allowed;padding:8px 12px;color:var(--color-gray-900);font-size:16px;line-height:24px;font-weight:400}.phone-input-container-se-design-main-container .error-message{font-size:16px;line-height:24px;font-weight:400;color:var(--color-red-500);font-size:.875rem;display:flex;justify-content:end}.phone-input-container-se-design-phone-number-input{flex:1;height:100%;border:none;outline:none;width:100%}.phone-input-container-se-design-phone-number-input:focus-within{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.se-design-datepicker{border-radius:12px!important}.se-design-datepicker .datepicker-title{font-size:16px;line-height:20px;font-weight:600}.se-design-datepicker .datepicker-weekdays{font-size:14px;line-height:20px;font-weight:400;color:var(--color-gray-700);height:40px;width:40px;display:flex;justify-content:center;align-items:center}.se-design-datepicker .datepicker-navigation-icon:hover{cursor:pointer}.se-design-datepicker .datepicker-navigation-icon .disabled{cursor:not-allowed}.se-design-datepicker .dropdown-option-container .dropdown-src-element{border:none;background-color:var(--color-gray-50);color:var(--color-gray-700);padding:4px 8px}.se-design-datepicker .dropdown-option-container .dropdown-content{max-height:200px;color:var(--color-gray-700);overflow-y:auto}.custom-modal-style .modal-content{padding:0!important;border-radius:12px!important}
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.left-\[-8px\]{left:-8px}.right-0{right:0}.right-8{right:2rem}.right-\[-8px\]{right:-8px}.right-\[12px\]{right:12px}.top-0{top:0}.top-8{top:2rem}.top-\[12px\]{top:12px}.top-\[2px\]{top:2px}.top-\[3px\]{top:3px}.top-\[calc\(100\%\+8px\)\]{top:calc(100% + 8px)}.top-full{top:100%}.-z-10{z-index:-10}.z-10{z-index:10}.z-\[1000\]{z-index:1000}.z-\[1200\]{z-index:1200}.z-\[2000\]{z-index:2000}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-\[10px\]{margin-bottom:10px}.mb-\[3px\]{margin-bottom:3px}.mb-\[4px\]{margin-bottom:4px}.mb-\[8px\]{margin-bottom:8px}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-5{margin-left:1.25rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-5{margin-right:1.25rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-3{margin-top:.75rem}.mt-\[100px\]{margin-top:100px}.mt-\[12px\]{margin-top:12px}.mt-\[1vw\]{margin-top:1vw}.mt-\[4px\]{margin-top:4px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-10{height:2.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[15px\]{height:15px}.h-\[1px\]{height:1px}.h-\[40px\]{height:40px}.h-\[48px\]{height:48px}.h-\[6px\]{height:6px}.h-\[initial\]{height:initial}.h-auto{height:auto}.h-fit{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.h-full{height:100%}.max-h-0{max-height:0px}.max-h-\[1000vh\]{max-height:1000vh}.max-h-\[150px\]{max-height:150px}.min-h-\[45px\]{min-height:45px}.min-h-full{min-height:100%}.w-10{width:2.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\[100\%\]{width:100%}.w-\[100px\]{width:100px}.w-\[104px\]{width:104px}.w-\[124px\]{width:124px}.w-\[147px\]{width:147px}.w-\[15px\]{width:15px}.w-\[1px\]{width:1px}.w-\[350px\]{width:350px}.w-\[385px\]{width:385px}.w-\[48px\]{width:48px}.w-\[70\%\]{width:70%}.w-\[8px\]{width:8px}.w-fit{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-webkit-max-content;width:-moz-max-content;width:max-content}.min-w-24{min-width:6rem}.min-w-\[165px\]{min-width:165px}.min-w-\[212px\]{min-width:212px}.min-w-fit{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.max-w-60{max-width:15rem}.max-w-\[20vw\]{max-width:20vw}.max-w-\[50vw\]{max-width:50vw}.max-w-\[initial\]{max-width:initial}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.translate-x-4{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-\[10px\]{gap:10px}.gap-\[12px\]{gap:12px}.gap-\[2px\]{gap:2px}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-\[12px\]{border-radius:12px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[50\%\]{border-radius:50%}.rounded-\[6px\]{border-radius:6px}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-\[\#1088E7\]{border-color:#1088e7}.border-\[\#C9D4E3\]{border-color:#c9d4e3}.border-\[var\(--color-blue-500\)\]{border-color:var(--color-blue-500)}.border-\[var\(--color-gray-200\)\]{border-color:var(--color-gray-200)}.border-\[var\(--color-gray-300\)\]{border-color:var(--color-gray-300)}.border-\[var\(--color-gray-400\)\]{border-color:var(--color-gray-400)}.border-\[var\(--color-gray-600\)\]{border-color:var(--color-gray-600)}.border-\[var\(--color-green-300\)\]{border-color:var(--color-green-300)}.border-\[var\(--color-green-500\)\]{border-color:var(--color-green-500)}.border-\[var\(--color-red-500\)\]{border-color:var(--color-red-500)}.border-\[var\(--color-white\)\]{border-color:var(--color-white)}.border-\[var\(--color-yellow-700\)\]{border-color:var(--color-yellow-700)}.border-gray-200{border-color:#e5e7eb}.border-transparent{border-color:transparent}.bg-\[\#E5E7EB\]{background-color:#e5e7eb}.bg-\[var\(--color-blue-100\)\]{background-color:var(--color-blue-100)}.bg-\[var\(--color-blue-450\)\]{background-color:var(--color-blue-450)}.bg-\[var\(--color-blue-500\)\]{background-color:var(--color-blue-500)}.bg-\[var\(--color-gray-100\)\]{background-color:var(--color-gray-100)}.bg-\[var\(--color-gray-200\)\]{background-color:var(--color-gray-200)}.bg-\[var\(--color-gray-50\)\]{background-color:var(--color-gray-50)}.bg-\[var\(--color-gray-500\)\]{background-color:var(--color-gray-500)}.bg-\[var\(--color-gray-700\)\]{background-color:var(--color-gray-700)}.bg-\[var\(--color-gray-800\)\]{background-color:var(--color-gray-800)}.bg-\[var\(--color-green-50\)\]{background-color:var(--color-green-50)}.bg-\[var\(--color-green-500\)\]{background-color:var(--color-green-500)}.bg-\[var\(--color-red-50\)\]{background-color:var(--color-red-50)}.bg-\[var\(--color-red-500\)\]{background-color:var(--color-red-500)}.bg-\[var\(--color-white\)\]{background-color:var(--color-white)}.bg-\[var\(--color-yellow-50\)\]{background-color:var(--color-yellow-50)}.bg-white{background-color:#fff}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#3A91DA\]{--tw-gradient-from: #3A91DA var(--tw-gradient-from-position);--tw-gradient-to: rgb(58 145 218 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#2A5092\]{--tw-gradient-to: #2A5092 var(--tw-gradient-to-position)}.stroke-\[var\(--color-gray-600\)\]{stroke:var(--color-gray-600)}.object-contain{object-fit:contain}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.p-\[3px\]{padding:3px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-\[100px\]{padding-bottom:100px}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-2{padding-right:.5rem}.pr-3\.5{padding-right:.875rem}.pt-2{padding-top:.5rem}.pt-5{padding-top:1.25rem}.pt-\[60px\]{padding-top:60px}.text-left{text-align:left}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.text-\[18px\]{font-size:18px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-\[24px\]{line-height:24px}.leading-normal{line-height:1.5}.text-\[\#0078d4\]{color:#0078d4}.text-\[\#1088e7\]{color:#1088e7}.text-\[\#1B2636\]{color:#1b2636}.text-\[var\(--color-blue-500\)\]{color:var(--color-blue-500)}.text-\[var\(--color-blue-600\)\]{color:var(--color-blue-600)}.text-\[var\(--color-gray-400\)\]{color:var(--color-gray-400)}.text-\[var\(--color-gray-500\)\]{color:var(--color-gray-500)}.text-\[var\(--color-gray-600\)\]{color:var(--color-gray-600)}.text-\[var\(--color-gray-700\)\]{color:var(--color-gray-700)}.text-\[var\(--color-gray-800\)\]{color:var(--color-gray-800)}.text-\[var\(--color-gray-900\)\]{color:var(--color-gray-900)}.text-\[var\(--color-green-500\)\]{color:var(--color-green-500)}.text-\[var\(--color-red-500\)\]{color:var(--color-red-500)}.text-\[var\(--color-white\)\]{color:var(--color-white)}.text-\[var\(--color-yellow-700\)\]{color:var(--color-yellow-700)}.text-black{color:#000}.text-gray-500{color:#6b7280}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.accent-\[\#1088E7\]{accent-color:#1088E7}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-2{outline-width:2px}.outline-offset-2{outline-offset:2px}.outline-\[var\(--color-blue-400\)\]{outline-color:var(--color-blue-400)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-brightness-50{--tw-backdrop-brightness: brightness(.5);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}body{font-family:Inter,sans-serif}img{display:inline-block}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-\[-6px\]:before{content:var(--tw-content);left:-6px}.before\:left-\[calc\(10\%-7px\)\]:before{content:var(--tw-content);left:calc(10% - 7px)}.before\:left-\[calc\(50\%-7px\)\]:before{content:var(--tw-content);left:calc(50% - 7px)}.before\:right-\[-6px\]:before{content:var(--tw-content);right:-6px}.before\:right-\[calc\(10\%\+7px\)\]:before{content:var(--tw-content);right:calc(10% + 7px)}.before\:top-\[-7px\]:before{content:var(--tw-content);top:-7px}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-3\.5:before{content:var(--tw-content);height:.875rem}.before\:w-3\.5:before{content:var(--tw-content);width:.875rem}.before\:rotate-45:before{content:var(--tw-content);--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:rounded-tl-sm:before{content:var(--tw-content);border-top-left-radius:.125rem}.before\:bg-\[var\(--color-gray-800\)\]:before{content:var(--tw-content);background-color:var(--color-gray-800)}.first\:border-l-0:first-child{border-left-width:0px}.last\:text-right:last-child{text-align:right}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-\[var\(--color-gray-500\)\]:hover{border-color:var(--color-gray-500)}.hover\:border-\[var\(--color-green-700\)\]:hover{border-color:var(--color-green-700)}.hover\:border-\[var\(--color-red-500\)\]:hover{border-color:var(--color-red-500)}.hover\:border-\[var\(--color-white\)\]:hover{border-color:var(--color-white)}.hover\:border-\[var\(--color-yellow-900\)\]:hover{border-color:var(--color-yellow-900)}.hover\:bg-\[var\(--color-blue-100\)\]:hover{background-color:var(--color-blue-100)}.hover\:bg-\[var\(--color-blue-450\)\]:hover{background-color:var(--color-blue-450)}.hover\:bg-\[var\(--color-blue-500\)\]:hover{background-color:var(--color-blue-500)}.hover\:bg-\[var\(--color-blue-600\)\]:hover{background-color:var(--color-blue-600)}.hover\:bg-\[var\(--color-gray-100\)\]:hover{background-color:var(--color-gray-100)}.hover\:bg-\[var\(--color-gray-50\)\]:hover{background-color:var(--color-gray-50)}.hover\:bg-\[var\(--color-gray-500\)\]:hover{background-color:var(--color-gray-500)}.hover\:bg-\[var\(--color-green-400\)\]:hover{background-color:var(--color-green-400)}.hover\:bg-\[var\(--color-green-700\)\]:hover{background-color:var(--color-green-700)}.hover\:bg-\[var\(--color-red-50\)\]:hover{background-color:var(--color-red-50)}.hover\:bg-\[var\(--color-red-500\)\]:hover{background-color:var(--color-red-500)}.hover\:bg-\[var\(--color-yellow-50\)\]:hover{background-color:var(--color-yellow-50)}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-\[var\(--color-blue-600\)\]:hover{color:var(--color-blue-600)}.hover\:text-\[var\(--color-gray-900\)\]:hover{color:var(--color-gray-900)}.hover\:text-gray-700:hover{color:#374151}.focus\:border-transparent:focus{border-color:transparent}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:outline:focus-visible{outline-style:solid}.active\:border-transparent:active{border-color:transparent}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:visible{visibility:visible}.se-design-spinner{border:4px solid #008be7!important;border-top:4px solid #d1e0ea!important;border-radius:100%;height:20px!important;width:20px!important;animation:rotate 1.5s infinite linear}.se-design-loading-modal .se-design-spinner{border:4px solid #008be7!important;border-top:4px solid #d1e0ea!important;border-radius:100%;height:20px!important;width:20px!important;animation:rotate 1.5s infinite linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.se-design-table-content-loader td{padding:1rem 1rem 1rem 0}.se-design-table-content-loader td div{height:20px;width:80%;border-radius:72px}.se-design-table-content-loader td:last-child div{width:100%}.se-design-table-content-loader .loading-animation{animation:shimmer 3s infinite linear;background:linear-gradient(to right,#f4f8fd 5%,#f0f3f7 25%,#f4f8fd 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.se-design-checkbox-ctn{display:flex;align-items:center;gap:8px}.se-design-checkbox-ctn .se-design-checkbox{display:flex;align-items:baseline;cursor:pointer;gap:8px}.se-design-checkbox-ctn .se-design-checkbox .checkbox-item{display:flex;position:relative;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease-in-out}.se-design-checkbox-ctn .se-design-checkbox .checkbox-item:after{z-index:1;display:block;content:"";width:16px;height:16px}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]{display:none}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]:checked+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%231088E7'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox input[type=checkbox]:checked:hover+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%230167C2'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.unchecked .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20fill='white'/%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20stroke='%23A1B3CF'%20stroke-width='1.2'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.unchecked:hover .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20fill='%23EAEFF9'/%3e%3cpath%20d='M0.6%204C0.6%202.12223%202.12223%200.6%204%200.6H12C13.8778%200.6%2015.4%202.12223%2015.4%204V12C15.4%2013.8778%2013.8778%2015.4%2012%2015.4H4C2.12223%2015.4%200.6%2013.8778%200.6%2012V4Z'%20stroke='%23A1B3CF'%20stroke-width='1.2'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.minus-checkbox input[type=checkbox]:checked+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%231088E7'/%3e%3cpath%20d='M12%208H4'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.minus-checkbox input[type=checkbox]:checked:hover+.checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%230167C2'/%3e%3cpath%20d='M12%208H4'%20stroke='white'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled,.se-design-checkbox-ctn .se-design-checkbox.disabled-tick,.se-design-checkbox-ctn .se-design-checkbox.disabled-minus-checkbox{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.se-design-checkbox-ctn .se-design-checkbox.disabled .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled-tick .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .se-design-checkbox.disabled-minus-checkbox .checkbox-item:after{background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M12%208H4'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e")}.se-design-checkbox-ctn .checkbox-label{position:relative;top:1px}.se-design-sidebar-overlay-container{height:100%;background-color:var(--color-white);transition:all .3s ease-in-out}.se-design-sidebar-overlay-container.left-aligned{left:0;transform:translate(-100%);box-shadow:7px 0 14px #00000017}.se-design-sidebar-overlay-container.left-aligned.open-sidebar{transform:translate(0)}.se-design-sidebar-overlay-container.right-aligned{right:0;transform:translate(100%);box-shadow:0 0 24px #0000000d}.se-design-sidebar-overlay-container.right-aligned.open-sidebar{transform:translate(0)}.se-design-sidebar-overlay-container.open-sidebar .overlay-content{opacity:1;height:100%;display:flex;flex-direction:column;width:100%;transition:opacity .3s ease-in-out}.se-design-sidebar-overlay-container.closed-sidebar .overlay-content{opacity:0;position:absolute;transform:inherit}.se-design-sidebar-overlay-container .overlay-close{position:absolute;right:15px;cursor:pointer;top:10px}.se-design-tabs-dropdown .dropdown-src-element{border:none;background-color:transparent;color:var(--color-blue-500);padding:0}.se-design-tabs-dropdown .dropdown-content{min-width:165px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.se-design-tabs-dropdown .popover-content{width:-webkit-max-content;width:-moz-max-content;width:max-content;left:0%!important;transform:translate(-5%)!important;top:120%!important}.banner-ctn .banner-title{font-size:18px;line-height:24px;font-weight:600;color:var(--color-gray-900)}.banner-ctn .banner-description{font-size:16px;line-height:20px;font-weight:400;color:var(--color-gray-700)}.banner-ctn .banner-image-ctn{display:flex;align-items:flex-end;margin-top:14px}@media screen and (min-width: 0px) and (max-width: 767px){.banner-ctn .banner-content-ctn{width:90%}.banner-ctn .banner-image-ctn{display:none}}@media screen and (min-width: 768px) and (max-width: 1023px){.banner-ctn .banner-content-ctn{width:60%}.banner-ctn .banner-image-ctn{display:flex;flex:1;align-items:center;margin:14px 14px 14px 0}}.widget-ctn .widget-title,.widget-ctn .webinar-title{font-size:18px;line-height:24px;font-weight:600}.widget-ctn .widget-description,.widget-ctn .widget-date{font-size:16px;line-height:24px;font-weight:400}.input-with-tags-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;border:1px solid #C9D4E3;cursor:text}.input-with-tags-container:focus-within{border-color:var(--color-blue-500)}.tag-in-inputwithtags{padding:2px 8px;display:flex;align-items:center;gap:4px;border-radius:var(--Corner-radius-6px, 6px);background:var(--Color-Background-Badge-Gray_default, #f2f4f8);color:var(--Color-Text-Body-Secondary, #415575);font-size:16px;text-align:center}.close-icon-in-inputwithtags{cursor:pointer}.input-with-tags-input,.input-with-tags-input:focus{flex-grow:1;border-width:0px;outline:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.dropdown-with-input-tags-wrapper{position:relative;width:100%}.dropdown-with-input-tags-label{display:block;margin-bottom:3px;font-size:14px;line-height:20px;font-weight:400;color:var(--color-gray-700)}.dropdown-with-input-tags-input-container{position:relative;width:100%;background-color:var(--color-white)}.dropdown-with-input-tags-popover{width:100%}.dropdown-with-input-tags-popover .popover-content{max-height:none!important;overflow:visible!important}.dropdown-with-input-tags-content{max-height:196px!important;overflow-y:auto!important;padding:4px 0}.dropdown-with-input-tags-option{padding:0 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background-color .2s ease;min-height:48px;align-items:flex-start;justify-content:center}.dropdown-with-input-tags-option:hover{background-color:var(--color-gray-50)}.dropdown-with-input-tags-option .option-label{font-size:14px;font-weight:500;color:var(--color-gray-900)}.dropdown-with-input-tags-option .option-value{font-size:12px;color:var(--color-gray-600)}.dropdown-with-input-tags-custom-option{border-top:1px solid var(--color-gray-200);background-color:var(--color-blue-50);color:var(--color-blue-700);font-style:italic}.dropdown-with-input-tags-custom-option:hover{background-color:var(--color-blue-100)}.dropdown-with-input-tags-no-options{padding:8px 12px}.dropdown-with-input-tags-no-options-text{font-size:14px;color:var(--color-gray-600);text-align:center;padding:8px 0}.dropdown-with-input-tags-wrapper .input-with-tags-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:1px 12px;border-radius:6px;border:1px solid var(--color-gray-600);cursor:text;max-height:196px;overflow-y:auto}.dropdown-with-input-tags-wrapper .input-with-tags-container:focus-within{border:1px solid var(--color-blue-500)}.dropdown-with-input-tags-wrapper.disabled-wrapper{cursor:not-allowed}.dropdown-with-input-tags-wrapper.disabled-wrapper .input-with-tags-container{background-color:var(--color-gray-50);border:1px solid var(--color-gray-300);cursor:not-allowed}.dropdown-with-input-tags-wrapper.disabled-wrapper .input-with-tags-container:focus-within{border:1px solid var(--color-gray-300)}.dropdown-with-input-tags-wrapper.disabled-wrapper .tag-in-inputwithtags{background:var(--color-gray-100);color:var(--color-gray-500)}.dropdown-with-input-tags-wrapper.disabled-wrapper .close-icon-in-inputwithtags{cursor:not-allowed}.dropdown-with-input-tags-wrapper.disabled-wrapper .dropdown-with-input-tags-popover{pointer-events:none}.dropdown-with-input-tags-wrapper .tag-in-inputwithtags{padding:2px 8px;display:flex;align-items:center;gap:4px;border-radius:var(--Corner-radius-6px, 6px);background:var(--color-blue-100);color:var(--color-gray-700);text-align:center;font-size:16px;line-height:24px;font-weight:400;margin:6px 0}.dropdown-with-input-tags-wrapper .close-icon-in-inputwithtags{cursor:pointer}.dropdown-with-input-tags-wrapper .input-with-tags-input,.dropdown-with-input-tags-wrapper .input-with-tags-input:focus{flex-grow:1;border-width:0;outline:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:transparent}.dropdown-with-input-tags-wrapper .input-with-tags-input:disabled,.dropdown-with-input-tags-wrapper .input-with-tags-input:focus:disabled{cursor:not-allowed;color:var(--color-gray-500)}.input-main-container{width:100%}.input-main-container .input-container-disabled{background-color:var(--color-gray-50);border:1px solid var(--color-gray-300);cursor:not-allowed}.input-container-default{border-radius:6px;border:1px solid var(--color-gray-600);background:var(--color-white);color:var(--color-gray-900);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-error{border-radius:6px;border:1px solid var(--color-red-400);background:var(--color-white);color:var(--color-gray-900);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-disabled{background-color:var(--color-gray-50);border:1px solid var(--color-gray-300);cursor:not-allowed}.se-search-box{min-height:40px;box-sizing:border-box;transition:width .3s ease-in-out;border:1px solid var(--color-gray-600);border-radius:6px;box-shadow:none}.se-search-box:focus-within{border:1px solid var(--color-blue-500)}.se-search-box .search-box-container{width:100%;padding:8px;position:relative;display:flex;align-items:center;justify-content:flex-start;cursor:text}.se-search-box .search-box-container .chips-and-search-box-container{display:flex;align-items:center;flex-grow:1;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:scroll}.se-search-box .search-box-container .search-input-container{display:flex;align-items:center;gap:8px;flex:1;min-width:100px}.se-search-box .search-box-container .search-input{border:none!important;outline:none!important;box-shadow:none!important;width:100%;padding:0;transition:all .2s ease-in-out}.se-search-box .search-box-container .search-input::-ms-input-placeholder{color:var(--color-gray-600)}.se-search-box .search-box-container .search-input::placeholder{color:var(--color-gray-600)}.se-search-box .search-box-container .filter-component-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;display:flex;align-self:stretch;border-left:1px solid var(--color-gray-400);padding-left:8px;margin-left:8px}.se-search-box .search-box-container .img-wrap.cross-icon{cursor:pointer}.se-search-box .search-box-container .img-wrap.cross-icon svg{stroke:transparent}.se-search-box .search-box-container ::-webkit-input-placeholder{color:#c2c2c2;font-size:.875rem}.se-search-box.shrink-box{width:32px!important;cursor:pointer}.progress-bar-ctn .steps-count{font-size:14px;line-height:18px;font-weight:400}.getting-started-widget-ctn .title{font-size:18px;line-height:24px;font-weight:600}.getting-started-widget-ctn .action-item-label{font-size:16px;line-height:24px;font-weight:400}.getting-started-widget-ctn .steps-count{font-size:14px;line-height:18px;font-weight:400}.getting-started-widget-ctn .get-started-progress-bar-ctn{width:100%!important}.se-design-message-bar .message-text{font-size:16px;line-height:24px;font-weight:400}.se-design-message-bar.show{animation:slideInDown .5s ease-in-out forwards;pointer-events:auto}.se-design-message-bar.hide{animation:slideUpOut .5s ease-in-out forwards;pointer-events:none}.se-design-message-bar .alert-btn{display:inline-block!important}.se-design-toast-bar{z-index:1100}.se-design-toast-bar .message-text{font-size:16px;line-height:24px;font-weight:400}.se-design-toast-bar.show{animation:slideInDown .5s ease-in-out forwards;pointer-events:auto}.se-design-toast-bar.hide{animation:slideUpOut .5s ease-in-out forwards;pointer-events:none}@keyframes slideInDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.main-container-autocomplete-se-design{width:100%;position:relative}.input-wrapper{position:relative;width:100%;display:flex;align-items:center}.input-icon-chevron{position:absolute;right:7px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-icon-close{position:absolute;right:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;width:24px;height:24px;transition:background-color .2s ease}.input-icon-close:hover{background-color:#0000000a}.input-container-default{border-radius:var(--Corner-radius-6px, .375rem);border:1px solid var(--Colors-Gray-600, #92a1b9);background:var(--Colors-White-Pure_white, #fff);color:var(--color-gray-900, #1b2636);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-default.with-icon{padding-right:20px}.input-container-default.with-icons{padding-right:45px}.input-container-default:focus-within{border-color:var(--color-blue-500);box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.input-container-error{border-radius:var(--Corner-radius-6px, .375rem);border:1px solid var(--color-red-500);background:var(--Colors-White-Pure_white, #fff);color:var(--color-gray-900, #1b2636);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;width:100%}.input-container-error.with-icon{padding-right:20px}.input-container-error.with-icons{padding-right:45px}.label-container{font-size:16px;line-height:24px;color:var(--Color-Text-Body-Secondary, #415575);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.428}.error-and-max-word{display:flex;justify-content:space-between;align-items:center}.error-and-max-word .error-message{font-size:16px;line-height:24px;font-weight:400;color:var(--color-red-500);font-size:.875rem}.error-and-max-word .max-word{font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-700);font-size:1rem}.max-word-container{display:flex;justify-content:end;align-items:center}.max-word-container .max-word{font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-700)}.input-container-disabled{background-color:var(--color-gray-300);cursor:not-allowed}.main-container-autocomplete-se-design .suggestions-list{display:flex;flex-direction:column;position:absolute;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:1000;width:100%;max-height:200px;overflow-y:auto;margin-top:1px;padding:0}.main-container-autocomplete-se-design .suggestion-item{padding:8px 12px;cursor:pointer;font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-900)}.main-container-autocomplete-se-design .suggestion-item:hover{background-color:var(--color-gray-100)}:root{--color-blue-50: #F5F9FD;--color-blue-100: #E9F2FC;--color-blue-200: #D6ECFB;--color-blue-300: #D7E6F9;--color-blue-400: #96CBF5;--color-blue-450: #66B1F1;--color-blue-500: #1088E7;--color-blue-600: #0167C2;--color-gray-50: #F2F4F8;--color-gray-100: #EAEFF9;--color-gray-200: #E4E9F1;--color-gray-300: #E1E4EB;--color-gray-400: #C9D4E3;--color-gray-500: #A1B3CF;--color-gray-600: #92A1B9;--color-gray-650: #5679AE;--color-gray-700: #415575;--color-gray-800: #2D3A48;--color-gray-900: #1B2636;--color-green-50: #E5F7ED;--color-green-400: #7BE79C;--color-green-500: #56CF8A;--color-green-600: #3DB370;--color-green-700: #219653;--color-yellow-50: #FFF2D7;--color-yellow-700: #954A29;--color-yellow-800: #682E15;--color-red-50: #FEEBE6;--color-red-500: #FE4773;--color-red-600: #E83560;--color-red-700: #CB384E;--color-white: #FFFFFF;--color-purple-50: #F6F3FF;--color-purple-100: #F5EBFD;--color-purple-200: #F1E4FF;--color-purple-300: #EAD5FF;--color-purple-800: #9335F0}.phone-input-container-se-design-main{border-radius:6px;border:1px solid var(--color-gray-600);background:var(--color-white);position:relative;width:100%;height:40px;display:flex;align-items:center}.phone-input-container-se-design-main:focus-within{border:1px solid var(--color-blue-500)}.phone-input-container-se-design-main.error{border:1px solid var(--color-red-500)}.phone-input-container-se-design{display:flex;align-items:center;padding:var(--Spacer-8px, 8px) var(--Spacer-12px, 12px);gap:12px;align-self:stretch}.phone-input-container-se-design .divider{width:1px;height:24px;background-color:#ccc;margin:0 12px}.phone-input-container-se-design-country-code{cursor:pointer;display:flex;align-items:center;gap:10px}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list{display:flex;flex-direction:column;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:1000;width:100%;max-height:200px;overflow-y:auto;margin-top:4px;padding:0}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list .search-input-wrapper{display:flex;align-items:center;position:relative}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list .search-icon{position:absolute;left:8px;pointer-events:none}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item{padding:8px 12px;cursor:pointer;font-size:16px;line-height:24px;font-weight:400;color:var(--color-gray-900);display:flex;align-items:center;gap:10px}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item:hover{background-color:var(--color-gray-100)}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-input{border:none!important;outline:none!important;padding-left:30px;flex:1;border-bottom:1px solid var(--color-gray-300)!important;height:100%}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-input:focus-within{border-color:var(--color-blue-500);box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.phone-input-container-se-design-main .phone-input-container-se-design-country-code-list-item-no-resuts{cursor:not-allowed;padding:8px 12px;color:var(--color-gray-900);font-size:16px;line-height:24px;font-weight:400}.phone-input-container-se-design-main-container .error-message{font-size:16px;line-height:24px;font-weight:400;color:var(--color-red-500);font-size:.875rem;display:flex;justify-content:end}.phone-input-container-se-design-phone-number-input{flex:1;height:100%;border:none;outline:none;width:100%}.phone-input-container-se-design-phone-number-input:focus-within{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.se-design-datepicker{border-radius:12px!important}.se-design-datepicker .datepicker-title{font-size:16px;line-height:20px;font-weight:600}.se-design-datepicker .datepicker-weekdays{font-size:14px;line-height:20px;font-weight:400;color:var(--color-gray-700);height:40px;width:40px;display:flex;justify-content:center;align-items:center}.se-design-datepicker .datepicker-navigation-icon:hover{cursor:pointer}.se-design-datepicker .datepicker-navigation-icon .disabled{cursor:not-allowed}.se-design-datepicker .dropdown-option-container .dropdown-src-element{border:none;background-color:var(--color-gray-50);color:var(--color-gray-700);padding:4px 8px}.se-design-datepicker .dropdown-option-container .dropdown-content{max-height:200px;color:var(--color-gray-700);overflow-y:auto}.custom-modal-style .modal-content{padding:0!important;border-radius:12px!important}
package/dist/components/DropdownWithInputTags/index.d.ts CHANGED
@@ -20,5 +20,6 @@ export interface DropdownWithInputTagsProps {
20
20
  automationId?: string;
21
21
  noOptionsMessage?: string;
22
22
  allowCustomTags?: boolean;
23
+ disabled?: boolean;
23
24
  }
24
25
  export declare const DropdownWithInputTags: React.ForwardRefExoticComponent<DropdownWithInputTagsProps & React.RefAttributes<DropdownWithInputTagsHandle>>;
package/dist/index23.js CHANGED
@@ -2,28 +2,28 @@ var F = Object.defineProperty, G = Object.defineProperties;
2
2
  var H = Object.getOwnPropertyDescriptors;
3
3
  var k = Object.getOwnPropertySymbols;
4
4
  var K = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
5
- var N = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
6
- for (var d in c || (c = {}))
7
- K.call(c, d) && N(e, d, c[d]);
5
+ var N = (e, n, d) => n in e ? F(e, n, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[n] = d, w = (e, n) => {
6
+ for (var d in n || (n = {}))
7
+ K.call(n, d) && N(e, d, n[d]);
8
8
  if (k)
9
- for (var d of k(c))
10
- L.call(c, d) && N(e, d, c[d]);
9
+ for (var d of k(n))
10
+ L.call(n, d) && N(e, d, n[d]);
11
11
  return e;
12
- }, $ = (e, c) => G(e, H(c));
12
+ }, $ = (e, n) => G(e, H(n));
13
13
  import l, { useState as P, useRef as Q, useEffect as U } from "react";
14
14
  import { Popover as Y } from "./index17.js";
15
15
  import { Icon as V } from "./index5.js";
16
16
  import { Checkbox as Z } from "./index21.js";
17
17
  import { Button as j } from "./index3.js";
18
- const ce = (e) => {
19
- const [c, d] = P(!1), [a, i] = P(() => e != null && e.defaultSelectedValue ? [e.defaultSelectedValue] : []), f = Q(null), {
18
+ const ne = (e) => {
19
+ const [n, d] = P(!1), [a, i] = P(() => e != null && e.defaultSelectedValue ? [e.defaultSelectedValue] : []), f = Q(null), {
20
20
  selectBy: u = "",
21
21
  optionsUniqueBy: m = "",
22
22
  displaySelected: I = !1,
23
23
  dropDownOptions: o,
24
24
  defaultText: s = "Select",
25
- iconColor: g = "var(--color-gray-700)",
26
- disabled: x = !1,
25
+ iconColor: x = "var(--color-gray-700)",
26
+ disabled: v = !1,
27
27
  dropdownClassName: M = "",
28
28
  hasError: h = !1,
29
29
  errorMessage: A = ""
@@ -31,45 +31,45 @@ const ce = (e) => {
31
31
  U(() => {
32
32
  i(e != null && e.defaultSelectedValue ? [e.defaultSelectedValue] : []);
33
33
  }, [e == null ? void 0 : e.defaultSelectedValue]);
34
- const v = (e == null ? void 0 : e.type) === "multi-select", B = (t) => {
35
- var n, r;
36
- i([t]), (n = f.current) == null || n.togglePopover(), (r = e == null ? void 0 : e.onOptionClick) == null || r.call(e, t);
37
- }, R = (t) => v ? s : (t == null ? void 0 : t[u]) || s, T = () => {
34
+ const y = (e == null ? void 0 : e.type) === "multi-select", B = (t) => {
35
+ var c, r;
36
+ i([t]), (c = f.current) == null || c.togglePopover(), (r = e == null ? void 0 : e.onOptionClick) == null || r.call(e, t);
37
+ }, R = (t) => y ? s : (t == null ? void 0 : t[u]) || s, T = () => {
38
38
  i([]);
39
39
  }, S = (t) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(t) : /* @__PURE__ */ l.createElement("p", {
40
40
  className: "option-chip flex flex-1 items-center justify-between"
41
- }, R(t), " ", v && (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ l.createElement("span", {
41
+ }, R(t), " ", y && (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ l.createElement("span", {
42
42
  className: "w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center"
43
43
  }, a == null ? void 0 : a.length)), J = (t) => {
44
44
  var C, E;
45
- const n = t[u], r = ((C = a[0]) == null ? void 0 : C[u]) || s, y = m != null && m.length ? t[m] == ((E = a[0]) == null ? void 0 : E[m]) : !0, b = I && n === r && y;
45
+ const c = t[u], r = ((C = a[0]) == null ? void 0 : C[u]) || s, b = m != null && m.length ? t[m] == ((E = a[0]) == null ? void 0 : E[m]) : !0, g = I && c === r && b;
46
46
  return /* @__PURE__ */ l.createElement("div", {
47
- key: `$drop-option-${n}`,
48
- className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${b ? "selected" : ""}`,
47
+ key: `$drop-option-${c}`,
48
+ className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${g ? "selected" : ""}`,
49
49
  onClick: () => B(t)
50
50
  }, S($(w({}, t), {
51
- isOptionSelected: b
52
- })), b && /* @__PURE__ */ l.createElement(V, {
51
+ isOptionSelected: g
52
+ })), g && /* @__PURE__ */ l.createElement(V, {
53
53
  name: "checkmark",
54
- stroke: g
54
+ stroke: x
55
55
  }));
56
56
  }, _ = () => /* @__PURE__ */ l.createElement("div", {
57
57
  className: "dropdown-content dropdown-options"
58
- }, o == null ? void 0 : o.map((t) => J(t))), W = (t, n) => {
58
+ }, o == null ? void 0 : o.map((t) => J(t))), W = (t, c) => {
59
59
  let r = [];
60
- t ? r = [...a, n] : r = a == null ? void 0 : a.filter((y) => y[m] !== n[m]), i(r);
60
+ t ? r = [...a, c] : r = a == null ? void 0 : a.filter((b) => b[m] !== c[m]), i(r);
61
61
  }, X = () => {
62
- var t, n;
63
- (t = f.current) == null || t.togglePopover(), (n = e == null ? void 0 : e.onApply) == null || n.call(e, a);
62
+ var t, c;
63
+ (t = f.current) == null || t.togglePopover(), (c = e == null ? void 0 : e.onApply) == null || c.call(e, a);
64
64
  }, q = (t) => {
65
- const n = a.some((r) => r[m] === t[m]);
65
+ const c = a.some((r) => r[m] === t[m]);
66
66
  return /* @__PURE__ */ l.createElement("div", {
67
67
  key: `$drop-option-${t[u]}`,
68
68
  className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
69
69
  }, /* @__PURE__ */ l.createElement(Z, {
70
70
  automationId: "checkbox",
71
71
  className: "checkbox",
72
- defaultChecked: n,
72
+ defaultChecked: c,
73
73
  onChange: (r) => W(r, t),
74
74
  label: t == null ? void 0 : t.label
75
75
  }));
@@ -86,14 +86,14 @@ const ce = (e) => {
86
86
  type: "primary",
87
87
  onClick: X
88
88
  }))), D = () => {
89
- const t = c ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-600)]", n = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${n || t} flex items-center ${M}`;
89
+ const t = n ? "border-[var(--color-blue-500)]" : v ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", c = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${c || t} flex items-center ${M}`;
90
90
  return /* @__PURE__ */ l.createElement("div", {
91
91
  className: r
92
92
  }, S(a[0]), /* @__PURE__ */ l.createElement(V, {
93
93
  name: "chevron",
94
- rotation: c ? "180" : "0",
94
+ rotation: n ? "180" : "0",
95
95
  className: "ml-auto transition-transform",
96
- stroke: g
96
+ stroke: x
97
97
  }));
98
98
  };
99
99
  return /* @__PURE__ */ l.createElement("div", {
@@ -103,19 +103,19 @@ const ce = (e) => {
103
103
  className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
104
104
  }, e == null ? void 0 : e.label), /* @__PURE__ */ l.createElement("div", {
105
105
  style: e == null ? void 0 : e.style,
106
- className: `${x ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
106
+ className: `${v ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
107
107
  }, /* @__PURE__ */ l.createElement(Y, {
108
108
  ref: f,
109
- renderPopoverContents: v ? z : _,
109
+ renderPopoverContents: y ? z : _,
110
110
  contentWidth: "full",
111
111
  renderPopoverSrcElement: D,
112
112
  onPopoverToggle: (t) => d(t),
113
- disabled: x
113
+ disabled: v
114
114
  })), h && /* @__PURE__ */ l.createElement("div", {
115
115
  className: "text-[var(--color-red-500)] text-sm"
116
116
  }, A));
117
117
  };
118
118
  export {
119
- ce as Dropdown
119
+ ne as Dropdown
120
120
  };
121
121
  //# sourceMappingURL=index23.js.map
package/dist/index23.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n [key: string]: any;\n};\n\ntype DropdownProps = {\n label?: string;\n type: 'select' | 'multi-select';\n dropDownOptions?: DropdownValue[];\n defaultText?: string;\n selectBy?: string;\n optionsUniqueBy?: string;\n displaySelected?: boolean;\n defaultSelectedValue?: DropdownValue;\n onOptionClick?: (selectedValue: DropdownValue) => void;\n style?: React.CSSProperties;\n renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n className?: string;\n iconColor?: string;\n disabled?: boolean;\n dropdownClassName?: string;\n hasError?: boolean;\n errorMessage?: string;\n onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n props?.defaultSelectedValue ? [props.defaultSelectedValue] : []\n );\n const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n const {\n selectBy = '',\n optionsUniqueBy = '',\n displaySelected = false,\n dropDownOptions,\n defaultText = 'Select',\n iconColor = 'var(--color-gray-700)',\n disabled = false,\n dropdownClassName = '',\n hasError = false,\n errorMessage = ''\n } = props;\n\n useEffect(() => {\n setSelectedDropDownValues(props?.defaultSelectedValue ? [props.defaultSelectedValue] : []);\n }, [props?.defaultSelectedValue]);\n\n const isMultiSelect = props?.type === 'multi-select';\n\n const handleDropDownOptionClick = (dropDownOption: any) => {\n setSelectedDropDownValues([dropDownOption]);\n popoverRef.current?.togglePopover();\n props?.onOptionClick?.(dropDownOption);\n };\n\n const getSelectedDropDownValue = (option: DropdownValue) => {\n if (isMultiSelect) {\n return defaultText;\n }\n return option?.[selectBy] || defaultText;\n };\n\n const clearSelectedDropDownValues = () => {\n setSelectedDropDownValues([]);\n };\n\n const optionChip = (option: DropdownValue) => {\n if (props?.renderOptionChip) {\n return props?.renderOptionChip(option);\n }\n return (\n <p className={`option-chip flex flex-1 items-center justify-between`}>\n {getSelectedDropDownValue(option)}{' '}\n {isMultiSelect && selectedDropDownValues?.length > 0 && (\n <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n {selectedDropDownValues?.length}\n </span>\n )}\n </p>\n );\n };\n\n const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n const optionTxt = dropDownOption[selectBy];\n const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n const selectByUniqueId = optionsUniqueBy?.length\n ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n : true;\n const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n return (\n <div\n key={`$drop-option-${optionTxt}`}\n className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n onClick={() => handleDropDownOptionClick(dropDownOption)}\n >\n {optionChip({ ...dropDownOption, isOptionSelected })}\n {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n </div>\n );\n };\n\n const renderDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n </div>\n );\n };\n\n const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n let newSelectedDropDownValue: DropdownValue[] = [];\n if (isSelected) {\n newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n } else {\n newSelectedDropDownValue = selectedDropDownValues?.filter(\n (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n );\n }\n setSelectedDropDownValues(newSelectedDropDownValue);\n };\n\n const handleApplySelectedDropDownValues = () => {\n popoverRef.current?.togglePopover();\n props?.onApply?.(selectedDropDownValues);\n };\n\n const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n const isOptionSelected = selectedDropDownValues.some(\n (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n );\n return (\n <div\n key={`$drop-option-${dropDownOption[selectBy]}`}\n className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n >\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n label={dropDownOption?.label}\n />\n </div>\n );\n };\n\n const renderMultiSelectDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n <Button label=\"Clear\" type=\"link\" onClick={clearSelectedDropDownValues} />\n <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n </div>\n </div>\n );\n };\n\n const renderDropdownSelect = () => {\n const borderColor = isDropDownOpen ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-600)]';\n const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n return (\n <div className={dropDownSelectClass}>\n {optionChip(selectedDropDownValues[0])}\n <Icon\n name={'chevron'}\n rotation={isDropDownOpen ? '180' : '0'}\n className={`ml-auto transition-transform`}\n stroke={iconColor}\n />\n </div>\n );\n };\n\n return (\n <div\n className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n style={props?.style}\n >\n {props?.label && (\n <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n )}\n <div\n style={props?.style}\n className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}\n >\n <Popover\n ref={popoverRef}\n renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n contentWidth={'full'}\n renderPopoverSrcElement={renderDropdownSelect}\n onPopoverToggle={(value) => setIsDropDownOpen(value)}\n disabled={disabled}\n />\n </div>\n {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n </div>\n );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
1
+ {"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n [key: string]: any;\n};\n\ntype DropdownProps = {\n label?: string;\n type: 'select' | 'multi-select';\n dropDownOptions?: DropdownValue[];\n defaultText?: string;\n selectBy?: string;\n optionsUniqueBy?: string;\n displaySelected?: boolean;\n defaultSelectedValue?: DropdownValue;\n onOptionClick?: (selectedValue: DropdownValue) => void;\n style?: React.CSSProperties;\n renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n className?: string;\n iconColor?: string;\n disabled?: boolean;\n dropdownClassName?: string;\n hasError?: boolean;\n errorMessage?: string;\n onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n props?.defaultSelectedValue ? [props.defaultSelectedValue] : []\n );\n const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n const {\n selectBy = '',\n optionsUniqueBy = '',\n displaySelected = false,\n dropDownOptions,\n defaultText = 'Select',\n iconColor = 'var(--color-gray-700)',\n disabled = false,\n dropdownClassName = '',\n hasError = false,\n errorMessage = ''\n } = props;\n\n useEffect(() => {\n setSelectedDropDownValues(props?.defaultSelectedValue ? [props.defaultSelectedValue] : []);\n }, [props?.defaultSelectedValue]);\n\n const isMultiSelect = props?.type === 'multi-select';\n\n const handleDropDownOptionClick = (dropDownOption: any) => {\n setSelectedDropDownValues([dropDownOption]);\n popoverRef.current?.togglePopover();\n props?.onOptionClick?.(dropDownOption);\n };\n\n const getSelectedDropDownValue = (option: DropdownValue) => {\n if (isMultiSelect) {\n return defaultText;\n }\n return option?.[selectBy] || defaultText;\n };\n\n const clearSelectedDropDownValues = () => {\n setSelectedDropDownValues([]);\n };\n\n const optionChip = (option: DropdownValue) => {\n if (props?.renderOptionChip) {\n return props?.renderOptionChip(option);\n }\n return (\n <p className={`option-chip flex flex-1 items-center justify-between`}>\n {getSelectedDropDownValue(option)}{' '}\n {isMultiSelect && selectedDropDownValues?.length > 0 && (\n <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n {selectedDropDownValues?.length}\n </span>\n )}\n </p>\n );\n };\n\n const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n const optionTxt = dropDownOption[selectBy];\n const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n const selectByUniqueId = optionsUniqueBy?.length\n ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n : true;\n const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n return (\n <div\n key={`$drop-option-${optionTxt}`}\n className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n onClick={() => handleDropDownOptionClick(dropDownOption)}\n >\n {optionChip({ ...dropDownOption, isOptionSelected })}\n {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n </div>\n );\n };\n\n const renderDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n </div>\n );\n };\n\n const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n let newSelectedDropDownValue: DropdownValue[] = [];\n if (isSelected) {\n newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n } else {\n newSelectedDropDownValue = selectedDropDownValues?.filter(\n (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n );\n }\n setSelectedDropDownValues(newSelectedDropDownValue);\n };\n\n const handleApplySelectedDropDownValues = () => {\n popoverRef.current?.togglePopover();\n props?.onApply?.(selectedDropDownValues);\n };\n\n const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n const isOptionSelected = selectedDropDownValues.some(\n (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n );\n return (\n <div\n key={`$drop-option-${dropDownOption[selectBy]}`}\n className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n >\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n label={dropDownOption?.label}\n />\n </div>\n );\n };\n\n const renderMultiSelectDropdownContents = () => {\n return (\n <div className=\"dropdown-content dropdown-options\">\n {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n <Button label=\"Clear\" type=\"link\" onClick={clearSelectedDropDownValues} />\n <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n </div>\n </div>\n );\n };\n\n const renderDropdownSelect = () => {\n const borderColor = isDropDownOpen ? 'border-[var(--color-blue-500)]' : disabled ? 'border-[var(--color-gray-300)]' : 'border-[var(--color-gray-600)]';\n const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n return (\n <div className={dropDownSelectClass}>\n {optionChip(selectedDropDownValues[0])}\n <Icon\n name={'chevron'}\n rotation={isDropDownOpen ? '180' : '0'}\n className={`ml-auto transition-transform`}\n stroke={iconColor}\n />\n </div>\n );\n };\n\n return (\n <div\n className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n style={props?.style}\n >\n {props?.label && (\n <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n )}\n <div\n style={props?.style}\n className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n >\n <Popover\n ref={popoverRef}\n renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n contentWidth={'full'}\n renderPopoverSrcElement={renderDropdownSelect}\n onPopoverToggle={(value) => setIsDropDownOpen(value)}\n disabled={disabled}\n />\n </div>\n {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n </div>\n );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
package/dist/index36.js CHANGED
@@ -1,22 +1,23 @@
1
- import s, { forwardRef as H, useState as d, useRef as y, useEffect as I, useImperativeHandle as S } from "react";
2
- import { Popover as $ } from "./index17.js";
3
- import { Icon as j } from "./index5.js";
1
+ import l, { forwardRef as H, useState as w, useRef as I, useEffect as P, useImperativeHandle as S } from "react";
2
+ import { Popover as j } from "./index17.js";
3
+ import { Icon as q } from "./index5.js";
4
4
  /* empty css */
5
- const Q = /* @__PURE__ */ H(({
6
- value: f = [],
7
- onChange: n,
8
- placeholder: D = "Type to search or add custom tags...",
9
- className: P = "",
10
- options: r = [],
5
+ const U = /* @__PURE__ */ H(({
6
+ value: v = [],
7
+ onChange: s,
8
+ placeholder: T = "Type to search or add custom tags...",
9
+ className: R = "",
10
+ options: i = [],
11
11
  renderOption: E,
12
- onSearch: w,
13
- label: g,
14
- automationId: T = "",
15
- noOptionsMessage: b = "No options found",
16
- allowCustomTags: N = !0
17
- }, R) => {
18
- const [o, c] = d(() => f.map((t) => {
19
- const e = r.find((a) => a.value === t);
12
+ onSearch: d,
13
+ label: N,
14
+ automationId: O = "",
15
+ noOptionsMessage: k = "No options found",
16
+ allowCustomTags: h = !0,
17
+ disabled: n = !1
18
+ }, b) => {
19
+ const [u, p] = w(() => v.map((t) => {
20
+ const e = i.find((a) => a.value === t);
20
21
  return e ? {
21
22
  label: e.label,
22
23
  value: e.value
@@ -24,10 +25,10 @@ const Q = /* @__PURE__ */ H(({
24
25
  label: t,
25
26
  value: t
26
27
  };
27
- })), [l, p] = d(""), [m, k] = d(r), [u, i] = d(!1), O = y(null), h = y(null);
28
- I(() => {
29
- c(f.map((t) => {
30
- const e = r.find((a) => a.value === t);
28
+ })), [r, c] = w(""), [f, y] = w(i), [m, o] = w(!1), A = I(null), D = I(null);
29
+ P(() => {
30
+ p(v.map((t) => {
31
+ const e = i.find((a) => a.value === t);
31
32
  return e ? {
32
33
  label: e.label,
33
34
  value: e.value
@@ -36,127 +37,138 @@ const Q = /* @__PURE__ */ H(({
36
37
  value: t
37
38
  };
38
39
  }));
39
- }, [f, r]), I(() => {
40
- if (!l.trim())
41
- k(r);
40
+ }, [v, i]), P(() => {
41
+ if (!r.trim())
42
+ y(i);
42
43
  else {
43
- const t = r.filter((e) => e.label.toLowerCase().includes(l.toLowerCase()) || e.value.toLowerCase().includes(l.toLowerCase()));
44
- k(t);
44
+ const t = i.filter((e) => e.label.toLowerCase().includes(r.toLowerCase()) || e.value.toLowerCase().includes(r.toLowerCase()));
45
+ y(t);
45
46
  }
46
- w && w(l);
47
- }, [l, r, w]);
48
- const v = (t) => {
49
- const e = [...o];
47
+ d && d(r);
48
+ }, [r, i, d]);
49
+ const g = (t) => {
50
+ if (n) return;
51
+ const e = [...u];
50
52
  e.some((a) => a.value === t.value) || (e.push({
51
53
  label: t.label,
52
54
  value: t.value
53
- }), c(e), n == null || n(e.map((a) => a.value))), p(""), i(!1);
54
- }, A = (t) => {
55
- const e = o.filter((a, B) => B !== t);
56
- c(e), n == null || n(e.map((a) => a.value));
55
+ }), p(e), s == null || s(e.map((a) => a.value))), c(""), o(!1);
57
56
  }, L = (t) => {
58
- if (t.key === "Enter" && l.trim()) {
59
- if (t.preventDefault(), m.length > 0)
60
- v(m[0]);
61
- else if (N) {
62
- const e = [...o];
63
- e.some((a) => a.value === l.trim()) || (e.push({
64
- label: l.trim(),
65
- value: l.trim()
66
- }), c(e), n == null || n(e.map((a) => a.value))), p("");
67
- }
68
- i(!1);
69
- } else if (t.key === "Backspace" && l === "" && o.length > 0) {
70
- const e = o.slice(0, -1);
71
- c(e), n == null || n(e.map((a) => a.value));
72
- } else t.key === "ArrowDown" ? (t.preventDefault(), u || i(!0)) : t.key === "Escape" && (i(!1), p(""));
57
+ if (n) return;
58
+ const e = u.filter((a, B) => B !== t);
59
+ p(e), s == null || s(e.map((a) => a.value));
73
60
  }, x = (t) => {
61
+ if (!n)
62
+ if (t.key === "Enter" && r.trim()) {
63
+ if (t.preventDefault(), f.length > 0)
64
+ g(f[0]);
65
+ else if (h) {
66
+ const e = [...u];
67
+ e.some((a) => a.value === r.trim()) || (e.push({
68
+ label: r.trim(),
69
+ value: r.trim()
70
+ }), p(e), s == null || s(e.map((a) => a.value))), c("");
71
+ }
72
+ o(!1);
73
+ } else if (t.key === "Backspace" && r === "" && u.length > 0) {
74
+ const e = u.slice(0, -1);
75
+ p(e), s == null || s(e.map((a) => a.value));
76
+ } else t.key === "ArrowDown" ? (t.preventDefault(), m || o(!0)) : t.key === "Escape" && (o(!1), c(""));
77
+ }, F = (t) => {
78
+ if (n) return;
74
79
  const e = t.target.value;
75
- p(e), e.trim() && !u && i(!0);
76
- }, F = () => {
77
- (l.trim() || r.length > 0) && i(!0);
78
- }, V = (t) => {
79
- var e;
80
- t.stopPropagation(), (e = h.current) == null || e.focus(), !u && (l.trim() || r.length > 0) && i(!0);
80
+ c(e), e.trim() && !m && o(!0);
81
+ }, V = () => {
82
+ n || (r.trim() || i.length > 0) && o(!0);
81
83
  }, W = (t) => {
84
+ var e;
85
+ n || (t.stopPropagation(), (e = D.current) == null || e.focus(), !m && (r.trim() || i.length > 0) && o(!0));
86
+ }, _ = (t) => {
87
+ if (n) {
88
+ t.preventDefault(), t.stopPropagation();
89
+ return;
90
+ }
82
91
  t.target.closest(".input-with-tags-container") && t.stopPropagation();
83
- }, _ = () => {
84
- i(!u);
92
+ }, $ = () => {
93
+ n || o(!m);
85
94
  };
86
- S(R, () => ({
87
- toggleDropdown: _
95
+ S(b, () => ({
96
+ toggleDropdown: $
88
97
  }), []);
89
- const K = (t, e) => /* @__PURE__ */ s.createElement("div", {
98
+ const K = (t, e, a) => /* @__PURE__ */ l.createElement("div", {
90
99
  key: t.id,
91
100
  className: "dropdown-with-input-tags-option",
92
- onClick: () => e(t)
93
- }, /* @__PURE__ */ s.createElement("span", {
101
+ onClick: () => !a && e(t)
102
+ }, /* @__PURE__ */ l.createElement("span", {
94
103
  className: "option-label"
95
- }, t.label), t.value !== t.label && /* @__PURE__ */ s.createElement("span", {
104
+ }, t.label), t.value !== t.label && /* @__PURE__ */ l.createElement("span", {
96
105
  className: "option-value"
97
106
  }, t.value));
98
- return /* @__PURE__ */ s.createElement("div", {
99
- className: `dropdown-with-input-tags-wrapper ${P}`,
100
- "data-automation-id": T
101
- }, g && /* @__PURE__ */ s.createElement("label", {
107
+ return /* @__PURE__ */ l.createElement("div", {
108
+ className: `dropdown-with-input-tags-wrapper ${R} ${n ? "disabled-wrapper" : ""}`,
109
+ "data-automation-id": O
110
+ }, N && /* @__PURE__ */ l.createElement("label", {
102
111
  className: "dropdown-with-input-tags-label"
103
- }, g), /* @__PURE__ */ s.createElement("div", {
104
- onClick: W
105
- }, /* @__PURE__ */ s.createElement($, {
106
- ref: O,
112
+ }, N), /* @__PURE__ */ l.createElement("div", {
113
+ onClick: _
114
+ }, /* @__PURE__ */ l.createElement(j, {
115
+ ref: A,
107
116
  className: "dropdown-with-input-tags-popover",
108
117
  contentWidth: "full",
109
118
  position: "bottom-left",
110
- isPopoverOpen: u,
111
- onPopoverToggle: i,
119
+ isPopoverOpen: !n && m,
120
+ onPopoverToggle: n ? () => {
121
+ } : o,
112
122
  renderPopoverContents: ({
113
123
  closePopoverCb: t
114
- }) => /* @__PURE__ */ s.createElement("div", {
124
+ }) => /* @__PURE__ */ l.createElement("div", {
115
125
  className: "dropdown-with-input-tags-content"
116
- }, m.length > 0 ? m.map((e) => E ? E(e, v) : K(e, v)) : /* @__PURE__ */ s.createElement("div", {
126
+ }, f.length > 0 ? f.map((e) => E ? E(e, g) : K(e, g, n)) : /* @__PURE__ */ l.createElement("div", {
117
127
  className: "dropdown-with-input-tags-no-options"
118
- }, l.trim() ? N ? /* @__PURE__ */ s.createElement("div", {
128
+ }, r.trim() ? h ? /* @__PURE__ */ l.createElement("div", {
119
129
  className: "dropdown-with-input-tags-option dropdown-with-input-tags-custom-option",
120
130
  onClick: () => {
121
- const e = [...o];
122
- e.some((a) => a.value === l.trim()) || (e.push({
123
- label: l.trim(),
124
- value: l.trim()
125
- }), c(e), n == null || n(e.map((a) => a.value))), p(""), t();
131
+ if (n) return;
132
+ const e = [...u];
133
+ e.some((a) => a.value === r.trim()) || (e.push({
134
+ label: r.trim(),
135
+ value: r.trim()
136
+ }), p(e), s == null || s(e.map((a) => a.value))), c(""), t();
126
137
  }
127
- }, 'Add "', l.trim(), '"') : /* @__PURE__ */ s.createElement("div", {
138
+ }, 'Add "', r.trim(), '"') : /* @__PURE__ */ l.createElement("div", {
128
139
  className: "dropdown-with-input-tags-no-options-text"
129
- }, b) : /* @__PURE__ */ s.createElement("div", {
140
+ }, k) : /* @__PURE__ */ l.createElement("div", {
130
141
  className: "dropdown-with-input-tags-no-options-text"
131
- }, b))),
132
- renderPopoverSrcElement: () => /* @__PURE__ */ s.createElement("div", {
142
+ }, k))),
143
+ renderPopoverSrcElement: () => /* @__PURE__ */ l.createElement("div", {
133
144
  className: "dropdown-with-input-tags-input-container"
134
- }, /* @__PURE__ */ s.createElement("div", {
135
- className: "input-with-tags-container",
136
- onClick: V
137
- }, o.map((t, e) => /* @__PURE__ */ s.createElement("span", {
145
+ }, /* @__PURE__ */ l.createElement("div", {
146
+ className: `input-with-tags-container ${n ? "disabled-input-with-tags-container" : ""}`,
147
+ onClick: W
148
+ }, u.map((t, e) => /* @__PURE__ */ l.createElement("span", {
138
149
  key: e,
139
150
  className: "tag-in-inputwithtags"
140
- }, t.label, /* @__PURE__ */ s.createElement("span", {
151
+ }, t.label, !n && /* @__PURE__ */ l.createElement("span", {
141
152
  className: "close-icon-in-inputwithtags",
142
153
  onClick: (a) => {
143
- a.stopPropagation(), A(e);
154
+ a.stopPropagation(), L(e);
144
155
  }
145
- }, /* @__PURE__ */ s.createElement(j, {
156
+ }, /* @__PURE__ */ l.createElement(q, {
146
157
  name: "close"
147
- })))), /* @__PURE__ */ s.createElement("input", {
148
- ref: h,
158
+ })))), /* @__PURE__ */ l.createElement("input", {
159
+ ref: D,
149
160
  type: "text",
150
- value: l,
151
- onChange: x,
152
- onKeyDown: L,
153
- onFocus: F,
154
- placeholder: o.length === 0 ? D : "",
155
- className: "input-with-tags-input"
161
+ value: r,
162
+ onChange: F,
163
+ onKeyDown: x,
164
+ onFocus: V,
165
+ placeholder: u.length === 0 ? T : "",
166
+ className: "input-with-tags-input",
167
+ disabled: n
156
168
  })))
157
169
  })));
158
170
  });
159
171
  export {
160
- Q as DropdownWithInputTags
172
+ U as DropdownWithInputTags
161
173
  };
162
174
  //# sourceMappingURL=index36.js.map
package/dist/index36.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string | number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n onSearch?: (searchTerm: string) => void;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value = [],\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n onSearch,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return value.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setTags(\n value.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n })\n );\n }, [value, options]);\n\n useEffect(() => {\n if (!inputValue.trim()) {\n setFilteredOptions(options);\n } else {\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }\n \n if (onSearch) {\n onSearch(inputValue);\n }\n }, [inputValue, options, onSearch]);\n\n const handleSelectOption = (option: DropdownOption) => {\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n };\n\n const handleRemoveTag = (indexToRemove: number) => {\n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n \n if (filteredOptions.length > 0) {\n handleSelectOption(filteredOptions[0]);\n } else if (allowCustomTags) {\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n }\n setIsDropdownOpen(false);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n if (!isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n } else if (e.key === 'Escape') {\n setIsDropdownOpen(false);\n setInputValue('');\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (inputValue.trim() || options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (option: DropdownOption, onSelect: (option: DropdownOption) => void) => (\n <div\n key={option.id}\n className=\"dropdown-with-input-tags-option\"\n onClick={() => onSelect(option)}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && (\n <span className=\"option-value\">{option.value}</span>\n )}\n </div>\n );\n\n return (\n <div className={`dropdown-with-input-tags-wrapper ${className}`} data-automation-id={automationId}>\n {label && <label className=\"dropdown-with-input-tags-label\">{label}</label>}\n \n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={isDropdownOpen}\n onPopoverToggle={setIsDropdownOpen}\n renderPopoverContents={({ closePopoverCb }) => (\n <div className=\"dropdown-with-input-tags-content\">\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option) =>\n renderOption\n ? renderOption(option, handleSelectOption)\n : defaultRenderOption(option, handleSelectOption)\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n {inputValue.trim() ? (\n allowCustomTags ? (\n <div\n className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n onClick={() => {\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n closePopoverCb();\n }}\n >\n Add \"{inputValue.trim()}\"\n </div>\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div \n className=\"input-with-tags-container\" \n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag.label}\n <span\n className=\"close-icon-in-inputwithtags\"\n onClick={(e) => {\n e.stopPropagation();\n handleRemoveTag(index);\n }}\n >\n <Icon name=\"close\" />\n </span>\n </span>\n ))}\n <input\n ref={inputRef}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n />\n </div>\n </div>\n )}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}
1
+ {"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string | number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n onSearch?: (searchTerm: string) => void;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value = [],\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n onSearch,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return value.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setTags(\n value.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n })\n );\n }, [value, options]);\n\n useEffect(() => {\n if (!inputValue.trim()) {\n setFilteredOptions(options);\n } else {\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }\n \n if (onSearch) {\n onSearch(inputValue);\n }\n }, [inputValue, options, onSearch]);\n\n const handleSelectOption = (option: DropdownOption) => {\n if (disabled) return;\n \n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n };\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n if (filteredOptions.length > 0) {\n handleSelectOption(filteredOptions[0]);\n } else if (allowCustomTags) {\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n }\n setIsDropdownOpen(false);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n if (!isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n } else if (e.key === 'Escape') {\n setIsDropdownOpen(false);\n setInputValue('');\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (disabled) return;\n \n if (inputValue.trim() || options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n if (disabled) return;\n \n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n \n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n if (disabled) return;\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (option: DropdownOption, onSelect: (option: DropdownOption) => void, disabled: boolean) => (\n <div\n key={option.id}\n className=\"dropdown-with-input-tags-option\"\n onClick={() => !disabled && onSelect(option)}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && (\n <span className=\"option-value\">{option.value}</span>\n )}\n </div>\n );\n\n return (\n <div className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`} data-automation-id={automationId}>\n {label && <label className=\"dropdown-with-input-tags-label\">{label}</label>}\n \n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={!disabled && isDropdownOpen}\n onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n renderPopoverContents={({ closePopoverCb }) => (\n <div className=\"dropdown-with-input-tags-content\">\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option) =>\n renderOption\n ? renderOption(option, handleSelectOption)\n : defaultRenderOption(option, handleSelectOption, disabled)\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n {inputValue.trim() ? (\n allowCustomTags ? (\n <div\n className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n onClick={() => {\n if (disabled) return;\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n closePopoverCb();\n }}\n >\n Add \"{inputValue.trim()}\"\n </div>\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )\n ) : (\n <div className=\"dropdown-with-input-tags-no-options-text\">\n {noOptionsMessage}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div \n className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag.label}\n {!disabled && (\n <span\n className=\"close-icon-in-inputwithtags\"\n onClick={(e) => {\n e.stopPropagation();\n handleRemoveTag(index);\n }}\n >\n <Icon name=\"close\" />\n </span>\n )}\n </span>\n ))}\n <input\n ref={inputRef}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n disabled={disabled}\n />\n </div>\n </div>\n )}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","disabled","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}
package/dist/index37.js CHANGED
@@ -10,23 +10,23 @@ function f({
10
10
  errorMessage: o,
11
11
  label: c,
12
12
  placeholder: s,
13
- style: l,
14
- inputStyle: d
13
+ style: d,
14
+ inputStyle: l
15
15
  }) {
16
16
  const p = m || "input";
17
17
  return /* @__PURE__ */ e.createElement("div", {
18
- className: "main-container",
19
- style: l
18
+ className: "input-main-container",
19
+ style: d
20
20
  }, c && /* @__PURE__ */ e.createElement("div", {
21
21
  className: "label-container"
22
22
  }, c), /* @__PURE__ */ e.createElement(p, {
23
23
  value: n,
24
- onChange: (E) => i(E.target.value),
24
+ onChange: (u) => i(u.target.value),
25
25
  disabled: r,
26
26
  className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
27
- maxlength: t || void 0,
27
+ maxLength: t || void 0,
28
28
  placeholder: s,
29
- style: d
29
+ style: l
30
30
  }), /* @__PURE__ */ e.createElement("div", {
31
31
  className: `${a ? "error-and-max-word" : "max-word-container"}`
32
32
  }, a && /* @__PURE__ */ e.createElement("div", {
package/dist/index37.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number | undefined;\n onChange: (value: string) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n value,\n onChange,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle\n}: InputProps) {\n const Element = tag || 'input';\n\n return (\n <div className=\"main-container\" style={style}>\n {label && <div className=\"label-container\">{label}</div>}\n {React.createElement(Element, {\n value,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n maxlength: maxLength ? maxLength : undefined,\n placeholder: placeholder,\n style: inputStyle\n })}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n </div>\n </div>\n );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}
1
+ {"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number | undefined;\n onChange: (value: string) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n value,\n onChange,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle\n}: InputProps) {\n const Element = tag || 'input';\n\n return (\n <div className=\"input-main-container\" style={style}>\n {label && <div className=\"label-container\">{label}</div>}\n {React.createElement(Element, {\n value,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n maxLength: maxLength ? maxLength : undefined,\n placeholder: placeholder,\n style: inputStyle\n })}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n </div>\n </div>\n );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAuBL,OAAAA;AAAAA,EACnCF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHC,WAAWA,KAAwBc;AAAAA,IACnCT,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOkB,UAAS,MAAMf,CAAe,CACxF,CACF;AAET;"}
package/dist/index43.js CHANGED
@@ -1,11 +1,11 @@
1
- var z = Object.defineProperty;
2
- var s = Object.getOwnPropertySymbols;
1
+ var q = Object.defineProperty;
2
+ var m = Object.getOwnPropertySymbols;
3
3
  var $ = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
4
- var I = (e, t, a) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, x = (e, t) => {
4
+ var I = (e, t, a) => t in e ? q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, x = (e, t) => {
5
5
  for (var a in t || (t = {}))
6
6
  $.call(t, a) && I(e, a, t[a]);
7
- if (s)
8
- for (var a of s(t))
7
+ if (m)
8
+ for (var a of m(t))
9
9
  b.call(t, a) && I(e, a, t[a]);
10
10
  return e;
11
11
  };
@@ -13,8 +13,8 @@ var S = (e, t) => {
13
13
  var a = {};
14
14
  for (var l in e)
15
15
  $.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
16
- if (e != null && s)
17
- for (var l of s(e))
16
+ if (e != null && m)
17
+ for (var l of m(e))
18
18
  t.indexOf(l) < 0 && b.call(e, l) && (a[l] = e[l]);
19
19
  return a;
20
20
  };
@@ -31,11 +31,11 @@ const P = /* @__PURE__ */ n.memo((G) => {
31
31
  error: d = !1,
32
32
  errorMessage: _,
33
33
  label: E,
34
- placeholder: A,
34
+ placeholder: z,
35
35
  suggestions: i = [],
36
- customRenderSuggestions: m,
36
+ customRenderSuggestions: s,
37
37
  onSuggestionClick: N
38
- } = h, F = S(h, [
38
+ } = h, A = S(h, [
39
39
  "value",
40
40
  "onChange",
41
41
  "disabled",
@@ -49,20 +49,20 @@ const P = /* @__PURE__ */ n.memo((G) => {
49
49
  "customRenderSuggestions",
50
50
  "onSuggestionClick"
51
51
  ]);
52
- const [o, f] = n.useState([...i]), [w, p] = n.useState(!1), u = D(null), O = n.useCallback((r) => {
52
+ const [o, f] = n.useState([...i]), [w, p] = n.useState(!1), u = D(null), F = n.useCallback((r) => {
53
53
  const c = r.target.value;
54
- if (m)
54
+ if (s)
55
55
  t(c, !1);
56
56
  else if (t(c), c === "")
57
57
  f([...i]);
58
58
  else if (c) {
59
- const q = i == null ? void 0 : i.filter((C) => {
59
+ const j = i == null ? void 0 : i.filter((C) => {
60
60
  var k;
61
61
  return typeof C == "string" && C.toLowerCase().includes((k = c == null ? void 0 : c.toLowerCase()) != null ? k : "");
62
62
  });
63
- f([...q]);
63
+ f([...j]);
64
64
  }
65
- }, [t, i, m]);
65
+ }, [t, i, s]);
66
66
  y(() => {
67
67
  f([...i]);
68
68
  }, [i]), y(() => {
@@ -73,11 +73,11 @@ const P = /* @__PURE__ */ n.memo((G) => {
73
73
  document.removeEventListener("mousedown", r);
74
74
  };
75
75
  }, []);
76
- const V = () => {
76
+ const O = () => {
77
77
  p(!0);
78
78
  }, v = (r) => {
79
79
  t(r, !0), p(!1), N && N(r);
80
- }, j = () => {
80
+ }, V = () => {
81
81
  t("", !1);
82
82
  };
83
83
  return /* @__PURE__ */ n.createElement("div", {
@@ -89,23 +89,24 @@ const P = /* @__PURE__ */ n.memo((G) => {
89
89
  className: "input-wrapper"
90
90
  }, /* @__PURE__ */ n.createElement(L, x({
91
91
  value: e,
92
- onChange: O,
93
- onClick: V,
92
+ onChange: F,
93
+ onClick: O,
94
94
  disabled: a,
95
95
  className: `${d ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""} ${o.length > 0 || e ? "with-icon" : ""} ${o.length > 0 && e ? "with-icons" : ""}`,
96
96
  maxLength: l,
97
- placeholder: A
98
- }, F)), e && /* @__PURE__ */ n.createElement(B, {
97
+ placeholder: z
98
+ }, A)), e && /* @__PURE__ */ n.createElement(B, {
99
99
  name: "close",
100
100
  className: "input-icon-close",
101
- onClick: j
101
+ size: 15,
102
+ onClick: V
102
103
  }), o.length > 0 && /* @__PURE__ */ n.createElement(B, {
103
104
  name: "chevron",
104
105
  rotation: w ? "180" : "0",
105
106
  className: "input-icon-chevron"
106
107
  })), w && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
107
108
  className: "suggestions-list"
108
- }, m ? m(o, v) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
109
+ }, s ? s(o, v) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
109
110
  key: c,
110
111
  className: "suggestion-item",
111
112
  onClick: () => v(r)
package/dist/index43.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string, fromSuggestion?: boolean) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n suggestions?: string[];\n customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n customRenderSuggestions,\n onSuggestionClick,\n ...props\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const handleInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n\n if (customRenderSuggestions) {\n onChange(inputValue, false);\n } else {\n onChange(inputValue);\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else if (inputValue) {\n const filtered = suggestions?.filter(\n (suggestion) =>\n typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions([...filtered]);\n }\n }\n },\n [onChange, suggestions, customRenderSuggestions]\n );\n\n useEffect(() => {\n // if (customRenderSuggestions) {\n setFilteredSuggestions([...suggestions]);\n // }\n }, [suggestions]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setSuggestionBoxVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n onChange(suggestion, true);\n setSuggestionBoxVisible(false);\n onSuggestionClick && onSuggestionClick(suggestion);\n };\n\n const handleClearInput = () => {\n onChange('', false);\n };\n\n return (\n <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n {label && <label className=\"label-container\">{label}</label>}\n <div className=\"input-wrapper\">\n {React.createElement(tag, {\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n maxLength,\n placeholder,\n ...props\n })}\n {value && <Icon name=\"close\" className=\"input-icon-close\" onClick={handleClearInput} />}\n {filteredSuggestions.length > 0 && (\n <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" />\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div className=\"suggestions-list\">\n {customRenderSuggestions\n ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n : filteredSuggestions.map((suggestion, index) => (\n <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n {suggestion}\n </div>\n ))}\n </div>\n )}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && (\n <div id=\"error-message\" className=\"error-message\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","__spreadValues","onClick","length","Icon","name","rotation","map","index","key","id"],"mappings":"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"}
1
+ {"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string, fromSuggestion?: boolean) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n suggestions?: string[];\n customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n customRenderSuggestions,\n onSuggestionClick,\n ...props\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const handleInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n\n if (customRenderSuggestions) {\n onChange(inputValue, false);\n } else {\n onChange(inputValue);\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else if (inputValue) {\n const filtered = suggestions?.filter(\n (suggestion) =>\n typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions([...filtered]);\n }\n }\n },\n [onChange, suggestions, customRenderSuggestions]\n );\n\n useEffect(() => {\n // if (customRenderSuggestions) {\n setFilteredSuggestions([...suggestions]);\n // }\n }, [suggestions]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setSuggestionBoxVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n onChange(suggestion, true);\n setSuggestionBoxVisible(false);\n onSuggestionClick && onSuggestionClick(suggestion);\n };\n\n const handleClearInput = () => {\n onChange('', false);\n };\n\n return (\n <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n {label && <label className=\"label-container\">{label}</label>}\n <div className=\"input-wrapper\">\n {React.createElement(tag, {\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n maxLength,\n placeholder,\n ...props\n })}\n {value && <Icon name=\"close\" className=\"input-icon-close\" size={15} onClick={handleClearInput} />}\n {filteredSuggestions.length > 0 && (\n <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" />\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div className=\"suggestions-list\">\n {customRenderSuggestions\n ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n : filteredSuggestions.map((suggestion, index) => (\n <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n {suggestion}\n </div>\n ))}\n </div>\n )}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && (\n <div id=\"error-message\" className=\"error-message\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","__spreadValues","onClick","length","Icon","name","size","rotation","map","index","key","id"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "se-design",
3
- "version": "0.0.123",
3
+ "version": "0.0.124",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "exports": {