@agility/plenum-ui 1.3.8 → 1.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Dropdown/Dropdown.d.ts +2 -1
- package/lib/components/Forms/Radio/Radio.d.ts +2 -2
- package/lib/components/Forms/Select/Select.d.ts +2 -2
- package/lib/components/Forms/TextInput/TextInput.d.ts +3 -2
- package/lib/components/Forms/TextInputAddon/TextInputAddon.d.ts +6 -6
- package/lib/components/Forms/TextInputSelect/TextInputSelect.d.ts +2 -2
- package/lib/components/Forms/Textarea/Textarea.d.ts +4 -3
- package/lib/index.esm.js +82 -43
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +82 -43
- package/lib/index.js.map +1 -1
- package/lib/util/useID.d.ts +1 -0
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -7061,7 +7061,7 @@ function styleInject(css, ref) {
|
|
|
7061
7061
|
}
|
|
7062
7062
|
}
|
|
7063
7063
|
|
|
7064
|
-
var css_248z = "/*\n! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: #e5e7eb;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n[type='text'],[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 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n border-radius: 0px;\n padding-top: 0.5rem;\n padding-right: 0.75rem;\n padding-bottom: 0.5rem;\n padding-left: 0.75rem;\n font-size: 1rem;\n line-height: 1.5rem;\n --tw-shadow: 0 0 #0000;\n}\n\n[type='text']: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 {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #2563eb;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n}\n\n::-webkit-date-and-time-value {\n min-height: 1.5em;\n}\n\n::-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 {\n padding-top: 0;\n padding-bottom: 0;\n}\n\nselect {\n 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\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n print-color-adjust: exact;\n}\n\n[multiple] {\n background-image: initial;\n background-position: initial;\n background-repeat: unset;\n background-size: initial;\n padding-right: 0.75rem;\n print-color-adjust: unset;\n}\n\n[type='checkbox'],[type='radio'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n print-color-adjust: exact;\n display: inline-block;\n vertical-align: middle;\n background-origin: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n flex-shrink: 0;\n height: 1rem;\n width: 1rem;\n color: #2563eb;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n --tw-shadow: 0 0 #0000;\n}\n\n[type='checkbox'] {\n border-radius: 0px;\n}\n\n[type='radio'] {\n border-radius: 100%;\n}\n\n[type='checkbox']:focus,[type='radio']:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #2563eb;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\n[type='checkbox']:checked,[type='radio']:checked {\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n[type='checkbox']:checked {\n 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\");\n}\n\n[type='radio']:checked {\n 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\");\n}\n\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n border-color: transparent;\n background-color: currentColor;\n}\n\n[type='checkbox']:indeterminate {\n 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\");\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n border-color: transparent;\n background-color: currentColor;\n}\n\n[type='file'] {\n background: unset;\n border-color: inherit;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-size: unset;\n line-height: inherit;\n}\n\n[type='file']:focus {\n outline: 1px solid ButtonText;\n outline: 1px auto -webkit-focus-ring-color;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.right-8 {\n right: 2rem;\n}\n\n.top-\\[1px\\] {\n top: 1px;\n}\n\n.bottom-10 {\n bottom: 2.5rem;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.left-4 {\n left: 1rem;\n}\n\n.top-8 {\n top: 2rem;\n}\n\n.top-\\[10px\\] {\n top: 10px;\n}\n\n.z-30 {\n z-index: 30;\n}\n\n.z-20 {\n z-index: 20;\n}\n\n.z-10 {\n z-index: 10;\n}\n\n.m-auto {\n margin: auto;\n}\n\n.\\!mt-1 {\n margin-top: 0.25rem !important;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-0 {\n margin-left: 0px;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mt-10 {\n margin-top: 2.5rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.-ml-px {\n margin-left: -1px;\n}\n\n.-mr-px {\n margin-right: -1px;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-14 {\n height: 3.5rem;\n}\n\n.h-1\\.5 {\n height: 0.375rem;\n}\n\n.h-1 {\n height: 0.25rem;\n}\n\n.h-2 {\n height: 0.5rem;\n}\n\n.h-2\\.5 {\n height: 0.625rem;\n}\n\n.h-3 {\n height: 0.75rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.h-\\[calc\\(100\\%\\)\\] {\n height: calc(100%);\n}\n\n.h-9 {\n height: 2.25rem;\n}\n\n.h-\\[38px\\] {\n height: 38px;\n}\n\n.h-\\[28px\\] {\n height: 28px;\n}\n\n.h-\\[18px\\] {\n height: 18px;\n}\n\n.h-\\[34px\\] {\n height: 34px;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[14px\\] {\n height: 14px;\n}\n\n.h-\\[500px\\] {\n height: 500px;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-7 {\n height: 1.75rem;\n}\n\n.max-h-60 {\n max-height: 15rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-12 {\n width: 3rem;\n}\n\n.w-14 {\n width: 3.5rem;\n}\n\n.w-1\\.5 {\n width: 0.375rem;\n}\n\n.w-1 {\n width: 0.25rem;\n}\n\n.w-2 {\n width: 0.5rem;\n}\n\n.w-2\\.5 {\n width: 0.625rem;\n}\n\n.w-3 {\n width: 0.75rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n.w-\\[1px\\] {\n width: 1px;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-\\[74px\\] {\n width: 74px;\n}\n\n.w-\\[64px\\] {\n width: 64px;\n}\n\n.w-\\[34px\\] {\n width: 34px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[14px\\] {\n width: 14px;\n}\n\n.w-\\[calc\\(100\\%-16px\\)\\] {\n width: calc(100% - 16px);\n}\n\n.min-w-\\[320px\\] {\n min-width: 320px;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.origin-bottom-right {\n transform-origin: bottom right;\n}\n\n.translate-x-9 {\n --tw-translate-x: 2.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-4 {\n --tw-translate-x: 1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@-webkit-keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n}\n\n.cursor-auto {\n cursor: auto;\n}\n\n.cursor-default {\n cursor: default;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.grid-flow-row {\n grid-auto-flow: row;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.items-stretch {\n align-items: stretch;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-3 {\n gap: 0.75rem;\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.\\!divide-purple-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1 !important;\n border-color: rgb(88 0 212 / var(--tw-divide-opacity)) !important;\n}\n\n.\\!divide-purple-200 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1 !important;\n border-color: rgb(205 179 242 / var(--tw-divide-opacity)) !important;\n}\n\n.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(243 244 246 / var(--tw-divide-opacity));\n}\n\n.self-end {\n align-self: flex-end;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-none {\n border-radius: 0px;\n}\n\n.\\!rounded-r-none {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n}\n\n.\\!rounded-l-none {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n}\n\n.rounded-r {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\n.\\!rounded-l {\n border-top-left-radius: 0.25rem !important;\n border-bottom-left-radius: 0.25rem !important;\n}\n\n.\\!rounded-r {\n border-top-right-radius: 0.25rem !important;\n border-bottom-right-radius: 0.25rem !important;\n}\n\n.rounded-l {\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.border-8 {\n border-width: 8px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.\\!border-r-0 {\n border-right-width: 0px !important;\n}\n\n.\\!border-l-0 {\n border-left-width: 0px !important;\n}\n\n.border-l {\n border-left-width: 1px;\n}\n\n.border-purple-700 {\n --tw-border-opacity: 1;\n border-color: rgb(88 0 212 / var(--tw-border-opacity));\n}\n\n.border-purple-600 {\n --tw-border-opacity: 1;\n border-color: rgb(105 44 216 / var(--tw-border-opacity));\n}\n\n.border-purple-100 {\n --tw-border-opacity: 1;\n border-color: rgb(222 204 246 / var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.border-red-300 {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity));\n}\n\n.\\!border-purple-700 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(88 0 212 / var(--tw-border-opacity)) !important;\n}\n\n.\\!border-purple-200 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(205 179 242 / var(--tw-border-opacity)) !important;\n}\n\n.border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity));\n}\n\n.border-gray-100 {\n --tw-border-opacity: 1;\n border-color: rgb(243 244 246 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-purple-500 {\n --tw-border-opacity: 1;\n border-color: rgb(121 51 221 / var(--tw-border-opacity));\n}\n\n.\\!border-red-500 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important;\n}\n\n.border-r-gray-200 {\n --tw-border-opacity: 1;\n border-right-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n\n.border-l-gray-300 {\n --tw-border-opacity: 1;\n border-left-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.\\!border-l-white {\n --tw-border-opacity: 1 !important;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n\n.\\!border-r-white {\n --tw-border-opacity: 1 !important;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n\n.border-r-white {\n --tw-border-opacity: 1;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-l-white {\n --tw-border-opacity: 1;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.bg-gray-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity));\n}\n\n.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / var(--tw-bg-opacity));\n}\n\n.bg-green-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(52 211 153 / var(--tw-bg-opacity));\n}\n\n.bg-purple-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(105 44 216 / var(--tw-bg-opacity));\n}\n\n.bg-purple-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(222 204 246 / var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-purple-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(88 0 212 / var(--tw-bg-opacity));\n}\n\n.bg-purple-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(205 179 242 / var(--tw-bg-opacity));\n}\n\n.\\!bg-purple-600 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(105 44 216 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-100 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(222 204 246 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-800 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-300 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;\n}\n\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n\n.bg-purple-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(121 51 221 / var(--tw-bg-opacity));\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n\n.fill-white {\n fill: #fff;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-\\[6px\\] {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.pr-9 {\n padding-right: 2.25rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.pl-0 {\n padding-left: 0px;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.pr-10 {\n padding-right: 2.5rem;\n}\n\n.pl-10 {\n padding-left: 2.5rem;\n}\n\n.pl-7 {\n padding-left: 1.75rem;\n}\n\n.pr-7 {\n padding-right: 1.75rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.align-middle {\n vertical-align: middle;\n}\n\n.font-muli {\n font-family: Muli, sans-serif;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.font-medium {\n font-weight: 600;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.uppercase {\n text-transform: uppercase;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.leading-5 {\n line-height: 1.25rem;\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity));\n}\n\n.text-purple-700 {\n --tw-text-opacity: 1;\n color: rgb(88 0 212 / var(--tw-text-opacity));\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n\n.\\!text-white {\n --tw-text-opacity: 1 !important;\n color: rgb(255 255 255 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-purple-700 {\n --tw-text-opacity: 1 !important;\n color: rgb(88 0 212 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-gray-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(75 85 99 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-purple-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(105 44 216 / var(--tw-text-opacity)) !important;\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n\n.text-purple-600 {\n --tw-text-opacity: 1;\n color: rgb(105 44 216 / var(--tw-text-opacity));\n}\n\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n\n.text-gray-700\\/\\[\\.5\\] {\n color: rgb(55 65 81 / .5);\n}\n\n.text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(121 51 221 / var(--tw-text-opacity));\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-60 {\n opacity: 0.6;\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline {\n outline-style: solid;\n}\n\n.outline-purple-500 {\n outline-color: #7933DD;\n}\n\n.\\!outline-red-500 {\n outline-color: #ef4444 !important;\n}\n\n.outline-red-500 {\n outline-color: #ef4444;\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-black {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n\n.ring-opacity-5 {\n --tw-ring-opacity: 0.05;\n}\n\n.blur {\n --tw-blur: blur(8px);\n 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);\n}\n\n.filter {\n 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);\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n 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;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-75 {\n transition-duration: 75ms;\n}\n\n.duration-200 {\n transition-duration: 200ms;\n}\n\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.focus-within\\:z-20:focus-within {\n z-index: 20;\n}\n\n.focus-within\\:z-10:focus-within {\n z-index: 10;\n}\n\n.hover\\:\\!border-r-0:hover {\n border-right-width: 0px !important;\n}\n\n.hover\\:\\!border-l-0:hover {\n border-left-width: 0px !important;\n}\n\n.hover\\:border-purple-700:hover {\n --tw-border-opacity: 1;\n border-color: rgb(88 0 212 / var(--tw-border-opacity));\n}\n\n.hover\\:border-purple-200:hover {\n --tw-border-opacity: 1;\n border-color: rgb(205 179 242 / var(--tw-border-opacity));\n}\n\n.hover\\:border-gray-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.hover\\:bg-purple-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(88 0 212 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-purple-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(205 179 242 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-white:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-purple-700:hover {\n --tw-text-opacity: 1;\n color: rgb(88 0 212 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-700:hover {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-500:hover {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-600:hover {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.focus\\:border-purple-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(121 51 221 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-purple-300:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-purple-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity));\n}\n\n.focus\\:ring-red-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-2:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-opacity-75:focus-visible {\n --tw-ring-opacity: 0.75;\n}\n\n.active\\:border-purple-800:active {\n --tw-border-opacity: 1;\n border-color: rgb(79 0 191 / var(--tw-border-opacity));\n}\n\n.active\\:border-purple-300:active {\n --tw-border-opacity: 1;\n border-color: rgb(188 153 238 / var(--tw-border-opacity));\n}\n\n.active\\:\\!border-purple-800:active {\n --tw-border-opacity: 1 !important;\n border-color: rgb(79 0 191 / var(--tw-border-opacity)) !important;\n}\n\n.active\\:\\!border-purple-300:active {\n --tw-border-opacity: 1 !important;\n border-color: rgb(188 153 238 / var(--tw-border-opacity)) !important;\n}\n\n.active\\:bg-purple-800:active {\n --tw-bg-opacity: 1;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-purple-300:active {\n --tw-bg-opacity: 1;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.active\\:\\!bg-purple-800:active {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;\n}\n\n.active\\:\\!bg-purple-300:active {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;\n}\n\n.group:hover .group-hover\\:block {\n display: block;\n}\n\n.group:hover .group-hover\\:text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n@media (prefers-color-scheme: dark) {\n .dark\\:text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(121 51 221 / var(--tw-text-opacity));\n }\n}\n\n@media (min-width: 640px) {\n .sm\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n}";
|
|
7064
|
+
var css_248z = "/*\n! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: #e5e7eb;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n[type='text'],[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 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n border-radius: 0px;\n padding-top: 0.5rem;\n padding-right: 0.75rem;\n padding-bottom: 0.5rem;\n padding-left: 0.75rem;\n font-size: 1rem;\n line-height: 1.5rem;\n --tw-shadow: 0 0 #0000;\n}\n\n[type='text']: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 {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #2563eb;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n color: #6b7280;\n opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n}\n\n::-webkit-date-and-time-value {\n min-height: 1.5em;\n}\n\n::-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 {\n padding-top: 0;\n padding-bottom: 0;\n}\n\nselect {\n 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\");\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n print-color-adjust: exact;\n}\n\n[multiple] {\n background-image: initial;\n background-position: initial;\n background-repeat: unset;\n background-size: initial;\n padding-right: 0.75rem;\n print-color-adjust: unset;\n}\n\n[type='checkbox'],[type='radio'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n print-color-adjust: exact;\n display: inline-block;\n vertical-align: middle;\n background-origin: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n flex-shrink: 0;\n height: 1rem;\n width: 1rem;\n color: #2563eb;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n --tw-shadow: 0 0 #0000;\n}\n\n[type='checkbox'] {\n border-radius: 0px;\n}\n\n[type='radio'] {\n border-radius: 100%;\n}\n\n[type='checkbox']:focus,[type='radio']:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #2563eb;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\n[type='checkbox']:checked,[type='radio']:checked {\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n[type='checkbox']:checked {\n 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\");\n}\n\n[type='radio']:checked {\n 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\");\n}\n\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n border-color: transparent;\n background-color: currentColor;\n}\n\n[type='checkbox']:indeterminate {\n 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\");\n border-color: transparent;\n background-color: currentColor;\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n border-color: transparent;\n background-color: currentColor;\n}\n\n[type='file'] {\n background: unset;\n border-color: inherit;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-size: unset;\n line-height: inherit;\n}\n\n[type='file']:focus {\n outline: 1px solid ButtonText;\n outline: 1px auto -webkit-focus-ring-color;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.container {\n width: 100%;\n}\n\n@media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n}\n\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.pointer-events-none {\n pointer-events: none;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.right-8 {\n right: 2rem;\n}\n\n.top-\\[1px\\] {\n top: 1px;\n}\n\n.bottom-10 {\n bottom: 2.5rem;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.left-4 {\n left: 1rem;\n}\n\n.top-8 {\n top: 2rem;\n}\n\n.top-\\[10px\\] {\n top: 10px;\n}\n\n.z-30 {\n z-index: 30;\n}\n\n.z-20 {\n z-index: 20;\n}\n\n.z-10 {\n z-index: 10;\n}\n\n.m-auto {\n margin: auto;\n}\n\n.\\!mt-1 {\n margin-top: 0.25rem !important;\n}\n\n.mt-5 {\n margin-top: 1.25rem;\n}\n\n.mt-1 {\n margin-top: 0.25rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.ml-0 {\n margin-left: 0px;\n}\n\n.ml-3 {\n margin-left: 0.75rem;\n}\n\n.mt-10 {\n margin-top: 2.5rem;\n}\n\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n.-ml-px {\n margin-left: -1px;\n}\n\n.-mr-px {\n margin-right: -1px;\n}\n\n.block {\n display: block;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.inline {\n display: inline;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.table {\n display: table;\n}\n\n.grid {\n display: grid;\n}\n\n.contents {\n display: contents;\n}\n\n.hidden {\n display: none;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.h-14 {\n height: 3.5rem;\n}\n\n.h-1\\.5 {\n height: 0.375rem;\n}\n\n.h-1 {\n height: 0.25rem;\n}\n\n.h-2 {\n height: 0.5rem;\n}\n\n.h-2\\.5 {\n height: 0.625rem;\n}\n\n.h-3 {\n height: 0.75rem;\n}\n\n.h-3\\.5 {\n height: 0.875rem;\n}\n\n.h-4 {\n height: 1rem;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.h-\\[calc\\(100\\%\\)\\] {\n height: calc(100%);\n}\n\n.h-9 {\n height: 2.25rem;\n}\n\n.h-\\[38px\\] {\n height: 38px;\n}\n\n.h-\\[28px\\] {\n height: 28px;\n}\n\n.h-\\[18px\\] {\n height: 18px;\n}\n\n.h-\\[34px\\] {\n height: 34px;\n}\n\n.h-\\[24px\\] {\n height: 24px;\n}\n\n.h-\\[14px\\] {\n height: 14px;\n}\n\n.h-\\[500px\\] {\n height: 500px;\n}\n\n.h-\\[2px\\] {\n height: 2px;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-7 {\n height: 1.75rem;\n}\n\n.max-h-60 {\n max-height: 15rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.w-12 {\n width: 3rem;\n}\n\n.w-14 {\n width: 3.5rem;\n}\n\n.w-1\\.5 {\n width: 0.375rem;\n}\n\n.w-1 {\n width: 0.25rem;\n}\n\n.w-2 {\n width: 0.5rem;\n}\n\n.w-2\\.5 {\n width: 0.625rem;\n}\n\n.w-3 {\n width: 0.75rem;\n}\n\n.w-3\\.5 {\n width: 0.875rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n.w-\\[1px\\] {\n width: 1px;\n}\n\n.w-56 {\n width: 14rem;\n}\n\n.w-\\[74px\\] {\n width: 74px;\n}\n\n.w-\\[64px\\] {\n width: 64px;\n}\n\n.w-\\[34px\\] {\n width: 34px;\n}\n\n.w-\\[24px\\] {\n width: 24px;\n}\n\n.w-\\[14px\\] {\n width: 14px;\n}\n\n.w-\\[calc\\(100\\%-16px\\)\\] {\n width: calc(100% - 16px);\n}\n\n.min-w-\\[320px\\] {\n min-width: 320px;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-grow {\n flex-grow: 1;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.origin-bottom-right {\n transform-origin: bottom right;\n}\n\n.translate-x-9 {\n --tw-translate-x: 2.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-0 {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-x-4 {\n --tw-translate-x: 1rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@-webkit-keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n}\n\n.cursor-auto {\n cursor: auto;\n}\n\n.cursor-default {\n cursor: default;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.grid-flow-row {\n grid-auto-flow: row;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.items-stretch {\n align-items: stretch;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n.gap-3 {\n gap: 0.75rem;\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n\n.\\!divide-purple-700 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1 !important;\n border-color: rgb(88 0 212 / var(--tw-divide-opacity)) !important;\n}\n\n.\\!divide-purple-200 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1 !important;\n border-color: rgb(205 179 242 / var(--tw-divide-opacity)) !important;\n}\n\n.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(243 244 246 / var(--tw-divide-opacity));\n}\n\n.self-end {\n align-self: flex-end;\n}\n\n.self-center {\n align-self: center;\n}\n\n.overflow-auto {\n overflow: auto;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-none {\n border-radius: 0px;\n}\n\n.\\!rounded-r-none {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n}\n\n.\\!rounded-l-none {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n}\n\n.rounded-r {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\n.\\!rounded-l {\n border-top-left-radius: 0.25rem !important;\n border-bottom-left-radius: 0.25rem !important;\n}\n\n.\\!rounded-r {\n border-top-right-radius: 0.25rem !important;\n border-bottom-right-radius: 0.25rem !important;\n}\n\n.rounded-l {\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.border-8 {\n border-width: 8px;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.\\!border-r-0 {\n border-right-width: 0px !important;\n}\n\n.\\!border-l-0 {\n border-left-width: 0px !important;\n}\n\n.border-l {\n border-left-width: 1px;\n}\n\n.border-purple-700 {\n --tw-border-opacity: 1;\n border-color: rgb(88 0 212 / var(--tw-border-opacity));\n}\n\n.border-purple-600 {\n --tw-border-opacity: 1;\n border-color: rgb(105 44 216 / var(--tw-border-opacity));\n}\n\n.border-purple-100 {\n --tw-border-opacity: 1;\n border-color: rgb(222 204 246 / var(--tw-border-opacity));\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.border-red-300 {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity));\n}\n\n.\\!border-purple-700 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(88 0 212 / var(--tw-border-opacity)) !important;\n}\n\n.\\!border-purple-200 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(205 179 242 / var(--tw-border-opacity)) !important;\n}\n\n.border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity));\n}\n\n.border-transparent {\n border-color: transparent;\n}\n\n.border-purple-500 {\n --tw-border-opacity: 1;\n border-color: rgb(121 51 221 / var(--tw-border-opacity));\n}\n\n.\\!border-red-500 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important;\n}\n\n.border-r-gray-200 {\n --tw-border-opacity: 1;\n border-right-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n\n.border-l-gray-300 {\n --tw-border-opacity: 1;\n border-left-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.\\!border-l-white {\n --tw-border-opacity: 1 !important;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n\n.\\!border-r-white {\n --tw-border-opacity: 1 !important;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n\n.border-r-white {\n --tw-border-opacity: 1;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.border-l-white {\n --tw-border-opacity: 1;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.bg-gray-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity));\n}\n\n.bg-red-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / var(--tw-bg-opacity));\n}\n\n.bg-green-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(52 211 153 / var(--tw-bg-opacity));\n}\n\n.bg-purple-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(105 44 216 / var(--tw-bg-opacity));\n}\n\n.bg-purple-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(222 204 246 / var(--tw-bg-opacity));\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n\n.bg-purple-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(88 0 212 / var(--tw-bg-opacity));\n}\n\n.bg-purple-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(205 179 242 / var(--tw-bg-opacity));\n}\n\n.\\!bg-purple-600 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(105 44 216 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-100 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(222 204 246 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-800 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;\n}\n\n.\\!bg-purple-300 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;\n}\n\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n\n.bg-purple-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(121 51 221 / var(--tw-bg-opacity));\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n\n.fill-white {\n fill: #fff;\n}\n\n.p-1 {\n padding: 0.25rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.py-\\[6px\\] {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.pr-9 {\n padding-right: 2.25rem;\n}\n\n.pr-4 {\n padding-right: 1rem;\n}\n\n.pl-1 {\n padding-left: 0.25rem;\n}\n\n.pl-0 {\n padding-left: 0px;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.pr-10 {\n padding-right: 2.5rem;\n}\n\n.pl-10 {\n padding-left: 2.5rem;\n}\n\n.pl-7 {\n padding-left: 1.75rem;\n}\n\n.pr-7 {\n padding-right: 1.75rem;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.align-middle {\n vertical-align: middle;\n}\n\n.font-muli {\n font-family: Muli, sans-serif;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.font-medium {\n font-weight: 600;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.uppercase {\n text-transform: uppercase;\n}\n\n.leading-none {\n line-height: 1;\n}\n\n.leading-5 {\n line-height: 1.25rem;\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity));\n}\n\n.text-purple-700 {\n --tw-text-opacity: 1;\n color: rgb(88 0 212 / var(--tw-text-opacity));\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n\n.\\!text-white {\n --tw-text-opacity: 1 !important;\n color: rgb(255 255 255 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-purple-700 {\n --tw-text-opacity: 1 !important;\n color: rgb(88 0 212 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-gray-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(75 85 99 / var(--tw-text-opacity)) !important;\n}\n\n.\\!text-purple-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(105 44 216 / var(--tw-text-opacity)) !important;\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n\n.text-purple-600 {\n --tw-text-opacity: 1;\n color: rgb(105 44 216 / var(--tw-text-opacity));\n}\n\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n\n.text-gray-700\\/\\[\\.5\\] {\n color: rgb(55 65 81 / .5);\n}\n\n.text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(121 51 221 / var(--tw-text-opacity));\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-0 {\n opacity: 0;\n}\n\n.opacity-100 {\n opacity: 1;\n}\n\n.opacity-60 {\n opacity: 0.6;\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.outline {\n outline-style: solid;\n}\n\n.outline-purple-500 {\n outline-color: #7933DD;\n}\n\n.\\!outline-red-500 {\n outline-color: #ef4444 !important;\n}\n\n.outline-red-500 {\n outline-color: #ef4444;\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.ring-black {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n\n.ring-opacity-5 {\n --tw-ring-opacity: 0.05;\n}\n\n.blur {\n --tw-blur: blur(8px);\n 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);\n}\n\n.filter {\n 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);\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n 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;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.duration-100 {\n transition-duration: 100ms;\n}\n\n.duration-75 {\n transition-duration: 75ms;\n}\n\n.duration-200 {\n transition-duration: 200ms;\n}\n\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.focus-within\\:z-20:focus-within {\n z-index: 20;\n}\n\n.focus-within\\:z-10:focus-within {\n z-index: 10;\n}\n\n.hover\\:\\!border-r-0:hover {\n border-right-width: 0px !important;\n}\n\n.hover\\:\\!border-l-0:hover {\n border-left-width: 0px !important;\n}\n\n.hover\\:border-purple-700:hover {\n --tw-border-opacity: 1;\n border-color: rgb(88 0 212 / var(--tw-border-opacity));\n}\n\n.hover\\:border-purple-200:hover {\n --tw-border-opacity: 1;\n border-color: rgb(205 179 242 / var(--tw-border-opacity));\n}\n\n.hover\\:border-gray-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n\n.hover\\:bg-purple-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(88 0 212 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-purple-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(205 179 242 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-white:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:text-purple-700:hover {\n --tw-text-opacity: 1;\n color: rgb(88 0 212 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-700:hover {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-500:hover {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.hover\\:text-gray-600:hover {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.focus\\:border-purple-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(121 51 221 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-purple-300:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-purple-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity));\n}\n\n.focus\\:ring-red-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-2:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n\n.focus-visible\\:ring-opacity-75:focus-visible {\n --tw-ring-opacity: 0.75;\n}\n\n.active\\:border-purple-800:active {\n --tw-border-opacity: 1;\n border-color: rgb(79 0 191 / var(--tw-border-opacity));\n}\n\n.active\\:border-purple-300:active {\n --tw-border-opacity: 1;\n border-color: rgb(188 153 238 / var(--tw-border-opacity));\n}\n\n.active\\:\\!border-purple-800:active {\n --tw-border-opacity: 1 !important;\n border-color: rgb(79 0 191 / var(--tw-border-opacity)) !important;\n}\n\n.active\\:\\!border-purple-300:active {\n --tw-border-opacity: 1 !important;\n border-color: rgb(188 153 238 / var(--tw-border-opacity)) !important;\n}\n\n.active\\:bg-purple-800:active {\n --tw-bg-opacity: 1;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-purple-300:active {\n --tw-bg-opacity: 1;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity));\n}\n\n.active\\:bg-gray-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.active\\:\\!bg-purple-800:active {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;\n}\n\n.active\\:\\!bg-purple-300:active {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;\n}\n\n.group:hover .group-hover\\:block {\n display: block;\n}\n\n.group:hover .group-hover\\:text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n@media (prefers-color-scheme: dark) {\n .dark\\:text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(121 51 221 / var(--tw-text-opacity));\n }\n}\n\n@media (min-width: 640px) {\n .sm\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n}";
|
|
7065
7065
|
styleInject(css_248z);
|
|
7066
7066
|
|
|
7067
7067
|
function Loader(_a) {
|
|
@@ -7251,7 +7251,7 @@ var Dropdown = function (_a) {
|
|
|
7251
7251
|
label && React__default["default"].createElement("span", { className: "pl-1" }, label),
|
|
7252
7252
|
IconElement && React__default["default"].createElement(IconElement, null)),
|
|
7253
7253
|
React__default["default"].createElement(We, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" },
|
|
7254
|
-
React__default["default"].createElement(We$1.Items, { className: cn("absolute right-0 mt-2 w-56 origin-bottom-right rounded bg-white shadow-lg", " z-20 divide-y divide-gray-100 focus:outline-none border border-gray-
|
|
7254
|
+
React__default["default"].createElement(We$1.Items, { className: cn("absolute right-0 mt-2 w-56 origin-bottom-right rounded bg-white shadow-lg", " z-20 divide-y divide-gray-100 focus:outline-none border border-gray-300", itemsClassName, yPosition === "top" ? "bottom-10" : "", xPosition === "right" ? "right-0" : "left-0"), slot: "" }, items.map(function (itemStack, i) {
|
|
7255
7255
|
return (React__default["default"].createElement("div", { className: "py-1", key: i }, itemStack.map(function (item, index) {
|
|
7256
7256
|
return (React__default["default"].createElement(We$1.Item, { key: index }, function (_a) {
|
|
7257
7257
|
var active = _a.active;
|
|
@@ -7265,6 +7265,7 @@ var Dropdown = function (_a) {
|
|
|
7265
7265
|
"bg-gray-100 text-red-500 hover:text-red-500": active &&
|
|
7266
7266
|
item.isEmphasized
|
|
7267
7267
|
}, itemClassName) },
|
|
7268
|
+
item.iconObj && React__default["default"].createElement(React__default["default"].Fragment, null, item.iconObj),
|
|
7268
7269
|
item.icon && (React__default["default"].createElement(DynamicIcons, { className: cn("mr-3 h-5 w-5 opacity-60 transition-all group-hover:opacity-100", {
|
|
7269
7270
|
"text-red-500": item.isEmphasized
|
|
7270
7271
|
},
|
|
@@ -7336,17 +7337,7 @@ var ButtonDropDown = function (_a) {
|
|
|
7336
7337
|
? "border-purple-100 bg-purple-100 !text-purple-700 hover:border-purple-200 hover:bg-purple-200 active:!border-purple-300 active:!bg-purple-300"
|
|
7337
7338
|
: "", button.type === "alternative"
|
|
7338
7339
|
? "border-gray-300 bg-white !text-gray-600 hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
|
|
7339
|
-
: ""), xPosition: "right",
|
|
7340
|
-
? "!bg-purple-600 !divide-purple-700 !border-purple-700 !mt-1"
|
|
7341
|
-
: "", button.type === "secondary"
|
|
7342
|
-
? "!bg-purple-100 !divide-purple-200 !border-purple-200 !mt-1"
|
|
7343
|
-
: "", button.type === "alternative"
|
|
7344
|
-
? "!mt-1"
|
|
7345
|
-
: ""), itemClassName: cn("transition-all", button.type === "primary"
|
|
7346
|
-
? "bg-purple-600 !text-white hover:bg-purple-700 active:bg-purple-800"
|
|
7347
|
-
: "", button.type === "secondary"
|
|
7348
|
-
? "bg-purple-100 !text-purple-700 hover:bg-purple-200 active:bg-purple-300 focus:bg-purple-300"
|
|
7349
|
-
: ""), activeItemClassName: cn(button.type === "primary" ? "!bg-purple-800" : "", button.type === "secondary" ? "!bg-purple-300" : "") })),
|
|
7340
|
+
: ""), xPosition: "right" })),
|
|
7350
7341
|
React__default["default"].createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" })));
|
|
7351
7342
|
};
|
|
7352
7343
|
|
|
@@ -7359,7 +7350,7 @@ var Switch = function (_a) {
|
|
|
7359
7350
|
}, [enabled]);
|
|
7360
7351
|
var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
|
|
7361
7352
|
// the circular button inside the switch
|
|
7362
|
-
var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", "
|
|
7353
|
+
var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
|
|
7363
7354
|
return (React__default["default"].createElement("div", { className: "text-center" },
|
|
7364
7355
|
React__default["default"].createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
|
|
7365
7356
|
React__default["default"].createElement("span", { className: "sr-only" }, "Use setting"),
|
|
@@ -12457,15 +12448,26 @@ var BaseField = function (_a, ref) {
|
|
|
12457
12448
|
};
|
|
12458
12449
|
var _BaseField = React.forwardRef(BaseField);
|
|
12459
12450
|
|
|
12451
|
+
var id = 0;
|
|
12452
|
+
function generateId() {
|
|
12453
|
+
return ++id;
|
|
12454
|
+
}
|
|
12455
|
+
var useId = function () {
|
|
12456
|
+
var _a = React.useState(generateId), id = _a[0], setId = _a[1];
|
|
12457
|
+
React.useLayoutEffect(function () {
|
|
12458
|
+
if (id === null)
|
|
12459
|
+
setId(generateId());
|
|
12460
|
+
}, [id]);
|
|
12461
|
+
return id != null ? '' + id : undefined;
|
|
12462
|
+
};
|
|
12463
|
+
|
|
12460
12464
|
var TextInput = function (_a, ref) {
|
|
12461
|
-
var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, onChange = _a.onChange, externalValue = _a.value;
|
|
12465
|
+
var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, onChange = _a.onChange, externalValue = _a.value, className = _a.className;
|
|
12466
|
+
var uniqueID = useId();
|
|
12462
12467
|
var _c = React.useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
|
|
12463
12468
|
var _d = React.useState(false); _d[0]; var setIsActive = _d[1];
|
|
12464
|
-
var _e = React.useState(defaultValue || ""), value = _e[0], setValue = _e[1];
|
|
12469
|
+
var _e = React.useState(externalValue || defaultValue || ""), value = _e[0], setValue = _e[1];
|
|
12465
12470
|
var inputRef = React.useRef(null);
|
|
12466
|
-
React.useEffect(function () {
|
|
12467
|
-
setValue(externalValue);
|
|
12468
|
-
}, [externalValue]);
|
|
12469
12471
|
// set force focus
|
|
12470
12472
|
React.useEffect(function () {
|
|
12471
12473
|
var input = inputRef.current;
|
|
@@ -12495,16 +12497,22 @@ var TextInput = function (_a, ref) {
|
|
|
12495
12497
|
setIsFocus(false);
|
|
12496
12498
|
setIsActive(!(input && input.value === ""));
|
|
12497
12499
|
};
|
|
12498
|
-
var className = cn("border py-2 px-3 rounded text-sm leading-5 font-normal w-full", { "border-gray-300 shadow-sm": !isFocus && !isError }, {
|
|
12499
|
-
"focus:ring-purple-500 border-purple-500 outline-purple-500 shadow-none": isFocus && !isError
|
|
12500
|
-
}, { "focus:ring-red-500 !border-red-500 shadow-none": isError });
|
|
12501
12500
|
var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
|
|
12501
|
+
if (!id)
|
|
12502
|
+
id = "input-".concat(uniqueID);
|
|
12503
|
+
if (!name)
|
|
12504
|
+
name = id;
|
|
12505
|
+
console.log();
|
|
12502
12506
|
return (React__default["default"].createElement("div", null,
|
|
12503
12507
|
React__default["default"].createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: true, isDisabled: isDisabled }),
|
|
12504
12508
|
React__default["default"].createElement("div", null,
|
|
12505
|
-
React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, className:
|
|
12509
|
+
React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, className: cn("w-full rounded border py-2 px-3 text-sm font-normal leading-5", { "border-gray-300": !isFocus && !isError }, {
|
|
12510
|
+
"border-purple-500 shadow-none outline-purple-500 focus:ring-purple-500": isFocus && !isError
|
|
12511
|
+
}, {
|
|
12512
|
+
"!border-red-500 shadow-none focus:ring-red-500": isError
|
|
12513
|
+
}, className), isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength }),
|
|
12506
12514
|
React__default["default"].createElement("div", { className: "flex flex-row space-x-3" },
|
|
12507
|
-
React__default["default"].createElement("div", { className: "grow" }, message && React__default["default"].createElement("span", { className: discriptionStyles }, message)),
|
|
12515
|
+
React__default["default"].createElement("div", { className: "grow" }, message && (React__default["default"].createElement("span", { className: discriptionStyles }, message))),
|
|
12508
12516
|
isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
|
|
12509
12517
|
React__default["default"].createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength })))))));
|
|
12510
12518
|
};
|
|
@@ -12539,17 +12547,25 @@ var InputCta = function (_a) {
|
|
|
12539
12547
|
};
|
|
12540
12548
|
|
|
12541
12549
|
var TextInputAddon = function (_a, ref) {
|
|
12542
|
-
var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, inlineIcon = _a.inlineIcon, trailLabel = _a.trailLabel, leadLabel = _a.leadLabel, _c = _a.clearCta, clearCta = _c === void 0 ?
|
|
12550
|
+
var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, inlineIcon = _a.inlineIcon, trailLabel = _a.trailLabel, leadLabel = _a.leadLabel, _c = _a.clearCta, clearCta = _c === void 0 ? "none" : _c, onChange = _a.onChange, onCtaClick = _a.onCtaClick, externalValue = _a.value;
|
|
12543
12551
|
var _d = React.useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
|
|
12544
|
-
var _e = React.useState(defaultValue ||
|
|
12552
|
+
var _e = React.useState(defaultValue || ""), value = _e[0], setValue = _e[1];
|
|
12545
12553
|
var inputRef = React.useRef(null);
|
|
12554
|
+
var uniqueID = useId();
|
|
12555
|
+
if (!id)
|
|
12556
|
+
id = "input-".concat(uniqueID);
|
|
12557
|
+
if (!name)
|
|
12558
|
+
name = id;
|
|
12546
12559
|
React.useEffect(function () {
|
|
12547
12560
|
setValue(externalValue);
|
|
12548
12561
|
}, [externalValue]);
|
|
12549
12562
|
// set force focus
|
|
12550
12563
|
React.useEffect(function () {
|
|
12551
12564
|
var input = inputRef.current;
|
|
12552
|
-
if (!input ||
|
|
12565
|
+
if (!input ||
|
|
12566
|
+
isFocus === undefined ||
|
|
12567
|
+
isFocused === undefined ||
|
|
12568
|
+
isDisabled)
|
|
12553
12569
|
return;
|
|
12554
12570
|
if (isFocus || isFocused) {
|
|
12555
12571
|
input.focus();
|
|
@@ -12561,7 +12577,7 @@ var TextInputAddon = function (_a, ref) {
|
|
|
12561
12577
|
// set label as active if default value is set
|
|
12562
12578
|
React.useEffect(function () {
|
|
12563
12579
|
var input = inputRef.current;
|
|
12564
|
-
if (!input || defaultValue === undefined || defaultValue ===
|
|
12580
|
+
if (!input || defaultValue === undefined || defaultValue === "")
|
|
12565
12581
|
return;
|
|
12566
12582
|
}, [defaultValue]);
|
|
12567
12583
|
var handleInputFocus = function () {
|
|
@@ -12572,19 +12588,25 @@ var TextInputAddon = function (_a, ref) {
|
|
|
12572
12588
|
setIsFocus(false);
|
|
12573
12589
|
// add other focus effects here
|
|
12574
12590
|
};
|
|
12575
|
-
var className = cn(
|
|
12576
|
-
|
|
12591
|
+
var className = cn("border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 outline-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ", {
|
|
12592
|
+
"focus:ring-red-500 !border-red-500 !outline-red-500 shadow-none": isError
|
|
12593
|
+
}, { "pl-10": inlineIcon }, {
|
|
12594
|
+
"!rounded-r-none !rounded-l": (trailIcon || trailLabel) && !(leadIcon || leadLabel)
|
|
12595
|
+
}, {
|
|
12596
|
+
"!rounded-r-none !rounded-r": !(trailIcon || trailLabel) && (leadIcon || leadLabel)
|
|
12597
|
+
}, { "rounded-none": (trailIcon || trailLabel) && (leadIcon || leadLabel) });
|
|
12598
|
+
var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
|
|
12577
12599
|
return (React__default["default"].createElement("div", null,
|
|
12578
12600
|
label && (React__default["default"].createElement(InputLabel, { label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
|
|
12579
12601
|
React__default["default"].createElement("div", { className: "flex" },
|
|
12580
|
-
(leadIcon || leadLabel) && (React__default["default"].createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta ===
|
|
12581
|
-
React__default["default"].createElement("div", { className: "flex-grow focus-within:z-20
|
|
12582
|
-
inlineIcon && (React__default["default"].createElement("div", { className: "absolute inset-y-0 left-0
|
|
12602
|
+
(leadIcon || leadLabel) && (React__default["default"].createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === "left" || clearCta === "both" })),
|
|
12603
|
+
React__default["default"].createElement("div", { className: "relative flex-grow focus-within:z-20" },
|
|
12604
|
+
inlineIcon && (React__default["default"].createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
|
|
12583
12605
|
React__default["default"].createElement(DynamicIcons, { icon: inlineIcon, className: "h-5 w-5 text-gray-400", outline: false }))),
|
|
12584
12606
|
React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, className: className, isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
|
|
12585
|
-
(trailIcon || trailLabel) && (React__default["default"].createElement(InputCta, { icon: trailIcon, ctaLabel: trailLabel, align: "right", isClear: clearCta ===
|
|
12607
|
+
(trailIcon || trailLabel) && (React__default["default"].createElement(InputCta, { icon: trailIcon, ctaLabel: trailLabel, align: "right", isClear: clearCta === "right" || clearCta === "both", onClickHandler: onCtaClick }))),
|
|
12586
12608
|
React__default["default"].createElement("div", { className: "flex flex-row space-x-3" },
|
|
12587
|
-
React__default["default"].createElement("div", { className: "grow" }, message && React__default["default"].createElement("span", { className: discriptionStyles }, message)),
|
|
12609
|
+
React__default["default"].createElement("div", { className: "grow" }, message && (React__default["default"].createElement("span", { className: discriptionStyles }, message))),
|
|
12588
12610
|
isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
|
|
12589
12611
|
React__default["default"].createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength }))))));
|
|
12590
12612
|
};
|
|
@@ -12613,6 +12635,11 @@ var TextInputSelect = function (_a) {
|
|
|
12613
12635
|
var _d = React.useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
|
|
12614
12636
|
var _e = React.useState(defaultValue || ""), value = _e[0], setValue = _e[1];
|
|
12615
12637
|
var inputRef = React.useRef(null);
|
|
12638
|
+
var uniqueID = useId();
|
|
12639
|
+
if (!id)
|
|
12640
|
+
id = "select-".concat(uniqueID);
|
|
12641
|
+
if (!name)
|
|
12642
|
+
name = id;
|
|
12616
12643
|
React.useEffect(function () {
|
|
12617
12644
|
setValue(externalValue);
|
|
12618
12645
|
}, [externalValue]);
|
|
@@ -12658,7 +12685,7 @@ var TextInputSelect = function (_a) {
|
|
|
12658
12685
|
React__default["default"].createElement("div", { className: "relative flex-grow focus-within:z-20" },
|
|
12659
12686
|
prefix && (React__default["default"].createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
|
|
12660
12687
|
React__default["default"].createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix))),
|
|
12661
|
-
React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5
|
|
12688
|
+
React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5", "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm", selectLocation === "right"
|
|
12662
12689
|
? "rounded-l"
|
|
12663
12690
|
: "rounded-r", isError ? "border-red-500" : "", prefix ? "pl-7" : ""), isDisabled: isDisabled, defaultValue: defaultValue, value: value, maxLength: maxLength, placeholder: placeholder })),
|
|
12664
12691
|
(inputOptions === null || inputOptions === void 0 ? void 0 : inputOptions.length) && selectLocation === "right" && (React__default["default"].createElement(InputSelect, { inputOptions: inputOptions, align: "right", onSelectOption: onSelectOption, isDisabled: isDisabled, className: cn(isError ? "border-red-500" : "") }))),
|
|
@@ -12671,6 +12698,11 @@ var TextInputSelect = function (_a) {
|
|
|
12671
12698
|
/** Comment */
|
|
12672
12699
|
var Radio = function (_a) {
|
|
12673
12700
|
var label = _a.label, id = _a.id, name = _a.name, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, _e = _a.isError, isError = _e === void 0 ? false : _e, message = _a.message, onChange = _a.onChange, onClick = _a.onClick, value = _a.value;
|
|
12701
|
+
var uniqueID = useId();
|
|
12702
|
+
if (!id)
|
|
12703
|
+
id = "input-".concat(uniqueID);
|
|
12704
|
+
if (!name)
|
|
12705
|
+
name = id;
|
|
12674
12706
|
var checboxStyles = cn('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300', {
|
|
12675
12707
|
'border-red-500 shadow-none': isError
|
|
12676
12708
|
});
|
|
@@ -12698,22 +12730,24 @@ var Radio = function (_a) {
|
|
|
12698
12730
|
};
|
|
12699
12731
|
|
|
12700
12732
|
var Textarea = function (_a, ref) {
|
|
12701
|
-
var id = _a.id, name = _a.name, label = _a.label, isError = _a.isError, isRequired = _a.isRequired, isDisabled = _a.isDisabled, defaultValue = _a.defaultValue, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange;
|
|
12702
|
-
var
|
|
12733
|
+
var id = _a.id, name = _a.name, label = _a.label, isError = _a.isError, isRequired = _a.isRequired, isDisabled = _a.isDisabled, defaultValue = _a.defaultValue, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange, externalValue = _a.value;
|
|
12734
|
+
var uniqueID = useId();
|
|
12735
|
+
var _d = React.useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
|
|
12703
12736
|
var handleOnchange = function (e) {
|
|
12704
12737
|
var targetValue = e.currentTarget.value;
|
|
12705
12738
|
typeof onChange === "function" && onChange(targetValue);
|
|
12706
12739
|
setValue(targetValue);
|
|
12707
12740
|
};
|
|
12708
|
-
var className = cn("
|
|
12741
|
+
var className = cn("focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm rounded", { "border-gray-300 ": !isError }, { "focus:ring-red-500 border-red-500 outline-red-500": isError });
|
|
12709
12742
|
var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
|
|
12710
|
-
|
|
12711
|
-
|
|
12743
|
+
if (!id)
|
|
12744
|
+
id = "ta-".concat(uniqueID);
|
|
12745
|
+
return (React__default["default"].createElement("div", { className: cn({ "opacity-50": isDisabled }) },
|
|
12712
12746
|
label && (React__default["default"].createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
|
|
12713
12747
|
React__default["default"].createElement("div", null,
|
|
12714
|
-
React__default["default"].createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue })),
|
|
12748
|
+
React__default["default"].createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue, value: value })),
|
|
12715
12749
|
React__default["default"].createElement("div", { className: "flex flex-row space-x-3" },
|
|
12716
|
-
React__default["default"].createElement("div", { className: "grow" }, message && React__default["default"].createElement("span", { className: discriptionStyles }, message)),
|
|
12750
|
+
React__default["default"].createElement("div", { className: "grow" }, message && (React__default["default"].createElement("span", { className: discriptionStyles }, message))),
|
|
12717
12751
|
isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
|
|
12718
12752
|
React__default["default"].createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength }))))));
|
|
12719
12753
|
};
|
|
@@ -12723,6 +12757,11 @@ var _Textarea = React.forwardRef(Textarea);
|
|
|
12723
12757
|
var Select = function (_a) {
|
|
12724
12758
|
var label = _a.label, id = _a.id, name = _a.name, options = _a.options, onChange = _a.onChange, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired;
|
|
12725
12759
|
var _b = React.useState(options[0].value), selectedOption = _b[0], setSelectedOption = _b[1];
|
|
12760
|
+
var uniqueID = useId();
|
|
12761
|
+
if (!id)
|
|
12762
|
+
id = "select-".concat(uniqueID);
|
|
12763
|
+
if (!name)
|
|
12764
|
+
name = id;
|
|
12726
12765
|
var handleChange = function (e) {
|
|
12727
12766
|
var targetValue = e.target.value;
|
|
12728
12767
|
typeof onChange == "function" && onChange(targetValue);
|