@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21
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/README.md +163 -28
- package/dist/date-picker.js +2 -0
- package/dist/ds/src/date-picker.d.ts +9 -0
- package/dist/ds/src/file-input.d.ts +9 -0
- package/dist/ds/src/index.d.ts +2 -3
- package/dist/ds/src/rich-text-editor.d.ts +8 -0
- package/dist/ds/src/time-field.d.ts +9 -0
- package/dist/file-input.js +2 -0
- package/dist/index.js +79 -2
- package/dist/rich-text-editor.js +4 -0
- package/dist/source-hash.txt +1 -0
- package/dist/styles.css +1185 -403
- package/dist/theme.css +122 -7
- package/dist/time-field.js +2 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.d.ts +30 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.js +108 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.js.map +1 -0
- package/dist/ui/src/components/edyn/animated-number/animated-number.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/animated-number/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/audio-player/audio-player.d.ts +3 -2
- package/dist/ui/src/components/edyn/audio-player/audio-player.js +86 -0
- package/dist/ui/src/components/edyn/audio-player/audio-player.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.d.ts +86 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.js +302 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/date-picker.state.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.d.ts +40 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.js +105 -0
- package/dist/ui/src/components/edyn/date-picker/date-text.js.map +1 -0
- package/dist/ui/src/components/edyn/date-picker/index.d.ts +2 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.d.ts +28 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js +70 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js.map +1 -0
- package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/date-range-picker/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/file-input/file-input.d.ts +90 -0
- package/dist/ui/src/components/edyn/file-input/file-input.js +261 -0
- package/dist/ui/src/components/edyn/file-input/file-input.js.map +1 -0
- package/dist/ui/src/components/edyn/file-input/file-input.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/file-input/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.d.ts +54 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js +86 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.js.map +1 -0
- package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.test.d.ts +10 -0
- package/dist/ui/src/components/edyn/multi-select/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.d.ts +117 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.js +342 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.js.map +1 -0
- package/dist/ui/src/components/edyn/multi-select/multi-select.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/presence/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/presence/presence.d.ts +15 -0
- package/dist/ui/src/components/edyn/presence/presence.js +58 -0
- package/dist/ui/src/components/edyn/presence/presence.js.map +1 -0
- package/dist/ui/src/components/edyn/presence/presence.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/progress-line/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.d.ts +23 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.js +100 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.js.map +1 -0
- package/dist/ui/src/components/edyn/progress-line/progress-line.test.d.ts +9 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.d.ts +11 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.js +37 -0
- package/dist/ui/src/components/edyn/rich-text-content/allow-list.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-content/index.d.ts +2 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.d.ts +22 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.js +124 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.d.ts +18 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.js +124 -0
- package/dist/ui/src/components/edyn/rich-text-editor/extensions.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/index.d.ts +3 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.d.ts +17 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js +232 -0
- package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.d.ts +53 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js +244 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.test.d.ts +6 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.d.ts +13 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.js +55 -0
- package/dist/ui/src/components/edyn/rich-text-editor/serialize.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.d.ts +19 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.js +34 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/sync.test.d.ts +11 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.d.ts +20 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js +235 -0
- package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js.map +1 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.d.ts +68 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.js +26 -0
- package/dist/ui/src/components/edyn/rich-text-editor/types.js.map +1 -0
- package/dist/ui/src/components/edyn/time-field/index.d.ts +1 -0
- package/dist/ui/src/components/edyn/time-field/time-field.d.ts +85 -0
- package/dist/ui/src/components/edyn/time-field/time-field.js +337 -0
- package/dist/ui/src/components/edyn/time-field/time-field.js.map +1 -0
- package/dist/ui/src/components/edyn/time-field/time-field.test.d.ts +8 -0
- package/dist/ui/src/components/edyn/video-player/video-player.d.ts +2 -2
- package/dist/ui/src/components/edyn/video-player/video-player.js +132 -0
- package/dist/ui/src/components/edyn/video-player/video-player.js.map +1 -0
- package/dist/ui/src/components/forwarded-props.test.d.ts +8 -0
- package/dist/ui/src/components/ui/accordion/accordion.d.ts +9 -8
- package/dist/ui/src/components/ui/accordion/accordion.js +83 -0
- package/dist/ui/src/components/ui/accordion/accordion.js.map +1 -0
- package/dist/ui/src/components/ui/alert/alert.js +47 -0
- package/dist/ui/src/components/ui/alert/alert.js.map +1 -0
- package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js +97 -0
- package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/ui/src/components/ui/aspect-ratio/aspect-ratio.js +15 -0
- package/dist/ui/src/components/ui/aspect-ratio/aspect-ratio.js.map +1 -0
- package/dist/ui/src/components/ui/attachment/attachment.d.ts +1 -1
- package/dist/ui/src/components/ui/attachment/attachment.js +105 -0
- package/dist/ui/src/components/ui/attachment/attachment.js.map +1 -0
- package/dist/ui/src/components/ui/avatar/avatar.js +51 -0
- package/dist/ui/src/components/ui/avatar/avatar.js.map +1 -0
- package/dist/ui/src/components/ui/badge/badge.d.ts +1 -1
- package/dist/ui/src/components/ui/badge/badge.js +47 -0
- package/dist/ui/src/components/ui/badge/badge.js.map +1 -0
- package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js +73 -0
- package/dist/ui/src/components/ui/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/ui/src/components/ui/bubble/bubble.js +74 -0
- package/dist/ui/src/components/ui/bubble/bubble.js.map +1 -0
- package/dist/ui/src/components/ui/button/button.behavior.test.d.ts +8 -0
- package/dist/ui/src/components/ui/button/button.d.ts +1 -1
- package/dist/ui/src/components/ui/button/button.js +93 -0
- package/dist/ui/src/components/ui/button/button.js.map +1 -0
- package/dist/ui/src/components/ui/button-group/button-group.js +37 -0
- package/dist/ui/src/components/ui/button-group/button-group.js.map +1 -0
- package/dist/ui/src/components/ui/calendar/calendar.behavior.test.d.ts +9 -0
- package/dist/ui/src/components/ui/calendar/calendar.d.ts +1 -1
- package/dist/ui/src/components/ui/calendar/calendar.js +141 -0
- package/dist/ui/src/components/ui/calendar/calendar.js.map +1 -0
- package/dist/ui/src/components/ui/card/card.js +57 -0
- package/dist/ui/src/components/ui/card/card.js.map +1 -0
- package/dist/ui/src/components/ui/carousel/carousel.js +136 -0
- package/dist/ui/src/components/ui/carousel/carousel.js.map +1 -0
- package/dist/ui/src/components/ui/chart/chart.js +168 -0
- package/dist/ui/src/components/ui/chart/chart.js.map +1 -0
- package/dist/ui/src/components/ui/checkbox/checkbox.js +21 -0
- package/dist/ui/src/components/ui/checkbox/checkbox.js.map +1 -0
- package/dist/ui/src/components/ui/collapsible/collapsible.js +26 -0
- package/dist/ui/src/components/ui/collapsible/collapsible.js.map +1 -0
- package/dist/ui/src/components/ui/combobox/combobox.d.ts +15 -1
- package/dist/ui/src/components/ui/combobox/combobox.js +111 -0
- package/dist/ui/src/components/ui/combobox/combobox.js.map +1 -0
- package/dist/ui/src/components/ui/command/command.d.ts +17 -1
- package/dist/ui/src/components/ui/command/command.js +118 -0
- package/dist/ui/src/components/ui/command/command.js.map +1 -0
- package/dist/ui/src/components/ui/context-menu/context-menu.d.ts +1 -1
- package/dist/ui/src/components/ui/context-menu/context-menu.js +145 -0
- package/dist/ui/src/components/ui/context-menu/context-menu.js.map +1 -0
- package/dist/ui/src/components/ui/dialog/dialog.js +94 -0
- package/dist/ui/src/components/ui/dialog/dialog.js.map +1 -0
- package/dist/ui/src/components/ui/direction/direction.js +2 -0
- package/dist/ui/src/components/ui/drawer/drawer.js +88 -0
- package/dist/ui/src/components/ui/drawer/drawer.js.map +1 -0
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.d.ts +12 -1
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js +159 -0
- package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js.map +1 -0
- package/dist/ui/src/components/ui/empty/empty.js +61 -0
- package/dist/ui/src/components/ui/empty/empty.js.map +1 -0
- package/dist/ui/src/components/ui/field/field.js +36 -0
- package/dist/ui/src/components/ui/field/field.js.map +1 -0
- package/dist/ui/src/components/ui/hover-card/hover-card.js +39 -0
- package/dist/ui/src/components/ui/hover-card/hover-card.js.map +1 -0
- package/dist/ui/src/components/ui/indicator/indicator.js +79 -0
- package/dist/ui/src/components/ui/indicator/indicator.js.map +1 -0
- package/dist/ui/src/components/ui/input/input.js +16 -0
- package/dist/ui/src/components/ui/input/input.js.map +1 -0
- package/dist/ui/src/components/ui/input-group/input-group.d.ts +1 -1
- package/dist/ui/src/components/ui/input-group/input-group.js +77 -0
- package/dist/ui/src/components/ui/input-group/input-group.js.map +1 -0
- package/dist/ui/src/components/ui/input-otp/input-otp.js +48 -0
- package/dist/ui/src/components/ui/input-otp/input-otp.js.map +1 -0
- package/dist/ui/src/components/ui/item/item.d.ts +1 -1
- package/dist/ui/src/components/ui/item/item.js +122 -0
- package/dist/ui/src/components/ui/item/item.js.map +1 -0
- package/dist/ui/src/components/ui/kbd/kbd.js +21 -0
- package/dist/ui/src/components/ui/kbd/kbd.js.map +1 -0
- package/dist/ui/src/components/ui/label/label.js +14 -0
- package/dist/ui/src/components/ui/label/label.js.map +1 -0
- package/dist/ui/src/components/ui/marker/marker.js +44 -0
- package/dist/ui/src/components/ui/marker/marker.js.map +1 -0
- package/dist/ui/src/components/ui/menubar/menubar.js +140 -0
- package/dist/ui/src/components/ui/menubar/menubar.js.map +1 -0
- package/dist/ui/src/components/ui/message/message.js +50 -0
- package/dist/ui/src/components/ui/message/message.js.map +1 -0
- package/dist/ui/src/components/ui/message-scroller/message-scroller.js +61 -0
- package/dist/ui/src/components/ui/message-scroller/message-scroller.js.map +1 -0
- package/dist/ui/src/components/ui/native-select/native-select.js +39 -0
- package/dist/ui/src/components/ui/native-select/native-select.js.map +1 -0
- package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js +87 -0
- package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js.map +1 -0
- package/dist/ui/src/components/ui/pagination/pagination.d.ts +3 -2
- package/dist/ui/src/components/ui/pagination/pagination.js +104 -0
- package/dist/ui/src/components/ui/pagination/pagination.js.map +1 -0
- package/dist/ui/src/components/ui/popover/popover.d.ts +1 -1
- package/dist/ui/src/components/ui/popover/popover.js +59 -0
- package/dist/ui/src/components/ui/popover/popover.js.map +1 -0
- package/dist/ui/src/components/ui/progress/progress.behavior.test.d.ts +8 -0
- package/dist/ui/src/components/ui/progress/progress.d.ts +43 -1
- package/dist/ui/src/components/ui/progress/progress.js +70 -0
- package/dist/ui/src/components/ui/progress/progress.js.map +1 -0
- package/dist/ui/src/components/ui/questionnaire/questionnaire.js +171 -0
- package/dist/ui/src/components/ui/questionnaire/questionnaire.js.map +1 -0
- package/dist/ui/src/components/ui/radio-group/radio-group.js +29 -0
- package/dist/ui/src/components/ui/radio-group/radio-group.js.map +1 -0
- package/dist/ui/src/components/ui/resizable/resizable.js +29 -0
- package/dist/ui/src/components/ui/resizable/resizable.js.map +1 -0
- package/dist/ui/src/components/ui/scroll-area/index.d.ts +1 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.d.ts +13 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js +69 -0
- package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js.map +1 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.behavior.test.d.ts +12 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts +57 -6
- package/dist/ui/src/components/ui/scroll-area/scroll-area.js +155 -0
- package/dist/ui/src/components/ui/scroll-area/scroll-area.js.map +1 -0
- package/dist/ui/src/components/ui/select/select.js +97 -0
- package/dist/ui/src/components/ui/select/select.js.map +1 -0
- package/dist/ui/src/components/ui/separator/separator.behavior.test.d.ts +14 -0
- package/dist/ui/src/components/ui/separator/separator.d.ts +14 -0
- package/dist/ui/src/components/ui/separator/separator.js +30 -0
- package/dist/ui/src/components/ui/separator/separator.js.map +1 -0
- package/dist/ui/src/components/ui/sheet/sheet.d.ts +8 -0
- package/dist/ui/src/components/ui/sheet/sheet.js +99 -0
- package/dist/ui/src/components/ui/sheet/sheet.js.map +1 -0
- package/dist/ui/src/components/ui/sidebar/sidebar.js +383 -0
- package/dist/ui/src/components/ui/sidebar/sidebar.js.map +1 -0
- package/dist/ui/src/components/ui/skeleton/skeleton.js +14 -0
- package/dist/ui/src/components/ui/skeleton/skeleton.js.map +1 -0
- package/dist/ui/src/components/ui/slider/slider.js +49 -0
- package/dist/ui/src/components/ui/slider/slider.js.map +1 -0
- package/dist/ui/src/components/ui/spinner/spinner.js +28 -0
- package/dist/ui/src/components/ui/spinner/spinner.js.map +1 -0
- package/dist/ui/src/components/ui/switch/switch.js +20 -0
- package/dist/ui/src/components/ui/switch/switch.js.map +1 -0
- package/dist/ui/src/components/ui/table/table.behavior.test.d.ts +4 -5
- package/dist/ui/src/components/ui/table/table.d.ts +15 -1
- package/dist/ui/src/components/ui/table/table.js +81 -0
- package/dist/ui/src/components/ui/table/table.js.map +1 -0
- package/dist/ui/src/components/ui/tabs/tabs.d.ts +9 -8
- package/dist/ui/src/components/ui/tabs/tabs.js +50 -0
- package/dist/ui/src/components/ui/tabs/tabs.js.map +1 -0
- package/dist/ui/src/components/ui/textarea/textarea.js +14 -0
- package/dist/ui/src/components/ui/textarea/textarea.js.map +1 -0
- package/dist/ui/src/components/ui/toast/toast.js +124 -0
- package/dist/ui/src/components/ui/toast/toast.js.map +1 -0
- package/dist/ui/src/components/ui/toggle/toggle.js +37 -0
- package/dist/ui/src/components/ui/toggle/toggle.js.map +1 -0
- package/dist/ui/src/components/ui/toggle-group/toggle-group.js +56 -0
- package/dist/ui/src/components/ui/toggle-group/toggle-group.js.map +1 -0
- package/dist/ui/src/components/ui/tooltip/tooltip.js +43 -0
- package/dist/ui/src/components/ui/tooltip/tooltip.js.map +1 -0
- package/dist/ui/src/hooks/use-media-player.js +140 -0
- package/dist/ui/src/hooks/use-media-player.js.map +1 -0
- package/dist/ui/src/hooks/use-merged-refs.js +18 -0
- package/dist/ui/src/hooks/use-merged-refs.js.map +1 -0
- package/dist/ui/src/hooks/use-mobile.js +20 -0
- package/dist/ui/src/hooks/use-mobile.js.map +1 -0
- package/dist/ui/src/index.d.ts +8 -0
- package/dist/ui/src/lib/first-weekday.d.ts +6 -0
- package/dist/ui/src/lib/first-weekday.js +34 -0
- package/dist/ui/src/lib/first-weekday.js.map +1 -0
- package/dist/ui/src/lib/focus-guards.d.ts +2 -0
- package/dist/ui/src/lib/focus-guards.js +52 -0
- package/dist/ui/src/lib/focus-guards.js.map +1 -0
- package/dist/ui/src/lib/focus-ring.test.d.ts +8 -0
- package/dist/ui/src/lib/popup-list.d.ts +75 -0
- package/dist/ui/src/lib/popup-list.js +48 -0
- package/dist/ui/src/lib/popup-list.js.map +1 -0
- package/dist/ui/src/lib/popup-list.test.d.ts +10 -0
- package/dist/ui/src/lib/utils.js +21 -0
- package/dist/ui/src/lib/utils.js.map +1 -0
- package/package.json +36 -8
- package/dist/chunks/toggle-group-ByNq8g7H.js +0 -4263
- package/dist/chunks/toggle-group-ByNq8g7H.js.map +0 -1
- package/dist/dom/src/context.d.ts +0 -34
- package/dist/dom/src/define-element.d.ts +0 -11
- package/dist/dom/src/field-control.d.ts +0 -5
- package/dist/dom/src/index.d.ts +0 -6
- package/dist/dom/src/mode.d.ts +0 -8
- package/dist/dom/src/styles.d.ts +0 -6
- package/dist/dom/src/theme-state.d.ts +0 -1
- package/dist/dom/src/types.d.ts +0 -65
- package/dist/ds/src/elements.d.ts +0 -12
- package/dist/elements/src/edx-accordion.d.ts +0 -14
- package/dist/elements/src/edx-accordion.test.d.ts +0 -1
- package/dist/elements/src/edx-alert.d.ts +0 -14
- package/dist/elements/src/edx-audio-player.d.ts +0 -11
- package/dist/elements/src/edx-avatar.d.ts +0 -10
- package/dist/elements/src/edx-badge.d.ts +0 -12
- package/dist/elements/src/edx-breadcrumb.d.ts +0 -11
- package/dist/elements/src/edx-button-group.d.ts +0 -7
- package/dist/elements/src/edx-button.d.ts +0 -20
- package/dist/elements/src/edx-calendar.d.ts +0 -21
- package/dist/elements/src/edx-card.d.ts +0 -8
- package/dist/elements/src/edx-checkbox.d.ts +0 -18
- package/dist/elements/src/edx-combobox.d.ts +0 -28
- package/dist/elements/src/edx-content-components.d.ts +0 -2
- package/dist/elements/src/edx-dialog.d.ts +0 -20
- package/dist/elements/src/edx-drawer.d.ts +0 -21
- package/dist/elements/src/edx-dropdown-menu.d.ts +0 -29
- package/dist/elements/src/edx-field.d.ts +0 -9
- package/dist/elements/src/edx-field.test.d.ts +0 -1
- package/dist/elements/src/edx-indicator.d.ts +0 -14
- package/dist/elements/src/edx-input-group.d.ts +0 -32
- package/dist/elements/src/edx-input-otp.d.ts +0 -19
- package/dist/elements/src/edx-input.d.ts +0 -31
- package/dist/elements/src/edx-interactive-components.d.ts +0 -2
- package/dist/elements/src/edx-label.d.ts +0 -6
- package/dist/elements/src/edx-pagination.d.ts +0 -8
- package/dist/elements/src/edx-popover.d.ts +0 -24
- package/dist/elements/src/edx-progress.d.ts +0 -10
- package/dist/elements/src/edx-radio-group.d.ts +0 -22
- package/dist/elements/src/edx-radio-group.test.d.ts +0 -1
- package/dist/elements/src/edx-scroll-area.d.ts +0 -15
- package/dist/elements/src/edx-scroll-area.test.d.ts +0 -1
- package/dist/elements/src/edx-select.d.ts +0 -34
- package/dist/elements/src/edx-separator.d.ts +0 -10
- package/dist/elements/src/edx-skeleton.d.ts +0 -8
- package/dist/elements/src/edx-slider.d.ts +0 -17
- package/dist/elements/src/edx-slider.test.d.ts +0 -1
- package/dist/elements/src/edx-switch.d.ts +0 -18
- package/dist/elements/src/edx-table.d.ts +0 -13
- package/dist/elements/src/edx-table.test.d.ts +0 -1
- package/dist/elements/src/edx-tabs.d.ts +0 -15
- package/dist/elements/src/edx-tabs.test.d.ts +0 -1
- package/dist/elements/src/edx-textarea.d.ts +0 -25
- package/dist/elements/src/edx-toggle-group.d.ts +0 -27
- package/dist/elements/src/edx-toggle-group.test.d.ts +0 -1
- package/dist/elements/src/edx-toggle.d.ts +0 -18
- package/dist/elements/src/edx-tooltip.d.ts +0 -28
- package/dist/elements/src/edx-video-player.d.ts +0 -16
- package/dist/elements/src/field-control-bridge.d.ts +0 -7
- package/dist/elements/src/index.d.ts +0 -14
- package/dist/elements/src/projected-content.test.d.ts +0 -1
- package/dist/elements/src/registry.d.ts +0 -39
- package/dist/elements/src/registry.test.d.ts +0 -1
- package/dist/elements.js +0 -4020
- package/dist/elements.js.map +0 -1
- /package/dist/{dom/src/define-element.test.d.ts → ui/src/components/edyn/date-picker/date-text.test.d.ts} +0 -0
- /package/dist/{dom/src/native-slot.test.d.ts → ui/src/lib/first-weekday.test.d.ts} +0 -0
package/dist/elements.js
DELETED
|
@@ -1,4020 +0,0 @@
|
|
|
1
|
-
import { $ as SidebarProvider, $a as AlertDialogAction, $i as ChartContainer, $n as Kbd, $r as DrawerTrigger, $t as PopoverHeader, A as TableRow, Aa as BreadcrumbLink, Ar as EmptyTitle, At as ResizablePanel, B as SidebarGroupLabel, C as Table, Ca as Bubble, Ci as CommandList, Co as Button, Cr as FieldError, Ct as SelectSeparator, Da as Breadcrumb, Di as InputGroupAddon, Dr as EmptyDescription, E as TableCell, Ei as InputGroup, En as Message, Et as ScrollArea, F as SidebarContent, Fr as DropdownMenuItem, Ft as QuestionnaireActions, Ga as AttachmentContent, Gi as ComboboxContent, Gr as DropdownMenuTrigger, Gt as QuestionnaireProgress, Ha as Attachment, Hi as DialogTitle, Ht as QuestionnaireItem, Ia as Avatar, Ii as DialogContent, In as MenubarItem, Ir as DropdownMenuLabel, It as QuestionnaireChoice, J as SidebarMenuItem, Ja as AttachmentMedia, Ji as ComboboxItem, Jn as Marker, Jr as DrawerContent, Jt as QuestionnaireTitle, Ka as AttachmentDescription, Kr as Drawer, L as SidebarGroup, La as AvatarBadge, Li as DialogDescription, Lt as QuestionnaireChoiceDescription, M as Spinner, Ma as BreadcrumbPage, Mi as Textarea, Mn as Menubar, Mt as RadioGroup, Na as BreadcrumbSeparator, Ni as Input, Nr as DropdownMenuContent, Nt as RadioGroupItem, O as TableHead, Oi as InputGroupButton, On as MessageContent, Or as EmptyHeader, P as Sidebar, Pa as Badge, Pi as Dialog, Pn as MenubarContent, Pr as DropdownMenuGroup, Pt as Questionnaire, Qa as AlertDialog, Qi as Checkbox, Qn as Label, Qr as DrawerTitle, Qt as PopoverDescription, Ra as AvatarFallback, Ri as DialogFooter, Rn as MenubarMenu, Rt as QuestionnaireChoices, Si as CommandItem, Sn as MessageScrollerViewport, So as Slider, Sr as FieldDescription, St as SelectLabel, T as TableCaption, To as cn, Tr as Empty, Tt as SelectValue, Ui as DialogTrigger, V as SidebarHeader, Va as AvatarImage, W as SidebarMenu, Wi as Combobox, Xi as CollapsibleContent, Xt as Popover, Ya as AttachmentTitle, Yi as Collapsible, Yn as MarkerContent, Yr as DrawerDescription, Yt as Progress, Za as AspectRatio, Zi as CollapsibleTrigger, Zr as DrawerHeader, Zt as PopoverContent, _a as CardTitle, _i as Command, _n as MessageScroller, _o as AccordionTrigger, _t as SheetTrigger, aa as Carousel, an as NavigationMenu, at as TooltipContent, b as TabsList, ba as ButtonGroup, bn as MessageScrollerItem, br as HoverCardTrigger, bt as SelectGroup, ca as CarouselNext, cn as NavigationMenuItem, co as AlertDialogTitle, cr as ItemMedia, ct as Skeleton, da as Card, do as AlertAction, dr as Separator, ei as DirectionProvider, en as PopoverTitle, eo as AlertDialogCancel, fo as AlertDescription, fr as InputOTP, ft as SheetContent, g as toast, ga as CardHeader, gi as ContextMenuTrigger, gn as NativeSelectOption, go as AccordionItem, gr as Indicator, gt as SheetTitle, ho as AccordionContent, hr as InputOTPSlot, ht as SheetHeader, ii as ContextMenuContent, io as AlertDialogHeader, ir as ItemDescription, it as Tooltip, j as Switch, ja as BreadcrumbList, jn as MessageHeader, jr as DropdownMenu, jt as ResizablePanelGroup, k as TableHeader, ka as BreadcrumbItem, ki as InputGroupInput, kn as MessageFooter, kr as EmptyMedia, kt as ResizableHandle, la as CarouselPrevious, ln as NavigationMenuLink, lo as AlertDialogTrigger, m as Toaster, ma as CardDescription, mn as NativeSelect, mo as Accordion, mr as InputOTPSeparator, n as ToggleGroupItem, ni as ContextMenu, nn as Pagination, no as AlertDialogDescription, nt as SidebarTrigger, oa as CarouselContent, oi as ContextMenuItem, ot as TooltipProvider, pa as CardContent, po as AlertTitle, pr as InputOTPGroup, pt as SheetDescription, q as SidebarMenuButton, qi as ComboboxInput, qn as MenubarTrigger, qt as QuestionnaireSubmit, r as Toggle, ro as AlertDialogFooter, rr as ItemContent, sa as CarouselItem, st as TooltipTrigger, t as ToggleGroup, tn as PopoverTrigger, to as AlertDialogContent, tr as Item, un as NavigationMenuList, uo as Alert, ur as ItemTitle, ut as Sheet, v as Tabs, va as Calendar, vn as MessageScrollerButton, vo as VideoPlayer, vr as HoverCard, vt as Select, w as TableBody, wa as BubbleContent, wr as FieldLabel, wt as SelectTrigger, x as TabsTrigger, xi as CommandInput, xn as MessageScrollerProvider, xr as Field, xt as SelectItem, y as TabsContent, yi as CommandEmpty, yn as MessageScrollerContent, yo as AudioPlayer, yr as HoverCardContent, yt as SelectContent, z as SidebarGroupContent, zi as DialogHeader, zt as QuestionnaireDescription } from "./chunks/toggle-group-ByNq8g7H.js";
|
|
2
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
-
import { IconFile, IconInbox } from "@tabler/icons-react";
|
|
5
|
-
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
|
|
6
|
-
import { flushSync } from "react-dom";
|
|
7
|
-
import { createRoot } from "react-dom/client";
|
|
8
|
-
//#region ../dom/src/context.tsx
|
|
9
|
-
var EdxHostContext = createContext(null);
|
|
10
|
-
var EdxHostProvider = (props) => {
|
|
11
|
-
return /* @__PURE__ */ jsx(EdxHostContext.Provider, {
|
|
12
|
-
value: props.value,
|
|
13
|
-
children: props.children
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
var useEdxHost = () => {
|
|
17
|
-
const ctx = useContext(EdxHostContext);
|
|
18
|
-
if (!ctx) throw new Error("useEdxHost must be used inside an Edynamix custom element");
|
|
19
|
-
return ctx;
|
|
20
|
-
};
|
|
21
|
-
var useEmit = () => useEdxHost().emit;
|
|
22
|
-
/** The node Radix/shadcn overlays should portal into (shadow root in shadow mode, `null` -> body in light mode). */
|
|
23
|
-
var usePortalContainer = () => useEdxHost().portalContainer;
|
|
24
|
-
var useDomMode = () => useEdxHost().mode;
|
|
25
|
-
/**
|
|
26
|
-
* Projects host light-DOM children. Renders a native `<slot>` in shadow mode and
|
|
27
|
-
* re-inflates the captured markup in light mode (where no native slotting exists).
|
|
28
|
-
*
|
|
29
|
-
* Pass an optional `name` prop to render a named `<slot name="...">` in shadow mode,
|
|
30
|
-
* enabling multi-part containers (Tabs, Accordion, Table) to host their trigger/panel
|
|
31
|
-
* content as live, host-owned light-DOM nodes assigned to distinct projection points.
|
|
32
|
-
*/
|
|
33
|
-
var Slot = ({ name } = {}) => {
|
|
34
|
-
const { mode, slotHtml } = useEdxHost();
|
|
35
|
-
if (mode === "shadow") return /* @__PURE__ */ jsx("slot", { name });
|
|
36
|
-
if (!slotHtml) return null;
|
|
37
|
-
return /* @__PURE__ */ jsx("span", {
|
|
38
|
-
style: { display: "contents" },
|
|
39
|
-
dangerouslySetInnerHTML: { __html: slotHtml }
|
|
40
|
-
});
|
|
41
|
-
};
|
|
42
|
-
//#endregion
|
|
43
|
-
//#region ../dom/src/field-control.ts
|
|
44
|
-
var EDX_FIELD_CONTROL_CONNECT_EVENT = "edx-field-control-connect";
|
|
45
|
-
//#endregion
|
|
46
|
-
//#region ../dom/src/mode.ts
|
|
47
|
-
var defaultMode = "light";
|
|
48
|
-
/**
|
|
49
|
-
* Switch the default rendering mode for every element that does not pin its own
|
|
50
|
-
* `mode`. This is the one knob for flipping the whole library between light and
|
|
51
|
-
* shadow DOM.
|
|
52
|
-
*/
|
|
53
|
-
var setDefaultMode = (mode) => {
|
|
54
|
-
defaultMode = mode;
|
|
55
|
-
};
|
|
56
|
-
var getDefaultMode = () => defaultMode;
|
|
57
|
-
//#endregion
|
|
58
|
-
//#region ../dom/src/styles.ts
|
|
59
|
-
var sheetCache = /* @__PURE__ */ new Map();
|
|
60
|
-
/**
|
|
61
|
-
* Build (or reuse) a constructable stylesheet for the given CSS. Sheets are
|
|
62
|
-
* cached by content so every shadow root adopts the *same* sheet by reference:
|
|
63
|
-
* no per-instance `<style>` duplication.
|
|
64
|
-
*/
|
|
65
|
-
var getStyleSheet = (css) => {
|
|
66
|
-
if (typeof CSSStyleSheet === "undefined") return null;
|
|
67
|
-
const cached = sheetCache.get(css);
|
|
68
|
-
if (cached) return cached;
|
|
69
|
-
const sheet = new CSSStyleSheet();
|
|
70
|
-
sheet.replaceSync(css);
|
|
71
|
-
sheetCache.set(css, sheet);
|
|
72
|
-
return sheet;
|
|
73
|
-
};
|
|
74
|
-
//#endregion
|
|
75
|
-
//#region ../dom/src/theme-state.ts
|
|
76
|
-
var DARK_CLASS = "dark";
|
|
77
|
-
var targets = /* @__PURE__ */ new Set();
|
|
78
|
-
var observer = null;
|
|
79
|
-
var syncTargets = () => {
|
|
80
|
-
const isDark = document.documentElement.classList.contains(DARK_CLASS);
|
|
81
|
-
for (const target of targets) target.classList.toggle(DARK_CLASS, isDark);
|
|
82
|
-
};
|
|
83
|
-
var registerShadowThemeTargets = (...nextTargets) => {
|
|
84
|
-
for (const target of nextTargets) targets.add(target);
|
|
85
|
-
syncTargets();
|
|
86
|
-
if (!observer) {
|
|
87
|
-
observer = new MutationObserver(syncTargets);
|
|
88
|
-
observer.observe(document.documentElement, {
|
|
89
|
-
attributes: true,
|
|
90
|
-
attributeFilter: ["class"]
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
return () => {
|
|
94
|
-
for (const target of nextTargets) targets.delete(target);
|
|
95
|
-
if (targets.size === 0) {
|
|
96
|
-
observer?.disconnect();
|
|
97
|
-
observer = null;
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
//#endregion
|
|
102
|
-
//#region ../dom/src/define-element.tsx
|
|
103
|
-
var PORTAL_ATTR = "data-edx-portal";
|
|
104
|
-
var FORM_RESET_PROPERTIES = ["value", "checked"];
|
|
105
|
-
var VALUE_MISSING_MESSAGE = "Please fill out this field.";
|
|
106
|
-
var cloneFormState = (value) => Array.isArray(value) ? [...value] : value;
|
|
107
|
-
var isEmptyFormValue = (value) => {
|
|
108
|
-
if (value == null || value === "") return true;
|
|
109
|
-
if (Array.isArray(value)) return value.length === 0;
|
|
110
|
-
if (value instanceof FormData) return value.entries().next().done === true;
|
|
111
|
-
return false;
|
|
112
|
-
};
|
|
113
|
-
var isRequiredValueMissing = (props, formValue) => {
|
|
114
|
-
const values = props;
|
|
115
|
-
if (values.required !== true) return false;
|
|
116
|
-
if ("checked" in values || "defaultChecked" in values) return (values.checked ?? values.defaultChecked) !== true;
|
|
117
|
-
const value = values.value ?? values.defaultValue;
|
|
118
|
-
return isEmptyFormValue(value === void 0 ? formValue : value);
|
|
119
|
-
};
|
|
120
|
-
/**
|
|
121
|
-
* Register a React component as an `<edx-*>` custom element.
|
|
122
|
-
*
|
|
123
|
-
* Works in light or shadow DOM from the same component code. Attribute changes
|
|
124
|
-
* re-render (React reconciles, state and focus are preserved, no remount). The
|
|
125
|
-
* component reads host context via the `@edyn/dom` hooks (`useEmit`,
|
|
126
|
-
* `usePortalContainer`, `Slot`).
|
|
127
|
-
*/
|
|
128
|
-
var defineElement = (tag, Component, options = {}) => {
|
|
129
|
-
if (typeof customElements === "undefined") return;
|
|
130
|
-
if (customElements.get(tag)) return;
|
|
131
|
-
const observed = options.observedAttributes ?? [];
|
|
132
|
-
class EdxElement extends HTMLElement {
|
|
133
|
-
static formAssociated = options.formAssociated ?? false;
|
|
134
|
-
static get observedAttributes() {
|
|
135
|
-
return observed;
|
|
136
|
-
}
|
|
137
|
-
#root = null;
|
|
138
|
-
#mode = options.mode ?? getDefaultMode();
|
|
139
|
-
#portalContainer = null;
|
|
140
|
-
#shadow = null;
|
|
141
|
-
#shadowMountPoint = null;
|
|
142
|
-
#shadowPortalContainer = null;
|
|
143
|
-
#slotHtml = "";
|
|
144
|
-
#propOverrides = {};
|
|
145
|
-
#mountQueued = false;
|
|
146
|
-
#unmountPromise = null;
|
|
147
|
-
#delegateAbort = null;
|
|
148
|
-
#fieldControlCleanup = null;
|
|
149
|
-
#themeCleanup = null;
|
|
150
|
-
#internals = null;
|
|
151
|
-
#formValueOverride;
|
|
152
|
-
#formDisabled = false;
|
|
153
|
-
#formResetState = null;
|
|
154
|
-
constructor() {
|
|
155
|
-
super();
|
|
156
|
-
if (options.formAssociated && typeof this.attachInternals === "function") this.#internals = this.attachInternals();
|
|
157
|
-
}
|
|
158
|
-
connectedCallback() {
|
|
159
|
-
if (options.formAssociated) queueMicrotask(() => {
|
|
160
|
-
if (!this.isConnected) return;
|
|
161
|
-
this.#fieldControlCleanup?.();
|
|
162
|
-
let cleanup = null;
|
|
163
|
-
const detail = {
|
|
164
|
-
control: this,
|
|
165
|
-
setCleanup: (nextCleanup) => {
|
|
166
|
-
cleanup = nextCleanup;
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
|
-
this.dispatchEvent(new CustomEvent(EDX_FIELD_CONTROL_CONNECT_EVENT, {
|
|
170
|
-
detail,
|
|
171
|
-
bubbles: true,
|
|
172
|
-
composed: true
|
|
173
|
-
}));
|
|
174
|
-
this.#fieldControlCleanup = cleanup;
|
|
175
|
-
});
|
|
176
|
-
this.#ensureThemeRegistration();
|
|
177
|
-
if (this.#root || this.#mountQueued) return;
|
|
178
|
-
this.#mountQueued = true;
|
|
179
|
-
queueMicrotask(() => {
|
|
180
|
-
this.#mountAfterPendingUnmount();
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
async #mountAfterPendingUnmount() {
|
|
184
|
-
const pendingUnmount = this.#unmountPromise;
|
|
185
|
-
if (pendingUnmount) {
|
|
186
|
-
await pendingUnmount;
|
|
187
|
-
if (this.#unmountPromise === pendingUnmount) this.#unmountPromise = null;
|
|
188
|
-
}
|
|
189
|
-
this.#mountQueued = false;
|
|
190
|
-
if (this.#root || !this.isConnected) return;
|
|
191
|
-
this.#mount();
|
|
192
|
-
}
|
|
193
|
-
#mount() {
|
|
194
|
-
let mountPoint;
|
|
195
|
-
this.#captureFormResetState();
|
|
196
|
-
if (this.#mode === "shadow") {
|
|
197
|
-
if (!this.#shadow) {
|
|
198
|
-
this.#shadow = this.attachShadow({
|
|
199
|
-
mode: options.shadowMode ?? "open",
|
|
200
|
-
delegatesFocus: (options.delegateClick ?? false) || (options.formAssociated ?? false)
|
|
201
|
-
});
|
|
202
|
-
const sheet = options.styles ? getStyleSheet(options.styles) : null;
|
|
203
|
-
if (sheet) this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, sheet];
|
|
204
|
-
this.#shadowMountPoint = document.createElement("div");
|
|
205
|
-
this.#shadowMountPoint.className = "edx-root";
|
|
206
|
-
this.#shadow.appendChild(this.#shadowMountPoint);
|
|
207
|
-
this.#shadowPortalContainer = document.createElement("div");
|
|
208
|
-
this.#shadowPortalContainer.setAttribute(PORTAL_ATTR, "");
|
|
209
|
-
this.#shadowPortalContainer.className = "edx-root";
|
|
210
|
-
this.#shadow.appendChild(this.#shadowPortalContainer);
|
|
211
|
-
}
|
|
212
|
-
if (!this.#shadowMountPoint || !this.#shadowPortalContainer) throw new Error(`Shadow mount points are unavailable for <${tag}>`);
|
|
213
|
-
this.style.display = options.display ?? "block";
|
|
214
|
-
mountPoint = this.#shadowMountPoint;
|
|
215
|
-
this.#portalContainer = this.#shadowPortalContainer;
|
|
216
|
-
this.#ensureThemeRegistration();
|
|
217
|
-
} else {
|
|
218
|
-
if (!this.#slotHtml) this.#slotHtml = this.innerHTML;
|
|
219
|
-
this.innerHTML = "";
|
|
220
|
-
this.classList.add("edx-root");
|
|
221
|
-
this.style.display = options.display ?? "block";
|
|
222
|
-
mountPoint = this;
|
|
223
|
-
this.#portalContainer = null;
|
|
224
|
-
}
|
|
225
|
-
if (options.delegateClick || this.#mode === "light" && options.formAssociated) {
|
|
226
|
-
this.#delegateAbort = new AbortController();
|
|
227
|
-
const { signal } = this.#delegateAbort;
|
|
228
|
-
const findInteractive = () => {
|
|
229
|
-
return (this.#shadow ?? this).querySelector("button, input, select, textarea, [role=\"switch\"], [role=\"checkbox\"]");
|
|
230
|
-
};
|
|
231
|
-
if (options.delegateClick) this.addEventListener("click", (event) => {
|
|
232
|
-
if (event.composedPath()[0] !== this) return;
|
|
233
|
-
const inner = findInteractive();
|
|
234
|
-
if (!inner) return;
|
|
235
|
-
inner.focus();
|
|
236
|
-
if (inner.tagName !== "INPUT" && inner.tagName !== "SELECT" && inner.tagName !== "TEXTAREA") inner.click();
|
|
237
|
-
}, { signal });
|
|
238
|
-
if (this.#mode === "light") this.addEventListener("focus", () => {
|
|
239
|
-
findInteractive()?.focus();
|
|
240
|
-
}, { signal });
|
|
241
|
-
}
|
|
242
|
-
this.#root = createRoot(mountPoint);
|
|
243
|
-
flushSync(() => {
|
|
244
|
-
this.#render();
|
|
245
|
-
});
|
|
246
|
-
}
|
|
247
|
-
#ensureThemeRegistration() {
|
|
248
|
-
if (!this.#shadowMountPoint || !this.#shadowPortalContainer || this.#themeCleanup) return;
|
|
249
|
-
this.#themeCleanup = registerShadowThemeTargets(this.#shadowMountPoint, this.#shadowPortalContainer);
|
|
250
|
-
}
|
|
251
|
-
disconnectedCallback() {
|
|
252
|
-
this.#fieldControlCleanup?.();
|
|
253
|
-
this.#fieldControlCleanup = null;
|
|
254
|
-
this.#themeCleanup?.();
|
|
255
|
-
this.#themeCleanup = null;
|
|
256
|
-
const root = this.#root;
|
|
257
|
-
if (root) this.#unmountPromise = new Promise((resolve) => {
|
|
258
|
-
queueMicrotask(() => {
|
|
259
|
-
if (this.isConnected || this.#root !== root) {
|
|
260
|
-
resolve();
|
|
261
|
-
return;
|
|
262
|
-
}
|
|
263
|
-
try {
|
|
264
|
-
this.#delegateAbort?.abort();
|
|
265
|
-
this.#delegateAbort = null;
|
|
266
|
-
root.unmount();
|
|
267
|
-
} finally {
|
|
268
|
-
if (this.#root === root) {
|
|
269
|
-
this.#root = null;
|
|
270
|
-
this.#portalContainer = null;
|
|
271
|
-
}
|
|
272
|
-
resolve();
|
|
273
|
-
}
|
|
274
|
-
});
|
|
275
|
-
});
|
|
276
|
-
}
|
|
277
|
-
attributeChangedCallback() {
|
|
278
|
-
if (this.#root) this.#render();
|
|
279
|
-
}
|
|
280
|
-
formDisabledCallback(disabled) {
|
|
281
|
-
this.#formDisabled = disabled;
|
|
282
|
-
if (this.#root) this.#render();
|
|
283
|
-
}
|
|
284
|
-
formResetCallback() {
|
|
285
|
-
this.#formValueOverride = void 0;
|
|
286
|
-
for (const [property, value] of this.#formResetState ?? []) options.domProperties?.[property]?.set(this, cloneFormState(value));
|
|
287
|
-
if (this.#root) this.#render();
|
|
288
|
-
}
|
|
289
|
-
/** Push complex object/array props that cannot travel as attributes. */
|
|
290
|
-
setProps(props) {
|
|
291
|
-
this.#propOverrides = {
|
|
292
|
-
...this.#propOverrides,
|
|
293
|
-
...props
|
|
294
|
-
};
|
|
295
|
-
if (this.#root) this.#render();
|
|
296
|
-
}
|
|
297
|
-
#emit = (type, detail) => {
|
|
298
|
-
this.dispatchEvent(new CustomEvent(type, {
|
|
299
|
-
detail,
|
|
300
|
-
bubbles: true,
|
|
301
|
-
composed: true
|
|
302
|
-
}));
|
|
303
|
-
};
|
|
304
|
-
#setFormValue = (value, state) => {
|
|
305
|
-
if (this.#mode !== "shadow") return;
|
|
306
|
-
this.#formValueOverride = value;
|
|
307
|
-
this.#internals?.setFormValue(value, state);
|
|
308
|
-
this.#syncFormValidity(this.#getProps(), value);
|
|
309
|
-
};
|
|
310
|
-
#captureFormResetState() {
|
|
311
|
-
if (!options.formAssociated || this.#formResetState) return;
|
|
312
|
-
this.#formResetState = /* @__PURE__ */ new Map();
|
|
313
|
-
for (const property of FORM_RESET_PROPERTIES) {
|
|
314
|
-
const descriptor = options.domProperties?.[property];
|
|
315
|
-
if (descriptor) this.#formResetState.set(property, cloneFormState(descriptor.get(this)));
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
#syncFormValidity(props, formValue) {
|
|
319
|
-
if (this.#mode !== "shadow" || !this.#internals?.setValidity) return;
|
|
320
|
-
if (!(this.#formDisabled || props.disabled === true) && isRequiredValueMissing(props, formValue)) {
|
|
321
|
-
this.#internals.setValidity({ valueMissing: true }, VALUE_MISSING_MESSAGE);
|
|
322
|
-
return;
|
|
323
|
-
}
|
|
324
|
-
this.#internals.setValidity({});
|
|
325
|
-
}
|
|
326
|
-
#getProps() {
|
|
327
|
-
const raw = {};
|
|
328
|
-
for (const name of observed) raw[name] = this.getAttribute(name);
|
|
329
|
-
const props = {
|
|
330
|
-
...options.transformProps ? options.transformProps(raw, this) : raw,
|
|
331
|
-
...this.#propOverrides
|
|
332
|
-
};
|
|
333
|
-
if (options.formAssociated && this.#formDisabled) return {
|
|
334
|
-
...props,
|
|
335
|
-
disabled: true
|
|
336
|
-
};
|
|
337
|
-
return props;
|
|
338
|
-
}
|
|
339
|
-
#render() {
|
|
340
|
-
if (!this.#root) return;
|
|
341
|
-
const props = this.#getProps();
|
|
342
|
-
if (this.#mode === "shadow" && this.#internals && options.formValue) {
|
|
343
|
-
const formValue = this.#formValueOverride === void 0 ? options.formValue(props, this) : this.#formValueOverride;
|
|
344
|
-
this.#internals.setFormValue(formValue);
|
|
345
|
-
this.#syncFormValidity(props, formValue);
|
|
346
|
-
}
|
|
347
|
-
this.#root.render(/* @__PURE__ */ jsx(EdxHostProvider, {
|
|
348
|
-
value: {
|
|
349
|
-
host: this,
|
|
350
|
-
mode: this.#mode,
|
|
351
|
-
emit: this.#emit,
|
|
352
|
-
portalContainer: this.#portalContainer,
|
|
353
|
-
setFormValue: this.#setFormValue,
|
|
354
|
-
slotHtml: this.#slotHtml
|
|
355
|
-
},
|
|
356
|
-
children: /* @__PURE__ */ jsx(Component, { ...props })
|
|
357
|
-
}));
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
if (options.domProperties) for (const [propName, descriptor] of Object.entries(options.domProperties)) Object.defineProperty(EdxElement.prototype, propName, {
|
|
361
|
-
get() {
|
|
362
|
-
return descriptor.get(this);
|
|
363
|
-
},
|
|
364
|
-
set(value) {
|
|
365
|
-
descriptor.set(this, value);
|
|
366
|
-
},
|
|
367
|
-
configurable: true,
|
|
368
|
-
enumerable: false
|
|
369
|
-
});
|
|
370
|
-
customElements.define(tag, EdxElement);
|
|
371
|
-
};
|
|
372
|
-
//#endregion
|
|
373
|
-
//#region ../elements/src/registry.ts
|
|
374
|
-
/**
|
|
375
|
-
* Register a class-4 overlay element. Overlays are pinned to **light mode**: their
|
|
376
|
-
* Base UI portal lands in `document.body` and cannot reach a shadow root, so shadow
|
|
377
|
-
* mode would let the portaled content escape the shadow root, lose the adopted
|
|
378
|
-
* stylesheet, and render unstyled with no error. This helper forces `mode: 'light'`
|
|
379
|
-
* once, so no overlay can inherit that footgun by forgetting to pin it. Mirror
|
|
380
|
-
* `edx-dialog` / `edx-drawer`. See docs/delivery-classes.md.
|
|
381
|
-
*/
|
|
382
|
-
var registerOverlayElement = (tag, component, ctx, options = {}) => {
|
|
383
|
-
defineElement(tag, component, {
|
|
384
|
-
...options,
|
|
385
|
-
mode: "light",
|
|
386
|
-
styles: ctx.styles
|
|
387
|
-
});
|
|
388
|
-
};
|
|
389
|
-
/**
|
|
390
|
-
* Coerce a boolean-ish attribute string to a real boolean. Follows HTML boolean
|
|
391
|
-
* attribute semantics: any present value is `true` EXCEPT the literal `"false"`
|
|
392
|
-
* (and `null`/`undefined`). Note the gotcha: `"0"` coerces to `true` (presence
|
|
393
|
-
* wins); to express false, set the attribute to `"false"` or omit it. This
|
|
394
|
-
* contract is pinned by registry.test.ts.
|
|
395
|
-
*/
|
|
396
|
-
var coerceBool = (value) => value != null && value !== "false";
|
|
397
|
-
/** Reflect a boolean DOM state using native boolean-attribute semantics. */
|
|
398
|
-
var reflectBool = (host, attribute, value) => {
|
|
399
|
-
if (value) host.setAttribute(attribute, "true");
|
|
400
|
-
else host.removeAttribute(attribute);
|
|
401
|
-
};
|
|
402
|
-
/**
|
|
403
|
-
* Create a real boolean property backed by a reflected boolean attribute.
|
|
404
|
-
* When an uncontrolled `default-*` attribute exists, read it until the first
|
|
405
|
-
* explicit property write or user change promotes the state to the live
|
|
406
|
-
* attribute.
|
|
407
|
-
*/
|
|
408
|
-
var booleanDomProperty = (attribute, defaultAttribute) => ({
|
|
409
|
-
get: (host) => {
|
|
410
|
-
const current = host.getAttribute(attribute);
|
|
411
|
-
if (current != null) return coerceBool(current);
|
|
412
|
-
return defaultAttribute ? coerceBool(host.getAttribute(defaultAttribute)) : false;
|
|
413
|
-
},
|
|
414
|
-
set: (host, value) => {
|
|
415
|
-
if (defaultAttribute) host.removeAttribute(defaultAttribute);
|
|
416
|
-
reflectBool(host, attribute, Boolean(value));
|
|
417
|
-
}
|
|
418
|
-
});
|
|
419
|
-
/** Coerce a numeric attribute string to a number, or `undefined` when absent/invalid. */
|
|
420
|
-
var coerceNumber = (value) => {
|
|
421
|
-
if (value == null || value === "") return;
|
|
422
|
-
const parsed = Number(value);
|
|
423
|
-
return Number.isNaN(parsed) ? void 0 : parsed;
|
|
424
|
-
};
|
|
425
|
-
/** Parse a JSON attribute string into a value of type T, or `undefined` on absence/parse error. */
|
|
426
|
-
var coerceJson = (value) => {
|
|
427
|
-
if (value == null || value === "") return;
|
|
428
|
-
try {
|
|
429
|
-
return JSON.parse(value);
|
|
430
|
-
} catch {
|
|
431
|
-
return;
|
|
432
|
-
}
|
|
433
|
-
};
|
|
434
|
-
/** Build the repeated-name payload required by multi-value custom controls. */
|
|
435
|
-
var multipleFormValue = (host, values) => {
|
|
436
|
-
const name = host.getAttribute("name");
|
|
437
|
-
if (!name) return null;
|
|
438
|
-
const data = new FormData();
|
|
439
|
-
for (const value of values) data.append(name, value);
|
|
440
|
-
return data;
|
|
441
|
-
};
|
|
442
|
-
//#endregion
|
|
443
|
-
//#region ../elements/src/edx-accordion.tsx
|
|
444
|
-
/** Normalize the value prop (scalar, array, or absent) to the string[] Base UI expects. */
|
|
445
|
-
var toValueArray = (value) => {
|
|
446
|
-
if (value == null) return [];
|
|
447
|
-
if (Array.isArray(value)) return value;
|
|
448
|
-
return value === "" ? [] : [value];
|
|
449
|
-
};
|
|
450
|
-
var EdxAccordion = (props) => {
|
|
451
|
-
const { emit, host } = useEdxHost();
|
|
452
|
-
const items = props.items ?? [];
|
|
453
|
-
const openMultiple = props.openMultiple ?? false;
|
|
454
|
-
const currentValue = props.value != null ? toValueArray(props.value) : toValueArray(props.defaultValue);
|
|
455
|
-
const handleValueChange = (next) => {
|
|
456
|
-
const emitValue = openMultiple ? next : next[0] ?? "";
|
|
457
|
-
const serialized = openMultiple ? JSON.stringify(next) : next[0] ?? "";
|
|
458
|
-
host.removeAttribute("default-value");
|
|
459
|
-
host.setAttribute("value", serialized);
|
|
460
|
-
emit("edx-change", { value: emitValue });
|
|
461
|
-
};
|
|
462
|
-
return /* @__PURE__ */ jsx(Accordion, {
|
|
463
|
-
value: currentValue,
|
|
464
|
-
multiple: openMultiple,
|
|
465
|
-
onValueChange: handleValueChange,
|
|
466
|
-
children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
|
|
467
|
-
value: item.value,
|
|
468
|
-
disabled: item.disabled,
|
|
469
|
-
children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: item.label }), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(Slot, { name: `panel-${item.value}` }) })]
|
|
470
|
-
}, item.value))
|
|
471
|
-
});
|
|
472
|
-
};
|
|
473
|
-
var registerEdxAccordion = (ctx) => {
|
|
474
|
-
defineElement("edx-accordion", EdxAccordion, {
|
|
475
|
-
mode: "shadow",
|
|
476
|
-
styles: ctx.styles,
|
|
477
|
-
observedAttributes: [
|
|
478
|
-
"items",
|
|
479
|
-
"value",
|
|
480
|
-
"default-value",
|
|
481
|
-
"open-multiple"
|
|
482
|
-
],
|
|
483
|
-
transformProps: (raw) => {
|
|
484
|
-
const openMultiple = coerceBool(raw["open-multiple"]);
|
|
485
|
-
const parse = (v) => {
|
|
486
|
-
if (v == null) return;
|
|
487
|
-
if (v === "") return openMultiple ? [] : "";
|
|
488
|
-
return openMultiple ? coerceJson(v) ?? [v] : v;
|
|
489
|
-
};
|
|
490
|
-
return {
|
|
491
|
-
items: coerceJson(raw.items),
|
|
492
|
-
value: parse(raw.value),
|
|
493
|
-
defaultValue: parse(raw["default-value"]),
|
|
494
|
-
openMultiple
|
|
495
|
-
};
|
|
496
|
-
},
|
|
497
|
-
domProperties: { value: {
|
|
498
|
-
get: (host) => {
|
|
499
|
-
const raw = host.getAttribute("value") ?? host.getAttribute("default-value") ?? "";
|
|
500
|
-
if (coerceBool(host.getAttribute("open-multiple"))) return coerceJson(raw) ?? (raw === "" ? [] : [raw]);
|
|
501
|
-
return raw;
|
|
502
|
-
},
|
|
503
|
-
set: (host, value) => {
|
|
504
|
-
if (Array.isArray(value)) {
|
|
505
|
-
host.setAttribute("value", JSON.stringify(value));
|
|
506
|
-
return;
|
|
507
|
-
}
|
|
508
|
-
host.setAttribute("value", String(value ?? ""));
|
|
509
|
-
}
|
|
510
|
-
} }
|
|
511
|
-
});
|
|
512
|
-
};
|
|
513
|
-
//#endregion
|
|
514
|
-
//#region ../elements/src/edx-alert.tsx
|
|
515
|
-
var EdxAlert = (props) => {
|
|
516
|
-
const emit = useEmit();
|
|
517
|
-
return /* @__PURE__ */ jsxs(Alert, {
|
|
518
|
-
variant: props.variant ?? "default",
|
|
519
|
-
children: [
|
|
520
|
-
props.title && /* @__PURE__ */ jsx(AlertTitle, { children: props.title }),
|
|
521
|
-
props.description && /* @__PURE__ */ jsx(AlertDescription, { children: props.description }),
|
|
522
|
-
/* @__PURE__ */ jsx(Slot, {}),
|
|
523
|
-
props.actionLabel && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button, {
|
|
524
|
-
variant: "ghost",
|
|
525
|
-
size: "icon-xs",
|
|
526
|
-
"aria-label": props.actionAriaLabel ?? props.actionLabel,
|
|
527
|
-
onClick: () => emit("edx-action"),
|
|
528
|
-
children: props.actionLabel
|
|
529
|
-
}) })
|
|
530
|
-
]
|
|
531
|
-
});
|
|
532
|
-
};
|
|
533
|
-
var registerEdxAlert = (ctx) => {
|
|
534
|
-
defineElement("edx-alert", EdxAlert, {
|
|
535
|
-
mode: ctx.mode,
|
|
536
|
-
styles: ctx.styles,
|
|
537
|
-
observedAttributes: [
|
|
538
|
-
"variant",
|
|
539
|
-
"title",
|
|
540
|
-
"description",
|
|
541
|
-
"action-label",
|
|
542
|
-
"action-aria-label"
|
|
543
|
-
],
|
|
544
|
-
transformProps: (raw) => ({
|
|
545
|
-
variant: raw.variant ?? void 0,
|
|
546
|
-
title: raw.title ?? void 0,
|
|
547
|
-
description: raw.description ?? void 0,
|
|
548
|
-
actionLabel: raw["action-label"] ?? void 0,
|
|
549
|
-
actionAriaLabel: raw["action-aria-label"] ?? void 0
|
|
550
|
-
})
|
|
551
|
-
});
|
|
552
|
-
};
|
|
553
|
-
//#endregion
|
|
554
|
-
//#region ../elements/src/edx-audio-player.tsx
|
|
555
|
-
var EdxAudioPlayer = (props) => {
|
|
556
|
-
const { emit } = useEdxHost();
|
|
557
|
-
return /* @__PURE__ */ jsx(AudioPlayer, {
|
|
558
|
-
src: props.src,
|
|
559
|
-
muted: props.muted ?? false,
|
|
560
|
-
loop: props.loop ?? false,
|
|
561
|
-
disabled: props.disabled ?? false,
|
|
562
|
-
width: props.width,
|
|
563
|
-
"aria-label": props.ariaLabel ?? "Audio player",
|
|
564
|
-
onPlay: () => emit("edx-play", {}),
|
|
565
|
-
onPause: () => emit("edx-pause", {}),
|
|
566
|
-
onEnded: () => emit("edx-ended", {}),
|
|
567
|
-
onTimeUpdate: (currentTime, duration) => emit("edx-timeupdate", {
|
|
568
|
-
currentTime,
|
|
569
|
-
duration
|
|
570
|
-
})
|
|
571
|
-
});
|
|
572
|
-
};
|
|
573
|
-
var registerEdxAudioPlayer = (ctx) => {
|
|
574
|
-
defineElement("edx-audio-player", EdxAudioPlayer, {
|
|
575
|
-
mode: ctx.mode,
|
|
576
|
-
styles: ctx.styles,
|
|
577
|
-
display: "block",
|
|
578
|
-
observedAttributes: [
|
|
579
|
-
"src",
|
|
580
|
-
"muted",
|
|
581
|
-
"loop",
|
|
582
|
-
"disabled",
|
|
583
|
-
"width",
|
|
584
|
-
"aria-label"
|
|
585
|
-
],
|
|
586
|
-
transformProps: (raw) => ({
|
|
587
|
-
src: raw.src ?? void 0,
|
|
588
|
-
muted: coerceBool(raw.muted),
|
|
589
|
-
loop: coerceBool(raw.loop),
|
|
590
|
-
disabled: coerceBool(raw.disabled),
|
|
591
|
-
width: raw.width ?? void 0,
|
|
592
|
-
ariaLabel: raw["aria-label"] ?? void 0
|
|
593
|
-
})
|
|
594
|
-
});
|
|
595
|
-
};
|
|
596
|
-
//#endregion
|
|
597
|
-
//#region ../elements/src/edx-avatar.tsx
|
|
598
|
-
var STATUS_CLASS = {
|
|
599
|
-
online: "bg-success",
|
|
600
|
-
away: "bg-warning",
|
|
601
|
-
busy: "bg-destructive",
|
|
602
|
-
offline: "bg-muted-foreground"
|
|
603
|
-
};
|
|
604
|
-
var EdxAvatar = (props) => {
|
|
605
|
-
return /* @__PURE__ */ jsxs(Avatar, {
|
|
606
|
-
size: props.size ?? "default",
|
|
607
|
-
children: [
|
|
608
|
-
/* @__PURE__ */ jsx(AvatarImage, {
|
|
609
|
-
src: props.src,
|
|
610
|
-
alt: props.alt
|
|
611
|
-
}),
|
|
612
|
-
/* @__PURE__ */ jsx(AvatarFallback, { children: props.fallback ?? "" }),
|
|
613
|
-
props.status && /* @__PURE__ */ jsx(AvatarBadge, {
|
|
614
|
-
className: STATUS_CLASS[props.status],
|
|
615
|
-
role: "img",
|
|
616
|
-
"aria-label": `${props.status} status`
|
|
617
|
-
})
|
|
618
|
-
]
|
|
619
|
-
});
|
|
620
|
-
};
|
|
621
|
-
var registerEdxAvatar = (ctx) => {
|
|
622
|
-
defineElement("edx-avatar", EdxAvatar, {
|
|
623
|
-
mode: ctx.mode,
|
|
624
|
-
styles: ctx.styles,
|
|
625
|
-
display: "inline-flex",
|
|
626
|
-
observedAttributes: [
|
|
627
|
-
"src",
|
|
628
|
-
"alt",
|
|
629
|
-
"fallback",
|
|
630
|
-
"size",
|
|
631
|
-
"status"
|
|
632
|
-
],
|
|
633
|
-
transformProps: (raw) => ({
|
|
634
|
-
src: raw.src ?? void 0,
|
|
635
|
-
alt: raw.alt ?? void 0,
|
|
636
|
-
fallback: raw.fallback ?? void 0,
|
|
637
|
-
size: raw.size ?? void 0,
|
|
638
|
-
status: raw.status ?? void 0
|
|
639
|
-
})
|
|
640
|
-
});
|
|
641
|
-
};
|
|
642
|
-
//#endregion
|
|
643
|
-
//#region ../elements/src/edx-badge.tsx
|
|
644
|
-
var EdxBadge = (props) => {
|
|
645
|
-
return /* @__PURE__ */ jsx(Badge, {
|
|
646
|
-
variant: props.variant ?? "default",
|
|
647
|
-
size: props.size ?? "default",
|
|
648
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
649
|
-
});
|
|
650
|
-
};
|
|
651
|
-
var registerEdxBadge = (ctx) => {
|
|
652
|
-
defineElement("edx-badge", EdxBadge, {
|
|
653
|
-
mode: ctx.mode,
|
|
654
|
-
styles: ctx.styles,
|
|
655
|
-
display: "inline-flex",
|
|
656
|
-
observedAttributes: ["variant", "size"],
|
|
657
|
-
transformProps: (raw) => ({
|
|
658
|
-
variant: raw.variant ?? void 0,
|
|
659
|
-
size: raw.size ?? void 0
|
|
660
|
-
})
|
|
661
|
-
});
|
|
662
|
-
};
|
|
663
|
-
//#endregion
|
|
664
|
-
//#region ../elements/src/edx-breadcrumb.tsx
|
|
665
|
-
var EdxBreadcrumb = (props) => {
|
|
666
|
-
const items = props.items ?? [];
|
|
667
|
-
const nodes = [];
|
|
668
|
-
items.forEach((item, index) => {
|
|
669
|
-
nodes.push(/* @__PURE__ */ jsx(BreadcrumbItem, { children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
|
|
670
|
-
href: item.href,
|
|
671
|
-
children: item.label
|
|
672
|
-
}) }, `item-${index}`));
|
|
673
|
-
if (index < items.length - 1) nodes.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-${index}`));
|
|
674
|
-
});
|
|
675
|
-
return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: nodes }) });
|
|
676
|
-
};
|
|
677
|
-
var registerEdxBreadcrumb = (ctx) => {
|
|
678
|
-
defineElement("edx-breadcrumb", EdxBreadcrumb, {
|
|
679
|
-
mode: ctx.mode,
|
|
680
|
-
styles: ctx.styles,
|
|
681
|
-
observedAttributes: ["items"],
|
|
682
|
-
transformProps: (raw) => ({ items: coerceJson(raw.items) ?? [] })
|
|
683
|
-
});
|
|
684
|
-
};
|
|
685
|
-
//#endregion
|
|
686
|
-
//#region ../elements/src/edx-button.tsx
|
|
687
|
-
var EdxButton = (props) => {
|
|
688
|
-
const emit = useEmit();
|
|
689
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
690
|
-
type: props.type ?? "button",
|
|
691
|
-
variant: props.variant ?? "default",
|
|
692
|
-
size: props.size ?? "default",
|
|
693
|
-
disabled: props.disabled ?? false,
|
|
694
|
-
"aria-label": props.ariaLabel,
|
|
695
|
-
"aria-description": props.ariaDescription,
|
|
696
|
-
name: props.name,
|
|
697
|
-
form: props.form,
|
|
698
|
-
value: props.value,
|
|
699
|
-
autoFocus: props.autofocus,
|
|
700
|
-
onClick: () => emit("edx-click"),
|
|
701
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
702
|
-
});
|
|
703
|
-
};
|
|
704
|
-
var registerEdxButton = (ctx) => {
|
|
705
|
-
defineElement("edx-button", EdxButton, {
|
|
706
|
-
mode: ctx.mode,
|
|
707
|
-
styles: ctx.styles,
|
|
708
|
-
display: "inline-flex",
|
|
709
|
-
observedAttributes: [
|
|
710
|
-
"variant",
|
|
711
|
-
"size",
|
|
712
|
-
"disabled",
|
|
713
|
-
"aria-label",
|
|
714
|
-
"aria-description",
|
|
715
|
-
"type",
|
|
716
|
-
"name",
|
|
717
|
-
"form",
|
|
718
|
-
"value",
|
|
719
|
-
"autofocus"
|
|
720
|
-
],
|
|
721
|
-
transformProps: (raw) => ({
|
|
722
|
-
variant: raw.variant ?? void 0,
|
|
723
|
-
size: raw.size ?? void 0,
|
|
724
|
-
disabled: coerceBool(raw.disabled),
|
|
725
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
726
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
727
|
-
type: raw.type ?? void 0,
|
|
728
|
-
name: raw.name ?? void 0,
|
|
729
|
-
form: raw.form ?? void 0,
|
|
730
|
-
value: raw.value ?? void 0,
|
|
731
|
-
autofocus: coerceBool(raw.autofocus)
|
|
732
|
-
})
|
|
733
|
-
});
|
|
734
|
-
};
|
|
735
|
-
//#endregion
|
|
736
|
-
//#region ../elements/src/edx-button-group.tsx
|
|
737
|
-
var EdxButtonGroup = (props) => {
|
|
738
|
-
const { host } = useEdxHost();
|
|
739
|
-
const orientation = props.orientation ?? "horizontal";
|
|
740
|
-
useLayoutEffect(() => {
|
|
741
|
-
const managedButtons = /* @__PURE__ */ new Set();
|
|
742
|
-
const releaseButton = (button) => {
|
|
743
|
-
delete button.dataset.edxButtonGroupPosition;
|
|
744
|
-
button.style.removeProperty("margin-inline-start");
|
|
745
|
-
button.style.removeProperty("margin-block-start");
|
|
746
|
-
managedButtons.delete(button);
|
|
747
|
-
};
|
|
748
|
-
const updatePositions = () => {
|
|
749
|
-
const buttons = Array.from(host.children).filter((child) => child.matches("edx-button"));
|
|
750
|
-
const nextButtons = new Set(buttons);
|
|
751
|
-
for (const button of managedButtons) if (!nextButtons.has(button)) releaseButton(button);
|
|
752
|
-
for (const [index, button] of buttons.entries()) {
|
|
753
|
-
const position = index === 0 ? "first" : index === buttons.length - 1 ? "last" : "middle";
|
|
754
|
-
button.dataset.edxButtonGroupPosition = buttons.length === 1 ? "single" : `${orientation}-${position}`;
|
|
755
|
-
button.style.marginInlineStart = orientation === "horizontal" && index > 0 ? "-1px" : "";
|
|
756
|
-
button.style.marginBlockStart = orientation === "vertical" && index > 0 ? "-1px" : "";
|
|
757
|
-
managedButtons.add(button);
|
|
758
|
-
}
|
|
759
|
-
};
|
|
760
|
-
updatePositions();
|
|
761
|
-
const observer = new MutationObserver(updatePositions);
|
|
762
|
-
observer.observe(host, { childList: true });
|
|
763
|
-
return () => {
|
|
764
|
-
observer.disconnect();
|
|
765
|
-
for (const button of managedButtons) releaseButton(button);
|
|
766
|
-
};
|
|
767
|
-
}, [host, orientation]);
|
|
768
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
|
|
769
|
-
[data-slot='button-group'] > slot::slotted(edx-button) {
|
|
770
|
-
position: relative;
|
|
771
|
-
z-index: 0;
|
|
772
|
-
}
|
|
773
|
-
[data-slot='button-group'] > slot::slotted(edx-button:hover),
|
|
774
|
-
[data-slot='button-group'] > slot::slotted(edx-button:focus-within) {
|
|
775
|
-
z-index: 10;
|
|
776
|
-
}
|
|
777
|
-
` }), /* @__PURE__ */ jsx(ButtonGroup, {
|
|
778
|
-
orientation,
|
|
779
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
780
|
-
})] });
|
|
781
|
-
};
|
|
782
|
-
var registerEdxButtonGroup = (ctx) => {
|
|
783
|
-
defineElement("edx-button-group", EdxButtonGroup, {
|
|
784
|
-
mode: "shadow",
|
|
785
|
-
styles: ctx.styles,
|
|
786
|
-
display: "inline-flex",
|
|
787
|
-
observedAttributes: ["orientation"],
|
|
788
|
-
transformProps: (raw) => ({ orientation: raw.orientation ?? void 0 })
|
|
789
|
-
});
|
|
790
|
-
};
|
|
791
|
-
//#endregion
|
|
792
|
-
//#region ../elements/src/edx-calendar.tsx
|
|
793
|
-
/**
|
|
794
|
-
* Parse a `YYYY-MM-DD` attribute into a local calendar date. Deliberately not
|
|
795
|
-
* `new Date(value)`: that parses date-only strings as UTC midnight, which shifts
|
|
796
|
-
* to the previous day once rendered in a negative-UTC-offset timezone.
|
|
797
|
-
*/
|
|
798
|
-
var parseIsoDate = (value) => {
|
|
799
|
-
const match = value ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(value) : null;
|
|
800
|
-
if (!match) return;
|
|
801
|
-
const [, year, month, day] = match;
|
|
802
|
-
return new Date(Number(year), Number(month) - 1, Number(day));
|
|
803
|
-
};
|
|
804
|
-
/** Format a local calendar date back to `YYYY-MM-DD`, no time/timezone component. */
|
|
805
|
-
var formatIsoDate = (date) => {
|
|
806
|
-
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
807
|
-
};
|
|
808
|
-
var EdxCalendar = (props) => {
|
|
809
|
-
const { emit, host } = useEdxHost();
|
|
810
|
-
const value = props.value ?? props.defaultValue;
|
|
811
|
-
const min = parseIsoDate(props.min);
|
|
812
|
-
const max = parseIsoDate(props.max);
|
|
813
|
-
const disabled = props.disabled ? true : [min ? { before: min } : null, max ? { after: max } : null].filter(Boolean);
|
|
814
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Calendar, {
|
|
815
|
-
mode: "single",
|
|
816
|
-
required: props.required,
|
|
817
|
-
selected: parseIsoDate(value),
|
|
818
|
-
defaultMonth: parseIsoDate(value),
|
|
819
|
-
disabled,
|
|
820
|
-
startMonth: min,
|
|
821
|
-
endMonth: max,
|
|
822
|
-
numberOfMonths: props.numberOfMonths,
|
|
823
|
-
showOutsideDays: props.showOutsideDays,
|
|
824
|
-
fixedWeeks: props.fixedWeeks,
|
|
825
|
-
hideNavigation: props.hideNavigation,
|
|
826
|
-
weekStartsOn: props.weekStartsOn,
|
|
827
|
-
"aria-label": props.ariaLabel,
|
|
828
|
-
"aria-description": props.ariaDescription,
|
|
829
|
-
"aria-invalid": props.invalid || void 0,
|
|
830
|
-
onSelect: (date) => {
|
|
831
|
-
if (!date) return;
|
|
832
|
-
const iso = formatIsoDate(date);
|
|
833
|
-
host.removeAttribute("default-value");
|
|
834
|
-
host.setAttribute("value", iso);
|
|
835
|
-
emit("edx-change", { value: iso });
|
|
836
|
-
}
|
|
837
|
-
}), props.name ? /* @__PURE__ */ jsx("input", {
|
|
838
|
-
type: "hidden",
|
|
839
|
-
name: props.name,
|
|
840
|
-
form: props.form,
|
|
841
|
-
value: value ?? "",
|
|
842
|
-
disabled: props.disabled
|
|
843
|
-
}) : null] });
|
|
844
|
-
};
|
|
845
|
-
var registerEdxCalendar = (ctx) => {
|
|
846
|
-
defineElement("edx-calendar", EdxCalendar, {
|
|
847
|
-
mode: ctx.mode,
|
|
848
|
-
styles: ctx.styles,
|
|
849
|
-
display: "inline-flex",
|
|
850
|
-
delegateClick: true,
|
|
851
|
-
formAssociated: true,
|
|
852
|
-
formValue: (props) => props.value ?? props.defaultValue ?? "",
|
|
853
|
-
observedAttributes: [
|
|
854
|
-
"value",
|
|
855
|
-
"default-value",
|
|
856
|
-
"disabled",
|
|
857
|
-
"required",
|
|
858
|
-
"name",
|
|
859
|
-
"form",
|
|
860
|
-
"min",
|
|
861
|
-
"max",
|
|
862
|
-
"number-of-months",
|
|
863
|
-
"show-outside-days",
|
|
864
|
-
"fixed-weeks",
|
|
865
|
-
"hide-navigation",
|
|
866
|
-
"week-starts-on",
|
|
867
|
-
"aria-label",
|
|
868
|
-
"aria-description",
|
|
869
|
-
"invalid"
|
|
870
|
-
],
|
|
871
|
-
transformProps: (raw) => ({
|
|
872
|
-
value: raw.value ?? void 0,
|
|
873
|
-
defaultValue: raw["default-value"] ?? void 0,
|
|
874
|
-
disabled: coerceBool(raw.disabled),
|
|
875
|
-
required: coerceBool(raw.required),
|
|
876
|
-
name: raw.name ?? void 0,
|
|
877
|
-
form: raw.form ?? void 0,
|
|
878
|
-
min: raw.min ?? void 0,
|
|
879
|
-
max: raw.max ?? void 0,
|
|
880
|
-
numberOfMonths: coerceNumber(raw["number-of-months"]),
|
|
881
|
-
showOutsideDays: raw["show-outside-days"] == null ? void 0 : coerceBool(raw["show-outside-days"]),
|
|
882
|
-
fixedWeeks: raw["fixed-weeks"] == null ? void 0 : coerceBool(raw["fixed-weeks"]),
|
|
883
|
-
hideNavigation: raw["hide-navigation"] == null ? void 0 : coerceBool(raw["hide-navigation"]),
|
|
884
|
-
weekStartsOn: coerceNumber(raw["week-starts-on"]),
|
|
885
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
886
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
887
|
-
invalid: coerceBool(raw.invalid)
|
|
888
|
-
}),
|
|
889
|
-
domProperties: { value: {
|
|
890
|
-
get: (host) => host.getAttribute("value") ?? host.getAttribute("default-value") ?? "",
|
|
891
|
-
set: (host, value) => {
|
|
892
|
-
host.setAttribute("value", String(value ?? ""));
|
|
893
|
-
}
|
|
894
|
-
} }
|
|
895
|
-
});
|
|
896
|
-
};
|
|
897
|
-
//#endregion
|
|
898
|
-
//#region ../elements/src/edx-card.tsx
|
|
899
|
-
var EdxCard = (props) => {
|
|
900
|
-
return /* @__PURE__ */ jsxs(Card, {
|
|
901
|
-
size: props.size,
|
|
902
|
-
children: [(props.heading || props.description) && /* @__PURE__ */ jsxs(CardHeader, { children: [props.heading && /* @__PURE__ */ jsx(CardTitle, { children: props.heading }), props.description && /* @__PURE__ */ jsx(CardDescription, { children: props.description })] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Slot, {}) })]
|
|
903
|
-
});
|
|
904
|
-
};
|
|
905
|
-
var registerEdxCard = (ctx) => {
|
|
906
|
-
defineElement("edx-card", EdxCard, {
|
|
907
|
-
mode: "shadow",
|
|
908
|
-
styles: ctx.styles,
|
|
909
|
-
observedAttributes: [
|
|
910
|
-
"heading",
|
|
911
|
-
"description",
|
|
912
|
-
"size"
|
|
913
|
-
],
|
|
914
|
-
transformProps: (raw) => ({
|
|
915
|
-
heading: raw.heading ?? void 0,
|
|
916
|
-
description: raw.description ?? void 0,
|
|
917
|
-
size: raw.size ?? void 0
|
|
918
|
-
})
|
|
919
|
-
});
|
|
920
|
-
};
|
|
921
|
-
//#endregion
|
|
922
|
-
//#region ../elements/src/edx-checkbox.tsx
|
|
923
|
-
var EdxCheckbox = (props) => {
|
|
924
|
-
const { emit, host } = useEdxHost();
|
|
925
|
-
return /* @__PURE__ */ jsx(Checkbox, {
|
|
926
|
-
checked: props.checked ?? props.defaultChecked ?? false,
|
|
927
|
-
indeterminate: props.indeterminate ?? false,
|
|
928
|
-
disabled: props.disabled ?? false,
|
|
929
|
-
readOnly: props.readonly ?? false,
|
|
930
|
-
required: props.required ?? false,
|
|
931
|
-
name: props.name,
|
|
932
|
-
form: props.form,
|
|
933
|
-
value: props.value,
|
|
934
|
-
uncheckedValue: props.uncheckedValue,
|
|
935
|
-
"aria-invalid": props.invalid || void 0,
|
|
936
|
-
"aria-label": props.ariaLabel,
|
|
937
|
-
"aria-description": props.ariaDescription,
|
|
938
|
-
onCheckedChange: (next) => {
|
|
939
|
-
const checked = next === true;
|
|
940
|
-
host.removeAttribute("default-checked");
|
|
941
|
-
host.removeAttribute("indeterminate");
|
|
942
|
-
if (checked) host.setAttribute("checked", "true");
|
|
943
|
-
else host.removeAttribute("checked");
|
|
944
|
-
emit("edx-change", {
|
|
945
|
-
checked,
|
|
946
|
-
indeterminate: false
|
|
947
|
-
});
|
|
948
|
-
}
|
|
949
|
-
});
|
|
950
|
-
};
|
|
951
|
-
var registerEdxCheckbox = (ctx) => {
|
|
952
|
-
defineElement("edx-checkbox", EdxCheckbox, {
|
|
953
|
-
mode: ctx.mode,
|
|
954
|
-
styles: ctx.styles,
|
|
955
|
-
display: "inline-flex",
|
|
956
|
-
delegateClick: true,
|
|
957
|
-
formAssociated: true,
|
|
958
|
-
formValue: (props) => {
|
|
959
|
-
return props.checked ?? props.defaultChecked ?? false ? props.value ?? "on" : props.uncheckedValue ?? null;
|
|
960
|
-
},
|
|
961
|
-
observedAttributes: [
|
|
962
|
-
"checked",
|
|
963
|
-
"default-checked",
|
|
964
|
-
"indeterminate",
|
|
965
|
-
"disabled",
|
|
966
|
-
"readonly",
|
|
967
|
-
"required",
|
|
968
|
-
"name",
|
|
969
|
-
"form",
|
|
970
|
-
"value",
|
|
971
|
-
"unchecked-value",
|
|
972
|
-
"invalid",
|
|
973
|
-
"aria-label",
|
|
974
|
-
"aria-description"
|
|
975
|
-
],
|
|
976
|
-
transformProps: (raw) => ({
|
|
977
|
-
checked: raw.checked == null ? void 0 : coerceBool(raw.checked),
|
|
978
|
-
defaultChecked: raw["default-checked"] == null ? void 0 : coerceBool(raw["default-checked"]),
|
|
979
|
-
indeterminate: coerceBool(raw.indeterminate),
|
|
980
|
-
disabled: coerceBool(raw.disabled),
|
|
981
|
-
readonly: coerceBool(raw.readonly),
|
|
982
|
-
required: coerceBool(raw.required),
|
|
983
|
-
name: raw.name ?? void 0,
|
|
984
|
-
form: raw.form ?? void 0,
|
|
985
|
-
value: raw.value ?? void 0,
|
|
986
|
-
uncheckedValue: raw["unchecked-value"] ?? void 0,
|
|
987
|
-
invalid: coerceBool(raw.invalid),
|
|
988
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
989
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
990
|
-
}),
|
|
991
|
-
domProperties: {
|
|
992
|
-
checked: booleanDomProperty("checked", "default-checked"),
|
|
993
|
-
indeterminate: booleanDomProperty("indeterminate")
|
|
994
|
-
}
|
|
995
|
-
});
|
|
996
|
-
};
|
|
997
|
-
//#endregion
|
|
998
|
-
//#region ../elements/src/edx-combobox.tsx
|
|
999
|
-
var EdxCombobox = (props) => {
|
|
1000
|
-
const { emit, host } = useEdxHost();
|
|
1001
|
-
const portalContainer = usePortalContainer();
|
|
1002
|
-
const options = props.options ?? [];
|
|
1003
|
-
const selected = options.find((opt) => opt.value === props.value) ?? null;
|
|
1004
|
-
return /* @__PURE__ */ jsxs(Combobox, {
|
|
1005
|
-
items: options,
|
|
1006
|
-
itemToStringLabel: (item) => item.label,
|
|
1007
|
-
value: selected,
|
|
1008
|
-
inputValue: props.inputValue ?? "",
|
|
1009
|
-
disabled: props.disabled ?? false,
|
|
1010
|
-
readOnly: props.readonly ?? false,
|
|
1011
|
-
required: props.required ?? false,
|
|
1012
|
-
name: props.name,
|
|
1013
|
-
form: props.form,
|
|
1014
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
1015
|
-
modal: props.modal,
|
|
1016
|
-
openOnInputClick: props.openOnInputClick ?? true,
|
|
1017
|
-
autoHighlight: props.autoHighlight,
|
|
1018
|
-
highlightItemOnHover: props.highlightItemOnHover ?? true,
|
|
1019
|
-
onOpenChange: (open) => {
|
|
1020
|
-
host.removeAttribute("default-open");
|
|
1021
|
-
if (open) host.setAttribute("open", "true");
|
|
1022
|
-
else host.removeAttribute("open");
|
|
1023
|
-
emit("edx-open-change", { open });
|
|
1024
|
-
},
|
|
1025
|
-
onInputValueChange: (inputValue) => {
|
|
1026
|
-
host.setAttribute("input-value", inputValue);
|
|
1027
|
-
emit("edx-input-change", { value: inputValue });
|
|
1028
|
-
},
|
|
1029
|
-
onValueChange: (next) => {
|
|
1030
|
-
const val = next === null ? null : next.value;
|
|
1031
|
-
if (val != null) host.setAttribute("value", val);
|
|
1032
|
-
else host.removeAttribute("value");
|
|
1033
|
-
emit("edx-change", { value: val });
|
|
1034
|
-
},
|
|
1035
|
-
children: [/* @__PURE__ */ jsx(ComboboxInput, {
|
|
1036
|
-
placeholder: props.placeholder,
|
|
1037
|
-
"aria-label": props.ariaLabel,
|
|
1038
|
-
"aria-description": props.ariaDescription,
|
|
1039
|
-
"aria-invalid": props.invalid || void 0
|
|
1040
|
-
}), /* @__PURE__ */ jsx(ComboboxContent, {
|
|
1041
|
-
portalContainer: portalContainer ?? void 0,
|
|
1042
|
-
children: (item) => /* @__PURE__ */ jsx(ComboboxItem, {
|
|
1043
|
-
value: item,
|
|
1044
|
-
children: item.label
|
|
1045
|
-
}, item.value)
|
|
1046
|
-
})]
|
|
1047
|
-
});
|
|
1048
|
-
};
|
|
1049
|
-
var registerEdxCombobox = (ctx) => {
|
|
1050
|
-
defineElement("edx-combobox", EdxCombobox, {
|
|
1051
|
-
mode: ctx.mode,
|
|
1052
|
-
styles: ctx.styles,
|
|
1053
|
-
display: "block",
|
|
1054
|
-
delegateClick: true,
|
|
1055
|
-
formAssociated: true,
|
|
1056
|
-
formValue: (props) => props.value ?? "",
|
|
1057
|
-
observedAttributes: [
|
|
1058
|
-
"options",
|
|
1059
|
-
"value",
|
|
1060
|
-
"input-value",
|
|
1061
|
-
"placeholder",
|
|
1062
|
-
"disabled",
|
|
1063
|
-
"readonly",
|
|
1064
|
-
"required",
|
|
1065
|
-
"name",
|
|
1066
|
-
"form",
|
|
1067
|
-
"open",
|
|
1068
|
-
"default-open",
|
|
1069
|
-
"modal",
|
|
1070
|
-
"open-on-input-click",
|
|
1071
|
-
"auto-highlight",
|
|
1072
|
-
"highlight-item-on-hover",
|
|
1073
|
-
"aria-label",
|
|
1074
|
-
"aria-description",
|
|
1075
|
-
"invalid"
|
|
1076
|
-
],
|
|
1077
|
-
transformProps: (raw) => ({
|
|
1078
|
-
options: coerceJson(raw.options),
|
|
1079
|
-
value: raw.value ?? null,
|
|
1080
|
-
inputValue: raw["input-value"] ?? void 0,
|
|
1081
|
-
placeholder: raw.placeholder ?? void 0,
|
|
1082
|
-
disabled: coerceBool(raw.disabled),
|
|
1083
|
-
readonly: coerceBool(raw.readonly),
|
|
1084
|
-
required: coerceBool(raw.required),
|
|
1085
|
-
name: raw.name ?? void 0,
|
|
1086
|
-
form: raw.form ?? void 0,
|
|
1087
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
1088
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
1089
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
1090
|
-
openOnInputClick: raw["open-on-input-click"] == null ? void 0 : coerceBool(raw["open-on-input-click"]),
|
|
1091
|
-
autoHighlight: raw["auto-highlight"] == null ? void 0 : coerceBool(raw["auto-highlight"]),
|
|
1092
|
-
highlightItemOnHover: raw["highlight-item-on-hover"] == null ? void 0 : coerceBool(raw["highlight-item-on-hover"]),
|
|
1093
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
1094
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
1095
|
-
invalid: coerceBool(raw.invalid)
|
|
1096
|
-
}),
|
|
1097
|
-
domProperties: {
|
|
1098
|
-
value: {
|
|
1099
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
1100
|
-
set: (host, value) => {
|
|
1101
|
-
host.setAttribute("value", String(value ?? ""));
|
|
1102
|
-
}
|
|
1103
|
-
},
|
|
1104
|
-
inputValue: {
|
|
1105
|
-
get: (host) => host.getAttribute("input-value") ?? "",
|
|
1106
|
-
set: (host, value) => host.setAttribute("input-value", String(value ?? ""))
|
|
1107
|
-
},
|
|
1108
|
-
open: booleanDomProperty("open", "default-open")
|
|
1109
|
-
}
|
|
1110
|
-
});
|
|
1111
|
-
};
|
|
1112
|
-
//#endregion
|
|
1113
|
-
//#region ../elements/src/edx-content-components.tsx
|
|
1114
|
-
var EdxAspectRatio = ({ ratio = 16 / 9 }) => {
|
|
1115
|
-
return /* @__PURE__ */ jsx(AspectRatio, {
|
|
1116
|
-
ratio,
|
|
1117
|
-
className: "w-full overflow-hidden rounded-lg bg-muted",
|
|
1118
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1119
|
-
className: "flex size-full items-center justify-center text-sm text-foreground/70",
|
|
1120
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
1121
|
-
})
|
|
1122
|
-
});
|
|
1123
|
-
};
|
|
1124
|
-
var EdxAttachment = ({ title = "report.pdf", description = "2.4 MB", state = "done", size = "default", orientation = "horizontal" }) => {
|
|
1125
|
-
return /* @__PURE__ */ jsxs(Attachment, {
|
|
1126
|
-
state,
|
|
1127
|
-
size,
|
|
1128
|
-
orientation,
|
|
1129
|
-
children: [
|
|
1130
|
-
/* @__PURE__ */ jsx(AttachmentMedia, { children: state === "uploading" || state === "processing" ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(IconFile, {}) }),
|
|
1131
|
-
/* @__PURE__ */ jsxs(AttachmentContent, { children: [/* @__PURE__ */ jsx(AttachmentTitle, { children: title }), /* @__PURE__ */ jsx(AttachmentDescription, { children: description })] }),
|
|
1132
|
-
/* @__PURE__ */ jsx(Slot, {})
|
|
1133
|
-
]
|
|
1134
|
-
});
|
|
1135
|
-
};
|
|
1136
|
-
var EdxBubble = ({ variant = "default", align = "start", content }) => {
|
|
1137
|
-
return /* @__PURE__ */ jsx(Bubble, {
|
|
1138
|
-
variant,
|
|
1139
|
-
align,
|
|
1140
|
-
children: /* @__PURE__ */ jsx(BubbleContent, { children: content ?? /* @__PURE__ */ jsx(Slot, {}) })
|
|
1141
|
-
});
|
|
1142
|
-
};
|
|
1143
|
-
var EdxEmpty = ({ title = "Nothing here yet", description = "Content will appear here when it is available." }) => {
|
|
1144
|
-
return /* @__PURE__ */ jsxs(Empty, { children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
|
|
1145
|
-
/* @__PURE__ */ jsx(EmptyMedia, {
|
|
1146
|
-
variant: "icon",
|
|
1147
|
-
children: /* @__PURE__ */ jsx(IconInbox, {})
|
|
1148
|
-
}),
|
|
1149
|
-
/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
|
|
1150
|
-
/* @__PURE__ */ jsx(EmptyDescription, { children: description })
|
|
1151
|
-
] }), /* @__PURE__ */ jsx(Slot, {})] });
|
|
1152
|
-
};
|
|
1153
|
-
var EdxItem = ({ title = "Account settings", description = "Manage your profile and preferences.", variant = "outline", size = "default" }) => {
|
|
1154
|
-
return /* @__PURE__ */ jsxs(Item, {
|
|
1155
|
-
variant,
|
|
1156
|
-
size,
|
|
1157
|
-
children: [
|
|
1158
|
-
/* @__PURE__ */ jsx(ItemMedia, {
|
|
1159
|
-
variant: "icon",
|
|
1160
|
-
children: /* @__PURE__ */ jsx(IconFile, {})
|
|
1161
|
-
}),
|
|
1162
|
-
/* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: title }), /* @__PURE__ */ jsx(ItemDescription, { children: description })] }),
|
|
1163
|
-
/* @__PURE__ */ jsx(Slot, {})
|
|
1164
|
-
]
|
|
1165
|
-
});
|
|
1166
|
-
};
|
|
1167
|
-
var EdxKbd = ({ text }) => {
|
|
1168
|
-
return /* @__PURE__ */ jsx(Kbd, { children: text ?? /* @__PURE__ */ jsx(Slot, {}) });
|
|
1169
|
-
};
|
|
1170
|
-
var EdxMarker = ({ variant = "default", text }) => {
|
|
1171
|
-
return /* @__PURE__ */ jsx(Marker, {
|
|
1172
|
-
variant,
|
|
1173
|
-
children: /* @__PURE__ */ jsx(MarkerContent, { children: text ?? /* @__PURE__ */ jsx(Slot, {}) })
|
|
1174
|
-
});
|
|
1175
|
-
};
|
|
1176
|
-
var EdxMessage = ({ author = "Support", timestamp = "Now", align = "start", variant = "muted" }) => {
|
|
1177
|
-
return /* @__PURE__ */ jsx(Message, {
|
|
1178
|
-
align,
|
|
1179
|
-
children: /* @__PURE__ */ jsxs(MessageContent, { children: [
|
|
1180
|
-
/* @__PURE__ */ jsx(MessageHeader, { children: author }),
|
|
1181
|
-
/* @__PURE__ */ jsx(Bubble, {
|
|
1182
|
-
variant,
|
|
1183
|
-
align,
|
|
1184
|
-
children: /* @__PURE__ */ jsx(BubbleContent, { children: /* @__PURE__ */ jsx(Slot, {}) })
|
|
1185
|
-
}),
|
|
1186
|
-
/* @__PURE__ */ jsx(MessageFooter, { children: timestamp })
|
|
1187
|
-
] })
|
|
1188
|
-
});
|
|
1189
|
-
};
|
|
1190
|
-
var EdxNativeSelect = ({ options = [], value, defaultValue, size = "default", disabled = false, name, form, required, autoComplete, ariaLabel = "Select an option", ariaDescription, invalid }) => {
|
|
1191
|
-
const emit = useEmit();
|
|
1192
|
-
const { host } = useEdxHost();
|
|
1193
|
-
const handleChange = (event) => {
|
|
1194
|
-
const nextValue = event.target.value;
|
|
1195
|
-
host.removeAttribute("default-value");
|
|
1196
|
-
host.setAttribute("value", nextValue);
|
|
1197
|
-
emit("edx-change", { value: nextValue });
|
|
1198
|
-
emit("edx-input", { value: nextValue });
|
|
1199
|
-
};
|
|
1200
|
-
return /* @__PURE__ */ jsx(NativeSelect, {
|
|
1201
|
-
value: value ?? defaultValue,
|
|
1202
|
-
size,
|
|
1203
|
-
disabled,
|
|
1204
|
-
name,
|
|
1205
|
-
form,
|
|
1206
|
-
required,
|
|
1207
|
-
autoComplete,
|
|
1208
|
-
"aria-label": ariaLabel,
|
|
1209
|
-
"aria-description": ariaDescription,
|
|
1210
|
-
"aria-invalid": invalid || void 0,
|
|
1211
|
-
onChange: handleChange,
|
|
1212
|
-
children: options.map((option) => /* @__PURE__ */ jsx(NativeSelectOption, {
|
|
1213
|
-
value: option.value,
|
|
1214
|
-
disabled: option.disabled,
|
|
1215
|
-
children: option.label
|
|
1216
|
-
}, option.value))
|
|
1217
|
-
});
|
|
1218
|
-
};
|
|
1219
|
-
var EdxSpinner = ({ size = "default", label = "Loading" }) => /* @__PURE__ */ jsx(Spinner, {
|
|
1220
|
-
size,
|
|
1221
|
-
"aria-label": label
|
|
1222
|
-
});
|
|
1223
|
-
var registerEdxContentComponents = (ctx) => {
|
|
1224
|
-
defineElement("edx-aspect-ratio", EdxAspectRatio, {
|
|
1225
|
-
mode: "shadow",
|
|
1226
|
-
styles: ctx.styles,
|
|
1227
|
-
observedAttributes: ["ratio"],
|
|
1228
|
-
transformProps: (raw) => ({ ratio: coerceNumber(raw.ratio) })
|
|
1229
|
-
});
|
|
1230
|
-
defineElement("edx-attachment", EdxAttachment, {
|
|
1231
|
-
mode: "shadow",
|
|
1232
|
-
styles: ctx.styles,
|
|
1233
|
-
display: "inline-flex",
|
|
1234
|
-
observedAttributes: [
|
|
1235
|
-
"title",
|
|
1236
|
-
"description",
|
|
1237
|
-
"state",
|
|
1238
|
-
"size",
|
|
1239
|
-
"orientation"
|
|
1240
|
-
],
|
|
1241
|
-
transformProps: (raw) => ({
|
|
1242
|
-
title: raw.title ?? void 0,
|
|
1243
|
-
description: raw.description ?? void 0,
|
|
1244
|
-
state: raw.state ?? void 0,
|
|
1245
|
-
size: raw.size ?? void 0,
|
|
1246
|
-
orientation: raw.orientation ?? void 0
|
|
1247
|
-
})
|
|
1248
|
-
});
|
|
1249
|
-
defineElement("edx-bubble", EdxBubble, {
|
|
1250
|
-
mode: ctx.mode,
|
|
1251
|
-
styles: ctx.styles,
|
|
1252
|
-
display: "contents",
|
|
1253
|
-
observedAttributes: [
|
|
1254
|
-
"variant",
|
|
1255
|
-
"align",
|
|
1256
|
-
"content"
|
|
1257
|
-
],
|
|
1258
|
-
transformProps: (raw) => ({
|
|
1259
|
-
variant: raw.variant ?? void 0,
|
|
1260
|
-
align: raw.align ?? void 0,
|
|
1261
|
-
content: raw.content ?? void 0
|
|
1262
|
-
})
|
|
1263
|
-
});
|
|
1264
|
-
defineElement("edx-empty", EdxEmpty, {
|
|
1265
|
-
mode: "shadow",
|
|
1266
|
-
styles: ctx.styles,
|
|
1267
|
-
observedAttributes: ["title", "description"],
|
|
1268
|
-
transformProps: (raw) => ({
|
|
1269
|
-
title: raw.title ?? void 0,
|
|
1270
|
-
description: raw.description ?? void 0
|
|
1271
|
-
})
|
|
1272
|
-
});
|
|
1273
|
-
defineElement("edx-item", EdxItem, {
|
|
1274
|
-
mode: "shadow",
|
|
1275
|
-
styles: ctx.styles,
|
|
1276
|
-
observedAttributes: [
|
|
1277
|
-
"title",
|
|
1278
|
-
"description",
|
|
1279
|
-
"variant",
|
|
1280
|
-
"size"
|
|
1281
|
-
],
|
|
1282
|
-
transformProps: (raw) => ({
|
|
1283
|
-
title: raw.title ?? void 0,
|
|
1284
|
-
description: raw.description ?? void 0,
|
|
1285
|
-
variant: raw.variant ?? void 0,
|
|
1286
|
-
size: raw.size ?? void 0
|
|
1287
|
-
})
|
|
1288
|
-
});
|
|
1289
|
-
defineElement("edx-kbd", EdxKbd, {
|
|
1290
|
-
mode: ctx.mode,
|
|
1291
|
-
styles: ctx.styles,
|
|
1292
|
-
display: "inline-flex",
|
|
1293
|
-
observedAttributes: ["text"],
|
|
1294
|
-
transformProps: (raw) => ({ text: raw.text ?? void 0 })
|
|
1295
|
-
});
|
|
1296
|
-
defineElement("edx-marker", EdxMarker, {
|
|
1297
|
-
mode: ctx.mode,
|
|
1298
|
-
styles: ctx.styles,
|
|
1299
|
-
display: "flex",
|
|
1300
|
-
observedAttributes: ["variant", "text"],
|
|
1301
|
-
transformProps: (raw) => ({
|
|
1302
|
-
variant: raw.variant ?? void 0,
|
|
1303
|
-
text: raw.text ?? void 0
|
|
1304
|
-
})
|
|
1305
|
-
});
|
|
1306
|
-
defineElement("edx-message", EdxMessage, {
|
|
1307
|
-
mode: "shadow",
|
|
1308
|
-
styles: ctx.styles,
|
|
1309
|
-
observedAttributes: [
|
|
1310
|
-
"author",
|
|
1311
|
-
"timestamp",
|
|
1312
|
-
"align",
|
|
1313
|
-
"variant"
|
|
1314
|
-
],
|
|
1315
|
-
transformProps: (raw) => ({
|
|
1316
|
-
author: raw.author ?? void 0,
|
|
1317
|
-
timestamp: raw.timestamp ?? void 0,
|
|
1318
|
-
align: raw.align ?? void 0,
|
|
1319
|
-
variant: raw.variant ?? void 0
|
|
1320
|
-
})
|
|
1321
|
-
});
|
|
1322
|
-
defineElement("edx-native-select", EdxNativeSelect, {
|
|
1323
|
-
mode: ctx.mode,
|
|
1324
|
-
styles: ctx.styles,
|
|
1325
|
-
display: "inline-flex",
|
|
1326
|
-
observedAttributes: [
|
|
1327
|
-
"options",
|
|
1328
|
-
"value",
|
|
1329
|
-
"default-value",
|
|
1330
|
-
"size",
|
|
1331
|
-
"disabled",
|
|
1332
|
-
"name",
|
|
1333
|
-
"form",
|
|
1334
|
-
"required",
|
|
1335
|
-
"autocomplete",
|
|
1336
|
-
"aria-label",
|
|
1337
|
-
"aria-description",
|
|
1338
|
-
"invalid"
|
|
1339
|
-
],
|
|
1340
|
-
formAssociated: true,
|
|
1341
|
-
formValue: (props) => props.value ?? props.defaultValue ?? "",
|
|
1342
|
-
delegateClick: true,
|
|
1343
|
-
transformProps: (raw) => ({
|
|
1344
|
-
options: coerceJson(raw.options),
|
|
1345
|
-
value: raw.value ?? void 0,
|
|
1346
|
-
defaultValue: raw["default-value"] ?? void 0,
|
|
1347
|
-
size: raw.size ?? void 0,
|
|
1348
|
-
disabled: coerceBool(raw.disabled),
|
|
1349
|
-
name: raw.name ?? void 0,
|
|
1350
|
-
form: raw.form ?? void 0,
|
|
1351
|
-
required: coerceBool(raw.required),
|
|
1352
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
1353
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
1354
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
1355
|
-
invalid: coerceBool(raw.invalid)
|
|
1356
|
-
}),
|
|
1357
|
-
domProperties: { value: {
|
|
1358
|
-
get: (host) => host.getAttribute("value") ?? host.getAttribute("default-value") ?? "",
|
|
1359
|
-
set: (host, value) => host.setAttribute("value", String(value ?? ""))
|
|
1360
|
-
} }
|
|
1361
|
-
});
|
|
1362
|
-
defineElement("edx-spinner", EdxSpinner, {
|
|
1363
|
-
mode: ctx.mode,
|
|
1364
|
-
styles: ctx.styles,
|
|
1365
|
-
display: "inline-flex",
|
|
1366
|
-
observedAttributes: ["size", "label"],
|
|
1367
|
-
transformProps: (raw) => ({
|
|
1368
|
-
size: raw.size ?? void 0,
|
|
1369
|
-
label: raw.label ?? void 0
|
|
1370
|
-
})
|
|
1371
|
-
});
|
|
1372
|
-
};
|
|
1373
|
-
//#endregion
|
|
1374
|
-
//#region ../elements/src/edx-dialog.tsx
|
|
1375
|
-
/**
|
|
1376
|
-
* Overlay/portal proof, and the template every class-4 overlay copies. Overlays
|
|
1377
|
-
* are pinned to **light mode**: Base UI's DialogContent/Portal always lands in
|
|
1378
|
-
* document.body and does not forward a portal `container`, so under shadow mode
|
|
1379
|
-
* the portaled content escapes the shadow root, loses the adopted stylesheet, and
|
|
1380
|
-
* renders unstyled with no error. Pinning `mode: 'light'` (not `ctx.mode`) makes
|
|
1381
|
-
* that footgun impossible to inherit by mistake. See docs/delivery-classes.md.
|
|
1382
|
-
*/
|
|
1383
|
-
var EdxDialog = (props) => {
|
|
1384
|
-
const { emit, host } = useEdxHost();
|
|
1385
|
-
return /* @__PURE__ */ jsxs(Dialog, {
|
|
1386
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
1387
|
-
modal: props.modal ?? true,
|
|
1388
|
-
disablePointerDismissal: props.disablePointerDismissal,
|
|
1389
|
-
onOpenChange: (open) => {
|
|
1390
|
-
host.removeAttribute("default-open");
|
|
1391
|
-
reflectBool(host, "open", open);
|
|
1392
|
-
emit("edx-change", { open });
|
|
1393
|
-
},
|
|
1394
|
-
children: [/* @__PURE__ */ jsx(DialogTrigger, {
|
|
1395
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
1396
|
-
children: props.triggerLabel ?? "Open"
|
|
1397
|
-
}), /* @__PURE__ */ jsxs(DialogContent, { children: [
|
|
1398
|
-
(props.heading || props.description) && /* @__PURE__ */ jsxs(DialogHeader, { children: [props.heading && /* @__PURE__ */ jsx(DialogTitle, { children: props.heading }), props.description && /* @__PURE__ */ jsx(DialogDescription, { children: props.description })] }),
|
|
1399
|
-
/* @__PURE__ */ jsx(Slot, {}),
|
|
1400
|
-
/* @__PURE__ */ jsx(DialogFooter, { showCloseButton: true })
|
|
1401
|
-
] })]
|
|
1402
|
-
});
|
|
1403
|
-
};
|
|
1404
|
-
var registerEdxDialog = (ctx) => {
|
|
1405
|
-
registerOverlayElement("edx-dialog", EdxDialog, ctx, {
|
|
1406
|
-
display: "inline-flex",
|
|
1407
|
-
observedAttributes: [
|
|
1408
|
-
"trigger-label",
|
|
1409
|
-
"heading",
|
|
1410
|
-
"description",
|
|
1411
|
-
"open",
|
|
1412
|
-
"default-open",
|
|
1413
|
-
"modal",
|
|
1414
|
-
"disable-pointer-dismissal"
|
|
1415
|
-
],
|
|
1416
|
-
transformProps: (raw) => ({
|
|
1417
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
1418
|
-
heading: raw.heading ?? void 0,
|
|
1419
|
-
description: raw.description ?? void 0,
|
|
1420
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
1421
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
1422
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
1423
|
-
disablePointerDismissal: raw["disable-pointer-dismissal"] == null ? void 0 : coerceBool(raw["disable-pointer-dismissal"])
|
|
1424
|
-
}),
|
|
1425
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
1426
|
-
});
|
|
1427
|
-
};
|
|
1428
|
-
//#endregion
|
|
1429
|
-
//#region ../elements/src/edx-drawer.tsx
|
|
1430
|
-
/**
|
|
1431
|
-
* Side-anchored overlay, the same light-mode pattern as edx-dialog (registered via
|
|
1432
|
-
* registerOverlayElement, which pins mode:'light' so the Base UI portal can land
|
|
1433
|
-
* in document.body). Content is attribute-driven (trigger-label/heading/description
|
|
1434
|
-
* + an optional static slot); `side` chooses the edge.
|
|
1435
|
-
*/
|
|
1436
|
-
var EdxDrawer = (props) => {
|
|
1437
|
-
const { emit, host } = useEdxHost();
|
|
1438
|
-
return /* @__PURE__ */ jsxs(Drawer, {
|
|
1439
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
1440
|
-
modal: props.modal ?? true,
|
|
1441
|
-
disablePointerDismissal: props.disablePointerDismissal,
|
|
1442
|
-
onOpenChange: (open) => {
|
|
1443
|
-
host.removeAttribute("default-open");
|
|
1444
|
-
reflectBool(host, "open", open);
|
|
1445
|
-
emit("edx-change", { open });
|
|
1446
|
-
},
|
|
1447
|
-
children: [/* @__PURE__ */ jsx(DrawerTrigger, {
|
|
1448
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
1449
|
-
children: props.triggerLabel ?? "Open"
|
|
1450
|
-
}), /* @__PURE__ */ jsxs(DrawerContent, {
|
|
1451
|
-
side: props.side ?? "right",
|
|
1452
|
-
children: [(props.heading || props.description) && /* @__PURE__ */ jsxs(DrawerHeader, { children: [props.heading && /* @__PURE__ */ jsx(DrawerTitle, { children: props.heading }), props.description && /* @__PURE__ */ jsx(DrawerDescription, { children: props.description })] }), /* @__PURE__ */ jsx(Slot, {})]
|
|
1453
|
-
})]
|
|
1454
|
-
});
|
|
1455
|
-
};
|
|
1456
|
-
var registerEdxDrawer = (ctx) => {
|
|
1457
|
-
registerOverlayElement("edx-drawer", EdxDrawer, ctx, {
|
|
1458
|
-
display: "inline-flex",
|
|
1459
|
-
observedAttributes: [
|
|
1460
|
-
"trigger-label",
|
|
1461
|
-
"heading",
|
|
1462
|
-
"description",
|
|
1463
|
-
"side",
|
|
1464
|
-
"open",
|
|
1465
|
-
"default-open",
|
|
1466
|
-
"modal",
|
|
1467
|
-
"disable-pointer-dismissal"
|
|
1468
|
-
],
|
|
1469
|
-
transformProps: (raw) => ({
|
|
1470
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
1471
|
-
heading: raw.heading ?? void 0,
|
|
1472
|
-
description: raw.description ?? void 0,
|
|
1473
|
-
side: raw.side ?? void 0,
|
|
1474
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
1475
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
1476
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
1477
|
-
disablePointerDismissal: raw["disable-pointer-dismissal"] == null ? void 0 : coerceBool(raw["disable-pointer-dismissal"])
|
|
1478
|
-
}),
|
|
1479
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
1480
|
-
});
|
|
1481
|
-
};
|
|
1482
|
-
//#endregion
|
|
1483
|
-
//#region ../elements/src/edx-dropdown-menu.tsx
|
|
1484
|
-
/**
|
|
1485
|
-
* Action-menu overlay, the same light-mode pattern as edx-dialog (registered via
|
|
1486
|
-
* registerOverlayElement, which pins mode:'light' so the Base UI portal can land
|
|
1487
|
-
* in document.body). Content is attribute-driven (no `<Slot />`): the menu items
|
|
1488
|
-
* come in as a JSON `items` attribute, the same JSON-attribute shape as edx-table.
|
|
1489
|
-
*/
|
|
1490
|
-
var EdxDropdownMenu = (props) => {
|
|
1491
|
-
const { emit, host } = useEdxHost();
|
|
1492
|
-
const items = props.items ?? [];
|
|
1493
|
-
return /* @__PURE__ */ jsxs(DropdownMenu, {
|
|
1494
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
1495
|
-
modal: props.modal ?? true,
|
|
1496
|
-
disabled: props.disabled,
|
|
1497
|
-
loopFocus: props.loopFocus ?? true,
|
|
1498
|
-
highlightItemOnHover: props.highlightItemOnHover ?? true,
|
|
1499
|
-
onOpenChange: (open) => {
|
|
1500
|
-
host.removeAttribute("default-open");
|
|
1501
|
-
reflectBool(host, "open", open);
|
|
1502
|
-
emit("edx-change", { open });
|
|
1503
|
-
},
|
|
1504
|
-
children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
|
|
1505
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
1506
|
-
disabled: props.disabled,
|
|
1507
|
-
children: props.triggerLabel ?? "Open"
|
|
1508
|
-
}), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1509
|
-
side: props.side,
|
|
1510
|
-
align: props.align,
|
|
1511
|
-
sideOffset: props.sideOffset,
|
|
1512
|
-
alignOffset: props.alignOffset,
|
|
1513
|
-
children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [props.label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: props.label }), items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
|
|
1514
|
-
disabled: item.disabled,
|
|
1515
|
-
onClick: () => emit("edx-select", { value: item.value ?? item.label }),
|
|
1516
|
-
children: item.label
|
|
1517
|
-
}, `${item.value ?? item.label}-${item.label}`))] })
|
|
1518
|
-
})]
|
|
1519
|
-
});
|
|
1520
|
-
};
|
|
1521
|
-
var registerEdxDropdownMenu = (ctx) => {
|
|
1522
|
-
registerOverlayElement("edx-dropdown-menu", EdxDropdownMenu, ctx, {
|
|
1523
|
-
display: "inline-flex",
|
|
1524
|
-
observedAttributes: [
|
|
1525
|
-
"trigger-label",
|
|
1526
|
-
"label",
|
|
1527
|
-
"items",
|
|
1528
|
-
"open",
|
|
1529
|
-
"default-open",
|
|
1530
|
-
"modal",
|
|
1531
|
-
"disabled",
|
|
1532
|
-
"loop-focus",
|
|
1533
|
-
"highlight-item-on-hover",
|
|
1534
|
-
"side",
|
|
1535
|
-
"align",
|
|
1536
|
-
"side-offset",
|
|
1537
|
-
"align-offset"
|
|
1538
|
-
],
|
|
1539
|
-
transformProps: (raw) => ({
|
|
1540
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
1541
|
-
label: raw.label ?? void 0,
|
|
1542
|
-
items: coerceJson(raw.items) ?? [],
|
|
1543
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
1544
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
1545
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
1546
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled),
|
|
1547
|
-
loopFocus: raw["loop-focus"] == null ? void 0 : coerceBool(raw["loop-focus"]),
|
|
1548
|
-
highlightItemOnHover: raw["highlight-item-on-hover"] == null ? void 0 : coerceBool(raw["highlight-item-on-hover"]),
|
|
1549
|
-
side: raw.side ?? void 0,
|
|
1550
|
-
align: raw.align ?? void 0,
|
|
1551
|
-
sideOffset: coerceNumber(raw["side-offset"]),
|
|
1552
|
-
alignOffset: coerceNumber(raw["align-offset"])
|
|
1553
|
-
}),
|
|
1554
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
1555
|
-
});
|
|
1556
|
-
};
|
|
1557
|
-
//#endregion
|
|
1558
|
-
//#region ../elements/src/field-control-bridge.ts
|
|
1559
|
-
var FIELD_CONTROL_SELECTOR = "edx-calendar, edx-checkbox, edx-combobox, edx-input, edx-input-group, edx-input-otp, edx-native-select, edx-radio-group, edx-select, edx-slider, edx-switch, edx-textarea, edx-toggle-group";
|
|
1560
|
-
var OWNED_ATTRIBUTES = [
|
|
1561
|
-
["aria-label", "edxFieldLabel"],
|
|
1562
|
-
["aria-description", "edxFieldDescription"],
|
|
1563
|
-
["invalid", "edxFieldInvalid"]
|
|
1564
|
-
];
|
|
1565
|
-
var findControls = (root) => Array.from(root.querySelectorAll(FIELD_CONTROL_SELECTOR));
|
|
1566
|
-
var releaseFieldAttributes = (control) => {
|
|
1567
|
-
for (const [attribute, ownershipKey] of OWNED_ATTRIBUTES) if (control.dataset[ownershipKey] === "true") {
|
|
1568
|
-
control.removeAttribute(attribute);
|
|
1569
|
-
delete control.dataset[ownershipKey];
|
|
1570
|
-
}
|
|
1571
|
-
};
|
|
1572
|
-
var setFieldAttribute = (control, attribute, ownershipKey, value) => {
|
|
1573
|
-
const isFieldOwned = control.dataset[ownershipKey] === "true";
|
|
1574
|
-
if (value !== void 0) {
|
|
1575
|
-
if (!control.hasAttribute(attribute) || isFieldOwned) {
|
|
1576
|
-
control.setAttribute(attribute, value);
|
|
1577
|
-
control.dataset[ownershipKey] = "true";
|
|
1578
|
-
}
|
|
1579
|
-
return;
|
|
1580
|
-
}
|
|
1581
|
-
if (isFieldOwned) {
|
|
1582
|
-
control.removeAttribute(attribute);
|
|
1583
|
-
delete control.dataset[ownershipKey];
|
|
1584
|
-
}
|
|
1585
|
-
};
|
|
1586
|
-
var syncFieldAttributes = (control, context) => {
|
|
1587
|
-
setFieldAttribute(control, "aria-label", "edxFieldLabel", context.label);
|
|
1588
|
-
setFieldAttribute(control, "aria-description", "edxFieldDescription", context.description || void 0);
|
|
1589
|
-
setFieldAttribute(control, "invalid", "edxFieldInvalid", context.invalid ? "true" : void 0);
|
|
1590
|
-
};
|
|
1591
|
-
var useFieldControlBridge = (host, context) => {
|
|
1592
|
-
const { description, invalid, label } = context;
|
|
1593
|
-
const refContext = useRef(context);
|
|
1594
|
-
const refControls = useRef(/* @__PURE__ */ new Set());
|
|
1595
|
-
refContext.current = {
|
|
1596
|
-
description,
|
|
1597
|
-
invalid,
|
|
1598
|
-
label
|
|
1599
|
-
};
|
|
1600
|
-
const registerControl = useCallback((control) => {
|
|
1601
|
-
refControls.current.add(control);
|
|
1602
|
-
syncFieldAttributes(control, refContext.current);
|
|
1603
|
-
}, []);
|
|
1604
|
-
const syncControls = useCallback(() => {
|
|
1605
|
-
const controls = new Set(findControls(host));
|
|
1606
|
-
for (const control of refControls.current) if (!controls.has(control)) releaseFieldAttributes(control);
|
|
1607
|
-
for (const control of controls) registerControl(control);
|
|
1608
|
-
refControls.current = controls;
|
|
1609
|
-
}, [host, registerControl]);
|
|
1610
|
-
useEffect(() => {
|
|
1611
|
-
for (const control of refControls.current) syncFieldAttributes(control, {
|
|
1612
|
-
description,
|
|
1613
|
-
invalid,
|
|
1614
|
-
label
|
|
1615
|
-
});
|
|
1616
|
-
}, [
|
|
1617
|
-
description,
|
|
1618
|
-
invalid,
|
|
1619
|
-
label
|
|
1620
|
-
]);
|
|
1621
|
-
useLayoutEffect(() => {
|
|
1622
|
-
const handleControlConnect = (event) => {
|
|
1623
|
-
const registrationEvent = event;
|
|
1624
|
-
const { control, setCleanup } = registrationEvent.detail;
|
|
1625
|
-
if (!host.contains(control)) return;
|
|
1626
|
-
registrationEvent.stopPropagation();
|
|
1627
|
-
registerControl(control);
|
|
1628
|
-
setCleanup(() => {
|
|
1629
|
-
if (refControls.current.delete(control)) releaseFieldAttributes(control);
|
|
1630
|
-
});
|
|
1631
|
-
};
|
|
1632
|
-
host.addEventListener(EDX_FIELD_CONTROL_CONNECT_EVENT, handleControlConnect);
|
|
1633
|
-
const slot = host.shadowRoot?.querySelector("slot");
|
|
1634
|
-
slot?.addEventListener("slotchange", syncControls);
|
|
1635
|
-
syncControls();
|
|
1636
|
-
return () => {
|
|
1637
|
-
host.removeEventListener(EDX_FIELD_CONTROL_CONNECT_EVENT, handleControlConnect);
|
|
1638
|
-
slot?.removeEventListener("slotchange", syncControls);
|
|
1639
|
-
for (const control of refControls.current) releaseFieldAttributes(control);
|
|
1640
|
-
refControls.current.clear();
|
|
1641
|
-
};
|
|
1642
|
-
}, [
|
|
1643
|
-
host,
|
|
1644
|
-
registerControl,
|
|
1645
|
-
syncControls
|
|
1646
|
-
]);
|
|
1647
|
-
return useCallback(() => {
|
|
1648
|
-
const control = host.querySelector(FIELD_CONTROL_SELECTOR);
|
|
1649
|
-
control?.focus();
|
|
1650
|
-
if (control?.matches("edx-checkbox, edx-switch")) control.click();
|
|
1651
|
-
}, [host]);
|
|
1652
|
-
};
|
|
1653
|
-
//#endregion
|
|
1654
|
-
//#region ../elements/src/edx-field.tsx
|
|
1655
|
-
var EdxField = (props) => {
|
|
1656
|
-
const { host } = useEdxHost();
|
|
1657
|
-
const accessibleDescription = [props.description, props.invalid ? props.error : void 0].filter(Boolean).join(" ");
|
|
1658
|
-
const focusControl = useFieldControlBridge(host, {
|
|
1659
|
-
label: props.label,
|
|
1660
|
-
description: accessibleDescription,
|
|
1661
|
-
invalid: props.invalid ?? false
|
|
1662
|
-
});
|
|
1663
|
-
return /* @__PURE__ */ jsxs(Field, {
|
|
1664
|
-
invalid: props.invalid ?? false,
|
|
1665
|
-
children: [
|
|
1666
|
-
props.label && /* @__PURE__ */ jsx(FieldLabel, {
|
|
1667
|
-
onClick: focusControl,
|
|
1668
|
-
children: props.label
|
|
1669
|
-
}),
|
|
1670
|
-
/* @__PURE__ */ jsx(Slot, {}),
|
|
1671
|
-
props.description && /* @__PURE__ */ jsx(FieldDescription, { children: props.description }),
|
|
1672
|
-
props.invalid && props.error && /* @__PURE__ */ jsx(FieldError, { children: props.error })
|
|
1673
|
-
]
|
|
1674
|
-
});
|
|
1675
|
-
};
|
|
1676
|
-
var registerEdxField = (ctx) => {
|
|
1677
|
-
defineElement("edx-field", EdxField, {
|
|
1678
|
-
mode: "shadow",
|
|
1679
|
-
styles: ctx.styles,
|
|
1680
|
-
observedAttributes: [
|
|
1681
|
-
"label",
|
|
1682
|
-
"description",
|
|
1683
|
-
"error",
|
|
1684
|
-
"invalid"
|
|
1685
|
-
],
|
|
1686
|
-
transformProps: (raw) => ({
|
|
1687
|
-
label: raw.label ?? void 0,
|
|
1688
|
-
description: raw.description ?? void 0,
|
|
1689
|
-
error: raw.error ?? void 0,
|
|
1690
|
-
invalid: coerceBool(raw.invalid)
|
|
1691
|
-
})
|
|
1692
|
-
});
|
|
1693
|
-
};
|
|
1694
|
-
//#endregion
|
|
1695
|
-
//#region ../elements/src/edx-indicator.tsx
|
|
1696
|
-
var EdxIndicator = (props) => {
|
|
1697
|
-
return /* @__PURE__ */ jsx(Indicator, {
|
|
1698
|
-
variant: props.variant ?? "default",
|
|
1699
|
-
side: props.side ?? "top",
|
|
1700
|
-
align: props.align ?? "end",
|
|
1701
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
1702
|
-
});
|
|
1703
|
-
};
|
|
1704
|
-
var registerEdxIndicator = (ctx) => {
|
|
1705
|
-
defineElement("edx-indicator", EdxIndicator, {
|
|
1706
|
-
mode: ctx.mode,
|
|
1707
|
-
styles: ctx.styles,
|
|
1708
|
-
display: "inline-flex",
|
|
1709
|
-
observedAttributes: [
|
|
1710
|
-
"variant",
|
|
1711
|
-
"side",
|
|
1712
|
-
"align"
|
|
1713
|
-
],
|
|
1714
|
-
transformProps: (raw) => ({
|
|
1715
|
-
variant: raw.variant ?? void 0,
|
|
1716
|
-
side: raw.side ?? void 0,
|
|
1717
|
-
align: raw.align ?? void 0
|
|
1718
|
-
})
|
|
1719
|
-
});
|
|
1720
|
-
};
|
|
1721
|
-
//#endregion
|
|
1722
|
-
//#region ../elements/src/edx-input.tsx
|
|
1723
|
-
var EdxInput = (props) => {
|
|
1724
|
-
const { emit, host, setFormValue } = useEdxHost();
|
|
1725
|
-
const isFileInput = props.type === "file";
|
|
1726
|
-
return /* @__PURE__ */ jsx(Input, {
|
|
1727
|
-
type: props.type ?? "text",
|
|
1728
|
-
value: isFileInput ? void 0 : props.value ?? "",
|
|
1729
|
-
placeholder: props.placeholder,
|
|
1730
|
-
disabled: props.disabled ?? false,
|
|
1731
|
-
readOnly: props.readonly ?? false,
|
|
1732
|
-
"aria-invalid": props.invalid || void 0,
|
|
1733
|
-
name: props.name,
|
|
1734
|
-
form: props.form,
|
|
1735
|
-
required: props.required ?? false,
|
|
1736
|
-
autoComplete: props.autoComplete,
|
|
1737
|
-
inputMode: props.inputMode,
|
|
1738
|
-
min: props.min,
|
|
1739
|
-
max: props.max,
|
|
1740
|
-
step: props.step,
|
|
1741
|
-
minLength: props.minLength,
|
|
1742
|
-
maxLength: props.maxLength,
|
|
1743
|
-
pattern: props.pattern,
|
|
1744
|
-
accept: props.accept,
|
|
1745
|
-
multiple: props.multiple ?? false,
|
|
1746
|
-
spellCheck: props.spellCheck,
|
|
1747
|
-
autoFocus: props.autoFocus,
|
|
1748
|
-
"aria-label": props.ariaLabel,
|
|
1749
|
-
"aria-description": props.ariaDescription,
|
|
1750
|
-
onChange: (event) => {
|
|
1751
|
-
const { value } = event.target;
|
|
1752
|
-
host.setAttribute("value", value);
|
|
1753
|
-
if (isFileInput) {
|
|
1754
|
-
const files = Array.from(event.target.files ?? []);
|
|
1755
|
-
setFormValue(props.multiple ? multipleFormValue(host, files) : files[0] ?? null);
|
|
1756
|
-
}
|
|
1757
|
-
emit("edx-change", {
|
|
1758
|
-
value,
|
|
1759
|
-
files: event.target.files ? Array.from(event.target.files) : void 0
|
|
1760
|
-
});
|
|
1761
|
-
}
|
|
1762
|
-
});
|
|
1763
|
-
};
|
|
1764
|
-
var registerEdxInput = (ctx) => {
|
|
1765
|
-
defineElement("edx-input", EdxInput, {
|
|
1766
|
-
mode: ctx.mode,
|
|
1767
|
-
styles: ctx.styles,
|
|
1768
|
-
display: "block",
|
|
1769
|
-
delegateClick: true,
|
|
1770
|
-
formAssociated: true,
|
|
1771
|
-
formValue: (props) => props.type === "file" ? null : props.value ?? "",
|
|
1772
|
-
observedAttributes: [
|
|
1773
|
-
"value",
|
|
1774
|
-
"placeholder",
|
|
1775
|
-
"type",
|
|
1776
|
-
"disabled",
|
|
1777
|
-
"readonly",
|
|
1778
|
-
"invalid",
|
|
1779
|
-
"name",
|
|
1780
|
-
"form",
|
|
1781
|
-
"required",
|
|
1782
|
-
"autocomplete",
|
|
1783
|
-
"inputmode",
|
|
1784
|
-
"min",
|
|
1785
|
-
"max",
|
|
1786
|
-
"step",
|
|
1787
|
-
"minlength",
|
|
1788
|
-
"maxlength",
|
|
1789
|
-
"pattern",
|
|
1790
|
-
"accept",
|
|
1791
|
-
"multiple",
|
|
1792
|
-
"spellcheck",
|
|
1793
|
-
"autofocus",
|
|
1794
|
-
"aria-label",
|
|
1795
|
-
"aria-description"
|
|
1796
|
-
],
|
|
1797
|
-
transformProps: (raw) => ({
|
|
1798
|
-
value: raw.value ?? void 0,
|
|
1799
|
-
placeholder: raw.placeholder ?? void 0,
|
|
1800
|
-
type: raw.type ?? void 0,
|
|
1801
|
-
disabled: coerceBool(raw.disabled),
|
|
1802
|
-
readonly: coerceBool(raw.readonly),
|
|
1803
|
-
invalid: coerceBool(raw.invalid),
|
|
1804
|
-
name: raw.name ?? void 0,
|
|
1805
|
-
form: raw.form ?? void 0,
|
|
1806
|
-
required: coerceBool(raw.required),
|
|
1807
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
1808
|
-
inputMode: raw.inputmode ?? void 0,
|
|
1809
|
-
min: raw.min ?? void 0,
|
|
1810
|
-
max: raw.max ?? void 0,
|
|
1811
|
-
step: raw.step ?? void 0,
|
|
1812
|
-
minLength: coerceNumber(raw.minlength),
|
|
1813
|
-
maxLength: coerceNumber(raw.maxlength),
|
|
1814
|
-
pattern: raw.pattern ?? void 0,
|
|
1815
|
-
accept: raw.accept ?? void 0,
|
|
1816
|
-
multiple: coerceBool(raw.multiple),
|
|
1817
|
-
spellCheck: raw.spellcheck == null ? void 0 : coerceBool(raw.spellcheck),
|
|
1818
|
-
autoFocus: coerceBool(raw.autofocus),
|
|
1819
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
1820
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
1821
|
-
}),
|
|
1822
|
-
domProperties: { value: {
|
|
1823
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
1824
|
-
set: (host, value) => {
|
|
1825
|
-
host.setAttribute("value", String(value ?? ""));
|
|
1826
|
-
}
|
|
1827
|
-
} }
|
|
1828
|
-
});
|
|
1829
|
-
};
|
|
1830
|
-
//#endregion
|
|
1831
|
-
//#region ../elements/src/edx-input-group.tsx
|
|
1832
|
-
var EdxInputGroup = (props) => {
|
|
1833
|
-
const { emit, host, setFormValue } = useEdxHost();
|
|
1834
|
-
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
1835
|
-
"data-disabled": props.disabled || void 0,
|
|
1836
|
-
"aria-disabled": props.disabled || void 0,
|
|
1837
|
-
children: [
|
|
1838
|
-
(props.prefix ?? props.addon) && /* @__PURE__ */ jsx(InputGroupAddon, { children: props.prefix ?? props.addon }),
|
|
1839
|
-
/* @__PURE__ */ jsx(InputGroupInput, {
|
|
1840
|
-
type: props.type,
|
|
1841
|
-
name: props.name,
|
|
1842
|
-
form: props.form,
|
|
1843
|
-
value: props.type === "file" ? void 0 : props.value ?? "",
|
|
1844
|
-
placeholder: props.placeholder,
|
|
1845
|
-
disabled: props.disabled ?? false,
|
|
1846
|
-
readOnly: props.readonly ?? false,
|
|
1847
|
-
required: props.required ?? false,
|
|
1848
|
-
autoComplete: props.autoComplete,
|
|
1849
|
-
inputMode: props.inputMode,
|
|
1850
|
-
min: props.min,
|
|
1851
|
-
max: props.max,
|
|
1852
|
-
step: props.step,
|
|
1853
|
-
minLength: props.minLength,
|
|
1854
|
-
maxLength: props.maxLength,
|
|
1855
|
-
pattern: props.pattern,
|
|
1856
|
-
accept: props.accept,
|
|
1857
|
-
multiple: props.multiple,
|
|
1858
|
-
spellCheck: props.spellCheck,
|
|
1859
|
-
autoFocus: props.autofocus,
|
|
1860
|
-
"aria-invalid": props.invalid || void 0,
|
|
1861
|
-
"aria-label": props.ariaLabel,
|
|
1862
|
-
"aria-description": props.ariaDescription,
|
|
1863
|
-
onChange: (event) => {
|
|
1864
|
-
const { value } = event.target;
|
|
1865
|
-
host.setAttribute("value", value);
|
|
1866
|
-
const files = event.target.files ? Array.from(event.target.files) : void 0;
|
|
1867
|
-
if (props.type === "file") setFormValue(props.multiple ? multipleFormValue(host, files ?? []) : files?.[0] ?? null);
|
|
1868
|
-
emit("edx-change", {
|
|
1869
|
-
value,
|
|
1870
|
-
files
|
|
1871
|
-
});
|
|
1872
|
-
}
|
|
1873
|
-
}),
|
|
1874
|
-
props.suffix && /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
1875
|
-
align: "inline-end",
|
|
1876
|
-
children: props.suffix
|
|
1877
|
-
}),
|
|
1878
|
-
props.actionLabel && /* @__PURE__ */ jsx(InputGroupAddon, {
|
|
1879
|
-
align: "inline-end",
|
|
1880
|
-
children: /* @__PURE__ */ jsx(InputGroupButton, {
|
|
1881
|
-
onClick: () => emit("edx-action"),
|
|
1882
|
-
children: props.actionLabel
|
|
1883
|
-
})
|
|
1884
|
-
})
|
|
1885
|
-
]
|
|
1886
|
-
});
|
|
1887
|
-
};
|
|
1888
|
-
var registerEdxInputGroup = (ctx) => {
|
|
1889
|
-
defineElement("edx-input-group", EdxInputGroup, {
|
|
1890
|
-
mode: ctx.mode,
|
|
1891
|
-
styles: ctx.styles,
|
|
1892
|
-
delegateClick: true,
|
|
1893
|
-
formAssociated: true,
|
|
1894
|
-
formValue: (props) => props.type === "file" ? null : props.value ?? "",
|
|
1895
|
-
observedAttributes: [
|
|
1896
|
-
"addon",
|
|
1897
|
-
"prefix",
|
|
1898
|
-
"suffix",
|
|
1899
|
-
"action-label",
|
|
1900
|
-
"placeholder",
|
|
1901
|
-
"value",
|
|
1902
|
-
"disabled",
|
|
1903
|
-
"readonly",
|
|
1904
|
-
"invalid",
|
|
1905
|
-
"type",
|
|
1906
|
-
"name",
|
|
1907
|
-
"form",
|
|
1908
|
-
"required",
|
|
1909
|
-
"autocomplete",
|
|
1910
|
-
"inputmode",
|
|
1911
|
-
"min",
|
|
1912
|
-
"max",
|
|
1913
|
-
"step",
|
|
1914
|
-
"minlength",
|
|
1915
|
-
"maxlength",
|
|
1916
|
-
"pattern",
|
|
1917
|
-
"accept",
|
|
1918
|
-
"multiple",
|
|
1919
|
-
"spellcheck",
|
|
1920
|
-
"autofocus",
|
|
1921
|
-
"aria-label",
|
|
1922
|
-
"aria-description"
|
|
1923
|
-
],
|
|
1924
|
-
transformProps: (raw) => ({
|
|
1925
|
-
addon: raw.addon ?? void 0,
|
|
1926
|
-
prefix: raw.prefix ?? void 0,
|
|
1927
|
-
suffix: raw.suffix ?? void 0,
|
|
1928
|
-
actionLabel: raw["action-label"] ?? void 0,
|
|
1929
|
-
placeholder: raw.placeholder ?? void 0,
|
|
1930
|
-
value: raw.value ?? void 0,
|
|
1931
|
-
disabled: coerceBool(raw.disabled),
|
|
1932
|
-
readonly: coerceBool(raw.readonly),
|
|
1933
|
-
invalid: coerceBool(raw.invalid),
|
|
1934
|
-
type: raw.type ?? void 0,
|
|
1935
|
-
name: raw.name ?? void 0,
|
|
1936
|
-
form: raw.form ?? void 0,
|
|
1937
|
-
required: coerceBool(raw.required),
|
|
1938
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
1939
|
-
inputMode: raw.inputmode ?? void 0,
|
|
1940
|
-
min: raw.min ?? void 0,
|
|
1941
|
-
max: raw.max ?? void 0,
|
|
1942
|
-
step: raw.step ?? void 0,
|
|
1943
|
-
minLength: raw.minlength == null ? void 0 : Number(raw.minlength),
|
|
1944
|
-
maxLength: raw.maxlength == null ? void 0 : Number(raw.maxlength),
|
|
1945
|
-
pattern: raw.pattern ?? void 0,
|
|
1946
|
-
accept: raw.accept ?? void 0,
|
|
1947
|
-
multiple: coerceBool(raw.multiple),
|
|
1948
|
-
spellCheck: raw.spellcheck == null ? void 0 : coerceBool(raw.spellcheck),
|
|
1949
|
-
autofocus: coerceBool(raw.autofocus),
|
|
1950
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
1951
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
1952
|
-
}),
|
|
1953
|
-
domProperties: { value: {
|
|
1954
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
1955
|
-
set: (host, value) => {
|
|
1956
|
-
host.setAttribute("value", String(value ?? ""));
|
|
1957
|
-
}
|
|
1958
|
-
} }
|
|
1959
|
-
});
|
|
1960
|
-
};
|
|
1961
|
-
//#endregion
|
|
1962
|
-
//#region ../elements/src/edx-input-otp.tsx
|
|
1963
|
-
var buildSlots = (props, length, value, onValueChange, onComplete) => {
|
|
1964
|
-
const inputProps = {
|
|
1965
|
-
maxLength: length,
|
|
1966
|
-
value,
|
|
1967
|
-
disabled: props.disabled ?? false,
|
|
1968
|
-
readOnly: props.readonly ?? false,
|
|
1969
|
-
required: props.required ?? false,
|
|
1970
|
-
name: props.name,
|
|
1971
|
-
form: props.form,
|
|
1972
|
-
autoComplete: props.autoComplete,
|
|
1973
|
-
inputMode: props.inputMode,
|
|
1974
|
-
pattern: props.pattern,
|
|
1975
|
-
"aria-invalid": props.invalid || void 0,
|
|
1976
|
-
"aria-label": props.ariaLabel,
|
|
1977
|
-
"aria-description": props.ariaDescription,
|
|
1978
|
-
onChange: onValueChange,
|
|
1979
|
-
onComplete
|
|
1980
|
-
};
|
|
1981
|
-
if (length === 6) return /* @__PURE__ */ jsxs(InputOTP, {
|
|
1982
|
-
...inputProps,
|
|
1983
|
-
children: [
|
|
1984
|
-
/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
|
|
1985
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 0 }),
|
|
1986
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 1 }),
|
|
1987
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 2 })
|
|
1988
|
-
] }),
|
|
1989
|
-
/* @__PURE__ */ jsx(InputOTPSeparator, {}),
|
|
1990
|
-
/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
|
|
1991
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 3 }),
|
|
1992
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 4 }),
|
|
1993
|
-
/* @__PURE__ */ jsx(InputOTPSlot, { index: 5 })
|
|
1994
|
-
] })
|
|
1995
|
-
]
|
|
1996
|
-
});
|
|
1997
|
-
return /* @__PURE__ */ jsx(InputOTP, {
|
|
1998
|
-
...inputProps,
|
|
1999
|
-
children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i }, `slot-${i}`)) })
|
|
2000
|
-
});
|
|
2001
|
-
};
|
|
2002
|
-
var EdxInputOtp = (props) => {
|
|
2003
|
-
const { emit, host } = useEdxHost();
|
|
2004
|
-
const length = props.length ?? 6;
|
|
2005
|
-
const value = props.value ?? props.defaultValue ?? "";
|
|
2006
|
-
const handleValueChange = (next) => {
|
|
2007
|
-
host.removeAttribute("default-value");
|
|
2008
|
-
host.setAttribute("value", next);
|
|
2009
|
-
emit("edx-change", { value: next });
|
|
2010
|
-
};
|
|
2011
|
-
return buildSlots(props, length, value, handleValueChange, (next) => emit("edx-complete", { value: next }));
|
|
2012
|
-
};
|
|
2013
|
-
var registerEdxInputOtp = (ctx) => {
|
|
2014
|
-
defineElement("edx-input-otp", EdxInputOtp, {
|
|
2015
|
-
mode: ctx.mode,
|
|
2016
|
-
styles: ctx.styles,
|
|
2017
|
-
display: "inline-flex",
|
|
2018
|
-
delegateClick: true,
|
|
2019
|
-
formAssociated: true,
|
|
2020
|
-
formValue: (props) => props.value ?? props.defaultValue ?? "",
|
|
2021
|
-
observedAttributes: [
|
|
2022
|
-
"length",
|
|
2023
|
-
"value",
|
|
2024
|
-
"default-value",
|
|
2025
|
-
"disabled",
|
|
2026
|
-
"readonly",
|
|
2027
|
-
"required",
|
|
2028
|
-
"name",
|
|
2029
|
-
"form",
|
|
2030
|
-
"autocomplete",
|
|
2031
|
-
"inputmode",
|
|
2032
|
-
"pattern",
|
|
2033
|
-
"invalid",
|
|
2034
|
-
"aria-label",
|
|
2035
|
-
"aria-description"
|
|
2036
|
-
],
|
|
2037
|
-
transformProps: (raw) => ({
|
|
2038
|
-
length: coerceNumber(raw.length) ?? 6,
|
|
2039
|
-
value: raw.value ?? void 0,
|
|
2040
|
-
defaultValue: raw["default-value"] ?? void 0,
|
|
2041
|
-
disabled: coerceBool(raw.disabled),
|
|
2042
|
-
readonly: coerceBool(raw.readonly),
|
|
2043
|
-
required: coerceBool(raw.required),
|
|
2044
|
-
name: raw.name ?? void 0,
|
|
2045
|
-
form: raw.form ?? void 0,
|
|
2046
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
2047
|
-
inputMode: raw.inputmode ?? void 0,
|
|
2048
|
-
pattern: raw.pattern ?? void 0,
|
|
2049
|
-
invalid: coerceBool(raw.invalid),
|
|
2050
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
2051
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
2052
|
-
}),
|
|
2053
|
-
domProperties: { value: {
|
|
2054
|
-
get: (host) => host.getAttribute("value") ?? host.getAttribute("default-value") ?? "",
|
|
2055
|
-
set: (host, value) => {
|
|
2056
|
-
host.setAttribute("value", String(value ?? ""));
|
|
2057
|
-
}
|
|
2058
|
-
} }
|
|
2059
|
-
});
|
|
2060
|
-
};
|
|
2061
|
-
//#endregion
|
|
2062
|
-
//#region ../elements/src/edx-interactive-components.tsx
|
|
2063
|
-
var EdxAlertDialog = ({ triggerLabel = "Delete item", heading = "Are you absolutely sure?", description = "This action cannot be undone.", confirmLabel = "Continue", cancelLabel = "Cancel", open, defaultOpen }) => {
|
|
2064
|
-
const { emit, host } = useEdxHost();
|
|
2065
|
-
return /* @__PURE__ */ jsxs(AlertDialog, {
|
|
2066
|
-
open: open ?? defaultOpen ?? false,
|
|
2067
|
-
onOpenChange: (nextOpen) => {
|
|
2068
|
-
host.removeAttribute("default-open");
|
|
2069
|
-
reflectBool(host, "open", nextOpen);
|
|
2070
|
-
emit("edx-change", { open: nextOpen });
|
|
2071
|
-
},
|
|
2072
|
-
children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
|
|
2073
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
2074
|
-
children: triggerLabel
|
|
2075
|
-
}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: heading }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: cancelLabel }), /* @__PURE__ */ jsx(AlertDialogAction, {
|
|
2076
|
-
onClick: () => {
|
|
2077
|
-
emit("edx-action", { action: "confirm" });
|
|
2078
|
-
},
|
|
2079
|
-
children: confirmLabel
|
|
2080
|
-
})] })] })]
|
|
2081
|
-
});
|
|
2082
|
-
};
|
|
2083
|
-
var EdxCarousel = ({ items = [
|
|
2084
|
-
"First slide",
|
|
2085
|
-
"Second slide",
|
|
2086
|
-
"Third slide"
|
|
2087
|
-
], orientation = "horizontal", current, loop, dragFree, startIndex }) => {
|
|
2088
|
-
const { emit, host } = useEdxHost();
|
|
2089
|
-
const [api, setApi] = useState();
|
|
2090
|
-
useEffect(() => {
|
|
2091
|
-
if (!api) return;
|
|
2092
|
-
const handleSelect = () => {
|
|
2093
|
-
const next = api.selectedScrollSnap();
|
|
2094
|
-
if (!Number.isFinite(next)) return;
|
|
2095
|
-
host.setAttribute("current", String(next));
|
|
2096
|
-
emit("edx-change", { value: next });
|
|
2097
|
-
};
|
|
2098
|
-
api.on("select", handleSelect);
|
|
2099
|
-
api.on("reInit", handleSelect);
|
|
2100
|
-
return () => {
|
|
2101
|
-
api.off("select", handleSelect);
|
|
2102
|
-
api.off("reInit", handleSelect);
|
|
2103
|
-
};
|
|
2104
|
-
}, [
|
|
2105
|
-
api,
|
|
2106
|
-
emit,
|
|
2107
|
-
host
|
|
2108
|
-
]);
|
|
2109
|
-
useEffect(() => {
|
|
2110
|
-
if (api && current != null && api.selectedScrollSnap() !== current) api.scrollTo(current);
|
|
2111
|
-
}, [api, current]);
|
|
2112
|
-
return /* @__PURE__ */ jsxs(Carousel, {
|
|
2113
|
-
orientation,
|
|
2114
|
-
opts: {
|
|
2115
|
-
loop: loop ?? false,
|
|
2116
|
-
dragFree: dragFree ?? false,
|
|
2117
|
-
startIndex: startIndex ?? 0
|
|
2118
|
-
},
|
|
2119
|
-
setApi,
|
|
2120
|
-
className: "mx-10 w-64",
|
|
2121
|
-
children: [
|
|
2122
|
-
/* @__PURE__ */ jsx(CarouselContent, { children: items.map((item) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx("div", {
|
|
2123
|
-
className: "flex h-28 items-center justify-center rounded-lg border bg-card p-4 text-sm font-medium",
|
|
2124
|
-
children: item
|
|
2125
|
-
}) }, item)) }),
|
|
2126
|
-
/* @__PURE__ */ jsx(CarouselPrevious, {}),
|
|
2127
|
-
/* @__PURE__ */ jsx(CarouselNext, {})
|
|
2128
|
-
]
|
|
2129
|
-
});
|
|
2130
|
-
};
|
|
2131
|
-
var EdxChart = ({ data = [
|
|
2132
|
-
{
|
|
2133
|
-
label: "Mon",
|
|
2134
|
-
value: 32
|
|
2135
|
-
},
|
|
2136
|
-
{
|
|
2137
|
-
label: "Tue",
|
|
2138
|
-
value: 48
|
|
2139
|
-
},
|
|
2140
|
-
{
|
|
2141
|
-
label: "Wed",
|
|
2142
|
-
value: 40
|
|
2143
|
-
},
|
|
2144
|
-
{
|
|
2145
|
-
label: "Thu",
|
|
2146
|
-
value: 64
|
|
2147
|
-
}
|
|
2148
|
-
] }) => {
|
|
2149
|
-
return /* @__PURE__ */ jsx(ChartContainer, {
|
|
2150
|
-
config: { value: {
|
|
2151
|
-
label: "Value",
|
|
2152
|
-
color: "var(--chart-1)"
|
|
2153
|
-
} },
|
|
2154
|
-
className: "h-48 w-full aspect-auto",
|
|
2155
|
-
children: /* @__PURE__ */ jsxs(BarChart, {
|
|
2156
|
-
data,
|
|
2157
|
-
accessibilityLayer: true,
|
|
2158
|
-
children: [
|
|
2159
|
-
/* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
|
|
2160
|
-
/* @__PURE__ */ jsx(XAxis, {
|
|
2161
|
-
dataKey: "label",
|
|
2162
|
-
tickLine: false,
|
|
2163
|
-
axisLine: false
|
|
2164
|
-
}),
|
|
2165
|
-
/* @__PURE__ */ jsx(Bar, {
|
|
2166
|
-
dataKey: "value",
|
|
2167
|
-
fill: "var(--color-value)",
|
|
2168
|
-
radius: 6
|
|
2169
|
-
})
|
|
2170
|
-
]
|
|
2171
|
-
})
|
|
2172
|
-
});
|
|
2173
|
-
};
|
|
2174
|
-
var EdxCollapsible = ({ triggerLabel = "Show details", open, defaultOpen, disabled }) => {
|
|
2175
|
-
const { emit, host } = useEdxHost();
|
|
2176
|
-
return /* @__PURE__ */ jsxs(Collapsible, {
|
|
2177
|
-
open: open ?? defaultOpen ?? false,
|
|
2178
|
-
disabled,
|
|
2179
|
-
onOpenChange: (nextOpen) => {
|
|
2180
|
-
host.removeAttribute("default-open");
|
|
2181
|
-
reflectBool(host, "open", nextOpen);
|
|
2182
|
-
emit("edx-change", { open: nextOpen });
|
|
2183
|
-
},
|
|
2184
|
-
className: "w-full space-y-2",
|
|
2185
|
-
children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
|
|
2186
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
2187
|
-
disabled,
|
|
2188
|
-
children: triggerLabel
|
|
2189
|
-
}), /* @__PURE__ */ jsx(CollapsibleContent, {
|
|
2190
|
-
className: "rounded-lg border bg-card p-3 text-sm text-muted-foreground",
|
|
2191
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
2192
|
-
})]
|
|
2193
|
-
});
|
|
2194
|
-
};
|
|
2195
|
-
var EdxCommand = ({ placeholder = "Type a command or search…", emptyLabel = "No results found.", items = [], query, loop, disablePointerSelection, vimBindings }) => {
|
|
2196
|
-
const { emit, host } = useEdxHost();
|
|
2197
|
-
return /* @__PURE__ */ jsxs(Command, {
|
|
2198
|
-
loop,
|
|
2199
|
-
disablePointerSelection,
|
|
2200
|
-
vimBindings,
|
|
2201
|
-
className: "w-full rounded-lg border",
|
|
2202
|
-
children: [/* @__PURE__ */ jsx(CommandInput, {
|
|
2203
|
-
placeholder,
|
|
2204
|
-
value: query ?? "",
|
|
2205
|
-
onValueChange: (nextQuery) => {
|
|
2206
|
-
host.setAttribute("query", nextQuery);
|
|
2207
|
-
emit("edx-input-change", { value: nextQuery });
|
|
2208
|
-
}
|
|
2209
|
-
}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyLabel }), items.map((item) => /* @__PURE__ */ jsx(CommandItem, {
|
|
2210
|
-
value: item.value ?? item.label,
|
|
2211
|
-
disabled: item.disabled,
|
|
2212
|
-
onSelect: (value) => emit("edx-select", { value }),
|
|
2213
|
-
children: item.label
|
|
2214
|
-
}, item.value ?? item.label))] })]
|
|
2215
|
-
});
|
|
2216
|
-
};
|
|
2217
|
-
var EdxContextMenu = ({ items = [], label = "Right-click here", open, defaultOpen, disabled, loopFocus = true, highlightItemOnHover = true, side, align, sideOffset, alignOffset }) => {
|
|
2218
|
-
const { emit, host } = useEdxHost();
|
|
2219
|
-
return /* @__PURE__ */ jsxs(ContextMenu, {
|
|
2220
|
-
open: open ?? defaultOpen ?? false,
|
|
2221
|
-
disabled,
|
|
2222
|
-
loopFocus,
|
|
2223
|
-
highlightItemOnHover,
|
|
2224
|
-
onOpenChange: (nextOpen) => {
|
|
2225
|
-
host.removeAttribute("default-open");
|
|
2226
|
-
reflectBool(host, "open", nextOpen);
|
|
2227
|
-
emit("edx-change", { open: nextOpen });
|
|
2228
|
-
},
|
|
2229
|
-
children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
|
|
2230
|
-
className: "flex h-28 w-full items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground",
|
|
2231
|
-
children: label
|
|
2232
|
-
}), /* @__PURE__ */ jsx(ContextMenuContent, {
|
|
2233
|
-
side,
|
|
2234
|
-
align,
|
|
2235
|
-
sideOffset,
|
|
2236
|
-
alignOffset,
|
|
2237
|
-
children: items.map((item) => /* @__PURE__ */ jsx(ContextMenuItem, {
|
|
2238
|
-
disabled: item.disabled,
|
|
2239
|
-
onClick: () => emit("edx-select", { value: item.value ?? item.label }),
|
|
2240
|
-
children: item.label
|
|
2241
|
-
}, item.value ?? item.label))
|
|
2242
|
-
})]
|
|
2243
|
-
});
|
|
2244
|
-
};
|
|
2245
|
-
var EdxDirection = ({ direction = "ltr" }) => {
|
|
2246
|
-
return /* @__PURE__ */ jsx(DirectionProvider, {
|
|
2247
|
-
direction,
|
|
2248
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
2249
|
-
dir: direction,
|
|
2250
|
-
className: "contents",
|
|
2251
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
2252
|
-
})
|
|
2253
|
-
});
|
|
2254
|
-
};
|
|
2255
|
-
var EdxHoverCard = ({ triggerLabel = "Hover for details", heading = "Design system", description = "Accessible components for every application.", open, defaultOpen, delay, closeDelay, side, align, sideOffset, alignOffset }) => {
|
|
2256
|
-
const { emit, host } = useEdxHost();
|
|
2257
|
-
return /* @__PURE__ */ jsxs(HoverCard, {
|
|
2258
|
-
open: open ?? defaultOpen ?? false,
|
|
2259
|
-
onOpenChange: (open) => {
|
|
2260
|
-
host.removeAttribute("default-open");
|
|
2261
|
-
reflectBool(host, "open", open);
|
|
2262
|
-
emit("edx-change", { open });
|
|
2263
|
-
},
|
|
2264
|
-
children: [/* @__PURE__ */ jsx(HoverCardTrigger, {
|
|
2265
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "link" }),
|
|
2266
|
-
delay,
|
|
2267
|
-
closeDelay,
|
|
2268
|
-
children: triggerLabel
|
|
2269
|
-
}), /* @__PURE__ */ jsxs(HoverCardContent, {
|
|
2270
|
-
side,
|
|
2271
|
-
align,
|
|
2272
|
-
sideOffset,
|
|
2273
|
-
alignOffset,
|
|
2274
|
-
children: [/* @__PURE__ */ jsx("p", {
|
|
2275
|
-
className: "font-medium",
|
|
2276
|
-
children: heading
|
|
2277
|
-
}), /* @__PURE__ */ jsx("p", {
|
|
2278
|
-
className: "mt-1 text-sm text-muted-foreground",
|
|
2279
|
-
children: description
|
|
2280
|
-
})]
|
|
2281
|
-
})]
|
|
2282
|
-
});
|
|
2283
|
-
};
|
|
2284
|
-
var EdxMenubar = ({ menus = [], disabled, modal = true, orientation, loopFocus = true }) => {
|
|
2285
|
-
const emit = useEmit();
|
|
2286
|
-
return /* @__PURE__ */ jsx(Menubar, {
|
|
2287
|
-
disabled,
|
|
2288
|
-
modal,
|
|
2289
|
-
orientation,
|
|
2290
|
-
loopFocus,
|
|
2291
|
-
children: menus.map((menu) => /* @__PURE__ */ jsxs(MenubarMenu, { children: [/* @__PURE__ */ jsx(MenubarTrigger, { children: menu.label }), /* @__PURE__ */ jsx(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsx(MenubarItem, {
|
|
2292
|
-
disabled: item.disabled,
|
|
2293
|
-
onClick: () => emit("edx-select", { value: item.value ?? item.label }),
|
|
2294
|
-
children: item.label
|
|
2295
|
-
}, item.value ?? item.label)) })] }, menu.label))
|
|
2296
|
-
});
|
|
2297
|
-
};
|
|
2298
|
-
var EdxMessageScroller = ({ items = [], autoScroll, defaultScrollPosition = "end", scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin, preserveScrollOnPrepend, buttonDirection, buttonBehavior }) => {
|
|
2299
|
-
return /* @__PURE__ */ jsx(MessageScrollerProvider, {
|
|
2300
|
-
autoScroll,
|
|
2301
|
-
defaultScrollPosition,
|
|
2302
|
-
scrollEdgeThreshold,
|
|
2303
|
-
scrollPreviousItemPeek,
|
|
2304
|
-
scrollMargin,
|
|
2305
|
-
children: /* @__PURE__ */ jsxs(MessageScroller, {
|
|
2306
|
-
className: "h-48 rounded-lg border bg-card",
|
|
2307
|
-
children: [/* @__PURE__ */ jsx(MessageScrollerViewport, {
|
|
2308
|
-
"aria-label": "Messages",
|
|
2309
|
-
preserveScrollOnPrepend,
|
|
2310
|
-
children: /* @__PURE__ */ jsx(MessageScrollerContent, {
|
|
2311
|
-
className: "gap-3 p-3",
|
|
2312
|
-
children: items.map((item, index) => /* @__PURE__ */ jsx(MessageScrollerItem, {
|
|
2313
|
-
messageId: `message-${index}`,
|
|
2314
|
-
className: "rounded-lg bg-muted p-2 text-sm",
|
|
2315
|
-
children: item
|
|
2316
|
-
}, item))
|
|
2317
|
-
})
|
|
2318
|
-
}), /* @__PURE__ */ jsx(MessageScrollerButton, {
|
|
2319
|
-
direction: buttonDirection,
|
|
2320
|
-
behavior: buttonBehavior
|
|
2321
|
-
})]
|
|
2322
|
-
})
|
|
2323
|
-
});
|
|
2324
|
-
};
|
|
2325
|
-
var EdxNavigationMenu = ({ items = [], value, defaultValue, orientation, delay, closeDelay, align, ariaLabel }) => {
|
|
2326
|
-
const { emit, host } = useEdxHost();
|
|
2327
|
-
return /* @__PURE__ */ jsx(NavigationMenu, {
|
|
2328
|
-
value: value ?? defaultValue,
|
|
2329
|
-
orientation,
|
|
2330
|
-
delay,
|
|
2331
|
-
closeDelay,
|
|
2332
|
-
align,
|
|
2333
|
-
"aria-label": ariaLabel,
|
|
2334
|
-
onValueChange: (nextValue) => {
|
|
2335
|
-
host.removeAttribute("default-value");
|
|
2336
|
-
if (nextValue) host.setAttribute("value", nextValue);
|
|
2337
|
-
else host.removeAttribute("value");
|
|
2338
|
-
emit("edx-change", { value: nextValue });
|
|
2339
|
-
},
|
|
2340
|
-
children: /* @__PURE__ */ jsx(NavigationMenuList, { children: items.map((item) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, {
|
|
2341
|
-
href: item.disabled ? void 0 : item.href ?? "#",
|
|
2342
|
-
active: item.active,
|
|
2343
|
-
"aria-disabled": item.disabled || void 0,
|
|
2344
|
-
onClick: (event) => {
|
|
2345
|
-
if (item.disabled) {
|
|
2346
|
-
event.preventDefault();
|
|
2347
|
-
return;
|
|
2348
|
-
}
|
|
2349
|
-
emit("edx-select", { value: item.value ?? item.label });
|
|
2350
|
-
},
|
|
2351
|
-
children: item.label
|
|
2352
|
-
}) }, item.value ?? item.label)) })
|
|
2353
|
-
});
|
|
2354
|
-
};
|
|
2355
|
-
var EdxQuestionnaire = ({ name = "preference", title = "Choose an option", description, choices = [], required = true, multiple }) => {
|
|
2356
|
-
const emit = useEmit();
|
|
2357
|
-
const handleSubmit = (event) => {
|
|
2358
|
-
event.preventDefault();
|
|
2359
|
-
emit("edx-submit", Object.fromEntries(new FormData(event.currentTarget)));
|
|
2360
|
-
};
|
|
2361
|
-
return /* @__PURE__ */ jsxs(Questionnaire, {
|
|
2362
|
-
items: [{
|
|
2363
|
-
name,
|
|
2364
|
-
required,
|
|
2365
|
-
choices
|
|
2366
|
-
}],
|
|
2367
|
-
defaultItem: name,
|
|
2368
|
-
onSubmit: handleSubmit,
|
|
2369
|
-
children: [
|
|
2370
|
-
/* @__PURE__ */ jsx(QuestionnaireProgress, {}),
|
|
2371
|
-
/* @__PURE__ */ jsxs(QuestionnaireItem, {
|
|
2372
|
-
name,
|
|
2373
|
-
required,
|
|
2374
|
-
multiple,
|
|
2375
|
-
children: [
|
|
2376
|
-
/* @__PURE__ */ jsx(QuestionnaireTitle, { children: title }),
|
|
2377
|
-
description ? /* @__PURE__ */ jsx(QuestionnaireDescription, { children: description }) : null,
|
|
2378
|
-
/* @__PURE__ */ jsx(QuestionnaireChoices, { children: choices.map((choice) => /* @__PURE__ */ jsxs(QuestionnaireChoice, {
|
|
2379
|
-
value: choice.value,
|
|
2380
|
-
disabled: choice.disabled,
|
|
2381
|
-
children: [/* @__PURE__ */ jsx("span", { children: choice.label }), choice.description && /* @__PURE__ */ jsx(QuestionnaireChoiceDescription, { children: choice.description })]
|
|
2382
|
-
}, choice.value)) })
|
|
2383
|
-
]
|
|
2384
|
-
}),
|
|
2385
|
-
/* @__PURE__ */ jsx(QuestionnaireActions, { children: /* @__PURE__ */ jsx(QuestionnaireSubmit, {}) })
|
|
2386
|
-
]
|
|
2387
|
-
});
|
|
2388
|
-
};
|
|
2389
|
-
var EdxResizable = ({ firstSize = 50, orientation = "horizontal", disabled, firstMinSize, firstMaxSize, firstCollapsible, firstCollapsedSize }) => {
|
|
2390
|
-
const emit = useEmit();
|
|
2391
|
-
return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
|
|
2392
|
-
orientation,
|
|
2393
|
-
disabled,
|
|
2394
|
-
onLayoutChanged: (layout) => emit("edx-change", { value: layout }),
|
|
2395
|
-
className: "h-40 rounded-lg border",
|
|
2396
|
-
children: [
|
|
2397
|
-
/* @__PURE__ */ jsx(ResizablePanel, {
|
|
2398
|
-
defaultSize: firstSize,
|
|
2399
|
-
minSize: firstMinSize,
|
|
2400
|
-
maxSize: firstMaxSize,
|
|
2401
|
-
collapsible: firstCollapsible,
|
|
2402
|
-
collapsedSize: firstCollapsedSize,
|
|
2403
|
-
className: "flex items-center justify-center p-3 text-sm",
|
|
2404
|
-
children: /* @__PURE__ */ jsx(Slot, { name: "first" })
|
|
2405
|
-
}),
|
|
2406
|
-
/* @__PURE__ */ jsx(ResizableHandle, {
|
|
2407
|
-
withHandle: true,
|
|
2408
|
-
disabled
|
|
2409
|
-
}),
|
|
2410
|
-
/* @__PURE__ */ jsx(ResizablePanel, {
|
|
2411
|
-
className: "flex items-center justify-center p-3 text-sm",
|
|
2412
|
-
children: /* @__PURE__ */ jsx(Slot, { name: "second" })
|
|
2413
|
-
})
|
|
2414
|
-
]
|
|
2415
|
-
});
|
|
2416
|
-
};
|
|
2417
|
-
var EdxSheet = ({ triggerLabel = "Open sheet", heading = "Details", description = "Review and update this information.", side = "right", open, defaultOpen, modal = true, disablePointerDismissal }) => {
|
|
2418
|
-
const { emit, host } = useEdxHost();
|
|
2419
|
-
return /* @__PURE__ */ jsxs(Sheet, {
|
|
2420
|
-
open: open ?? defaultOpen ?? false,
|
|
2421
|
-
modal,
|
|
2422
|
-
disablePointerDismissal,
|
|
2423
|
-
onOpenChange: (open) => {
|
|
2424
|
-
host.removeAttribute("default-open");
|
|
2425
|
-
reflectBool(host, "open", open);
|
|
2426
|
-
emit("edx-change", { open });
|
|
2427
|
-
},
|
|
2428
|
-
children: [/* @__PURE__ */ jsx(SheetTrigger, {
|
|
2429
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
2430
|
-
children: triggerLabel
|
|
2431
|
-
}), /* @__PURE__ */ jsxs(SheetContent, {
|
|
2432
|
-
side,
|
|
2433
|
-
showCloseButton: true,
|
|
2434
|
-
children: [/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: heading }), /* @__PURE__ */ jsx(SheetDescription, { children: description })] }), /* @__PURE__ */ jsx("div", {
|
|
2435
|
-
className: "p-4",
|
|
2436
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
2437
|
-
})]
|
|
2438
|
-
})]
|
|
2439
|
-
});
|
|
2440
|
-
};
|
|
2441
|
-
var EdxSidebar = ({ title = "Workspace", items = [], groupLabel = "Navigation", side, variant, collapsible = "none", open, defaultOpen = true }) => {
|
|
2442
|
-
const { emit, host } = useEdxHost();
|
|
2443
|
-
return /* @__PURE__ */ jsx(SidebarProvider, {
|
|
2444
|
-
open: open ?? defaultOpen,
|
|
2445
|
-
onOpenChange: (nextOpen) => {
|
|
2446
|
-
host.removeAttribute("default-open");
|
|
2447
|
-
host.setAttribute("open", String(nextOpen));
|
|
2448
|
-
emit("edx-change", { open: nextOpen });
|
|
2449
|
-
},
|
|
2450
|
-
className: "min-h-64 overflow-hidden rounded-lg border",
|
|
2451
|
-
children: /* @__PURE__ */ jsxs(Sidebar, {
|
|
2452
|
-
side,
|
|
2453
|
-
variant,
|
|
2454
|
-
collapsible,
|
|
2455
|
-
className: "h-64",
|
|
2456
|
-
children: [/* @__PURE__ */ jsxs(SidebarHeader, {
|
|
2457
|
-
className: "flex-row items-center justify-between font-medium",
|
|
2458
|
-
children: [/* @__PURE__ */ jsx("span", { children: title }), collapsible !== "none" ? /* @__PURE__ */ jsx(SidebarTrigger, { "aria-label": "Toggle sidebar" }) : null]
|
|
2459
|
-
}), /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: groupLabel }), /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
|
|
2460
|
-
isActive: item.active,
|
|
2461
|
-
disabled: item.disabled,
|
|
2462
|
-
onClick: () => emit("edx-select", { value: item.value ?? item.label }),
|
|
2463
|
-
children: item.label
|
|
2464
|
-
}) }, item.value ?? item.label)) }) })] }) })]
|
|
2465
|
-
})
|
|
2466
|
-
});
|
|
2467
|
-
};
|
|
2468
|
-
var EdxToast = ({ triggerLabel = "Show toast", title = "Saved", description = "Your changes have been saved.", type = "success", timeout = 5e3 }) => {
|
|
2469
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
|
|
2470
|
-
variant: "outline",
|
|
2471
|
-
onClick: () => toast.add({
|
|
2472
|
-
title,
|
|
2473
|
-
description,
|
|
2474
|
-
type,
|
|
2475
|
-
timeout
|
|
2476
|
-
}),
|
|
2477
|
-
children: triggerLabel
|
|
2478
|
-
}), /* @__PURE__ */ jsx(Toaster, {})] });
|
|
2479
|
-
};
|
|
2480
|
-
var registerEdxInteractiveComponents = (ctx) => {
|
|
2481
|
-
registerOverlayElement("edx-alert-dialog", EdxAlertDialog, ctx, {
|
|
2482
|
-
display: "inline-flex",
|
|
2483
|
-
observedAttributes: [
|
|
2484
|
-
"trigger-label",
|
|
2485
|
-
"heading",
|
|
2486
|
-
"description",
|
|
2487
|
-
"confirm-label",
|
|
2488
|
-
"cancel-label",
|
|
2489
|
-
"open",
|
|
2490
|
-
"default-open"
|
|
2491
|
-
],
|
|
2492
|
-
transformProps: (raw) => ({
|
|
2493
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2494
|
-
heading: raw.heading ?? void 0,
|
|
2495
|
-
description: raw.description ?? void 0,
|
|
2496
|
-
confirmLabel: raw["confirm-label"] ?? void 0,
|
|
2497
|
-
cancelLabel: raw["cancel-label"] ?? void 0,
|
|
2498
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2499
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"])
|
|
2500
|
-
}),
|
|
2501
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2502
|
-
});
|
|
2503
|
-
defineElement("edx-carousel", EdxCarousel, {
|
|
2504
|
-
mode: ctx.mode,
|
|
2505
|
-
styles: ctx.styles,
|
|
2506
|
-
observedAttributes: [
|
|
2507
|
-
"items",
|
|
2508
|
-
"orientation",
|
|
2509
|
-
"current",
|
|
2510
|
-
"loop",
|
|
2511
|
-
"drag-free",
|
|
2512
|
-
"start-index"
|
|
2513
|
-
],
|
|
2514
|
-
transformProps: (raw) => ({
|
|
2515
|
-
items: coerceJson(raw.items),
|
|
2516
|
-
orientation: raw.orientation ?? void 0,
|
|
2517
|
-
current: coerceNumber(raw.current),
|
|
2518
|
-
loop: raw.loop == null ? void 0 : coerceBool(raw.loop),
|
|
2519
|
-
dragFree: raw["drag-free"] == null ? void 0 : coerceBool(raw["drag-free"]),
|
|
2520
|
-
startIndex: coerceNumber(raw["start-index"])
|
|
2521
|
-
}),
|
|
2522
|
-
domProperties: { current: {
|
|
2523
|
-
get: (host) => coerceNumber(host.getAttribute("current")) ?? 0,
|
|
2524
|
-
set: (host, value) => host.setAttribute("current", String(value ?? 0))
|
|
2525
|
-
} }
|
|
2526
|
-
});
|
|
2527
|
-
defineElement("edx-chart", EdxChart, {
|
|
2528
|
-
mode: ctx.mode,
|
|
2529
|
-
styles: ctx.styles,
|
|
2530
|
-
observedAttributes: ["data"],
|
|
2531
|
-
transformProps: (raw) => ({ data: coerceJson(raw.data) })
|
|
2532
|
-
});
|
|
2533
|
-
defineElement("edx-collapsible", EdxCollapsible, {
|
|
2534
|
-
mode: "shadow",
|
|
2535
|
-
styles: ctx.styles,
|
|
2536
|
-
observedAttributes: [
|
|
2537
|
-
"trigger-label",
|
|
2538
|
-
"open",
|
|
2539
|
-
"default-open",
|
|
2540
|
-
"disabled"
|
|
2541
|
-
],
|
|
2542
|
-
transformProps: (raw) => ({
|
|
2543
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2544
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2545
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
2546
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled)
|
|
2547
|
-
}),
|
|
2548
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2549
|
-
});
|
|
2550
|
-
defineElement("edx-command", EdxCommand, {
|
|
2551
|
-
mode: ctx.mode,
|
|
2552
|
-
styles: ctx.styles,
|
|
2553
|
-
observedAttributes: [
|
|
2554
|
-
"placeholder",
|
|
2555
|
-
"empty-label",
|
|
2556
|
-
"items",
|
|
2557
|
-
"query",
|
|
2558
|
-
"loop",
|
|
2559
|
-
"disable-pointer-selection",
|
|
2560
|
-
"vim-bindings"
|
|
2561
|
-
],
|
|
2562
|
-
transformProps: (raw) => ({
|
|
2563
|
-
placeholder: raw.placeholder ?? void 0,
|
|
2564
|
-
emptyLabel: raw["empty-label"] ?? void 0,
|
|
2565
|
-
items: coerceJson(raw.items),
|
|
2566
|
-
query: raw.query ?? void 0,
|
|
2567
|
-
loop: raw.loop == null ? void 0 : coerceBool(raw.loop),
|
|
2568
|
-
disablePointerSelection: raw["disable-pointer-selection"] == null ? void 0 : coerceBool(raw["disable-pointer-selection"]),
|
|
2569
|
-
vimBindings: raw["vim-bindings"] == null ? void 0 : coerceBool(raw["vim-bindings"])
|
|
2570
|
-
}),
|
|
2571
|
-
domProperties: { query: {
|
|
2572
|
-
get: (host) => host.getAttribute("query") ?? "",
|
|
2573
|
-
set: (host, value) => host.setAttribute("query", String(value ?? ""))
|
|
2574
|
-
} }
|
|
2575
|
-
});
|
|
2576
|
-
registerOverlayElement("edx-context-menu", EdxContextMenu, ctx, {
|
|
2577
|
-
observedAttributes: [
|
|
2578
|
-
"items",
|
|
2579
|
-
"label",
|
|
2580
|
-
"open",
|
|
2581
|
-
"default-open",
|
|
2582
|
-
"disabled",
|
|
2583
|
-
"loop-focus",
|
|
2584
|
-
"highlight-item-on-hover",
|
|
2585
|
-
"side",
|
|
2586
|
-
"align",
|
|
2587
|
-
"side-offset",
|
|
2588
|
-
"align-offset"
|
|
2589
|
-
],
|
|
2590
|
-
transformProps: (raw) => ({
|
|
2591
|
-
items: coerceJson(raw.items),
|
|
2592
|
-
label: raw.label ?? void 0,
|
|
2593
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2594
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
2595
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled),
|
|
2596
|
-
loopFocus: raw["loop-focus"] == null ? void 0 : coerceBool(raw["loop-focus"]),
|
|
2597
|
-
highlightItemOnHover: raw["highlight-item-on-hover"] == null ? void 0 : coerceBool(raw["highlight-item-on-hover"]),
|
|
2598
|
-
side: raw.side ?? void 0,
|
|
2599
|
-
align: raw.align ?? void 0,
|
|
2600
|
-
sideOffset: coerceNumber(raw["side-offset"]),
|
|
2601
|
-
alignOffset: coerceNumber(raw["align-offset"])
|
|
2602
|
-
}),
|
|
2603
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2604
|
-
});
|
|
2605
|
-
defineElement("edx-direction", EdxDirection, {
|
|
2606
|
-
mode: "shadow",
|
|
2607
|
-
styles: ctx.styles,
|
|
2608
|
-
observedAttributes: ["direction"],
|
|
2609
|
-
transformProps: (raw) => ({ direction: raw.direction ?? void 0 })
|
|
2610
|
-
});
|
|
2611
|
-
registerOverlayElement("edx-hover-card", EdxHoverCard, ctx, {
|
|
2612
|
-
display: "inline-flex",
|
|
2613
|
-
observedAttributes: [
|
|
2614
|
-
"trigger-label",
|
|
2615
|
-
"heading",
|
|
2616
|
-
"description",
|
|
2617
|
-
"open",
|
|
2618
|
-
"default-open",
|
|
2619
|
-
"delay",
|
|
2620
|
-
"close-delay",
|
|
2621
|
-
"side",
|
|
2622
|
-
"align",
|
|
2623
|
-
"side-offset",
|
|
2624
|
-
"align-offset"
|
|
2625
|
-
],
|
|
2626
|
-
transformProps: (raw) => ({
|
|
2627
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2628
|
-
heading: raw.heading ?? void 0,
|
|
2629
|
-
description: raw.description ?? void 0,
|
|
2630
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2631
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
2632
|
-
delay: coerceNumber(raw.delay),
|
|
2633
|
-
closeDelay: coerceNumber(raw["close-delay"]),
|
|
2634
|
-
side: raw.side ?? void 0,
|
|
2635
|
-
align: raw.align ?? void 0,
|
|
2636
|
-
sideOffset: coerceNumber(raw["side-offset"]),
|
|
2637
|
-
alignOffset: coerceNumber(raw["align-offset"])
|
|
2638
|
-
}),
|
|
2639
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2640
|
-
});
|
|
2641
|
-
registerOverlayElement("edx-menubar", EdxMenubar, ctx, {
|
|
2642
|
-
display: "block",
|
|
2643
|
-
observedAttributes: [
|
|
2644
|
-
"menus",
|
|
2645
|
-
"disabled",
|
|
2646
|
-
"modal",
|
|
2647
|
-
"orientation",
|
|
2648
|
-
"loop-focus"
|
|
2649
|
-
],
|
|
2650
|
-
transformProps: (raw) => ({
|
|
2651
|
-
menus: coerceJson(raw.menus),
|
|
2652
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled),
|
|
2653
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
2654
|
-
orientation: raw.orientation ?? void 0,
|
|
2655
|
-
loopFocus: raw["loop-focus"] == null ? void 0 : coerceBool(raw["loop-focus"])
|
|
2656
|
-
})
|
|
2657
|
-
});
|
|
2658
|
-
defineElement("edx-message-scroller", EdxMessageScroller, {
|
|
2659
|
-
mode: ctx.mode,
|
|
2660
|
-
styles: ctx.styles,
|
|
2661
|
-
observedAttributes: [
|
|
2662
|
-
"items",
|
|
2663
|
-
"auto-scroll",
|
|
2664
|
-
"default-scroll-position",
|
|
2665
|
-
"scroll-edge-threshold",
|
|
2666
|
-
"scroll-previous-item-peek",
|
|
2667
|
-
"scroll-margin",
|
|
2668
|
-
"preserve-scroll-on-prepend",
|
|
2669
|
-
"button-direction",
|
|
2670
|
-
"button-behavior"
|
|
2671
|
-
],
|
|
2672
|
-
transformProps: (raw) => ({
|
|
2673
|
-
items: coerceJson(raw.items),
|
|
2674
|
-
autoScroll: raw["auto-scroll"] == null ? void 0 : coerceBool(raw["auto-scroll"]),
|
|
2675
|
-
defaultScrollPosition: raw["default-scroll-position"] ?? void 0,
|
|
2676
|
-
scrollEdgeThreshold: coerceNumber(raw["scroll-edge-threshold"]),
|
|
2677
|
-
scrollPreviousItemPeek: coerceNumber(raw["scroll-previous-item-peek"]),
|
|
2678
|
-
scrollMargin: coerceNumber(raw["scroll-margin"]),
|
|
2679
|
-
preserveScrollOnPrepend: raw["preserve-scroll-on-prepend"] == null ? void 0 : coerceBool(raw["preserve-scroll-on-prepend"]),
|
|
2680
|
-
buttonDirection: raw["button-direction"] ?? void 0,
|
|
2681
|
-
buttonBehavior: raw["button-behavior"] ?? void 0
|
|
2682
|
-
})
|
|
2683
|
-
});
|
|
2684
|
-
registerOverlayElement("edx-navigation-menu", EdxNavigationMenu, ctx, {
|
|
2685
|
-
display: "inline-flex",
|
|
2686
|
-
observedAttributes: [
|
|
2687
|
-
"items",
|
|
2688
|
-
"value",
|
|
2689
|
-
"default-value",
|
|
2690
|
-
"orientation",
|
|
2691
|
-
"delay",
|
|
2692
|
-
"close-delay",
|
|
2693
|
-
"align",
|
|
2694
|
-
"aria-label"
|
|
2695
|
-
],
|
|
2696
|
-
transformProps: (raw) => ({
|
|
2697
|
-
items: coerceJson(raw.items),
|
|
2698
|
-
value: raw.value ?? void 0,
|
|
2699
|
-
defaultValue: raw["default-value"] ?? void 0,
|
|
2700
|
-
orientation: raw.orientation ?? void 0,
|
|
2701
|
-
delay: coerceNumber(raw.delay),
|
|
2702
|
-
closeDelay: coerceNumber(raw["close-delay"]),
|
|
2703
|
-
align: raw.align ?? void 0,
|
|
2704
|
-
ariaLabel: raw["aria-label"] ?? void 0
|
|
2705
|
-
}),
|
|
2706
|
-
domProperties: { value: {
|
|
2707
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
2708
|
-
set: (host, value) => host.setAttribute("value", String(value ?? ""))
|
|
2709
|
-
} }
|
|
2710
|
-
});
|
|
2711
|
-
defineElement("edx-questionnaire", EdxQuestionnaire, {
|
|
2712
|
-
mode: ctx.mode,
|
|
2713
|
-
styles: ctx.styles,
|
|
2714
|
-
observedAttributes: [
|
|
2715
|
-
"name",
|
|
2716
|
-
"title",
|
|
2717
|
-
"description",
|
|
2718
|
-
"choices",
|
|
2719
|
-
"required",
|
|
2720
|
-
"multiple"
|
|
2721
|
-
],
|
|
2722
|
-
transformProps: (raw) => ({
|
|
2723
|
-
name: raw.name ?? void 0,
|
|
2724
|
-
title: raw.title ?? void 0,
|
|
2725
|
-
description: raw.description ?? void 0,
|
|
2726
|
-
choices: coerceJson(raw.choices),
|
|
2727
|
-
required: raw.required == null ? void 0 : coerceBool(raw.required),
|
|
2728
|
-
multiple: raw.multiple == null ? void 0 : coerceBool(raw.multiple)
|
|
2729
|
-
})
|
|
2730
|
-
});
|
|
2731
|
-
defineElement("edx-resizable", EdxResizable, {
|
|
2732
|
-
mode: "shadow",
|
|
2733
|
-
styles: ctx.styles,
|
|
2734
|
-
observedAttributes: [
|
|
2735
|
-
"first-size",
|
|
2736
|
-
"orientation",
|
|
2737
|
-
"disabled",
|
|
2738
|
-
"first-min-size",
|
|
2739
|
-
"first-max-size",
|
|
2740
|
-
"first-collapsible",
|
|
2741
|
-
"first-collapsed-size"
|
|
2742
|
-
],
|
|
2743
|
-
transformProps: (raw) => ({
|
|
2744
|
-
firstSize: coerceNumber(raw["first-size"]),
|
|
2745
|
-
orientation: raw.orientation ?? void 0,
|
|
2746
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled),
|
|
2747
|
-
firstMinSize: coerceNumber(raw["first-min-size"]),
|
|
2748
|
-
firstMaxSize: coerceNumber(raw["first-max-size"]),
|
|
2749
|
-
firstCollapsible: raw["first-collapsible"] == null ? void 0 : coerceBool(raw["first-collapsible"]),
|
|
2750
|
-
firstCollapsedSize: coerceNumber(raw["first-collapsed-size"])
|
|
2751
|
-
})
|
|
2752
|
-
});
|
|
2753
|
-
registerOverlayElement("edx-sheet", EdxSheet, ctx, {
|
|
2754
|
-
display: "inline-flex",
|
|
2755
|
-
observedAttributes: [
|
|
2756
|
-
"trigger-label",
|
|
2757
|
-
"heading",
|
|
2758
|
-
"description",
|
|
2759
|
-
"side",
|
|
2760
|
-
"open",
|
|
2761
|
-
"default-open",
|
|
2762
|
-
"modal",
|
|
2763
|
-
"disable-pointer-dismissal"
|
|
2764
|
-
],
|
|
2765
|
-
transformProps: (raw) => ({
|
|
2766
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2767
|
-
heading: raw.heading ?? void 0,
|
|
2768
|
-
description: raw.description ?? void 0,
|
|
2769
|
-
side: raw.side ?? void 0,
|
|
2770
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2771
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
2772
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
2773
|
-
disablePointerDismissal: raw["disable-pointer-dismissal"] == null ? void 0 : coerceBool(raw["disable-pointer-dismissal"])
|
|
2774
|
-
}),
|
|
2775
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2776
|
-
});
|
|
2777
|
-
registerOverlayElement("edx-sidebar", EdxSidebar, ctx, {
|
|
2778
|
-
observedAttributes: [
|
|
2779
|
-
"title",
|
|
2780
|
-
"items",
|
|
2781
|
-
"group-label",
|
|
2782
|
-
"side",
|
|
2783
|
-
"variant",
|
|
2784
|
-
"collapsible",
|
|
2785
|
-
"open",
|
|
2786
|
-
"default-open"
|
|
2787
|
-
],
|
|
2788
|
-
transformProps: (raw) => ({
|
|
2789
|
-
title: raw.title ?? void 0,
|
|
2790
|
-
items: coerceJson(raw.items),
|
|
2791
|
-
groupLabel: raw["group-label"] ?? void 0,
|
|
2792
|
-
side: raw.side ?? void 0,
|
|
2793
|
-
variant: raw.variant ?? void 0,
|
|
2794
|
-
collapsible: raw.collapsible ?? void 0,
|
|
2795
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2796
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"])
|
|
2797
|
-
}),
|
|
2798
|
-
domProperties: { open: {
|
|
2799
|
-
get: (host) => {
|
|
2800
|
-
const explicit = host.getAttribute("open");
|
|
2801
|
-
if (explicit != null) return coerceBool(explicit);
|
|
2802
|
-
const initial = host.getAttribute("default-open");
|
|
2803
|
-
return initial == null ? true : coerceBool(initial);
|
|
2804
|
-
},
|
|
2805
|
-
set: (host, value) => {
|
|
2806
|
-
host.removeAttribute("default-open");
|
|
2807
|
-
host.setAttribute("open", String(Boolean(value)));
|
|
2808
|
-
}
|
|
2809
|
-
} }
|
|
2810
|
-
});
|
|
2811
|
-
registerOverlayElement("edx-toast", EdxToast, ctx, {
|
|
2812
|
-
display: "inline-flex",
|
|
2813
|
-
observedAttributes: [
|
|
2814
|
-
"trigger-label",
|
|
2815
|
-
"title",
|
|
2816
|
-
"description",
|
|
2817
|
-
"type",
|
|
2818
|
-
"timeout"
|
|
2819
|
-
],
|
|
2820
|
-
transformProps: (raw) => ({
|
|
2821
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2822
|
-
title: raw.title ?? void 0,
|
|
2823
|
-
description: raw.description ?? void 0,
|
|
2824
|
-
type: raw.type ?? void 0,
|
|
2825
|
-
timeout: coerceNumber(raw.timeout)
|
|
2826
|
-
})
|
|
2827
|
-
});
|
|
2828
|
-
};
|
|
2829
|
-
//#endregion
|
|
2830
|
-
//#region ../elements/src/edx-label.tsx
|
|
2831
|
-
var EdxLabel = (props) => {
|
|
2832
|
-
return /* @__PURE__ */ jsx(Label, {
|
|
2833
|
-
htmlFor: props.for,
|
|
2834
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
2835
|
-
});
|
|
2836
|
-
};
|
|
2837
|
-
var registerEdxLabel = (ctx) => {
|
|
2838
|
-
defineElement("edx-label", EdxLabel, {
|
|
2839
|
-
mode: ctx.mode,
|
|
2840
|
-
styles: ctx.styles,
|
|
2841
|
-
display: "flex",
|
|
2842
|
-
observedAttributes: ["for"],
|
|
2843
|
-
transformProps: (raw) => ({ for: raw.for ?? void 0 })
|
|
2844
|
-
});
|
|
2845
|
-
};
|
|
2846
|
-
//#endregion
|
|
2847
|
-
//#region ../elements/src/edx-pagination.tsx
|
|
2848
|
-
var EdxPagination = (props) => {
|
|
2849
|
-
const { emit, host } = useEdxHost();
|
|
2850
|
-
const currentPage = props.page ?? 1;
|
|
2851
|
-
const totalPages = props.count ?? 1;
|
|
2852
|
-
const siblings = props.siblingCount ?? 1;
|
|
2853
|
-
return /* @__PURE__ */ jsx(Pagination, {
|
|
2854
|
-
page: currentPage,
|
|
2855
|
-
count: totalPages,
|
|
2856
|
-
siblingCount: siblings,
|
|
2857
|
-
onPageChange: (newPage) => {
|
|
2858
|
-
host.setAttribute("page", String(newPage));
|
|
2859
|
-
emit("edx-change", { value: newPage });
|
|
2860
|
-
}
|
|
2861
|
-
});
|
|
2862
|
-
};
|
|
2863
|
-
var registerEdxPagination = (ctx) => {
|
|
2864
|
-
defineElement("edx-pagination", EdxPagination, {
|
|
2865
|
-
mode: ctx.mode,
|
|
2866
|
-
styles: ctx.styles,
|
|
2867
|
-
observedAttributes: [
|
|
2868
|
-
"page",
|
|
2869
|
-
"count",
|
|
2870
|
-
"sibling-count"
|
|
2871
|
-
],
|
|
2872
|
-
transformProps: (raw) => ({
|
|
2873
|
-
page: coerceNumber(raw.page) ?? 1,
|
|
2874
|
-
count: coerceNumber(raw.count) ?? 1,
|
|
2875
|
-
siblingCount: coerceNumber(raw["sibling-count"]) ?? 1
|
|
2876
|
-
}),
|
|
2877
|
-
domProperties: { page: {
|
|
2878
|
-
get: (host) => {
|
|
2879
|
-
return coerceNumber(host.getAttribute("page")) ?? 1;
|
|
2880
|
-
},
|
|
2881
|
-
set: (host, value) => {
|
|
2882
|
-
host.setAttribute("page", String(value ?? 1));
|
|
2883
|
-
}
|
|
2884
|
-
} }
|
|
2885
|
-
});
|
|
2886
|
-
};
|
|
2887
|
-
//#endregion
|
|
2888
|
-
//#region ../elements/src/edx-popover.tsx
|
|
2889
|
-
/**
|
|
2890
|
-
* Click-triggered overlay, the same light-mode pattern as edx-dialog (registered
|
|
2891
|
-
* via registerOverlayElement, which pins mode:'light' so the Base UI portal can
|
|
2892
|
-
* land in document.body). Content is attribute-driven (no `<Slot />`): heading +
|
|
2893
|
-
* description cover the common popover body, mirroring the dialog header shape.
|
|
2894
|
-
*/
|
|
2895
|
-
var EdxPopover = (props) => {
|
|
2896
|
-
const { emit, host } = useEdxHost();
|
|
2897
|
-
return /* @__PURE__ */ jsxs(Popover, {
|
|
2898
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
2899
|
-
modal: props.modal,
|
|
2900
|
-
onOpenChange: (open) => {
|
|
2901
|
-
host.removeAttribute("default-open");
|
|
2902
|
-
reflectBool(host, "open", open);
|
|
2903
|
-
emit("edx-change", { open });
|
|
2904
|
-
},
|
|
2905
|
-
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
2906
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
2907
|
-
openOnHover: props.openOnHover,
|
|
2908
|
-
delay: props.delay,
|
|
2909
|
-
closeDelay: props.closeDelay,
|
|
2910
|
-
children: props.triggerLabel ?? "Open"
|
|
2911
|
-
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
2912
|
-
side: props.side,
|
|
2913
|
-
align: props.align,
|
|
2914
|
-
sideOffset: props.sideOffset,
|
|
2915
|
-
alignOffset: props.alignOffset,
|
|
2916
|
-
children: (props.heading || props.description) && /* @__PURE__ */ jsxs(PopoverHeader, { children: [props.heading && /* @__PURE__ */ jsx(PopoverTitle, { children: props.heading }), props.description && /* @__PURE__ */ jsx(PopoverDescription, { children: props.description })] })
|
|
2917
|
-
})]
|
|
2918
|
-
});
|
|
2919
|
-
};
|
|
2920
|
-
var registerEdxPopover = (ctx) => {
|
|
2921
|
-
registerOverlayElement("edx-popover", EdxPopover, ctx, {
|
|
2922
|
-
display: "inline-flex",
|
|
2923
|
-
observedAttributes: [
|
|
2924
|
-
"trigger-label",
|
|
2925
|
-
"heading",
|
|
2926
|
-
"description",
|
|
2927
|
-
"open",
|
|
2928
|
-
"default-open",
|
|
2929
|
-
"modal",
|
|
2930
|
-
"open-on-hover",
|
|
2931
|
-
"delay",
|
|
2932
|
-
"close-delay",
|
|
2933
|
-
"side",
|
|
2934
|
-
"align",
|
|
2935
|
-
"side-offset",
|
|
2936
|
-
"align-offset"
|
|
2937
|
-
],
|
|
2938
|
-
transformProps: (raw) => ({
|
|
2939
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
2940
|
-
heading: raw.heading ?? void 0,
|
|
2941
|
-
description: raw.description ?? void 0,
|
|
2942
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
2943
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
2944
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
2945
|
-
openOnHover: raw["open-on-hover"] == null ? void 0 : coerceBool(raw["open-on-hover"]),
|
|
2946
|
-
delay: coerceNumber(raw.delay),
|
|
2947
|
-
closeDelay: coerceNumber(raw["close-delay"]),
|
|
2948
|
-
side: raw.side ?? void 0,
|
|
2949
|
-
align: raw.align ?? void 0,
|
|
2950
|
-
sideOffset: coerceNumber(raw["side-offset"]),
|
|
2951
|
-
alignOffset: coerceNumber(raw["align-offset"])
|
|
2952
|
-
}),
|
|
2953
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
2954
|
-
});
|
|
2955
|
-
};
|
|
2956
|
-
//#endregion
|
|
2957
|
-
//#region ../elements/src/edx-progress.tsx
|
|
2958
|
-
var EdxProgress = (props) => {
|
|
2959
|
-
return /* @__PURE__ */ jsx(Progress, {
|
|
2960
|
-
value: props.value ?? null,
|
|
2961
|
-
min: props.min,
|
|
2962
|
-
max: props.max,
|
|
2963
|
-
"aria-label": props.label,
|
|
2964
|
-
"aria-valuetext": props.ariaValueText
|
|
2965
|
-
});
|
|
2966
|
-
};
|
|
2967
|
-
var registerEdxProgress = (ctx) => {
|
|
2968
|
-
defineElement("edx-progress", EdxProgress, {
|
|
2969
|
-
mode: ctx.mode,
|
|
2970
|
-
styles: ctx.styles,
|
|
2971
|
-
display: "block",
|
|
2972
|
-
observedAttributes: [
|
|
2973
|
-
"value",
|
|
2974
|
-
"label",
|
|
2975
|
-
"min",
|
|
2976
|
-
"max",
|
|
2977
|
-
"aria-valuetext"
|
|
2978
|
-
],
|
|
2979
|
-
transformProps: (raw) => ({
|
|
2980
|
-
value: raw.value === void 0 ? null : coerceNumber(raw.value) ?? null,
|
|
2981
|
-
label: raw.label ?? void 0,
|
|
2982
|
-
min: coerceNumber(raw.min),
|
|
2983
|
-
max: coerceNumber(raw.max),
|
|
2984
|
-
ariaValueText: raw["aria-valuetext"] ?? void 0
|
|
2985
|
-
})
|
|
2986
|
-
});
|
|
2987
|
-
};
|
|
2988
|
-
//#endregion
|
|
2989
|
-
//#region ../elements/src/edx-radio-group.tsx
|
|
2990
|
-
var EdxRadioGroup = (props) => {
|
|
2991
|
-
const { emit, host } = useEdxHost();
|
|
2992
|
-
const options = props.options ?? [];
|
|
2993
|
-
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
2994
|
-
value: props.value ?? props.defaultValue ?? "",
|
|
2995
|
-
disabled: props.disabled ?? false,
|
|
2996
|
-
readOnly: props.readonly ?? false,
|
|
2997
|
-
required: props.required ?? false,
|
|
2998
|
-
name: props.name,
|
|
2999
|
-
form: props.form,
|
|
3000
|
-
orientation: props.orientation ?? "vertical",
|
|
3001
|
-
"aria-invalid": props.invalid || void 0,
|
|
3002
|
-
"aria-label": props.ariaLabel,
|
|
3003
|
-
"aria-description": props.ariaDescription,
|
|
3004
|
-
onValueChange: (next) => {
|
|
3005
|
-
const value = String(next);
|
|
3006
|
-
host.removeAttribute("default-value");
|
|
3007
|
-
host.setAttribute("value", value);
|
|
3008
|
-
emit("edx-change", { value });
|
|
3009
|
-
},
|
|
3010
|
-
children: options.map((option) => /* @__PURE__ */ jsxs("div", {
|
|
3011
|
-
className: "flex items-center gap-2",
|
|
3012
|
-
children: [/* @__PURE__ */ jsx(RadioGroupItem, {
|
|
3013
|
-
value: option.value,
|
|
3014
|
-
disabled: (props.disabled ?? false) || option.disabled,
|
|
3015
|
-
"aria-invalid": props.invalid || void 0,
|
|
3016
|
-
id: `${props.name ?? "rg"}-${option.value}`
|
|
3017
|
-
}), /* @__PURE__ */ jsx("label", {
|
|
3018
|
-
htmlFor: `${props.name ?? "rg"}-${option.value}`,
|
|
3019
|
-
className: "text-sm font-medium leading-none",
|
|
3020
|
-
children: option.label
|
|
3021
|
-
})]
|
|
3022
|
-
}, option.value))
|
|
3023
|
-
});
|
|
3024
|
-
};
|
|
3025
|
-
var registerEdxRadioGroup = (ctx) => {
|
|
3026
|
-
defineElement("edx-radio-group", EdxRadioGroup, {
|
|
3027
|
-
mode: ctx.mode,
|
|
3028
|
-
styles: ctx.styles,
|
|
3029
|
-
display: "block",
|
|
3030
|
-
formAssociated: true,
|
|
3031
|
-
formValue: (props) => props.value ?? props.defaultValue ?? "",
|
|
3032
|
-
observedAttributes: [
|
|
3033
|
-
"options",
|
|
3034
|
-
"value",
|
|
3035
|
-
"default-value",
|
|
3036
|
-
"disabled",
|
|
3037
|
-
"readonly",
|
|
3038
|
-
"required",
|
|
3039
|
-
"name",
|
|
3040
|
-
"form",
|
|
3041
|
-
"invalid",
|
|
3042
|
-
"orientation",
|
|
3043
|
-
"aria-label",
|
|
3044
|
-
"aria-description"
|
|
3045
|
-
],
|
|
3046
|
-
transformProps: (raw) => ({
|
|
3047
|
-
options: coerceJson(raw.options) ?? [],
|
|
3048
|
-
value: raw.value ?? void 0,
|
|
3049
|
-
defaultValue: raw["default-value"] ?? void 0,
|
|
3050
|
-
disabled: coerceBool(raw.disabled),
|
|
3051
|
-
readonly: coerceBool(raw.readonly),
|
|
3052
|
-
required: coerceBool(raw.required),
|
|
3053
|
-
name: raw.name ?? void 0,
|
|
3054
|
-
form: raw.form ?? void 0,
|
|
3055
|
-
invalid: coerceBool(raw.invalid),
|
|
3056
|
-
orientation: raw.orientation ?? void 0,
|
|
3057
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3058
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
3059
|
-
}),
|
|
3060
|
-
domProperties: { value: {
|
|
3061
|
-
get: (host) => host.getAttribute("value") ?? host.getAttribute("default-value") ?? "",
|
|
3062
|
-
set: (host, value) => {
|
|
3063
|
-
host.setAttribute("value", String(value ?? ""));
|
|
3064
|
-
}
|
|
3065
|
-
} }
|
|
3066
|
-
});
|
|
3067
|
-
};
|
|
3068
|
-
//#endregion
|
|
3069
|
-
//#region ../elements/src/edx-scroll-area.tsx
|
|
3070
|
-
var EdxScrollArea = (props) => {
|
|
3071
|
-
const { emit } = useEdxHost();
|
|
3072
|
-
const refViewport = useRef(null);
|
|
3073
|
-
const style = {};
|
|
3074
|
-
if (props.height) style.height = props.height;
|
|
3075
|
-
if (props.width) style.width = props.width;
|
|
3076
|
-
const className = props.bordered ? "w-full rounded-md border border-border" : void 0;
|
|
3077
|
-
useEffect(() => {
|
|
3078
|
-
const viewport = refViewport.current;
|
|
3079
|
-
if (!viewport) return;
|
|
3080
|
-
const handleScroll = () => {
|
|
3081
|
-
emit("edx-scroll", {
|
|
3082
|
-
scrollTop: viewport.scrollTop,
|
|
3083
|
-
scrollLeft: viewport.scrollLeft
|
|
3084
|
-
});
|
|
3085
|
-
};
|
|
3086
|
-
viewport.addEventListener("scroll", handleScroll, { passive: true });
|
|
3087
|
-
return () => viewport.removeEventListener("scroll", handleScroll);
|
|
3088
|
-
}, [emit]);
|
|
3089
|
-
return /* @__PURE__ */ jsx(ScrollArea, {
|
|
3090
|
-
orientation: props.orientation ?? "vertical",
|
|
3091
|
-
type: props.type,
|
|
3092
|
-
viewPortId: props.viewportId,
|
|
3093
|
-
viewPortRef: refViewport,
|
|
3094
|
-
className,
|
|
3095
|
-
style,
|
|
3096
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
3097
|
-
});
|
|
3098
|
-
};
|
|
3099
|
-
var registerEdxScrollArea = (ctx) => {
|
|
3100
|
-
defineElement("edx-scroll-area", EdxScrollArea, {
|
|
3101
|
-
mode: "shadow",
|
|
3102
|
-
styles: ctx.styles,
|
|
3103
|
-
observedAttributes: [
|
|
3104
|
-
"orientation",
|
|
3105
|
-
"height",
|
|
3106
|
-
"width",
|
|
3107
|
-
"bordered",
|
|
3108
|
-
"type",
|
|
3109
|
-
"viewport-id"
|
|
3110
|
-
],
|
|
3111
|
-
transformProps: (raw) => ({
|
|
3112
|
-
orientation: raw.orientation ?? void 0,
|
|
3113
|
-
height: raw.height ?? void 0,
|
|
3114
|
-
width: raw.width ?? void 0,
|
|
3115
|
-
bordered: coerceBool(raw.bordered),
|
|
3116
|
-
type: raw.type ?? void 0,
|
|
3117
|
-
viewportId: raw["viewport-id"] ?? void 0
|
|
3118
|
-
}),
|
|
3119
|
-
domProperties: {
|
|
3120
|
-
scrollTop: {
|
|
3121
|
-
get: (host) => (host.shadowRoot?.querySelector("[data-slot=\"scroll-area-viewport\"]") ?? host.querySelector("[data-slot=\"scroll-area-viewport\"]"))?.scrollTop ?? 0,
|
|
3122
|
-
set: (host, value) => {
|
|
3123
|
-
const viewport = host.shadowRoot?.querySelector("[data-slot=\"scroll-area-viewport\"]") ?? host.querySelector("[data-slot=\"scroll-area-viewport\"]");
|
|
3124
|
-
if (viewport) viewport.scrollTop = Number(value) || 0;
|
|
3125
|
-
}
|
|
3126
|
-
},
|
|
3127
|
-
scrollLeft: {
|
|
3128
|
-
get: (host) => (host.shadowRoot?.querySelector("[data-slot=\"scroll-area-viewport\"]") ?? host.querySelector("[data-slot=\"scroll-area-viewport\"]"))?.scrollLeft ?? 0,
|
|
3129
|
-
set: (host, value) => {
|
|
3130
|
-
const viewport = host.shadowRoot?.querySelector("[data-slot=\"scroll-area-viewport\"]") ?? host.querySelector("[data-slot=\"scroll-area-viewport\"]");
|
|
3131
|
-
if (viewport) viewport.scrollLeft = Number(value) || 0;
|
|
3132
|
-
}
|
|
3133
|
-
}
|
|
3134
|
-
}
|
|
3135
|
-
});
|
|
3136
|
-
};
|
|
3137
|
-
//#endregion
|
|
3138
|
-
//#region ../elements/src/edx-select.tsx
|
|
3139
|
-
var isGroup = (entry) => "items" in entry && Array.isArray(entry.items);
|
|
3140
|
-
var renderFlatOptions = (items) => items.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
|
|
3141
|
-
value: opt.value,
|
|
3142
|
-
disabled: opt.disabled,
|
|
3143
|
-
children: opt.label
|
|
3144
|
-
}, opt.value));
|
|
3145
|
-
var EdxSelect = (props) => {
|
|
3146
|
-
const { emit, host } = useEdxHost();
|
|
3147
|
-
const portalContainer = usePortalContainer();
|
|
3148
|
-
const options = props.options ?? [];
|
|
3149
|
-
const hasGroups = options.some(isGroup);
|
|
3150
|
-
const renderOptions = () => {
|
|
3151
|
-
if (!hasGroups) return renderFlatOptions(options);
|
|
3152
|
-
const nodes = [];
|
|
3153
|
-
options.forEach((entry, idx) => {
|
|
3154
|
-
if (isGroup(entry)) {
|
|
3155
|
-
if (idx > 0) nodes.push(/* @__PURE__ */ jsx(SelectSeparator, {}, `sep-before-${entry.label}`));
|
|
3156
|
-
nodes.push(/* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: entry.label }), renderFlatOptions(entry.items)] }, entry.label));
|
|
3157
|
-
} else nodes.push(/* @__PURE__ */ jsx(SelectItem, {
|
|
3158
|
-
value: entry.value,
|
|
3159
|
-
children: entry.label
|
|
3160
|
-
}, entry.value));
|
|
3161
|
-
});
|
|
3162
|
-
return nodes;
|
|
3163
|
-
};
|
|
3164
|
-
const flatten = (entries) => entries.flatMap((entry) => isGroup(entry) ? entry.items : [entry]);
|
|
3165
|
-
const items = [{
|
|
3166
|
-
value: null,
|
|
3167
|
-
label: props.placeholder ?? "Select..."
|
|
3168
|
-
}, ...flatten(options).map((opt) => ({
|
|
3169
|
-
value: opt.value,
|
|
3170
|
-
label: opt.label
|
|
3171
|
-
}))];
|
|
3172
|
-
return /* @__PURE__ */ jsxs(Select, {
|
|
3173
|
-
items,
|
|
3174
|
-
value: props.value || null,
|
|
3175
|
-
disabled: props.disabled ?? false,
|
|
3176
|
-
readOnly: props.readonly ?? false,
|
|
3177
|
-
required: props.required ?? false,
|
|
3178
|
-
name: props.name,
|
|
3179
|
-
form: props.form,
|
|
3180
|
-
autoComplete: props.autoComplete,
|
|
3181
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
3182
|
-
modal: props.modal ?? true,
|
|
3183
|
-
highlightItemOnHover: props.highlightItemOnHover ?? true,
|
|
3184
|
-
onOpenChange: (open) => {
|
|
3185
|
-
host.removeAttribute("default-open");
|
|
3186
|
-
if (open) host.setAttribute("open", "true");
|
|
3187
|
-
else host.removeAttribute("open");
|
|
3188
|
-
emit("edx-open-change", { open });
|
|
3189
|
-
},
|
|
3190
|
-
onValueChange: (next) => {
|
|
3191
|
-
const value = next === null ? "" : String(next);
|
|
3192
|
-
host.setAttribute("value", value);
|
|
3193
|
-
emit("edx-change", { value });
|
|
3194
|
-
},
|
|
3195
|
-
children: [/* @__PURE__ */ jsx(SelectTrigger, {
|
|
3196
|
-
size: props.size ?? "default",
|
|
3197
|
-
disabled: props.disabled ?? false,
|
|
3198
|
-
"aria-label": props.ariaLabel ?? props.label ?? props.placeholder ?? "Select an option",
|
|
3199
|
-
"aria-description": props.ariaDescription,
|
|
3200
|
-
"aria-invalid": props.invalid || void 0,
|
|
3201
|
-
children: /* @__PURE__ */ jsx(SelectValue, {})
|
|
3202
|
-
}), /* @__PURE__ */ jsx(SelectContent, {
|
|
3203
|
-
portalContainer: portalContainer ?? void 0,
|
|
3204
|
-
children: renderOptions()
|
|
3205
|
-
})]
|
|
3206
|
-
});
|
|
3207
|
-
};
|
|
3208
|
-
var registerEdxSelect = (ctx) => {
|
|
3209
|
-
defineElement("edx-select", EdxSelect, {
|
|
3210
|
-
mode: ctx.mode,
|
|
3211
|
-
styles: ctx.styles,
|
|
3212
|
-
display: "block",
|
|
3213
|
-
delegateClick: true,
|
|
3214
|
-
formAssociated: true,
|
|
3215
|
-
formValue: (props) => props.value ?? "",
|
|
3216
|
-
observedAttributes: [
|
|
3217
|
-
"options",
|
|
3218
|
-
"value",
|
|
3219
|
-
"placeholder",
|
|
3220
|
-
"disabled",
|
|
3221
|
-
"readonly",
|
|
3222
|
-
"required",
|
|
3223
|
-
"name",
|
|
3224
|
-
"form",
|
|
3225
|
-
"autocomplete",
|
|
3226
|
-
"open",
|
|
3227
|
-
"default-open",
|
|
3228
|
-
"modal",
|
|
3229
|
-
"highlight-item-on-hover",
|
|
3230
|
-
"size",
|
|
3231
|
-
"label",
|
|
3232
|
-
"aria-label",
|
|
3233
|
-
"aria-description",
|
|
3234
|
-
"invalid"
|
|
3235
|
-
],
|
|
3236
|
-
transformProps: (raw) => ({
|
|
3237
|
-
options: coerceJson(raw.options),
|
|
3238
|
-
value: raw.value ?? void 0,
|
|
3239
|
-
placeholder: raw.placeholder ?? void 0,
|
|
3240
|
-
disabled: coerceBool(raw.disabled),
|
|
3241
|
-
readonly: coerceBool(raw.readonly),
|
|
3242
|
-
required: coerceBool(raw.required),
|
|
3243
|
-
name: raw.name ?? void 0,
|
|
3244
|
-
form: raw.form ?? void 0,
|
|
3245
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
3246
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
3247
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
3248
|
-
modal: raw.modal == null ? void 0 : coerceBool(raw.modal),
|
|
3249
|
-
highlightItemOnHover: raw["highlight-item-on-hover"] == null ? void 0 : coerceBool(raw["highlight-item-on-hover"]),
|
|
3250
|
-
size: raw.size ?? void 0,
|
|
3251
|
-
label: raw.label ?? void 0,
|
|
3252
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3253
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
3254
|
-
invalid: coerceBool(raw.invalid)
|
|
3255
|
-
}),
|
|
3256
|
-
domProperties: {
|
|
3257
|
-
value: {
|
|
3258
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
3259
|
-
set: (host, value) => {
|
|
3260
|
-
host.setAttribute("value", String(value ?? ""));
|
|
3261
|
-
}
|
|
3262
|
-
},
|
|
3263
|
-
open: booleanDomProperty("open", "default-open")
|
|
3264
|
-
}
|
|
3265
|
-
});
|
|
3266
|
-
};
|
|
3267
|
-
//#endregion
|
|
3268
|
-
//#region ../elements/src/edx-separator.tsx
|
|
3269
|
-
var EdxSeparator = (props) => {
|
|
3270
|
-
return /* @__PURE__ */ jsx(Separator, { orientation: props.orientation ?? "horizontal" });
|
|
3271
|
-
};
|
|
3272
|
-
var registerEdxSeparator = (ctx) => {
|
|
3273
|
-
defineElement("edx-separator", EdxSeparator, {
|
|
3274
|
-
mode: ctx.mode,
|
|
3275
|
-
styles: ctx.styles,
|
|
3276
|
-
observedAttributes: ["orientation"],
|
|
3277
|
-
transformProps: (raw) => ({ orientation: raw.orientation ?? void 0 })
|
|
3278
|
-
});
|
|
3279
|
-
};
|
|
3280
|
-
//#endregion
|
|
3281
|
-
//#region ../elements/src/edx-skeleton.tsx
|
|
3282
|
-
var EdxSkeleton = (props) => {
|
|
3283
|
-
const radiusClasses = props.class?.split(/\s+/).filter((className) => className === "rounded" || className.startsWith("rounded-")).join(" ");
|
|
3284
|
-
return /* @__PURE__ */ jsx(Skeleton, { className: cn("size-full", radiusClasses) });
|
|
3285
|
-
};
|
|
3286
|
-
var registerEdxSkeleton = (ctx) => {
|
|
3287
|
-
defineElement("edx-skeleton", EdxSkeleton, {
|
|
3288
|
-
mode: ctx.mode,
|
|
3289
|
-
styles: ctx.styles,
|
|
3290
|
-
display: "block",
|
|
3291
|
-
observedAttributes: ["class"],
|
|
3292
|
-
transformProps: (raw) => ({ class: raw.class ?? void 0 })
|
|
3293
|
-
});
|
|
3294
|
-
};
|
|
3295
|
-
//#endregion
|
|
3296
|
-
//#region ../elements/src/edx-slider.tsx
|
|
3297
|
-
var parseSliderValue = (raw) => {
|
|
3298
|
-
const range = coerceJson(raw);
|
|
3299
|
-
if (Array.isArray(range) && range.length > 0 && range.every((item) => typeof item === "number" && Number.isFinite(item))) return range;
|
|
3300
|
-
return coerceNumber(raw);
|
|
3301
|
-
};
|
|
3302
|
-
var serializeSliderValue = (value) => {
|
|
3303
|
-
return Array.isArray(value) ? JSON.stringify(value) : String(value);
|
|
3304
|
-
};
|
|
3305
|
-
var EdxSlider = (props) => {
|
|
3306
|
-
const { emit, host } = useEdxHost();
|
|
3307
|
-
return /* @__PURE__ */ jsx(Slider, {
|
|
3308
|
-
value: props.value,
|
|
3309
|
-
defaultValue: props.defaultValue,
|
|
3310
|
-
min: props.min,
|
|
3311
|
-
max: props.max,
|
|
3312
|
-
step: props.step,
|
|
3313
|
-
minStepsBetweenValues: props.minStepsBetweenValues,
|
|
3314
|
-
disabled: props.disabled ?? false,
|
|
3315
|
-
"aria-invalid": props.invalid || void 0,
|
|
3316
|
-
name: props.name,
|
|
3317
|
-
"aria-label": props.ariaLabel,
|
|
3318
|
-
"aria-description": props.ariaDescription,
|
|
3319
|
-
onValueChange: (next) => {
|
|
3320
|
-
const value = Array.isArray(next) ? [...next] : Number(next);
|
|
3321
|
-
host.removeAttribute("default-value");
|
|
3322
|
-
host.setAttribute("value", serializeSliderValue(value));
|
|
3323
|
-
emit("edx-input", { value });
|
|
3324
|
-
},
|
|
3325
|
-
onValueCommitted: (next) => {
|
|
3326
|
-
const value = Array.isArray(next) ? [...next] : Number(next);
|
|
3327
|
-
host.removeAttribute("default-value");
|
|
3328
|
-
host.setAttribute("value", serializeSliderValue(value));
|
|
3329
|
-
emit("edx-change", { value });
|
|
3330
|
-
}
|
|
3331
|
-
});
|
|
3332
|
-
};
|
|
3333
|
-
var registerEdxSlider = (ctx) => {
|
|
3334
|
-
defineElement("edx-slider", EdxSlider, {
|
|
3335
|
-
mode: ctx.mode,
|
|
3336
|
-
styles: ctx.styles,
|
|
3337
|
-
display: "block",
|
|
3338
|
-
delegateClick: true,
|
|
3339
|
-
formAssociated: true,
|
|
3340
|
-
formValue: (props, host) => {
|
|
3341
|
-
const value = props.value ?? props.defaultValue;
|
|
3342
|
-
if (Array.isArray(value)) return multipleFormValue(host, value.map((item) => String(item)));
|
|
3343
|
-
return value == null ? null : String(value);
|
|
3344
|
-
},
|
|
3345
|
-
observedAttributes: [
|
|
3346
|
-
"value",
|
|
3347
|
-
"default-value",
|
|
3348
|
-
"min",
|
|
3349
|
-
"max",
|
|
3350
|
-
"step",
|
|
3351
|
-
"min-steps-between-values",
|
|
3352
|
-
"disabled",
|
|
3353
|
-
"invalid",
|
|
3354
|
-
"name",
|
|
3355
|
-
"aria-label",
|
|
3356
|
-
"aria-description"
|
|
3357
|
-
],
|
|
3358
|
-
transformProps: (raw) => ({
|
|
3359
|
-
value: parseSliderValue(raw.value),
|
|
3360
|
-
defaultValue: parseSliderValue(raw["default-value"]),
|
|
3361
|
-
min: coerceNumber(raw.min),
|
|
3362
|
-
max: coerceNumber(raw.max),
|
|
3363
|
-
step: coerceNumber(raw.step),
|
|
3364
|
-
minStepsBetweenValues: coerceNumber(raw["min-steps-between-values"]),
|
|
3365
|
-
disabled: coerceBool(raw.disabled),
|
|
3366
|
-
invalid: coerceBool(raw.invalid),
|
|
3367
|
-
name: raw.name ?? void 0,
|
|
3368
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3369
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
3370
|
-
}),
|
|
3371
|
-
domProperties: { value: {
|
|
3372
|
-
get: (host) => {
|
|
3373
|
-
return parseSliderValue(host.getAttribute("value")) ?? parseSliderValue(host.getAttribute("default-value"));
|
|
3374
|
-
},
|
|
3375
|
-
set: (host, value) => {
|
|
3376
|
-
if (Array.isArray(value)) host.setAttribute("value", JSON.stringify(value));
|
|
3377
|
-
else host.setAttribute("value", String(value ?? ""));
|
|
3378
|
-
}
|
|
3379
|
-
} }
|
|
3380
|
-
});
|
|
3381
|
-
};
|
|
3382
|
-
//#endregion
|
|
3383
|
-
//#region ../elements/src/edx-switch.tsx
|
|
3384
|
-
var EdxSwitch = (props) => {
|
|
3385
|
-
const { emit, host } = useEdxHost();
|
|
3386
|
-
return /* @__PURE__ */ jsx(Switch, {
|
|
3387
|
-
checked: props.checked ?? props.defaultChecked ?? false,
|
|
3388
|
-
disabled: props.disabled ?? false,
|
|
3389
|
-
readOnly: props.readonly ?? false,
|
|
3390
|
-
required: props.required ?? false,
|
|
3391
|
-
name: props.name,
|
|
3392
|
-
form: props.form,
|
|
3393
|
-
value: props.value,
|
|
3394
|
-
uncheckedValue: props.uncheckedValue,
|
|
3395
|
-
size: props.size ?? "default",
|
|
3396
|
-
"aria-invalid": props.invalid || void 0,
|
|
3397
|
-
"aria-label": props.ariaLabel,
|
|
3398
|
-
"aria-description": props.ariaDescription,
|
|
3399
|
-
onCheckedChange: (next) => {
|
|
3400
|
-
const checked = next === true;
|
|
3401
|
-
host.removeAttribute("default-checked");
|
|
3402
|
-
if (checked) host.setAttribute("checked", "true");
|
|
3403
|
-
else host.removeAttribute("checked");
|
|
3404
|
-
emit("edx-change", { checked });
|
|
3405
|
-
}
|
|
3406
|
-
});
|
|
3407
|
-
};
|
|
3408
|
-
var registerEdxSwitch = (ctx) => {
|
|
3409
|
-
defineElement("edx-switch", EdxSwitch, {
|
|
3410
|
-
mode: ctx.mode,
|
|
3411
|
-
styles: ctx.styles,
|
|
3412
|
-
display: "inline-flex",
|
|
3413
|
-
delegateClick: true,
|
|
3414
|
-
formAssociated: true,
|
|
3415
|
-
formValue: (props) => {
|
|
3416
|
-
return props.checked ?? props.defaultChecked ?? false ? props.value ?? "on" : props.uncheckedValue ?? null;
|
|
3417
|
-
},
|
|
3418
|
-
observedAttributes: [
|
|
3419
|
-
"checked",
|
|
3420
|
-
"default-checked",
|
|
3421
|
-
"disabled",
|
|
3422
|
-
"readonly",
|
|
3423
|
-
"required",
|
|
3424
|
-
"name",
|
|
3425
|
-
"form",
|
|
3426
|
-
"value",
|
|
3427
|
-
"unchecked-value",
|
|
3428
|
-
"size",
|
|
3429
|
-
"invalid",
|
|
3430
|
-
"aria-label",
|
|
3431
|
-
"aria-description"
|
|
3432
|
-
],
|
|
3433
|
-
transformProps: (raw) => ({
|
|
3434
|
-
checked: raw.checked == null ? void 0 : coerceBool(raw.checked),
|
|
3435
|
-
defaultChecked: raw["default-checked"] == null ? void 0 : coerceBool(raw["default-checked"]),
|
|
3436
|
-
disabled: coerceBool(raw.disabled),
|
|
3437
|
-
readonly: coerceBool(raw.readonly),
|
|
3438
|
-
required: coerceBool(raw.required),
|
|
3439
|
-
name: raw.name ?? void 0,
|
|
3440
|
-
form: raw.form ?? void 0,
|
|
3441
|
-
value: raw.value ?? void 0,
|
|
3442
|
-
uncheckedValue: raw["unchecked-value"] ?? void 0,
|
|
3443
|
-
size: raw.size ?? void 0,
|
|
3444
|
-
invalid: coerceBool(raw.invalid),
|
|
3445
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3446
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
3447
|
-
}),
|
|
3448
|
-
domProperties: { checked: booleanDomProperty("checked", "default-checked") }
|
|
3449
|
-
});
|
|
3450
|
-
};
|
|
3451
|
-
//#endregion
|
|
3452
|
-
//#region ../elements/src/edx-table.tsx
|
|
3453
|
-
/** Map a column alignment to the Tailwind class shared by the header and its cells. */
|
|
3454
|
-
var alignClass = (align) => {
|
|
3455
|
-
if (align === "center") return "text-center";
|
|
3456
|
-
if (align === "right") return "text-right";
|
|
3457
|
-
};
|
|
3458
|
-
var EdxTable = (props) => {
|
|
3459
|
-
const columns = props.columns ?? [];
|
|
3460
|
-
const rows = props.rows ?? [];
|
|
3461
|
-
return /* @__PURE__ */ jsxs(Table, { children: [
|
|
3462
|
-
props.caption ? /* @__PURE__ */ jsx(TableCaption, { children: props.caption }) : null,
|
|
3463
|
-
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, {
|
|
3464
|
-
className: alignClass(col.align),
|
|
3465
|
-
children: col.header
|
|
3466
|
-
}, col.key)) }) }),
|
|
3467
|
-
/* @__PURE__ */ jsx(TableBody, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, {
|
|
3468
|
-
className: alignClass(col.align),
|
|
3469
|
-
children: row[col.key] ?? ""
|
|
3470
|
-
}, col.key)) }, rowIndex)) })
|
|
3471
|
-
] });
|
|
3472
|
-
};
|
|
3473
|
-
var registerEdxTable = (ctx) => {
|
|
3474
|
-
defineElement("edx-table", EdxTable, {
|
|
3475
|
-
mode: ctx.mode,
|
|
3476
|
-
styles: ctx.styles,
|
|
3477
|
-
observedAttributes: [
|
|
3478
|
-
"columns",
|
|
3479
|
-
"rows",
|
|
3480
|
-
"caption"
|
|
3481
|
-
],
|
|
3482
|
-
transformProps: (raw) => ({
|
|
3483
|
-
columns: coerceJson(raw.columns) ?? [],
|
|
3484
|
-
rows: coerceJson(raw.rows) ?? [],
|
|
3485
|
-
caption: raw.caption ?? void 0
|
|
3486
|
-
})
|
|
3487
|
-
});
|
|
3488
|
-
};
|
|
3489
|
-
//#endregion
|
|
3490
|
-
//#region ../elements/src/edx-tabs.tsx
|
|
3491
|
-
var EdxTabs = (props) => {
|
|
3492
|
-
const { emit, host } = useEdxHost();
|
|
3493
|
-
const items = props.tabs ?? [];
|
|
3494
|
-
const firstValue = items[0]?.value ?? "";
|
|
3495
|
-
const currentValue = props.value ?? props.defaultTab ?? firstValue;
|
|
3496
|
-
return /* @__PURE__ */ jsxs(Tabs, {
|
|
3497
|
-
value: currentValue,
|
|
3498
|
-
orientation: props.orientation ?? "horizontal",
|
|
3499
|
-
onValueChange: (next) => {
|
|
3500
|
-
host.setAttribute("value", next);
|
|
3501
|
-
emit("edx-change", { value: next });
|
|
3502
|
-
},
|
|
3503
|
-
children: [/* @__PURE__ */ jsx(TabsList, {
|
|
3504
|
-
variant: props.variant ?? "default",
|
|
3505
|
-
children: items.map((item) => /* @__PURE__ */ jsx(TabsTrigger, {
|
|
3506
|
-
value: item.value,
|
|
3507
|
-
disabled: item.disabled,
|
|
3508
|
-
children: item.label
|
|
3509
|
-
}, item.value))
|
|
3510
|
-
}), items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
|
|
3511
|
-
value: item.value,
|
|
3512
|
-
keepMounted: true,
|
|
3513
|
-
children: /* @__PURE__ */ jsx(Slot, { name: `panel-${item.value}` })
|
|
3514
|
-
}, item.value))]
|
|
3515
|
-
});
|
|
3516
|
-
};
|
|
3517
|
-
var registerEdxTabs = (ctx) => {
|
|
3518
|
-
defineElement("edx-tabs", EdxTabs, {
|
|
3519
|
-
mode: "shadow",
|
|
3520
|
-
styles: ctx.styles,
|
|
3521
|
-
observedAttributes: [
|
|
3522
|
-
"tabs",
|
|
3523
|
-
"value",
|
|
3524
|
-
"default-tab",
|
|
3525
|
-
"variant",
|
|
3526
|
-
"orientation"
|
|
3527
|
-
],
|
|
3528
|
-
transformProps: (raw) => ({
|
|
3529
|
-
tabs: coerceJson(raw.tabs),
|
|
3530
|
-
value: raw.value ?? void 0,
|
|
3531
|
-
defaultTab: raw["default-tab"] ?? void 0,
|
|
3532
|
-
variant: raw.variant ?? void 0,
|
|
3533
|
-
orientation: raw.orientation ?? void 0
|
|
3534
|
-
}),
|
|
3535
|
-
domProperties: { value: {
|
|
3536
|
-
get: (host) => {
|
|
3537
|
-
const explicitValue = host.getAttribute("value");
|
|
3538
|
-
if (explicitValue != null) return explicitValue;
|
|
3539
|
-
const defaultTab = host.getAttribute("default-tab");
|
|
3540
|
-
if (defaultTab != null) return defaultTab;
|
|
3541
|
-
return coerceJson(host.getAttribute("tabs"))?.[0]?.value ?? "";
|
|
3542
|
-
},
|
|
3543
|
-
set: (host, value) => {
|
|
3544
|
-
host.setAttribute("value", String(value ?? ""));
|
|
3545
|
-
}
|
|
3546
|
-
} }
|
|
3547
|
-
});
|
|
3548
|
-
};
|
|
3549
|
-
//#endregion
|
|
3550
|
-
//#region ../elements/src/edx-textarea.tsx
|
|
3551
|
-
var EdxTextarea = (props) => {
|
|
3552
|
-
const { emit, host } = useEdxHost();
|
|
3553
|
-
return /* @__PURE__ */ jsx(Textarea, {
|
|
3554
|
-
value: props.value ?? "",
|
|
3555
|
-
placeholder: props.placeholder,
|
|
3556
|
-
disabled: props.disabled ?? false,
|
|
3557
|
-
readOnly: props.readonly ?? false,
|
|
3558
|
-
required: props.required ?? false,
|
|
3559
|
-
rows: props.rows,
|
|
3560
|
-
"aria-invalid": props.invalid || void 0,
|
|
3561
|
-
name: props.name,
|
|
3562
|
-
form: props.form,
|
|
3563
|
-
autoComplete: props.autoComplete,
|
|
3564
|
-
minLength: props.minLength,
|
|
3565
|
-
maxLength: props.maxLength,
|
|
3566
|
-
wrap: props.wrap,
|
|
3567
|
-
spellCheck: props.spellCheck,
|
|
3568
|
-
autoFocus: props.autoFocus,
|
|
3569
|
-
"aria-label": props.ariaLabel,
|
|
3570
|
-
"aria-description": props.ariaDescription,
|
|
3571
|
-
onChange: (event) => {
|
|
3572
|
-
const { value } = event.target;
|
|
3573
|
-
host.setAttribute("value", value);
|
|
3574
|
-
emit("edx-change", { value });
|
|
3575
|
-
}
|
|
3576
|
-
});
|
|
3577
|
-
};
|
|
3578
|
-
var registerEdxTextarea = (ctx) => {
|
|
3579
|
-
defineElement("edx-textarea", EdxTextarea, {
|
|
3580
|
-
mode: ctx.mode,
|
|
3581
|
-
styles: ctx.styles,
|
|
3582
|
-
display: "flex",
|
|
3583
|
-
delegateClick: true,
|
|
3584
|
-
formAssociated: true,
|
|
3585
|
-
formValue: (props) => props.value ?? "",
|
|
3586
|
-
observedAttributes: [
|
|
3587
|
-
"value",
|
|
3588
|
-
"placeholder",
|
|
3589
|
-
"disabled",
|
|
3590
|
-
"readonly",
|
|
3591
|
-
"required",
|
|
3592
|
-
"rows",
|
|
3593
|
-
"invalid",
|
|
3594
|
-
"name",
|
|
3595
|
-
"form",
|
|
3596
|
-
"autocomplete",
|
|
3597
|
-
"minlength",
|
|
3598
|
-
"maxlength",
|
|
3599
|
-
"wrap",
|
|
3600
|
-
"spellcheck",
|
|
3601
|
-
"autofocus",
|
|
3602
|
-
"aria-label",
|
|
3603
|
-
"aria-description"
|
|
3604
|
-
],
|
|
3605
|
-
transformProps: (raw) => ({
|
|
3606
|
-
value: raw.value ?? void 0,
|
|
3607
|
-
placeholder: raw.placeholder ?? void 0,
|
|
3608
|
-
disabled: coerceBool(raw.disabled),
|
|
3609
|
-
readonly: coerceBool(raw.readonly),
|
|
3610
|
-
required: coerceBool(raw.required),
|
|
3611
|
-
rows: coerceNumber(raw.rows),
|
|
3612
|
-
invalid: coerceBool(raw.invalid),
|
|
3613
|
-
name: raw.name ?? void 0,
|
|
3614
|
-
form: raw.form ?? void 0,
|
|
3615
|
-
autoComplete: raw.autocomplete ?? void 0,
|
|
3616
|
-
minLength: coerceNumber(raw.minlength),
|
|
3617
|
-
maxLength: coerceNumber(raw.maxlength),
|
|
3618
|
-
wrap: raw.wrap ?? void 0,
|
|
3619
|
-
spellCheck: raw.spellcheck == null ? void 0 : coerceBool(raw.spellcheck),
|
|
3620
|
-
autoFocus: coerceBool(raw.autofocus),
|
|
3621
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3622
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
3623
|
-
}),
|
|
3624
|
-
domProperties: { value: {
|
|
3625
|
-
get: (host) => host.getAttribute("value") ?? "",
|
|
3626
|
-
set: (host, value) => {
|
|
3627
|
-
host.setAttribute("value", String(value ?? ""));
|
|
3628
|
-
}
|
|
3629
|
-
} }
|
|
3630
|
-
});
|
|
3631
|
-
};
|
|
3632
|
-
//#endregion
|
|
3633
|
-
//#region ../elements/src/edx-toggle.tsx
|
|
3634
|
-
var EdxToggle = (props) => {
|
|
3635
|
-
const { emit, host } = useEdxHost();
|
|
3636
|
-
return /* @__PURE__ */ jsx(Toggle, {
|
|
3637
|
-
pressed: props.pressed ?? props.defaultPressed ?? false,
|
|
3638
|
-
disabled: props.disabled ?? false,
|
|
3639
|
-
value: props.value,
|
|
3640
|
-
variant: props.variant ?? "default",
|
|
3641
|
-
size: props.size ?? "default",
|
|
3642
|
-
"aria-label": props.ariaLabel,
|
|
3643
|
-
"aria-description": props.ariaDescription,
|
|
3644
|
-
name: props.name,
|
|
3645
|
-
form: props.form,
|
|
3646
|
-
type: props.type ?? "button",
|
|
3647
|
-
autoFocus: props.autofocus,
|
|
3648
|
-
onPressedChange: (next) => {
|
|
3649
|
-
const pressed = next === true;
|
|
3650
|
-
host.removeAttribute("default-pressed");
|
|
3651
|
-
if (pressed) host.setAttribute("pressed", "true");
|
|
3652
|
-
else host.removeAttribute("pressed");
|
|
3653
|
-
emit("edx-change", { pressed });
|
|
3654
|
-
},
|
|
3655
|
-
children: /* @__PURE__ */ jsx(Slot, {})
|
|
3656
|
-
});
|
|
3657
|
-
};
|
|
3658
|
-
var registerEdxToggle = (ctx) => {
|
|
3659
|
-
defineElement("edx-toggle", EdxToggle, {
|
|
3660
|
-
mode: ctx.mode,
|
|
3661
|
-
styles: ctx.styles,
|
|
3662
|
-
display: "inline-flex",
|
|
3663
|
-
delegateClick: true,
|
|
3664
|
-
observedAttributes: [
|
|
3665
|
-
"pressed",
|
|
3666
|
-
"default-pressed",
|
|
3667
|
-
"disabled",
|
|
3668
|
-
"value",
|
|
3669
|
-
"variant",
|
|
3670
|
-
"size",
|
|
3671
|
-
"aria-label",
|
|
3672
|
-
"aria-description",
|
|
3673
|
-
"name",
|
|
3674
|
-
"form",
|
|
3675
|
-
"type",
|
|
3676
|
-
"autofocus"
|
|
3677
|
-
],
|
|
3678
|
-
transformProps: (raw) => ({
|
|
3679
|
-
pressed: raw.pressed == null ? void 0 : coerceBool(raw.pressed),
|
|
3680
|
-
defaultPressed: raw["default-pressed"] == null ? void 0 : coerceBool(raw["default-pressed"]),
|
|
3681
|
-
disabled: coerceBool(raw.disabled),
|
|
3682
|
-
value: raw.value ?? void 0,
|
|
3683
|
-
variant: raw.variant ?? void 0,
|
|
3684
|
-
size: raw.size ?? void 0,
|
|
3685
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3686
|
-
ariaDescription: raw["aria-description"] ?? void 0,
|
|
3687
|
-
name: raw.name ?? void 0,
|
|
3688
|
-
form: raw.form ?? void 0,
|
|
3689
|
-
type: raw.type ?? void 0,
|
|
3690
|
-
autofocus: coerceBool(raw.autofocus)
|
|
3691
|
-
}),
|
|
3692
|
-
domProperties: { pressed: booleanDomProperty("pressed", "default-pressed") }
|
|
3693
|
-
});
|
|
3694
|
-
};
|
|
3695
|
-
//#endregion
|
|
3696
|
-
//#region ../elements/src/edx-toggle-group.tsx
|
|
3697
|
-
var EdxToggleGroup = (props) => {
|
|
3698
|
-
const { emit, host } = useEdxHost();
|
|
3699
|
-
const options = props.options ?? [];
|
|
3700
|
-
const multiple = props.multiple ?? false;
|
|
3701
|
-
const variant = props.variant ?? "default";
|
|
3702
|
-
const size = props.size ?? "default";
|
|
3703
|
-
const disabled = props.disabled ?? false;
|
|
3704
|
-
const orientation = props.orientation ?? "horizontal";
|
|
3705
|
-
const spacing = props.spacing ?? 2;
|
|
3706
|
-
const rawValue = props.value ?? props.defaultValue;
|
|
3707
|
-
const groupValue = (() => {
|
|
3708
|
-
if (rawValue == null) return [];
|
|
3709
|
-
if (Array.isArray(rawValue)) return rawValue;
|
|
3710
|
-
return [rawValue];
|
|
3711
|
-
})();
|
|
3712
|
-
const handleValueChange = (next) => {
|
|
3713
|
-
const emitValue = multiple ? next : next[0] ?? "";
|
|
3714
|
-
const serialized = multiple ? JSON.stringify(next) : next[0] ?? "";
|
|
3715
|
-
host.removeAttribute("default-value");
|
|
3716
|
-
host.setAttribute("value", serialized);
|
|
3717
|
-
emit("edx-change", { value: emitValue });
|
|
3718
|
-
};
|
|
3719
|
-
return /* @__PURE__ */ jsx(ToggleGroup, {
|
|
3720
|
-
value: groupValue,
|
|
3721
|
-
multiple,
|
|
3722
|
-
variant,
|
|
3723
|
-
size,
|
|
3724
|
-
disabled,
|
|
3725
|
-
orientation,
|
|
3726
|
-
spacing,
|
|
3727
|
-
loopFocus: props.loopFocus ?? true,
|
|
3728
|
-
"aria-invalid": props.invalid || void 0,
|
|
3729
|
-
"aria-label": props.ariaLabel,
|
|
3730
|
-
"aria-description": props.ariaDescription,
|
|
3731
|
-
onValueChange: handleValueChange,
|
|
3732
|
-
children: options.map((opt) => /* @__PURE__ */ jsx(ToggleGroupItem, {
|
|
3733
|
-
value: opt.value,
|
|
3734
|
-
disabled: opt.disabled,
|
|
3735
|
-
children: opt.label
|
|
3736
|
-
}, opt.value))
|
|
3737
|
-
});
|
|
3738
|
-
};
|
|
3739
|
-
var registerEdxToggleGroup = (ctx) => {
|
|
3740
|
-
defineElement("edx-toggle-group", EdxToggleGroup, {
|
|
3741
|
-
mode: ctx.mode,
|
|
3742
|
-
styles: ctx.styles,
|
|
3743
|
-
display: "block",
|
|
3744
|
-
formAssociated: true,
|
|
3745
|
-
formValue: (props, host) => {
|
|
3746
|
-
const value = props.value ?? props.defaultValue;
|
|
3747
|
-
if (Array.isArray(value)) return multipleFormValue(host, value);
|
|
3748
|
-
return value ?? null;
|
|
3749
|
-
},
|
|
3750
|
-
observedAttributes: [
|
|
3751
|
-
"options",
|
|
3752
|
-
"value",
|
|
3753
|
-
"default-value",
|
|
3754
|
-
"multiple",
|
|
3755
|
-
"variant",
|
|
3756
|
-
"size",
|
|
3757
|
-
"disabled",
|
|
3758
|
-
"orientation",
|
|
3759
|
-
"spacing",
|
|
3760
|
-
"loop-focus",
|
|
3761
|
-
"name",
|
|
3762
|
-
"invalid",
|
|
3763
|
-
"aria-label",
|
|
3764
|
-
"aria-description"
|
|
3765
|
-
],
|
|
3766
|
-
transformProps: (raw) => {
|
|
3767
|
-
const options = coerceJson(raw.options) ?? [];
|
|
3768
|
-
const multiple = coerceBool(raw.multiple);
|
|
3769
|
-
const parseValue = (input) => {
|
|
3770
|
-
if (input == null) return;
|
|
3771
|
-
if (input === "") return multiple ? [] : "";
|
|
3772
|
-
if (multiple) return coerceJson(input) ?? [input];
|
|
3773
|
-
return input;
|
|
3774
|
-
};
|
|
3775
|
-
return {
|
|
3776
|
-
options,
|
|
3777
|
-
value: parseValue(raw.value),
|
|
3778
|
-
defaultValue: parseValue(raw["default-value"]),
|
|
3779
|
-
multiple,
|
|
3780
|
-
variant: raw.variant ?? void 0,
|
|
3781
|
-
size: raw.size ?? void 0,
|
|
3782
|
-
disabled: coerceBool(raw.disabled),
|
|
3783
|
-
orientation: raw.orientation ?? void 0,
|
|
3784
|
-
spacing: raw.spacing == null ? void 0 : Number(raw.spacing),
|
|
3785
|
-
loopFocus: raw["loop-focus"] == null ? void 0 : coerceBool(raw["loop-focus"]),
|
|
3786
|
-
name: raw.name ?? void 0,
|
|
3787
|
-
invalid: coerceBool(raw.invalid),
|
|
3788
|
-
ariaLabel: raw["aria-label"] ?? void 0,
|
|
3789
|
-
ariaDescription: raw["aria-description"] ?? void 0
|
|
3790
|
-
};
|
|
3791
|
-
},
|
|
3792
|
-
domProperties: { value: {
|
|
3793
|
-
get: (host) => {
|
|
3794
|
-
const raw = host.getAttribute("value") ?? host.getAttribute("default-value") ?? "";
|
|
3795
|
-
if (host.hasAttribute("multiple")) return coerceJson(raw) ?? (raw === "" ? [] : [raw]);
|
|
3796
|
-
return raw;
|
|
3797
|
-
},
|
|
3798
|
-
set: (host, value) => {
|
|
3799
|
-
if (Array.isArray(value)) {
|
|
3800
|
-
host.setAttribute("multiple", "");
|
|
3801
|
-
host.setAttribute("value", JSON.stringify(value));
|
|
3802
|
-
return;
|
|
3803
|
-
}
|
|
3804
|
-
host.setAttribute("value", String(value ?? ""));
|
|
3805
|
-
}
|
|
3806
|
-
} }
|
|
3807
|
-
});
|
|
3808
|
-
};
|
|
3809
|
-
//#endregion
|
|
3810
|
-
//#region ../elements/src/edx-tooltip.tsx
|
|
3811
|
-
/**
|
|
3812
|
-
* Hover/focus overlay, the same light-mode pattern as edx-dialog and edx-drawer
|
|
3813
|
-
* (registered via registerOverlayElement, which pins mode:'light' so the Base UI
|
|
3814
|
-
* portal can land in document.body). Content is fully attribute-driven (no
|
|
3815
|
-
* `<Slot />`): a tooltip's popup body is short label text, not arbitrary markup.
|
|
3816
|
-
*/
|
|
3817
|
-
var EdxTooltip = (props) => {
|
|
3818
|
-
const { emit, host } = useEdxHost();
|
|
3819
|
-
return /* @__PURE__ */ jsx(TooltipProvider, {
|
|
3820
|
-
delay: props.delay,
|
|
3821
|
-
closeDelay: props.closeDelay,
|
|
3822
|
-
children: /* @__PURE__ */ jsxs(Tooltip, {
|
|
3823
|
-
open: props.open ?? props.defaultOpen ?? false,
|
|
3824
|
-
disabled: props.disabled,
|
|
3825
|
-
disableHoverablePopup: props.disableHoverablePopup,
|
|
3826
|
-
trackCursorAxis: props.trackCursorAxis === "none" ? void 0 : props.trackCursorAxis,
|
|
3827
|
-
onOpenChange: (open) => {
|
|
3828
|
-
host.removeAttribute("default-open");
|
|
3829
|
-
reflectBool(host, "open", open);
|
|
3830
|
-
emit("edx-change", { open });
|
|
3831
|
-
},
|
|
3832
|
-
children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
3833
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
3834
|
-
closeDelay: props.closeDelay,
|
|
3835
|
-
closeOnClick: props.closeOnClick ?? true,
|
|
3836
|
-
children: props.triggerLabel ?? "Hover"
|
|
3837
|
-
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
3838
|
-
side: props.side ?? "top",
|
|
3839
|
-
align: props.align ?? "center",
|
|
3840
|
-
sideOffset: props.sideOffset ?? 4,
|
|
3841
|
-
alignOffset: props.alignOffset,
|
|
3842
|
-
children: props.content ?? ""
|
|
3843
|
-
})]
|
|
3844
|
-
})
|
|
3845
|
-
});
|
|
3846
|
-
};
|
|
3847
|
-
var registerEdxTooltip = (ctx) => {
|
|
3848
|
-
registerOverlayElement("edx-tooltip", EdxTooltip, ctx, {
|
|
3849
|
-
display: "inline-flex",
|
|
3850
|
-
observedAttributes: [
|
|
3851
|
-
"trigger-label",
|
|
3852
|
-
"content",
|
|
3853
|
-
"side",
|
|
3854
|
-
"align",
|
|
3855
|
-
"side-offset",
|
|
3856
|
-
"align-offset",
|
|
3857
|
-
"open",
|
|
3858
|
-
"default-open",
|
|
3859
|
-
"delay",
|
|
3860
|
-
"close-delay",
|
|
3861
|
-
"disabled",
|
|
3862
|
-
"close-on-click",
|
|
3863
|
-
"disable-hoverable-popup",
|
|
3864
|
-
"track-cursor-axis"
|
|
3865
|
-
],
|
|
3866
|
-
transformProps: (raw) => ({
|
|
3867
|
-
triggerLabel: raw["trigger-label"] ?? void 0,
|
|
3868
|
-
content: raw.content ?? void 0,
|
|
3869
|
-
side: raw.side ?? void 0,
|
|
3870
|
-
align: raw.align ?? void 0,
|
|
3871
|
-
sideOffset: coerceNumber(raw["side-offset"]),
|
|
3872
|
-
alignOffset: coerceNumber(raw["align-offset"]),
|
|
3873
|
-
open: raw.open == null ? void 0 : coerceBool(raw.open),
|
|
3874
|
-
defaultOpen: raw["default-open"] == null ? void 0 : coerceBool(raw["default-open"]),
|
|
3875
|
-
delay: coerceNumber(raw.delay),
|
|
3876
|
-
closeDelay: coerceNumber(raw["close-delay"]),
|
|
3877
|
-
disabled: raw.disabled == null ? void 0 : coerceBool(raw.disabled),
|
|
3878
|
-
closeOnClick: raw["close-on-click"] == null ? void 0 : coerceBool(raw["close-on-click"]),
|
|
3879
|
-
disableHoverablePopup: raw["disable-hoverable-popup"] == null ? void 0 : coerceBool(raw["disable-hoverable-popup"]),
|
|
3880
|
-
trackCursorAxis: raw["track-cursor-axis"] ?? void 0
|
|
3881
|
-
}),
|
|
3882
|
-
domProperties: { open: booleanDomProperty("open", "default-open") }
|
|
3883
|
-
});
|
|
3884
|
-
};
|
|
3885
|
-
//#endregion
|
|
3886
|
-
//#region ../elements/src/edx-video-player.tsx
|
|
3887
|
-
var EdxVideoPlayer = (props) => {
|
|
3888
|
-
const { emit } = useEdxHost();
|
|
3889
|
-
return /* @__PURE__ */ jsx(VideoPlayer, {
|
|
3890
|
-
src: props.src,
|
|
3891
|
-
poster: props.poster,
|
|
3892
|
-
title: props.title,
|
|
3893
|
-
description: props.description,
|
|
3894
|
-
muted: props.muted ?? false,
|
|
3895
|
-
loop: props.loop ?? false,
|
|
3896
|
-
disabled: props.disabled ?? false,
|
|
3897
|
-
width: props.width,
|
|
3898
|
-
height: props.height,
|
|
3899
|
-
ratio: props.ratio,
|
|
3900
|
-
"aria-label": props.ariaLabel ?? "Video player",
|
|
3901
|
-
onPlay: () => emit("edx-play", {}),
|
|
3902
|
-
onPause: () => emit("edx-pause", {}),
|
|
3903
|
-
onEnded: () => emit("edx-ended", {}),
|
|
3904
|
-
onTimeUpdate: (currentTime, duration) => emit("edx-timeupdate", {
|
|
3905
|
-
currentTime,
|
|
3906
|
-
duration
|
|
3907
|
-
})
|
|
3908
|
-
});
|
|
3909
|
-
};
|
|
3910
|
-
var registerEdxVideoPlayer = (ctx) => {
|
|
3911
|
-
defineElement("edx-video-player", EdxVideoPlayer, {
|
|
3912
|
-
mode: ctx.mode,
|
|
3913
|
-
styles: ctx.styles,
|
|
3914
|
-
display: "block",
|
|
3915
|
-
observedAttributes: [
|
|
3916
|
-
"src",
|
|
3917
|
-
"poster",
|
|
3918
|
-
"title",
|
|
3919
|
-
"description",
|
|
3920
|
-
"muted",
|
|
3921
|
-
"loop",
|
|
3922
|
-
"disabled",
|
|
3923
|
-
"width",
|
|
3924
|
-
"height",
|
|
3925
|
-
"ratio",
|
|
3926
|
-
"aria-label"
|
|
3927
|
-
],
|
|
3928
|
-
transformProps: (raw) => ({
|
|
3929
|
-
src: raw.src ?? void 0,
|
|
3930
|
-
poster: raw.poster ?? void 0,
|
|
3931
|
-
title: raw.title ?? void 0,
|
|
3932
|
-
description: raw.description ?? void 0,
|
|
3933
|
-
muted: coerceBool(raw.muted),
|
|
3934
|
-
loop: coerceBool(raw.loop),
|
|
3935
|
-
disabled: coerceBool(raw.disabled),
|
|
3936
|
-
width: raw.width ?? void 0,
|
|
3937
|
-
height: raw.height ?? void 0,
|
|
3938
|
-
ratio: raw.ratio ?? void 0,
|
|
3939
|
-
ariaLabel: raw["aria-label"] ?? void 0
|
|
3940
|
-
})
|
|
3941
|
-
});
|
|
3942
|
-
};
|
|
3943
|
-
//#endregion
|
|
3944
|
-
//#region ../elements/src/index.ts
|
|
3945
|
-
var REGISTRARS = [
|
|
3946
|
-
registerEdxAccordion,
|
|
3947
|
-
registerEdxAlert,
|
|
3948
|
-
registerEdxAudioPlayer,
|
|
3949
|
-
registerEdxAvatar,
|
|
3950
|
-
registerEdxBadge,
|
|
3951
|
-
registerEdxBreadcrumb,
|
|
3952
|
-
registerEdxButton,
|
|
3953
|
-
registerEdxButtonGroup,
|
|
3954
|
-
registerEdxCalendar,
|
|
3955
|
-
registerEdxCard,
|
|
3956
|
-
registerEdxCheckbox,
|
|
3957
|
-
registerEdxCombobox,
|
|
3958
|
-
registerEdxContentComponents,
|
|
3959
|
-
registerEdxDialog,
|
|
3960
|
-
registerEdxDrawer,
|
|
3961
|
-
registerEdxDropdownMenu,
|
|
3962
|
-
registerEdxField,
|
|
3963
|
-
registerEdxIndicator,
|
|
3964
|
-
registerEdxInput,
|
|
3965
|
-
registerEdxInputGroup,
|
|
3966
|
-
registerEdxInputOtp,
|
|
3967
|
-
registerEdxInteractiveComponents,
|
|
3968
|
-
registerEdxLabel,
|
|
3969
|
-
registerEdxPagination,
|
|
3970
|
-
registerEdxPopover,
|
|
3971
|
-
registerEdxProgress,
|
|
3972
|
-
registerEdxRadioGroup,
|
|
3973
|
-
registerEdxScrollArea,
|
|
3974
|
-
registerEdxSelect,
|
|
3975
|
-
registerEdxSeparator,
|
|
3976
|
-
registerEdxSkeleton,
|
|
3977
|
-
registerEdxSlider,
|
|
3978
|
-
registerEdxSwitch,
|
|
3979
|
-
registerEdxTable,
|
|
3980
|
-
registerEdxTextarea,
|
|
3981
|
-
registerEdxTabs,
|
|
3982
|
-
registerEdxToggle,
|
|
3983
|
-
registerEdxToggleGroup,
|
|
3984
|
-
registerEdxTooltip,
|
|
3985
|
-
registerEdxVideoPlayer
|
|
3986
|
-
];
|
|
3987
|
-
/**
|
|
3988
|
-
* Register every Edynamix custom element. Call once at startup. Pass `mode`
|
|
3989
|
-
* (or call setDefaultMode first) plus `styles` for shadow mode.
|
|
3990
|
-
*/
|
|
3991
|
-
var registerElements$1 = (options = {}) => {
|
|
3992
|
-
const ctx = {
|
|
3993
|
-
mode: options.mode,
|
|
3994
|
-
styles: options.styles
|
|
3995
|
-
};
|
|
3996
|
-
for (const register of REGISTRARS) register(ctx);
|
|
3997
|
-
};
|
|
3998
|
-
//#endregion
|
|
3999
|
-
//#region src/styles.css?inline
|
|
4000
|
-
var styles_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n :root, :host {\n --shimmer-angle: 20deg;\n }\n\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scroll-snap-strictness: proximity;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-content: \"\";\n --tw-scrollbar-thumb: #0000;\n --tw-scrollbar-track: #0000;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-animation-delay: 0s;\n --tw-animation-direction: normal;\n --tw-animation-duration: initial;\n --tw-animation-fill-mode: none;\n --tw-animation-iteration-count: 1;\n --tw-enter-blur: 0;\n --tw-enter-opacity: 1;\n --tw-enter-rotate: 0;\n --tw-enter-scale: 1;\n --tw-enter-translate-x: 0;\n --tw-enter-translate-y: 0;\n --tw-exit-blur: 0;\n --tw-exit-opacity: 1;\n --tw-exit-rotate: 0;\n --tw-exit-scale: 1;\n --tw-exit-translate-x: 0;\n --tw-exit-translate-y: 0;\n --scroll-fade-t: 0px;\n --scroll-fade-b: 0px;\n --scroll-fade-s: 0px;\n --scroll-fade-e: 0px;\n --scroll-fade-mask: initial;\n --shimmer-image: initial;\n --shimmer-text-fill: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Inter\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --spacing: .25rem;\n --container-xs: 20rem;\n --container-sm: 24rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --tracking-tight: -.025em;\n --tracking-widest: .1em;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --radius-md: calc(var(--radius) * .8);\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;\n --blur-xs: 4px;\n --aspect-video: 16 / 9;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-border: var(--border);\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n\n :root {\n color-scheme: light;\n }\n\n :root.dark, .dark {\n color-scheme: dark;\n }\n\n .edx-root, .edx-root *, .edx-root :before, .edx-root :after {\n box-sizing: border-box;\n border: 0 solid var(--border);\n }\n\n .edx-root {\n -webkit-font-smoothing: antialiased;\n color: var(--foreground);\n font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);\n line-height: 1.5;\n }\n\n .edx-root .edx-root {\n color: inherit;\n font-family: inherit;\n }\n\n .edx-root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {\n margin: 0;\n }\n\n .edx-root :where(button, input, select, textarea) {\n color: inherit;\n font: inherit;\n letter-spacing: inherit;\n }\n\n .edx-root :where(button, [role=\"button\"]):not(:disabled) {\n cursor: pointer;\n }\n\n .edx-root :where(ul, ol) {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .\\@container\\/card-header {\n container: card-header / inline-size;\n }\n\n .pointer-events-auto {\n pointer-events: auto;\n }\n\n .pointer-events-none {\n pointer-events: none;\n }\n\n .collapse {\n visibility: collapse;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n .visible {\n visibility: visible;\n }\n\n .sr-only {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .inset-0 {\n inset: 0;\n }\n\n .inset-x-0 {\n inset-inline: 0;\n }\n\n .inset-x-4 {\n inset-inline: calc(var(--spacing) * 4);\n }\n\n .inset-y-0 {\n inset-block: 0;\n }\n\n .inset-s-1\\/2 {\n inset-inline-start: 50%;\n }\n\n .-top-12 {\n top: calc(var(--spacing) * -12);\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1\\.5 {\n top: calc(var(--spacing) * 1.5);\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-1\\/3 {\n top: 33.3333%;\n }\n\n .top-2 {\n top: calc(var(--spacing) * 2);\n }\n\n .top-2\\.5 {\n top: calc(var(--spacing) * 2.5);\n }\n\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n\n .top-3\\.5 {\n top: calc(var(--spacing) * 3.5);\n }\n\n .top-\\[60\\%\\] {\n top: 60%;\n }\n\n .top-full {\n top: 100%;\n }\n\n .top-px {\n top: 1px;\n }\n\n .-right-12 {\n right: calc(var(--spacing) * -12);\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-1 {\n right: var(--spacing);\n }\n\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n\n .right-2\\.5 {\n right: calc(var(--spacing) * 2.5);\n }\n\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n\n .-bottom-12 {\n bottom: calc(var(--spacing) * -12);\n }\n\n .bottom-0 {\n bottom: 0;\n }\n\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n\n .-left-12 {\n left: calc(var(--spacing) * -12);\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\.5 {\n left: calc(var(--spacing) * 1.5);\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-2 {\n left: calc(var(--spacing) * 2);\n }\n\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n\n .isolate {\n isolation: isolate;\n }\n\n .z-0 {\n z-index: 0;\n }\n\n .z-1 {\n z-index: 1;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-20 {\n z-index: 20;\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .z-100 {\n z-index: 100;\n }\n\n .z-\\[calc\\(1000-var\\(--toast-index\\)\\)\\] {\n z-index: calc(1000 - var(--toast-index));\n }\n\n .order-first {\n order: -9999;\n }\n\n .order-last {\n order: 9999;\n }\n\n .col-start-1 {\n grid-column-start: 1;\n }\n\n .col-start-2 {\n grid-column-start: 2;\n }\n\n .col-start-3 {\n grid-column-start: 3;\n }\n\n .row-span-2 {\n grid-row: span 2 / span 2;\n }\n\n .row-start-1 {\n grid-row-start: 1;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n\n .-mx-4 {\n margin-inline: calc(var(--spacing) * -4);\n }\n\n .mx-2 {\n margin-inline: calc(var(--spacing) * 2);\n }\n\n .mx-3\\.5 {\n margin-inline: calc(var(--spacing) * 3.5);\n }\n\n .mx-10 {\n margin-inline: calc(var(--spacing) * 10);\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-0\\.5 {\n margin-block: calc(var(--spacing) * .5);\n }\n\n .my-1 {\n margin-block: var(--spacing);\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .my-auto {\n margin-block: auto;\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .-mt-4 {\n margin-top: calc(var(--spacing) * -4);\n }\n\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * .5);\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-auto {\n margin-top: auto;\n }\n\n .-mb-4 {\n margin-bottom: calc(var(--spacing) * -4);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .-ml-4 {\n margin-left: calc(var(--spacing) * -4);\n }\n\n .ml-1 {\n margin-left: var(--spacing);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n\n .no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .block {\n display: block;\n }\n\n .contents {\n display: contents;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline {\n display: inline;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .table {\n display: table;\n }\n\n .table-caption {\n display: table-caption;\n }\n\n .table-cell {\n display: table-cell;\n }\n\n .table-row {\n display: table-row;\n }\n\n .field-sizing-content {\n field-sizing: content;\n }\n\n .aspect-\\(--ratio\\) {\n aspect-ratio: var(--ratio);\n }\n\n .aspect-auto {\n aspect-ratio: auto;\n }\n\n .aspect-square {\n aspect-ratio: 1;\n }\n\n .aspect-video {\n aspect-ratio: var(--aspect-video);\n }\n\n .size-\\(--cell-size\\) {\n width: var(--cell-size);\n height: var(--cell-size);\n }\n\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n\n .size-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n\n .size-3 {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .size-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .size-5 {\n width: calc(var(--spacing) * 5);\n height: calc(var(--spacing) * 5);\n }\n\n .size-6 {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .size-7 {\n width: calc(var(--spacing) * 7);\n height: calc(var(--spacing) * 7);\n }\n\n .size-8 {\n width: calc(var(--spacing) * 8);\n height: calc(var(--spacing) * 8);\n }\n\n .size-9 {\n width: calc(var(--spacing) * 9);\n height: calc(var(--spacing) * 9);\n }\n\n .size-10 {\n width: calc(var(--spacing) * 10);\n height: calc(var(--spacing) * 10);\n }\n\n .size-auto {\n width: auto;\n height: auto;\n }\n\n .size-full {\n width: 100%;\n height: 100%;\n }\n\n .h-\\(--cell-size\\) {\n height: var(--cell-size);\n }\n\n .h-\\(--height\\) {\n height: var(--height);\n }\n\n .h-\\(--popup-height\\) {\n height: var(--popup-height);\n }\n\n .h-\\(--positioner-height\\) {\n height: var(--positioner-height);\n }\n\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-8\\! {\n height: calc(var(--spacing) * 8) !important;\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-28 {\n height: calc(var(--spacing) * 28);\n }\n\n .h-32 {\n height: calc(var(--spacing) * 32);\n }\n\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n\n .h-64 {\n height: calc(var(--spacing) * 64);\n }\n\n .h-\\[calc\\(100\\%-1px\\)\\] {\n height: calc(100% - 1px);\n }\n\n .h-\\[var\\(--accordion-panel-height\\)\\] {\n height: var(--accordion-panel-height);\n }\n\n .h-auto {\n height: auto;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-max {\n height: max-content;\n }\n\n .h-px {\n height: 1px;\n }\n\n .h-svh {\n height: 100svh;\n }\n\n .max-h-\\(--available-height\\) {\n max-height: var(--available-height);\n }\n\n .max-h-60 {\n max-height: calc(var(--spacing) * 60);\n }\n\n .max-h-72 {\n max-height: calc(var(--spacing) * 72);\n }\n\n .min-h-0 {\n min-height: 0;\n }\n\n .min-h-4 {\n min-height: calc(var(--spacing) * 4);\n }\n\n .min-h-11 {\n min-height: calc(var(--spacing) * 11);\n }\n\n .min-h-16 {\n min-height: calc(var(--spacing) * 16);\n }\n\n .min-h-64 {\n min-height: calc(var(--spacing) * 64);\n }\n\n .min-h-\\[1lh\\] {\n min-height: 1lh;\n }\n\n .min-h-full {\n min-height: 100%;\n }\n\n .min-h-svh {\n min-height: 100svh;\n }\n\n .w-\\(--anchor-width\\) {\n width: var(--anchor-width);\n }\n\n .w-\\(--cell-size\\) {\n width: var(--cell-size);\n }\n\n .w-\\(--popup-width\\) {\n width: var(--popup-width);\n }\n\n .w-\\(--positioner-width\\) {\n width: var(--positioner-width);\n }\n\n .w-\\(--sidebar-width\\) {\n width: var(--sidebar-width);\n }\n\n .w-0 {\n width: 0;\n }\n\n .w-1 {\n width: var(--spacing);\n }\n\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\/4 {\n width: 75%;\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-fit {\n width: fit-content;\n }\n\n .w-full {\n width: 100%;\n }\n\n .w-max {\n width: max-content;\n }\n\n .w-px {\n width: 1px;\n }\n\n .max-w-\\(--available-width\\) {\n max-width: var(--available-width);\n }\n\n .max-w-\\(--skeleton-width\\) {\n max-width: var(--skeleton-width);\n }\n\n .max-w-\\[80\\%\\] {\n max-width: 80%;\n }\n\n .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n max-width: calc(100% - 2rem);\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .max-w-max {\n max-width: max-content;\n }\n\n .max-w-sm {\n max-width: var(--container-sm);\n }\n\n .max-w-xs {\n max-width: var(--container-xs);\n }\n\n .min-w-\\(--cell-size\\) {\n min-width: var(--cell-size);\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-5 {\n min-width: calc(var(--spacing) * 5);\n }\n\n .min-w-8 {\n min-width: calc(var(--spacing) * 8);\n }\n\n .min-w-32 {\n min-width: calc(var(--spacing) * 32);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-40 {\n min-width: calc(var(--spacing) * 40);\n }\n\n .min-w-\\[14ch\\] {\n min-width: 14ch;\n }\n\n .min-w-\\[96px\\] {\n min-width: 96px;\n }\n\n .min-w-\\[var\\(--anchor-width\\)\\] {\n min-width: var(--anchor-width);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .grow {\n flex-grow: 1;\n }\n\n .grow-0 {\n flex-grow: 0;\n }\n\n .basis-full {\n flex-basis: 100%;\n }\n\n .caption-bottom {\n caption-side: bottom;\n }\n\n .border-collapse {\n border-collapse: collapse;\n }\n\n .origin-\\(--transform-origin\\), .origin-\\[var\\(--transform-origin\\)\\] {\n transform-origin: var(--transform-origin);\n }\n\n .origin-bottom {\n transform-origin: bottom;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-x-px {\n --tw-translate-x: -1px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1\\/2 {\n --tw-translate-x: calc(1 / 2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-px {\n --tw-translate-x: 1px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-3\\/4 {\n --tw-translate-y: calc(calc(3 / 4 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-y-0 {\n --tw-translate-y: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-y-1\\/2 {\n --tw-translate-y: calc(1 / 2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-y-3\\/4 {\n --tw-translate-y: calc(3 / 4 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-y-\\[--spacing\\(0\\.45\\)\\] {\n --tw-translate-y: calc(var(--spacing) * .45);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-y-\\[calc\\(-50\\%-2px\\)\\] {\n --tw-translate-y: calc(-50% - 2px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .rotate-45 {\n rotate: 45deg;\n }\n\n .rotate-90 {\n rotate: 90deg;\n }\n\n .\\[transform\\:translateX\\(var\\(--toast-swipe-movement-x\\)\\)_translateY\\(calc\\(var\\(--toast-swipe-movement-y\\)-\\(var\\(--toast-index\\)\\*var\\(--peek\\)\\)-\\(var\\(--shrink\\)\\*var\\(--height\\)\\)\\)\\)_scale\\(var\\(--scale\\)\\)\\] {\n transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)))) scale(var(--scale));\n }\n\n .scroll-fade-x {\n --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n --scroll-fade-inline: linear-gradient(to right,\n transparent 0,\n #000 var(--scroll-fade-s, 0px),\n #000 calc(100% - var(--scroll-fade-e, 0px)),\n transparent 100%);\n }\n\n .scroll-fade-x:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n --scroll-fade-inline: linear-gradient(to left,\n transparent 0,\n #000 var(--scroll-fade-s, 0px),\n #000 calc(100% - var(--scroll-fade-e, 0px)),\n transparent 100%);\n }\n\n .scroll-fade-x {\n -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n -webkit-mask-composite: source-in;\n -webkit-mask-composite: source-in;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n }\n\n @supports (animation-timeline: scroll()) {\n .scroll-fade-x {\n animation: 1ms ease-in-out scroll-fade-reveal-s, 1ms ease-in-out scroll-fade-reveal-e;\n animation-timeline: scroll(self inline), scroll(self inline);\n animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;\n animation-fill-mode: both;\n }\n }\n\n @supports not (animation-timeline: scroll()) {\n .scroll-fade-x {\n --scroll-fade-s: var(--_scroll-fade-size-s);\n --scroll-fade-e: var(--_scroll-fade-size-e);\n }\n }\n\n .scroll-fade-b {\n --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n --scroll-fade-mask: linear-gradient(to bottom,\n #000 0,\n #000 calc(100% - var(--scroll-fade-b, 0px)),\n transparent 100%);\n -webkit-mask-image: var(--scroll-fade-mask);\n -webkit-mask-image: var(--scroll-fade-mask);\n -webkit-mask-image: var(--scroll-fade-mask);\n mask-image: var(--scroll-fade-mask);\n -webkit-mask-composite: source-in;\n -webkit-mask-composite: source-in;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n }\n\n @supports (animation-timeline: scroll()) {\n .scroll-fade-b {\n animation: 1ms ease-in-out scroll-fade-reveal-b;\n animation-timeline: scroll(self y);\n animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;\n animation-fill-mode: both;\n }\n }\n\n @supports not (animation-timeline: scroll()) {\n .scroll-fade-b {\n --scroll-fade-b: var(--_scroll-fade-size-b);\n }\n }\n\n .animate-caret-blink {\n animation: 1.25s ease-out infinite caret-blink;\n }\n\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n\n .animate-spin {\n animation: var(--animate-spin);\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .cursor-text {\n cursor: text;\n }\n\n .touch-manipulation {\n touch-action: manipulation;\n }\n\n .touch-none {\n touch-action: none;\n }\n\n .resize-none {\n resize: none;\n }\n\n .resize-y {\n resize: vertical;\n }\n\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n\n .snap-mandatory {\n --tw-scroll-snap-strictness: mandatory;\n }\n\n .scroll-px-1 {\n scroll-padding-inline: var(--spacing);\n }\n\n .scroll-py-1 {\n scroll-padding-block: var(--spacing);\n }\n\n .scrollbar-none {\n scrollbar-width: none;\n }\n\n .scrollbar-thin {\n scrollbar-width: thin;\n }\n\n .scrollbar-gutter-stable {\n scrollbar-gutter: stable;\n }\n\n .list-none {\n list-style-type: none;\n }\n\n .appearance-none {\n appearance: none;\n }\n\n .auto-rows-min {\n grid-auto-rows: min-content;\n }\n\n .grid-cols-\\[minmax\\(0\\,1fr\\)_auto_auto\\] {\n grid-template-columns: minmax(0, 1fr) auto auto;\n }\n\n .grid-rows-\\[auto_1fr\\] {\n grid-template-rows: auto 1fr;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .place-content-center {\n place-content: center;\n }\n\n .place-items-center {\n place-items: center;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .items-start {\n align-items: flex-start;\n }\n\n .items-stretch {\n align-items: stretch;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.-space-x-2 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .self-end {\n align-self: flex-end;\n }\n\n .self-start {\n align-self: flex-start;\n }\n\n .self-stretch {\n align-self: stretch;\n }\n\n .justify-self-end {\n justify-self: flex-end;\n }\n\n .justify-self-start {\n justify-self: flex-start;\n }\n\n .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-x-auto {\n overflow-x: auto;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .overscroll-contain {\n overscroll-behavior: contain;\n }\n\n .overscroll-x-contain {\n overscroll-behavior-x: contain;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-\\(--cell-radius\\) {\n border-radius: var(--cell-radius);\n }\n\n .rounded-2xl {\n border-radius: calc(var(--radius) * 1.8);\n }\n\n .rounded-4xl {\n border-radius: calc(var(--radius) * 2.6);\n }\n\n .rounded-\\[2px\\] {\n border-radius: 2px;\n }\n\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n\n .rounded-\\[calc\\(var\\(--radius\\)-3px\\)\\] {\n border-radius: calc(var(--radius) - 3px);\n }\n\n .rounded-\\[inherit\\] {\n border-radius: inherit;\n }\n\n .rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\] {\n border-radius: min(var(--radius-md), 10px);\n }\n\n .rounded-\\[min\\(var\\(--radius-md\\)\\,12px\\)\\] {\n border-radius: min(var(--radius-md), 12px);\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius);\n }\n\n .rounded-lg\\! {\n border-radius: var(--radius) !important;\n }\n\n .rounded-md {\n border-radius: calc(var(--radius) * .8);\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: calc(var(--radius) * .6);\n }\n\n .rounded-xl {\n border-radius: calc(var(--radius) * 1.4);\n }\n\n .rounded-xl\\! {\n border-radius: calc(var(--radius) * 1.4) !important;\n }\n\n .rounded-t-xl {\n border-top-left-radius: calc(var(--radius) * 1.4);\n border-top-right-radius: calc(var(--radius) * 1.4);\n }\n\n .rounded-l-\\(--cell-radius\\) {\n border-top-left-radius: var(--cell-radius);\n border-bottom-left-radius: var(--cell-radius);\n }\n\n .rounded-tl-sm {\n border-top-left-radius: calc(var(--radius) * .6);\n }\n\n .rounded-r-\\(--cell-radius\\) {\n border-top-right-radius: var(--cell-radius);\n border-bottom-right-radius: var(--cell-radius);\n }\n\n .rounded-b-xl {\n border-bottom-right-radius: calc(var(--radius) * 1.4);\n border-bottom-left-radius: calc(var(--radius) * 1.4);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-\\[1\\.5px\\] {\n border-style: var(--tw-border-style);\n border-width: 1.5px;\n }\n\n .border-y {\n border-block-style: var(--tw-border-style);\n border-block-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-\\(--color-border\\) {\n border-color: var(--color-border);\n }\n\n .border-border, .border-border\\/50 {\n border-color: var(--border);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-border\\/50 {\n border-color: color-mix(in oklab, var(--border) 50%, transparent);\n }\n }\n\n .border-input, .border-input\\/30 {\n border-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-input\\/30 {\n border-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n\n .border-primary\\/50 {\n border-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .border-primary\\/50 {\n border-color: color-mix(in oklab, var(--primary) 50%, transparent);\n }\n }\n\n .border-sidebar-border {\n border-color: var(--sidebar-border);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .border-t-transparent {\n border-top-color: #0000;\n }\n\n .border-l-transparent {\n border-left-color: #0000;\n }\n\n .bg-\\(--color-bg\\) {\n background-color: var(--color-bg);\n }\n\n .bg-\\[Canvas\\] {\n background-color: canvas;\n }\n\n .bg-background {\n background-color: var(--background);\n }\n\n .bg-border {\n background-color: var(--border);\n }\n\n .bg-card {\n background-color: var(--card);\n }\n\n .bg-destructive, .bg-destructive\\/10 {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-destructive\\/10 {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n\n .bg-foreground {\n background-color: var(--foreground);\n }\n\n .bg-info-ring\\/40 {\n background-color: var(--info-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-info-ring\\/40 {\n background-color: color-mix(in oklab, var(--info-ring) 40%, transparent);\n }\n }\n\n .bg-input\\/30 {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-input\\/30 {\n background-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n\n .bg-muted {\n background-color: var(--muted);\n }\n\n .bg-muted-foreground, .bg-muted-foreground\\/50 {\n background-color: var(--muted-foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-muted-foreground\\/50 {\n background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\n }\n }\n\n .bg-muted\\/50 {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-muted\\/50 {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .bg-overlay {\n background-color: var(--overlay);\n }\n\n .bg-popover {\n background-color: var(--popover);\n }\n\n .bg-primary {\n background-color: var(--primary);\n }\n\n .bg-primary-foreground {\n background-color: var(--primary-foreground);\n }\n\n .bg-primary\\/20 {\n background-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-primary\\/20 {\n background-color: color-mix(in oklab, var(--primary) 20%, transparent);\n }\n }\n\n .bg-secondary {\n background-color: var(--secondary);\n }\n\n .bg-sidebar {\n background-color: var(--sidebar);\n }\n\n .bg-sidebar-border {\n background-color: var(--sidebar-border);\n }\n\n .bg-success {\n background-color: var(--success);\n }\n\n .bg-success-ring\\/40 {\n background-color: var(--success-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-success-ring\\/40 {\n background-color: color-mix(in oklab, var(--success-ring) 40%, transparent);\n }\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-warning {\n background-color: var(--warning);\n }\n\n .bg-warning-ring\\/40 {\n background-color: var(--warning-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-warning-ring\\/40 {\n background-color: color-mix(in oklab, var(--warning-ring) 40%, transparent);\n }\n }\n\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n\n .from-background {\n --tw-gradient-from: var(--background);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .via-background\\/75 {\n --tw-gradient-via: var(--background);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .via-background\\/75 {\n --tw-gradient-via: color-mix(in oklab, var(--background) 75%, transparent);\n }\n }\n\n .via-background\\/75 {\n --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n\n .to-transparent {\n --tw-gradient-to: transparent;\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .bg-clip-padding {\n background-clip: padding-box;\n }\n\n .fill-foreground {\n fill: var(--foreground);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .p-0 {\n padding: 0;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-2\\.5 {\n padding: calc(var(--spacing) * 2.5);\n }\n\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n\n .p-\\[3px\\] {\n padding: 3px;\n }\n\n .p-px {\n padding: 1px;\n }\n\n .px-\\(--cell-size\\) {\n padding-inline: var(--cell-size);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n\n .py-\\[2px\\] {\n padding-block: 2px;\n }\n\n .pt-0 {\n padding-top: 0;\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n\n .pt-12 {\n padding-top: calc(var(--spacing) * 12);\n }\n\n .pr-1\\.5 {\n padding-right: calc(var(--spacing) * 1.5);\n }\n\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\n }\n\n .pb-0 {\n padding-bottom: 0;\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pl-1\\.5 {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-2\\.5 {\n padding-left: calc(var(--spacing) * 2.5);\n }\n\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n\n .pl-7 {\n padding-left: calc(var(--spacing) * 7);\n }\n\n .pl-8 {\n padding-left: calc(var(--spacing) * 8);\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-start {\n text-align: start;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-mono {\n font-family: var(--font-mono);\n }\n\n .font-sans {\n font-family: var(--font-sans);\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-sm\\/relaxed {\n font-size: var(--text-sm);\n line-height: var(--leading-relaxed);\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .text-\\[0\\.8rem\\] {\n font-size: .8rem;\n }\n\n .text-\\[0\\.625rem\\] {\n font-size: .625rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-normal {\n --tw-leading: var(--leading-normal);\n line-height: var(--leading-normal);\n }\n\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n\n .text-balance {\n text-wrap: balance;\n }\n\n .text-pretty {\n text-wrap: pretty;\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\[CanvasText\\] {\n color: canvastext;\n }\n\n .text-background {\n color: var(--background);\n }\n\n .text-card-foreground {\n color: var(--card-foreground);\n }\n\n .text-current {\n color: currentColor;\n }\n\n .text-destructive {\n color: var(--destructive);\n }\n\n .text-destructive-foreground {\n color: var(--destructive-foreground);\n }\n\n .text-foreground, .text-foreground\\/60 {\n color: var(--foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .text-foreground\\/60 {\n color: color-mix(in oklab, var(--foreground) 60%, transparent);\n }\n }\n\n .text-foreground\\/70 {\n color: var(--foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .text-foreground\\/70 {\n color: color-mix(in oklab, var(--foreground) 70%, transparent);\n }\n }\n\n .text-info {\n color: var(--info);\n }\n\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n\n .text-popover-foreground {\n color: var(--popover-foreground);\n }\n\n .text-primary {\n color: var(--primary);\n }\n\n .text-primary-foreground {\n color: var(--primary-foreground);\n }\n\n .text-secondary-foreground {\n color: var(--secondary-foreground);\n }\n\n .text-sidebar-foreground, .text-sidebar-foreground\\/70 {\n color: var(--sidebar-foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .text-sidebar-foreground\\/70 {\n color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);\n }\n }\n\n .text-success {\n color: var(--success);\n }\n\n .text-warning {\n color: var(--warning);\n }\n\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );\n }\n\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-60 {\n opacity: .6;\n }\n\n .bg-blend-color {\n background-blend-mode: color;\n }\n\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[0_0_0_1px_var\\(--sidebar-border\\)\\] {\n --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-none\\! {\n --tw-shadow: 0 0 #0000 !important;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-0 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-3 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .ring-background {\n --tw-ring-color: var(--background);\n }\n\n .ring-card {\n --tw-ring-color: var(--card);\n }\n\n .ring-foreground\\/10 {\n --tw-ring-color: var(--foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .ring-foreground\\/10 {\n --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);\n }\n }\n\n .ring-sidebar-ring {\n --tw-ring-color: var(--sidebar-ring);\n }\n\n .ring-offset-background {\n --tw-ring-offset-color: var(--background);\n }\n\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (forced-colors: active) {\n .outline-hidden {\n outline-offset: 2px;\n outline: 2px solid #0000;\n }\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[color\\,box-shadow\\,background-color\\] {\n transition-property: color, box-shadow, background-color;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[height\\] {\n transition-property: height;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[left\\,right\\,width\\] {\n transition-property: left, right, width;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[margin\\,opacity\\] {\n transition-property: margin, opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[opacity\\,transform\\,translate\\] {\n transition-property: opacity, transform, translate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[opacity\\,transform\\,width\\,height\\,scale\\,translate\\] {\n transition-property: opacity, transform, width, height, scale, translate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[top\\,left\\,right\\,bottom\\] {\n transition-property: top, left, right, bottom;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[transform\\,scale\\,opacity\\] {\n transition-property: transform, scale, opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[translate\\,scale\\,opacity\\] {\n transition-property: translate, scale, opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[width\\,height\\,padding\\] {\n transition-property: width, height, padding;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-\\[width\\] {\n transition-property: width;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-none {\n transition-property: none;\n }\n\n .duration-100 {\n --tw-duration: .1s;\n transition-duration: .1s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-250 {\n --tw-duration: .25s;\n transition-duration: .25s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .duration-1000 {\n --tw-duration: 1s;\n transition-duration: 1s;\n }\n\n .duration-\\[0\\.35s\\] {\n --tw-duration: .35s;\n transition-duration: .35s;\n }\n\n .ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\] {\n --tw-ease: cubic-bezier(.22,1,.36,1);\n transition-timing-function: cubic-bezier(.22, 1, .36, 1);\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .ease-linear {\n --tw-ease: linear;\n transition-timing-function: linear;\n }\n\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .will-change-transform {\n will-change: transform;\n }\n\n .contain-content {\n contain: content;\n }\n\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n .\\[--cell-radius\\:var\\(--radius-md\\)\\] {\n --cell-radius: var(--radius-md);\n }\n\n .\\[--cell-size\\:--spacing\\(7\\)\\] {\n --cell-size: calc(var(--spacing) * 7);\n }\n\n .\\[--gap\\:0\\.75rem\\] {\n --gap: .75rem;\n }\n\n .\\[--height\\:var\\(--toast-frontmost-height\\,var\\(--toast-height\\)\\)\\] {\n --height: var(--toast-frontmost-height, var(--toast-height));\n }\n\n .\\[--offset-y\\:calc\\(var\\(--toast-offset-y\\)\\*-1\\+calc\\(var\\(--toast-index\\)\\*var\\(--gap\\)\\*-1\\)\\+var\\(--toast-swipe-movement-y\\)\\)\\] {\n --offset-y: calc(var(--toast-offset-y) * -1 + calc(var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y));\n }\n\n .\\[--peek\\:0\\.75rem\\] {\n --peek: .75rem;\n }\n\n .\\[--scale\\:calc\\(max\\(0\\,1-\\(var\\(--toast-index\\)\\*0\\.1\\)\\)\\)\\] {\n --scale: calc(max(0, 1 - (var(--toast-index) * .1)));\n }\n\n .\\[--shrink\\:calc\\(1-var\\(--scale\\)\\)\\] {\n --shrink: calc(1 - var(--scale));\n }\n\n .\\[contain-intrinsic-size\\:auto_10rem\\] {\n contain-intrinsic-size: auto 10rem;\n }\n\n .\\[content-visibility\\:auto\\] {\n content-visibility: auto;\n }\n\n .\\[transition\\:transform_500ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\,opacity_500ms\\,height_150ms\\] {\n transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s, height .15s;\n }\n\n .fade-out {\n --tw-exit-opacity: 0;\n }\n\n .running {\n animation-play-state: running;\n }\n\n .group-focus-within\\/menu-item\\:opacity-100:is(:where(.group\\/menu-item):focus-within *) {\n opacity: 1;\n }\n\n @media (hover: hover) {\n .group-hover\\/menu-item\\:opacity-100:is(:where(.group\\/menu-item):hover *), .group-hover\\/scroll-area\\:opacity-100:is(:where(.group\\/scroll-area):hover *) {\n opacity: 1;\n }\n }\n\n .group-focus\\/context-menu-item\\:text-accent-foreground:is(:where(.group\\/context-menu-item):focus *), .group-focus\\/dropdown-menu-item\\:text-accent-foreground:is(:where(.group\\/dropdown-menu-item):focus *), .group-focus\\/menubar-item\\:text-accent-foreground:is(:where(.group\\/menubar-item):focus *) {\n color: var(--accent-foreground);\n }\n\n .group-has-disabled\\/field\\:pointer-events-none:is(:where(.group\\/field):has(:disabled) *) {\n pointer-events: none;\n }\n\n .group-has-disabled\\/field\\:opacity-50:is(:where(.group\\/field):has(:disabled) *) {\n opacity: .5;\n }\n\n .group-has-data-\\[sidebar\\=menu-action\\]\\/menu-item\\:pr-8:is(:where(.group\\/menu-item):has([data-sidebar=\"menu-action\"]) *) {\n padding-right: calc(var(--spacing) * 8);\n }\n\n .group-has-data-\\[size\\=lg\\]\\/avatar-group\\:size-10:is(:where(.group\\/avatar-group):has([data-size=\"lg\"]) *) {\n width: calc(var(--spacing) * 10);\n height: calc(var(--spacing) * 10);\n }\n\n .group-has-data-\\[size\\=sm\\]\\/avatar-group\\:size-6:is(:where(.group\\/avatar-group):has([data-size=\"sm\"]) *) {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .group-has-data-\\[slot\\=command-shortcut\\]\\/command-item\\:hidden:is(:where(.group\\/command-item):has([data-slot=\"command-shortcut\"]) *) {\n display: none;\n }\n\n .group-has-data-\\[slot\\=item-description\\]\\/item\\:translate-y-0\\.5:is(:where(.group\\/item):has([data-slot=\"item-description\"]) *) {\n --tw-translate-y: calc(var(--spacing) * .5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-has-data-\\[slot\\=item-description\\]\\/item\\:self-start:is(:where(.group\\/item):has([data-slot=\"item-description\"]) *) {\n align-self: flex-start;\n }\n\n .group-has-data-\\[slot\\=message-footer\\]\\/message\\:-translate-y-8:is(:where(.group\\/message):has([data-slot=\"message-footer\"]) *) {\n --tw-translate-y: calc(var(--spacing) * -8);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-has-data-\\[slot\\=questionnaire-choice-description\\]\\/questionnaire-choice\\:translate-y-0\\.5:is(:where(.group\\/questionnaire-choice):has([data-slot=\"questionnaire-choice-description\"]) *) {\n --tw-translate-y: calc(var(--spacing) * .5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-has-data-\\[variant\\=ghost\\]\\/message\\:px-0:is(:where(.group\\/message):has([data-variant=\"ghost\"]) *) {\n padding-inline: 0;\n }\n\n .group-has-\\[\\>input\\]\\/input-group\\:pt-2:is(:where(.group\\/input-group):has( > input) *) {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .group-has-\\[\\>input\\]\\/input-group\\:pb-2:is(:where(.group\\/input-group):has( > input) *) {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .group-has-\\[\\>svg\\]\\/alert\\:col-start-2:is(:where(.group\\/alert):has( > svg) *) {\n grid-column-start: 2;\n }\n\n .group-data-indeterminate\\/checkbox-indicator\\:block:is(:where(.group\\/checkbox-indicator)[data-indeterminate] *) {\n display: block;\n }\n\n .group-data-indeterminate\\/checkbox-indicator\\:hidden:is(:where(.group\\/checkbox-indicator)[data-indeterminate] *) {\n display: none;\n }\n\n .group-data-popup-open\\/navigation-menu-trigger\\:rotate-180:is(:where(.group\\/navigation-menu-trigger)[data-popup-open] *) {\n rotate: 180deg;\n }\n\n .group-data-\\[align\\=end\\]\\/bubble\\:self-end:is(:where(.group\\/bubble)[data-align=\"end\"] *) {\n align-self: flex-end;\n }\n\n .group-data-\\[align\\=end\\]\\/message\\:justify-end:is(:where(.group\\/message)[data-align=\"end\"] *) {\n justify-content: flex-end;\n }\n\n .group-data-\\[align\\=end\\]\\/message\\:self-end:is(:where(.group\\/message)[data-align=\"end\"] *) {\n align-self: flex-end;\n }\n\n .group-data-\\[checked\\=true\\]\\/command-item\\:opacity-100:is(:where(.group\\/command-item)[data-checked=\"true\"] *) {\n opacity: 1;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:-mt-8:is(:where(.group)[data-collapsible=\"icon\"] *) {\n margin-top: calc(var(--spacing) * -8);\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:hidden:is(:where(.group)[data-collapsible=\"icon\"] *) {\n display: none;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:size-8\\!:is(:where(.group)[data-collapsible=\"icon\"] *) {\n width: calc(var(--spacing) * 8) !important;\n height: calc(var(--spacing) * 8) !important;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:w-\\(--sidebar-width-icon\\):is(:where(.group)[data-collapsible=\"icon\"] *) {\n width: var(--sidebar-width-icon);\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:w-\\[calc\\(var\\(--sidebar-width-icon\\)\\+\\(--spacing\\(4\\)\\)\\)\\]:is(:where(.group)[data-collapsible=\"icon\"] *) {\n width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)));\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:w-\\[calc\\(var\\(--sidebar-width-icon\\)\\+\\(--spacing\\(4\\)\\)\\+2px\\)\\]:is(:where(.group)[data-collapsible=\"icon\"] *) {\n width: calc(var(--sidebar-width-icon) + (calc(var(--spacing) * 4)) + 2px);\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:overflow-hidden:is(:where(.group)[data-collapsible=\"icon\"] *) {\n overflow: hidden;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:p-0\\!:is(:where(.group)[data-collapsible=\"icon\"] *) {\n padding: 0 !important;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:p-2\\!:is(:where(.group)[data-collapsible=\"icon\"] *) {\n padding: calc(var(--spacing) * 2) !important;\n }\n\n .group-data-\\[collapsible\\=icon\\]\\:opacity-0:is(:where(.group)[data-collapsible=\"icon\"] *) {\n opacity: 0;\n }\n\n .group-data-\\[collapsible\\=offcanvas\\]\\:w-0:is(:where(.group)[data-collapsible=\"offcanvas\"] *) {\n width: 0;\n }\n\n .group-data-\\[collapsible\\=offcanvas\\]\\:translate-x-0:is(:where(.group)[data-collapsible=\"offcanvas\"] *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-data-\\[disabled\\=true\\]\\:pointer-events-none:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n\n .group-data-\\[disabled\\=true\\]\\:opacity-50:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: .5;\n }\n\n .group-data-\\[focused\\=true\\]\\/day\\:relative:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n position: relative;\n }\n\n .group-data-\\[focused\\=true\\]\\/day\\:z-10:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n z-index: 10;\n }\n\n .group-data-\\[focused\\=true\\]\\/day\\:border-ring:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n border-color: var(--ring);\n }\n\n .group-data-\\[focused\\=true\\]\\/day\\:ring-\\[3px\\]:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[focused\\=true\\]\\/day\\:ring-ring\\/50:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .group-data-\\[focused\\=true\\]\\/day\\:ring-ring\\/50:is(:where(.group\\/day)[data-focused=\"true\"] *) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:absolute:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n position: absolute;\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:top-3:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n top: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:right-3:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n right: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:w-full:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n width: 100%;\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:gap-1:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n gap: var(--spacing);\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:px-1:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) {\n padding-inline: var(--spacing);\n }\n\n .group-data-\\[shortcut\\]\\/questionnaire-choice\\:inline-flex:is(:where(.group\\/questionnaire-choice)[data-shortcut] *) {\n display: inline-flex;\n }\n\n .group-data-\\[side\\=left\\]\\:-right-4:is(:where(.group)[data-side=\"left\"] *) {\n right: calc(var(--spacing) * -4);\n }\n\n .group-data-\\[side\\=left\\]\\:border-r:is(:where(.group)[data-side=\"left\"] *) {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .group-data-\\[side\\=right\\]\\:left-0:is(:where(.group)[data-side=\"right\"] *) {\n left: 0;\n }\n\n .group-data-\\[side\\=right\\]\\:rotate-180:is(:where(.group)[data-side=\"right\"] *) {\n rotate: 180deg;\n }\n\n .group-data-\\[side\\=right\\]\\:border-l:is(:where(.group)[data-side=\"right\"] *) {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .group-data-\\[size\\=default\\]\\/avatar\\:size-2\\.5:is(:where(.group\\/avatar)[data-size=\"default\"] *) {\n width: calc(var(--spacing) * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n\n .group-data-\\[size\\=default\\]\\/switch\\:size-4:is(:where(.group\\/switch)[data-size=\"default\"] *) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .group-data-\\[size\\=lg\\]\\/avatar\\:size-3:is(:where(.group\\/avatar)[data-size=\"lg\"] *) {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[size\\=sm\\]\\/alert-dialog-content\\:grid:is(:where(.group\\/alert-dialog-content)[data-size=\"sm\"] *) {\n display: grid;\n }\n\n .group-data-\\[size\\=sm\\]\\/alert-dialog-content\\:grid-cols-2:is(:where(.group\\/alert-dialog-content)[data-size=\"sm\"] *) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .group-data-\\[size\\=sm\\]\\/attachment\\:w-8:is(:where(.group\\/attachment)[data-size=\"sm\"] *) {\n width: calc(var(--spacing) * 8);\n }\n\n .group-data-\\[size\\=sm\\]\\/avatar\\:size-2:is(:where(.group\\/avatar)[data-size=\"sm\"] *) {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n\n .group-data-\\[size\\=sm\\]\\/avatar\\:text-xs:is(:where(.group\\/avatar)[data-size=\"sm\"] *) {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .group-data-\\[size\\=sm\\]\\/card\\:p-3:is(:where(.group\\/card)[data-size=\"sm\"] *) {\n padding: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[size\\=sm\\]\\/card\\:px-3:is(:where(.group\\/card)[data-size=\"sm\"] *) {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[size\\=sm\\]\\/card\\:text-sm:is(:where(.group\\/card)[data-size=\"sm\"] *) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .group-data-\\[size\\=sm\\]\\/item\\:size-8:is(:where(.group\\/item)[data-size=\"sm\"] *) {\n width: calc(var(--spacing) * 8);\n height: calc(var(--spacing) * 8);\n }\n\n .group-data-\\[size\\=sm\\]\\/switch\\:size-3:is(:where(.group\\/switch)[data-size=\"sm\"] *) {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[size\\=xs\\]\\/attachment\\:w-7:is(:where(.group\\/attachment)[data-size=\"xs\"] *) {\n width: calc(var(--spacing) * 7);\n }\n\n .group-data-\\[size\\=xs\\]\\/attachment\\:rounded-md:is(:where(.group\\/attachment)[data-size=\"xs\"] *) {\n border-radius: calc(var(--radius) * .8);\n }\n\n .group-data-\\[size\\=xs\\]\\/item\\:size-6:is(:where(.group\\/item)[data-size=\"xs\"] *) {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .group-data-\\[size\\=xs\\]\\/item\\:gap-0:is(:where(.group\\/item)[data-size=\"xs\"] *) {\n gap: 0;\n }\n\n .group-data-\\[size\\=xs\\]\\/item\\:text-xs:is(:where(.group\\/item)[data-size=\"xs\"] *) {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .group-data-\\[spacing\\=0\\]\\/toggle-group\\:rounded-none:is(:where(.group\\/toggle-group)[data-spacing=\"0\"] *) {\n border-radius: 0;\n }\n\n .group-data-\\[spacing\\=0\\]\\/toggle-group\\:px-2:is(:where(.group\\/toggle-group)[data-spacing=\"0\"] *) {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .group-data-\\[state\\=done\\]\\/attachment\\:opacity-100:is(:where(.group\\/attachment)[data-state=\"done\"] *) {\n opacity: 1;\n }\n\n .group-data-\\[state\\=error\\]\\/attachment\\:bg-destructive\\/10:is(:where(.group\\/attachment)[data-state=\"error\"] *) {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .group-data-\\[state\\=error\\]\\/attachment\\:bg-destructive\\/10:is(:where(.group\\/attachment)[data-state=\"error\"] *) {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n\n .group-data-\\[state\\=error\\]\\/attachment\\:text-destructive:is(:where(.group\\/attachment)[data-state=\"error\"] *) {\n color: var(--destructive);\n }\n\n .group-data-\\[state\\=idle\\]\\/attachment\\:opacity-100:is(:where(.group\\/attachment)[data-state=\"idle\"] *) {\n opacity: 1;\n }\n\n .group-data-\\[state\\=processing\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"processing\"] *) {\n --_spread: var(--shimmer-spread, calc(3ch + 40px));\n --_base: currentColor;\n --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));\n background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .group-data-\\[state\\=processing\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"processing\"] *) {\n background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));\n }\n }\n\n .group-data-\\[state\\=processing\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"processing\"] *) {\n background-repeat: no-repeat;\n background-size: calc(200% + var(--_spread) * 2) 100%;\n -webkit-text-fill-color: var(--shimmer-text-fill, transparent);\n animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;\n background-position: 0 0;\n -webkit-background-clip: text;\n background-clip: text;\n }\n\n .group-data-\\[state\\=processing\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"processing\"] *):is(.dark *) {\n --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));\n }\n\n .group-data-\\[state\\=processing\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"processing\"] *):where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n animation-direction: reverse;\n }\n\n .group-data-\\[state\\=uploading\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"uploading\"] *) {\n --_spread: var(--shimmer-spread, calc(3ch + 40px));\n --_base: currentColor;\n --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));\n background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .group-data-\\[state\\=uploading\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"uploading\"] *) {\n background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));\n }\n }\n\n .group-data-\\[state\\=uploading\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"uploading\"] *) {\n background-repeat: no-repeat;\n background-size: calc(200% + var(--_spread) * 2) 100%;\n -webkit-text-fill-color: var(--shimmer-text-fill, transparent);\n animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;\n background-position: 0 0;\n -webkit-background-clip: text;\n background-clip: text;\n }\n\n .group-data-\\[state\\=uploading\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"uploading\"] *):is(.dark *) {\n --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));\n }\n\n .group-data-\\[state\\=uploading\\]\\/attachment\\:shimmer:is(:where(.group\\/attachment)[data-state=\"uploading\"] *):where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n animation-direction: reverse;\n }\n\n .group-data-\\[type\\=checkbox\\]\\/questionnaire-choice\\:hidden:is(:where(.group\\/questionnaire-choice)[data-type=\"checkbox\"] *), .group-data-\\[type\\=radio\\]\\/questionnaire-choice\\:hidden:is(:where(.group\\/questionnaire-choice)[data-type=\"radio\"] *) {\n display: none;\n }\n\n .group-data-\\[type\\=radio\\]\\/questionnaire-choice\\:rounded-full:is(:where(.group\\/questionnaire-choice)[data-type=\"radio\"] *) {\n border-radius: 3.40282e38px;\n }\n\n .group-data-\\[variant\\=floating\\]\\:rounded-lg:is(:where(.group)[data-variant=\"floating\"] *) {\n border-radius: var(--radius);\n }\n\n .group-data-\\[variant\\=floating\\]\\:shadow-sm:is(:where(.group)[data-variant=\"floating\"] *) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[variant\\=floating\\]\\:ring-1:is(:where(.group)[data-variant=\"floating\"] *) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[variant\\=floating\\]\\:ring-sidebar-border:is(:where(.group)[data-variant=\"floating\"] *) {\n --tw-ring-color: var(--sidebar-border);\n }\n\n .group-data-\\[variant\\=line\\]\\/tabs-list\\:bg-transparent:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *) {\n background-color: #0000;\n }\n\n .group-data-\\[variant\\=separator\\]\\/marker\\:flex-none:is(:where(.group\\/marker)[data-variant=\"separator\"] *) {\n flex: none;\n }\n\n .group-data-\\[variant\\=separator\\]\\/marker\\:text-center:is(:where(.group\\/marker)[data-variant=\"separator\"] *) {\n text-align: center;\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:rounded-lg:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n border-radius: var(--radius);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:bg-popover:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n background-color: var(--popover);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:text-popover-foreground:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n color: var(--popover-foreground);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:shadow:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:ring-1:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:ring-foreground\\/10:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n --tw-ring-color: var(--foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:ring-foreground\\/10:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);\n }\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:duration-300:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *) {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .group-data-open\\/navigation-menu-trigger\\:rotate-180:is(:is(:where(.group\\/navigation-menu-trigger):where([data-state=\"open\"]), :where(.group\\/navigation-menu-trigger):where([data-open]:not([data-open=\"false\"]))) *) {\n rotate: 180deg;\n }\n\n .group-data-checked\\/questionnaire-choice\\:block:is(:is(:where(.group\\/questionnaire-choice):where([data-state=\"checked\"]), :where(.group\\/questionnaire-choice):where([data-checked]:not([data-checked=\"false\"]))) *) {\n display: block;\n }\n\n .group-data-checked\\/questionnaire-choice\\:border-primary:is(:is(:where(.group\\/questionnaire-choice):where([data-state=\"checked\"]), :where(.group\\/questionnaire-choice):where([data-checked]:not([data-checked=\"false\"]))) *) {\n border-color: var(--primary);\n }\n\n .group-data-checked\\/questionnaire-choice\\:bg-primary:is(:is(:where(.group\\/questionnaire-choice):where([data-state=\"checked\"]), :where(.group\\/questionnaire-choice):where([data-checked]:not([data-checked=\"false\"]))) *) {\n background-color: var(--primary);\n }\n\n .group-data-checked\\/questionnaire-choice\\:text-primary-foreground:is(:is(:where(.group\\/questionnaire-choice):where([data-state=\"checked\"]), :where(.group\\/questionnaire-choice):where([data-checked]:not([data-checked=\"false\"]))) *) {\n color: var(--primary-foreground);\n }\n\n .group-data-selected\\/command-item\\:text-foreground:is(:where(.group\\/command-item):where([data-selected=\"true\"]) *) {\n color: var(--foreground);\n }\n\n .group-data-horizontal\\/tabs\\:h-8:is(:where(.group\\/tabs):where([data-orientation=\"horizontal\"]) *) {\n height: calc(var(--spacing) * 8);\n }\n\n .group-data-vertical\\/tabs\\:h-fit:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *) {\n height: fit-content;\n }\n\n .group-data-vertical\\/tabs\\:w-full:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *) {\n width: 100%;\n }\n\n .group-data-vertical\\/tabs\\:flex-col:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *) {\n flex-direction: column;\n }\n\n .group-data-vertical\\/tabs\\:justify-start:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *) {\n justify-content: flex-start;\n }\n\n @media (hover: hover) {\n .peer-hover\\/menu-button\\:text-sidebar-accent-foreground:is(:where(.peer\\/menu-button):hover ~ *) {\n color: var(--sidebar-accent-foreground);\n }\n }\n\n .peer-disabled\\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n\n .peer-disabled\\:opacity-50:is(:where(.peer):disabled ~ *) {\n opacity: .5;\n }\n\n .peer-data-\\[size\\=default\\]\\/menu-button\\:top-1\\.5:is(:where(.peer\\/menu-button)[data-size=\"default\"] ~ *) {\n top: calc(var(--spacing) * 1.5);\n }\n\n .peer-data-\\[size\\=lg\\]\\/menu-button\\:top-2\\.5:is(:where(.peer\\/menu-button)[data-size=\"lg\"] ~ *) {\n top: calc(var(--spacing) * 2.5);\n }\n\n .peer-data-\\[size\\=sm\\]\\/menu-button\\:top-1:is(:where(.peer\\/menu-button)[data-size=\"sm\"] ~ *) {\n top: var(--spacing);\n }\n\n .peer-data-active\\/menu-button\\:text-sidebar-accent-foreground:is(:is(:where(.peer\\/menu-button):where([data-state=\"active\"]), :where(.peer\\/menu-button):where([data-active]:not([data-active=\"false\"]))) ~ *) {\n color: var(--sidebar-accent-foreground);\n }\n\n .selection\\:bg-primary ::selection {\n background-color: var(--primary);\n }\n\n .selection\\:bg-primary::selection {\n background-color: var(--primary);\n }\n\n .selection\\:text-primary-foreground ::selection {\n color: var(--primary-foreground);\n }\n\n .selection\\:text-primary-foreground::selection {\n color: var(--primary-foreground);\n }\n\n .file\\:inline-flex::file-selector-button {\n display: inline-flex;\n }\n\n .file\\:h-6::file-selector-button {\n height: calc(var(--spacing) * 6);\n }\n\n .file\\:border-0::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .file\\:bg-transparent::file-selector-button {\n background-color: #0000;\n }\n\n .file\\:text-sm::file-selector-button {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .file\\:font-medium::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .file\\:text-foreground::file-selector-button {\n color: var(--foreground);\n }\n\n .placeholder\\:text-muted-foreground::placeholder {\n color: var(--muted-foreground);\n }\n\n .before\\:mr-1:before {\n content: var(--tw-content);\n margin-right: var(--spacing);\n }\n\n .before\\:h-px:before {\n content: var(--tw-content);\n height: 1px;\n }\n\n .before\\:min-w-0:before {\n content: var(--tw-content);\n min-width: 0;\n }\n\n .before\\:flex-1:before {\n content: var(--tw-content);\n flex: 1;\n }\n\n .before\\:bg-border:before {\n content: var(--tw-content);\n background-color: var(--border);\n }\n\n .after\\:absolute:after {\n content: var(--tw-content);\n position: absolute;\n }\n\n .after\\:-inset-2:after {\n content: var(--tw-content);\n inset: calc(var(--spacing) * -2);\n }\n\n .after\\:inset-0:after {\n content: var(--tw-content);\n inset: 0;\n }\n\n .after\\:-inset-x-3:after {\n content: var(--tw-content);\n inset-inline: calc(var(--spacing) * -3);\n }\n\n .after\\:-inset-y-2:after {\n content: var(--tw-content);\n inset-block: calc(var(--spacing) * -2);\n }\n\n .after\\:inset-y-0:after {\n content: var(--tw-content);\n inset-block: 0;\n }\n\n .after\\:start-1\\/2:after {\n content: var(--tw-content);\n inset-inline-start: 50%;\n }\n\n .after\\:top-full:after {\n content: var(--tw-content);\n top: 100%;\n }\n\n .after\\:right-0:after {\n content: var(--tw-content);\n right: 0;\n }\n\n .after\\:left-0:after {\n content: var(--tw-content);\n left: 0;\n }\n\n .after\\:left-1\\/2:after {\n content: var(--tw-content);\n left: 50%;\n }\n\n .after\\:ml-1:after {\n content: var(--tw-content);\n margin-left: var(--spacing);\n }\n\n .after\\:h-\\[calc\\(var\\(--gap\\)\\+1px\\)\\]:after {\n content: var(--tw-content);\n height: calc(var(--gap) + 1px);\n }\n\n .after\\:h-px:after {\n content: var(--tw-content);\n height: 1px;\n }\n\n .after\\:w-1:after {\n content: var(--tw-content);\n width: var(--spacing);\n }\n\n .after\\:w-4:after {\n content: var(--tw-content);\n width: calc(var(--spacing) * 4);\n }\n\n .after\\:w-\\[2px\\]:after {\n content: var(--tw-content);\n width: 2px;\n }\n\n .after\\:w-full:after {\n content: var(--tw-content);\n width: 100%;\n }\n\n .after\\:min-w-0:after {\n content: var(--tw-content);\n min-width: 0;\n }\n\n .after\\:flex-1:after {\n content: var(--tw-content);\n flex: 1;\n }\n\n .after\\:-translate-x-1\\/2:after {\n content: var(--tw-content);\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .after\\:rounded-full:after {\n content: var(--tw-content);\n border-radius: 3.40282e38px;\n }\n\n .after\\:border:after {\n content: var(--tw-content);\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .after\\:border-border:after {\n content: var(--tw-content);\n border-color: var(--border);\n }\n\n .after\\:bg-border:after {\n content: var(--tw-content);\n background-color: var(--border);\n }\n\n .after\\:bg-foreground:after {\n content: var(--tw-content);\n background-color: var(--foreground);\n }\n\n .after\\:bg-muted:after {\n content: var(--tw-content);\n background-color: var(--muted);\n }\n\n .after\\:opacity-0:after {\n content: var(--tw-content);\n opacity: 0;\n }\n\n .after\\:mix-blend-darken:after {\n content: var(--tw-content);\n mix-blend-mode: darken;\n }\n\n .after\\:transition-opacity:after {\n content: var(--tw-content);\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .after\\:content-\\[\\'\\'\\]:after {\n --tw-content: \"\";\n content: var(--tw-content);\n }\n\n .group-data-\\[collapsible\\=offcanvas\\]\\:after\\:left-full:is(:where(.group)[data-collapsible=\"offcanvas\"] *):after {\n content: var(--tw-content);\n left: 100%;\n }\n\n .group-data-horizontal\\/tabs\\:after\\:inset-x-0:is(:where(.group\\/tabs):where([data-orientation=\"horizontal\"]) *):after {\n content: var(--tw-content);\n inset-inline: 0;\n }\n\n .group-data-horizontal\\/tabs\\:after\\:bottom-\\[-5px\\]:is(:where(.group\\/tabs):where([data-orientation=\"horizontal\"]) *):after {\n content: var(--tw-content);\n bottom: -5px;\n }\n\n .group-data-horizontal\\/tabs\\:after\\:h-0\\.5:is(:where(.group\\/tabs):where([data-orientation=\"horizontal\"]) *):after {\n content: var(--tw-content);\n height: calc(var(--spacing) * .5);\n }\n\n .group-data-vertical\\/tabs\\:after\\:inset-y-0:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *):after {\n content: var(--tw-content);\n inset-block: 0;\n }\n\n .group-data-vertical\\/tabs\\:after\\:-right-1:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *):after {\n content: var(--tw-content);\n right: calc(var(--spacing) * -1);\n }\n\n .group-data-vertical\\/tabs\\:after\\:w-0\\.5:is(:where(.group\\/tabs):where([data-orientation=\"vertical\"]) *):after {\n content: var(--tw-content);\n width: calc(var(--spacing) * .5);\n }\n\n .first\\:rounded-l-lg:first-child {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n .first\\:border-l:first-child {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .last\\:rounded-r-lg:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n .empty\\:py-0:empty {\n padding-block: 0;\n }\n\n .focus-within\\:ring-1:focus-within {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-within\\:ring-ring\\/50:focus-within {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-within\\:ring-ring\\/50:focus-within {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n @media (hover: hover) {\n .hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--secondary\\)\\,var\\(--foreground\\)_5\\%\\)\\]:hover {\n background-color: var(--secondary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-\\[color-mix\\(in_oklch\\,var\\(--secondary\\)\\,var\\(--foreground\\)_5\\%\\)\\]:hover {\n background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);\n }\n }\n\n .hover\\:bg-destructive\\/15:hover {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-destructive\\/15:hover {\n background-color: color-mix(in oklab, var(--destructive) 15%, transparent);\n }\n }\n\n .hover\\:bg-muted:hover {\n background-color: var(--muted);\n }\n\n .hover\\:bg-muted-foreground\\/70:hover {\n background-color: var(--muted-foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-muted-foreground\\/70:hover {\n background-color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);\n }\n }\n\n .hover\\:bg-muted\\/50:hover {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-muted\\/50:hover {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .hover\\:bg-primary\\/80:hover {\n background-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .hover\\:bg-primary\\/80:hover {\n background-color: color-mix(in oklab, var(--primary) 80%, transparent);\n }\n }\n\n .hover\\:bg-sidebar-accent:hover {\n background-color: var(--sidebar-accent);\n }\n\n .hover\\:text-foreground:hover {\n color: var(--foreground);\n }\n\n .hover\\:text-muted-foreground:hover {\n color: var(--muted-foreground);\n }\n\n .hover\\:text-sidebar-accent-foreground:hover {\n color: var(--sidebar-accent-foreground);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:shadow-\\[0_0_0_1px_var\\(--sidebar-accent\\)\\]:hover {\n --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:group-data-\\[collapsible\\=offcanvas\\]\\:bg-sidebar:hover:is(:where(.group)[data-collapsible=\"offcanvas\"] *) {\n background-color: var(--sidebar);\n }\n\n .hover\\:after\\:bg-sidebar-border:hover:after {\n content: var(--tw-content);\n background-color: var(--sidebar-border);\n }\n }\n\n .focus\\:z-10:focus {\n z-index: 10;\n }\n\n .focus\\:bg-accent:focus {\n background-color: var(--accent);\n }\n\n .focus\\:bg-muted:focus {\n background-color: var(--muted);\n }\n\n .focus\\:text-accent-foreground:focus, :is(.focus\\:\\*\\*\\:text-accent-foreground:focus *), :is(.not-data-\\[variant\\=destructive\\]\\:focus\\:\\*\\*\\:text-accent-foreground:not([data-variant=\"destructive\"]):focus *) {\n color: var(--accent-foreground);\n }\n\n .focus-visible\\:z-10:focus-visible {\n z-index: 10;\n }\n\n .focus-visible\\:border-destructive\\/40:focus-visible {\n border-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:border-destructive\\/40:focus-visible {\n border-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n .focus-visible\\:border-ring:focus-visible {\n border-color: var(--ring);\n }\n\n .focus-visible\\:ring-0:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-1:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-2:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-3:focus-visible, .focus-visible\\:ring-\\[3px\\]:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus-visible\\:ring-destructive\\/20:focus-visible {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:ring-destructive\\/20:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .focus-visible\\:ring-info\\/20:focus-visible {\n --tw-ring-color: var(--info);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:ring-info\\/20:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--info) 20%, transparent);\n }\n }\n\n .focus-visible\\:ring-ring:focus-visible, .focus-visible\\:ring-ring\\/50:focus-visible {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:ring-ring\\/50:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n .focus-visible\\:ring-success\\/20:focus-visible {\n --tw-ring-color: var(--success);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:ring-success\\/20:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--success) 20%, transparent);\n }\n }\n\n .focus-visible\\:ring-warning\\/20:focus-visible {\n --tw-ring-color: var(--warning);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .focus-visible\\:ring-warning\\/20:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--warning) 20%, transparent);\n }\n }\n\n .focus-visible\\:ring-offset-2:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n\n .focus-visible\\:outline-hidden:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (forced-colors: active) {\n .focus-visible\\:outline-hidden:focus-visible {\n outline-offset: 2px;\n outline: 2px solid #0000;\n }\n }\n\n .focus-visible\\:outline-1:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .focus-visible\\:outline-ring:focus-visible {\n outline-color: var(--ring);\n }\n\n .focus-visible\\:outline-none:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .active\\:bg-sidebar-accent:active {\n background-color: var(--sidebar-accent);\n }\n\n .active\\:text-sidebar-accent-foreground:active {\n color: var(--sidebar-accent-foreground);\n }\n\n .active\\:not-aria-\\[haspopup\\]\\:translate-y-px:active:not([aria-haspopup]) {\n --tw-translate-y: 1px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:bg-input\\/50:disabled {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .disabled\\:bg-input\\/50:disabled {\n background-color: color-mix(in oklab, var(--input) 50%, transparent);\n }\n }\n\n .disabled\\:bg-transparent:disabled {\n background-color: #0000;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n :where([data-edx-button-group-position=\"horizontal-first\"]) .in-data-\\[edx-button-group-position\\=horizontal-first\\]\\:rounded-r-none {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :where([data-edx-button-group-position=\"horizontal-last\"]) .in-data-\\[edx-button-group-position\\=horizontal-last\\]\\:rounded-l-none {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :where([data-edx-button-group-position=\"horizontal-middle\"]) .in-data-\\[edx-button-group-position\\=horizontal-middle\\]\\:rounded-none {\n border-radius: 0;\n }\n\n :where([data-edx-button-group-position=\"vertical-first\"]) .in-data-\\[edx-button-group-position\\=vertical-first\\]\\:rounded-b-none {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :where([data-edx-button-group-position=\"vertical-last\"]) .in-data-\\[edx-button-group-position\\=vertical-last\\]\\:rounded-t-none {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n :where([data-edx-button-group-position=\"vertical-middle\"]) .in-data-\\[edx-button-group-position\\=vertical-middle\\]\\:rounded-none {\n border-radius: 0;\n }\n\n :where([data-orientation=\"horizontal\"]) .in-data-\\[orientation\\=horizontal\\]\\:w-px {\n width: 1px;\n }\n\n :where([data-orientation=\"vertical\"]) .in-data-\\[orientation\\=vertical\\]\\:h-px {\n height: 1px;\n }\n\n :where([data-orientation=\"vertical\"]) .in-data-\\[orientation\\=vertical\\]\\:w-full {\n width: 100%;\n }\n\n :where([data-orientation=\"vertical\"]) .in-data-\\[orientation\\=vertical\\]\\:self-auto {\n align-self: auto;\n }\n\n :where([data-side=\"left\"]) .in-data-\\[side\\=left\\]\\:cursor-w-resize {\n cursor: w-resize;\n }\n\n :where([data-side=\"right\"]) .in-data-\\[side\\=right\\]\\:cursor-e-resize {\n cursor: e-resize;\n }\n\n :where([data-slot=\"button-group\"]) .in-data-\\[slot\\=button-group\\]\\:rounded-lg {\n border-radius: var(--radius);\n }\n\n :where([data-slot=\"card-content\"]) .in-data-\\[slot\\=card-content\\]\\:bg-transparent {\n background-color: #0000;\n }\n\n :where([data-slot=\"dialog-content\"]) .in-data-\\[slot\\=dialog-content\\]\\:rounded-lg\\! {\n border-radius: var(--radius) !important;\n }\n\n :where([data-slot=\"dropdown-menu-content\"]) .in-data-\\[slot\\=dropdown-menu-content\\]\\:p-0 {\n padding: 0;\n }\n\n :where([data-slot=\"navigation-menu-content\"]) .in-data-\\[slot\\=navigation-menu-content\\]\\:rounded-md {\n border-radius: calc(var(--radius) * .8);\n }\n\n :where([data-slot=\"popover-content\"]) .in-data-\\[slot\\=popover-content\\]\\:bg-transparent {\n background-color: #0000;\n }\n\n :where([data-slot=\"tooltip-content\"]) .in-data-\\[slot\\=tooltip-content\\]\\:bg-background\\/20 {\n background-color: var(--background);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n :where([data-slot=\"tooltip-content\"]) .in-data-\\[slot\\=tooltip-content\\]\\:bg-background\\/20 {\n background-color: color-mix(in oklab, var(--background) 20%, transparent);\n }\n }\n\n :where([data-slot=\"tooltip-content\"]) .in-data-\\[slot\\=tooltip-content\\]\\:text-background {\n color: var(--background);\n }\n\n .has-disabled\\:bg-input\\/50:has(:disabled) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-disabled\\:bg-input\\/50:has(:disabled) {\n background-color: color-mix(in oklab, var(--input) 50%, transparent);\n }\n }\n\n .has-disabled\\:opacity-50:has(:disabled) {\n opacity: .5;\n }\n\n .has-aria-invalid\\:border-destructive:has([aria-invalid=\"true\"]) {\n border-color: var(--destructive);\n }\n\n .has-aria-invalid\\:ring-3:has([aria-invalid=\"true\"]) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .has-aria-invalid\\:ring-destructive\\/20:has([aria-invalid=\"true\"]) {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-aria-invalid\\:ring-destructive\\/20:has([aria-invalid=\"true\"]) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .has-data-\\[icon\\=inline-end\\]\\:pr-1\\.5:has([data-icon=\"inline-end\"]) {\n padding-right: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[icon\\=inline-end\\]\\:pr-2:has([data-icon=\"inline-end\"]) {\n padding-right: calc(var(--spacing) * 2);\n }\n\n .group-data-\\[spacing\\=0\\]\\/toggle-group\\:has-data-\\[icon\\=inline-end\\]\\:pr-1\\.5:is(:where(.group\\/toggle-group)[data-spacing=\"0\"] *):has([data-icon=\"inline-end\"]) {\n padding-right: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[icon\\=inline-start\\]\\:pl-1\\.5:has([data-icon=\"inline-start\"]) {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[icon\\=inline-start\\]\\:pl-2:has([data-icon=\"inline-start\"]) {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .group-data-\\[spacing\\=0\\]\\/toggle-group\\:has-data-\\[icon\\=inline-start\\]\\:pl-1\\.5:is(:where(.group\\/toggle-group)[data-spacing=\"0\"] *):has([data-icon=\"inline-start\"]) {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[size\\=sm\\]\\:gap-2\\.5:has([data-size=\"sm\"]) {\n gap: calc(var(--spacing) * 2.5);\n }\n\n .has-data-\\[size\\=xs\\]\\:gap-2:has([data-size=\"xs\"]) {\n gap: calc(var(--spacing) * 2);\n }\n\n .has-data-\\[slot\\=alert-action\\]\\:relative:has([data-slot=\"alert-action\"]) {\n position: relative;\n }\n\n .has-data-\\[slot\\=alert-action\\]\\:pr-18:has([data-slot=\"alert-action\"]) {\n padding-right: calc(var(--spacing) * 18);\n }\n\n .has-data-\\[slot\\=alert-dialog-media\\]\\:grid-rows-\\[auto_auto_1fr\\]:has([data-slot=\"alert-dialog-media\"]) {\n grid-template-rows: auto auto 1fr;\n }\n\n .has-data-\\[slot\\=alert-dialog-media\\]\\:gap-x-4:has([data-slot=\"alert-dialog-media\"]) {\n column-gap: calc(var(--spacing) * 4);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:w-30:has([data-slot=\"attachment-content\"]) {\n width: calc(var(--spacing) * 30);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:px-1\\.5:has([data-slot=\"attachment-content\"]) {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:px-2:has([data-slot=\"attachment-content\"]) {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:px-2\\.5:has([data-slot=\"attachment-content\"]) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:py-1:has([data-slot=\"attachment-content\"]) {\n padding-block: var(--spacing);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:py-1\\.5:has([data-slot=\"attachment-content\"]) {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[slot\\=attachment-content\\]\\:py-2:has([data-slot=\"attachment-content\"]) {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .has-data-\\[slot\\=attachment-media\\]\\:p-1:has([data-slot=\"attachment-media\"]) {\n padding: var(--spacing);\n }\n\n .has-data-\\[slot\\=attachment-media\\]\\:p-1\\.5:has([data-slot=\"attachment-media\"]) {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[slot\\=attachment-media\\]\\:p-2:has([data-slot=\"attachment-media\"]) {\n padding: calc(var(--spacing) * 2);\n }\n\n .has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has([data-slot=\"card-action\"]) {\n grid-template-columns: 1fr auto;\n }\n\n .has-data-\\[slot\\=card-description\\]\\:grid-rows-\\[auto_auto\\]:has([data-slot=\"card-description\"]) {\n grid-template-rows: auto auto;\n }\n\n .has-data-\\[slot\\=card-footer\\]\\:pb-0:has([data-slot=\"card-footer\"]) {\n padding-bottom: 0;\n }\n\n .has-data-\\[slot\\=kbd\\]\\:pr-1\\.5:has([data-slot=\"kbd\"]) {\n padding-right: calc(var(--spacing) * 1.5);\n }\n\n .has-data-\\[variant\\=inset\\]\\:bg-sidebar:has([data-variant=\"inset\"]) {\n background-color: var(--sidebar);\n }\n\n .has-\\[\\[data-slot\\=input-group-control\\]\\:focus-visible\\]\\:border-ring:has([data-slot=\"input-group-control\"]:focus-visible) {\n border-color: var(--ring);\n }\n\n .has-\\[\\[data-slot\\=input-group-control\\]\\:focus-visible\\]\\:ring-3:has([data-slot=\"input-group-control\"]:focus-visible) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .has-\\[\\[data-slot\\=input-group-control\\]\\:focus-visible\\]\\:ring-ring\\/50:has([data-slot=\"input-group-control\"]:focus-visible) {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-\\[\\[data-slot\\=input-group-control\\]\\:focus-visible\\]\\:ring-ring\\/50:has([data-slot=\"input-group-control\"]:focus-visible) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n .has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:border-destructive:has([data-slot][aria-invalid=\"true\"]) {\n border-color: var(--destructive);\n }\n\n .has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:ring-3:has([data-slot][aria-invalid=\"true\"]) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:ring-destructive\\/20:has([data-slot][aria-invalid=\"true\"]) {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:ring-destructive\\/20:has([data-slot][aria-invalid=\"true\"]) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .has-\\[button\\]\\:p-0:has(:is(button)) {\n padding: 0;\n }\n\n .has-\\[select\\:disabled\\]\\:opacity-50:has(:is(select:disabled)) {\n opacity: .5;\n }\n\n .has-\\[\\>\\[data-align\\=block-end\\]\\]\\:h-auto:has( > [data-align=\"block-end\"]) {\n height: auto;\n }\n\n .has-\\[\\>\\[data-align\\=block-end\\]\\]\\:flex-col:has( > [data-align=\"block-end\"]) {\n flex-direction: column;\n }\n\n .has-\\[\\>\\[data-align\\=block-start\\]\\]\\:h-auto:has( > [data-align=\"block-start\"]) {\n height: auto;\n }\n\n .has-\\[\\>\\[data-align\\=block-start\\]\\]\\:flex-col:has( > [data-align=\"block-start\"]) {\n flex-direction: column;\n }\n\n @media (hover: hover) {\n .has-\\[\\>a\\,\\>button\\]\\:hover\\:bg-muted\\/50:has( > a, > button):hover {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-\\[\\>a\\,\\>button\\]\\:hover\\:bg-muted\\/50:has( > a, > button):hover {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n }\n\n .has-\\[\\>button\\]\\:mr-\\[-0\\.3rem\\]:has( > button) {\n margin-right: -.3rem;\n }\n\n .has-\\[\\>button\\]\\:ml-\\[-0\\.3rem\\]:has( > button) {\n margin-left: -.3rem;\n }\n\n .has-\\[\\>img\\:first-child\\]\\:pt-0:has( > img:first-child) {\n padding-top: 0;\n }\n\n .has-\\[\\>input\\:focus-visible\\]\\:border-ring:has( > input:focus-visible) {\n border-color: var(--ring);\n }\n\n .has-\\[\\>input\\:focus-visible\\]\\:ring-3:has( > input:focus-visible) {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .has-\\[\\>input\\:focus-visible\\]\\:ring-ring\\/50:has( > input:focus-visible) {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .has-\\[\\>input\\:focus-visible\\]\\:ring-ring\\/50:has( > input:focus-visible) {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n .has-\\[\\>kbd\\]\\:mr-\\[-0\\.15rem\\]:has( > kbd) {\n margin-right: -.15rem;\n }\n\n .has-\\[\\>kbd\\]\\:ml-\\[-0\\.15rem\\]:has( > kbd) {\n margin-left: -.15rem;\n }\n\n .has-\\[\\>svg\\]\\:grid-cols-\\[auto_1fr\\]:has( > svg) {\n grid-template-columns: auto 1fr;\n }\n\n .has-\\[\\>svg\\]\\:gap-x-2:has( > svg) {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .has-\\[\\>svg\\]\\:p-0:has( > svg) {\n padding: 0;\n }\n\n .has-\\[\\>textarea\\]\\:h-auto:has( > textarea) {\n height: auto;\n }\n\n .aria-disabled\\:pointer-events-none[aria-disabled=\"true\"] {\n pointer-events: none;\n }\n\n .aria-disabled\\:opacity-50[aria-disabled=\"true\"] {\n opacity: .5;\n }\n\n .aria-expanded\\:bg-muted[aria-expanded=\"true\"] {\n background-color: var(--muted);\n }\n\n .aria-expanded\\:bg-secondary[aria-expanded=\"true\"] {\n background-color: var(--secondary);\n }\n\n .aria-expanded\\:text-foreground[aria-expanded=\"true\"] {\n color: var(--foreground);\n }\n\n .aria-expanded\\:text-secondary-foreground[aria-expanded=\"true\"] {\n color: var(--secondary-foreground);\n }\n\n .aria-expanded\\:opacity-100[aria-expanded=\"true\"] {\n opacity: 1;\n }\n\n .aria-invalid\\:border-destructive[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n\n .aria-invalid\\:ring-0[aria-invalid=\"true\"] {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .aria-invalid\\:ring-3[aria-invalid=\"true\"] {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .aria-invalid\\:ring-destructive\\/20[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .aria-invalid\\:ring-destructive\\/20[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .aria-invalid\\:aria-checked\\:border-primary[aria-invalid=\"true\"][aria-checked=\"true\"] {\n border-color: var(--primary);\n }\n\n .aria-selected\\:text-muted-foreground[aria-selected=\"true\"] {\n color: var(--muted-foreground);\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:h-px[aria-orientation=\"horizontal\"] {\n height: 1px;\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:w-full[aria-orientation=\"horizontal\"] {\n width: 100%;\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:after\\:left-0[aria-orientation=\"horizontal\"]:after {\n content: var(--tw-content);\n left: 0;\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:after\\:h-1[aria-orientation=\"horizontal\"]:after {\n content: var(--tw-content);\n height: var(--spacing);\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:after\\:w-full[aria-orientation=\"horizontal\"]:after {\n content: var(--tw-content);\n width: 100%;\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:after\\:translate-x-0[aria-orientation=\"horizontal\"]:after {\n content: var(--tw-content);\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .aria-\\[orientation\\=horizontal\\]\\:after\\:-translate-y-1\\/2[aria-orientation=\"horizontal\"]:after {\n content: var(--tw-content);\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .aria-\\[orientation\\=vertical\\]\\:flex-col[aria-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .data-autoscrolling\\:scrollbar-thumb-transparent[data-autoscrolling] {\n --tw-scrollbar-thumb: transparent;\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n\n .data-autoscrolling\\:scrollbar-track-transparent[data-autoscrolling] {\n --tw-scrollbar-track: transparent;\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n\n .data-behind\\:opacity-0[data-behind] {\n opacity: 0;\n }\n\n .data-ending-style\\:h-0[data-ending-style] {\n height: 0;\n }\n\n .data-ending-style\\:scale-90[data-ending-style] {\n --tw-scale-x: 90%;\n --tw-scale-y: 90%;\n --tw-scale-z: 90%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-ending-style\\:opacity-0[data-ending-style] {\n opacity: 0;\n }\n\n .data-ending-style\\:duration-150[data-ending-style] {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .data-expanded\\:h-\\(--toast-height\\)[data-expanded] {\n height: var(--toast-height);\n }\n\n .data-expanded\\:\\[transform\\:translateX\\(var\\(--toast-swipe-movement-x\\)\\)_translateY\\(var\\(--offset-y\\)\\)\\][data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));\n }\n\n .data-expanded\\:opacity-100[data-expanded] {\n opacity: 1;\n }\n\n .data-highlighted\\:bg-accent[data-highlighted] {\n background-color: var(--accent);\n }\n\n .data-highlighted\\:text-accent-foreground[data-highlighted] {\n color: var(--accent-foreground);\n }\n\n .data-hovering\\:opacity-100[data-hovering] {\n opacity: 1;\n }\n\n .data-indeterminate\\:w-1\\/3[data-indeterminate] {\n width: 33.3333%;\n }\n\n .data-indeterminate\\:animate-\\[progress-indeterminate_1\\.5s_ease-in-out_infinite\\][data-indeterminate] {\n animation: 1.5s ease-in-out infinite progress-indeterminate;\n }\n\n .data-instant\\:transition-none[data-instant] {\n transition-property: none;\n }\n\n .data-invalid\\:border-destructive[data-invalid] {\n border-color: var(--destructive);\n }\n\n .data-limited\\:opacity-0[data-limited] {\n opacity: 0;\n }\n\n .data-pending-scroll\\:invisible[data-pending-scroll] {\n visibility: hidden;\n }\n\n .data-placeholder\\:text-muted-foreground[data-placeholder] {\n color: var(--muted-foreground);\n }\n\n .data-popup-open\\:border-ring[data-popup-open] {\n border-color: var(--ring);\n }\n\n .data-popup-open\\:bg-accent[data-popup-open] {\n background-color: var(--accent);\n }\n\n .data-popup-open\\:bg-muted\\/50[data-popup-open] {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-popup-open\\:bg-muted\\/50[data-popup-open] {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .data-popup-open\\:text-accent-foreground[data-popup-open] {\n color: var(--accent-foreground);\n }\n\n .data-popup-open\\:ring-3[data-popup-open] {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .data-popup-open\\:ring-ring\\/50[data-popup-open] {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-popup-open\\:ring-ring\\/50[data-popup-open] {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n @media (hover: hover) {\n .data-popup-open\\:hover\\:bg-muted[data-popup-open]:hover {\n background-color: var(--muted);\n }\n }\n\n .data-pressed\\:bg-muted[data-pressed] {\n background-color: var(--muted);\n }\n\n .data-pressed\\:text-foreground[data-pressed] {\n color: var(--foreground);\n }\n\n .data-scrolling\\:bg-muted-foreground\\/70[data-scrolling] {\n background-color: var(--muted-foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-scrolling\\:bg-muted-foreground\\/70[data-scrolling] {\n background-color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);\n }\n }\n\n .data-scrolling\\:opacity-100[data-scrolling] {\n opacity: 1;\n }\n\n :is(.group-data-\\[align\\=end\\]\\/message\\:\\*\\:data-slot\\:self-end:is(:where(.group\\/message)[data-align=\"end\"] *) > *)[data-slot] {\n align-self: flex-end;\n }\n\n .data-starting-style\\:h-0[data-starting-style] {\n height: 0;\n }\n\n .data-starting-style\\:scale-90[data-starting-style] {\n --tw-scale-x: 90%;\n --tw-scale-y: 90%;\n --tw-scale-z: 90%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-starting-style\\:\\[transform\\:translateY\\(150\\%\\)\\][data-starting-style] {\n transform: translateY(150%);\n }\n\n .data-starting-style\\:opacity-0[data-starting-style] {\n opacity: 0;\n }\n\n .data-ending-style\\:data-\\[activation-direction\\=left\\]\\:translate-x-\\[50\\%\\][data-ending-style][data-activation-direction=\"left\"] {\n --tw-translate-x: 50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-starting-style\\:data-\\[activation-direction\\=left\\]\\:translate-x-\\[-50\\%\\][data-starting-style][data-activation-direction=\"left\"], .data-ending-style\\:data-\\[activation-direction\\=right\\]\\:translate-x-\\[-50\\%\\][data-ending-style][data-activation-direction=\"right\"] {\n --tw-translate-x: -50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-starting-style\\:data-\\[activation-direction\\=right\\]\\:translate-x-\\[50\\%\\][data-starting-style][data-activation-direction=\"right\"] {\n --tw-translate-x: 50%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[active\\=false\\]\\:pointer-events-none[data-active=\"false\"] {\n pointer-events: none;\n }\n\n .data-\\[active\\=false\\]\\:scale-95[data-active=\"false\"] {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-\\[active\\=false\\]\\:opacity-0[data-active=\"false\"] {\n opacity: 0;\n }\n\n .data-\\[active\\=false\\]\\:duration-400[data-active=\"false\"] {\n --tw-duration: .4s;\n transition-duration: .4s;\n }\n\n .data-\\[active\\=false\\]\\:ease-\\[cubic-bezier\\(0\\.7\\,0\\,0\\.84\\,0\\)\\][data-active=\"false\"] {\n --tw-ease: cubic-bezier(.7,0,.84,0);\n transition-timing-function: cubic-bezier(.7, 0, .84, 0);\n }\n\n .data-\\[active\\=true\\]\\:z-10[data-active=\"true\"] {\n z-index: 10;\n }\n\n .data-\\[active\\=true\\]\\:translate-y-0[data-active=\"true\"] {\n --tw-translate-y: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[active\\=true\\]\\:scale-100[data-active=\"true\"] {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-\\[active\\=true\\]\\:border-ring[data-active=\"true\"] {\n border-color: var(--ring);\n }\n\n .data-\\[active\\=true\\]\\:opacity-100[data-active=\"true\"] {\n opacity: 1;\n }\n\n .data-\\[active\\=true\\]\\:ring-3[data-active=\"true\"] {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .data-\\[active\\=true\\]\\:ring-ring\\/50[data-active=\"true\"] {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-\\[active\\=true\\]\\:ring-ring\\/50[data-active=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n .data-\\[active\\=true\\]\\:ease-\\[cubic-bezier\\(0\\.23\\,1\\,0\\.32\\,1\\)\\][data-active=\"true\"] {\n --tw-ease: cubic-bezier(.23,1,.32,1);\n transition-timing-function: cubic-bezier(.23, 1, .32, 1);\n }\n\n .data-\\[active\\=true\\]\\:aria-invalid\\:border-destructive[data-active=\"true\"][aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n\n .data-\\[active\\=true\\]\\:aria-invalid\\:ring-destructive\\/20[data-active=\"true\"][aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-\\[active\\=true\\]\\:aria-invalid\\:ring-destructive\\/20[data-active=\"true\"][aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .data-\\[align\\=end\\]\\:flex-row-reverse[data-align=\"end\"] {\n flex-direction: row-reverse;\n }\n\n .data-\\[align\\=end\\]\\:self-end[data-align=\"end\"] {\n align-self: flex-end;\n }\n\n .data-\\[direction\\=end\\]\\:bottom-4[data-direction=\"end\"] {\n bottom: calc(var(--spacing) * 4);\n }\n\n .data-\\[direction\\=end\\]\\:data-\\[active\\=false\\]\\:translate-y-full[data-direction=\"end\"][data-active=\"false\"] {\n --tw-translate-y: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[direction\\=start\\]\\:top-4[data-direction=\"start\"] {\n top: calc(var(--spacing) * 4);\n }\n\n .data-\\[direction\\=start\\]\\:data-\\[active\\=false\\]\\:-translate-y-full[data-direction=\"start\"][data-active=\"false\"] {\n --tw-translate-y: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[disabled\\=true\\]\\:pointer-events-none[data-disabled=\"true\"] {\n pointer-events: none;\n }\n\n .data-\\[disabled\\=true\\]\\:opacity-50[data-disabled=\"true\"] {\n opacity: .5;\n }\n\n .data-\\[inset\\=true\\]\\:pl-7[data-inset=\"true\"] {\n padding-left: calc(var(--spacing) * 7);\n }\n\n .data-\\[motion\\=from-end\\]\\:slide-in-from-right-52[data-motion=\"from-end\"] {\n --tw-enter-translate-x: calc(52*var(--spacing));\n }\n\n .data-\\[motion\\=from-start\\]\\:slide-in-from-left-52[data-motion=\"from-start\"] {\n --tw-enter-translate-x: calc(52*var(--spacing)*-1);\n }\n\n .data-\\[motion\\=to-end\\]\\:slide-out-to-right-52[data-motion=\"to-end\"] {\n --tw-exit-translate-x: calc(52*var(--spacing));\n }\n\n .data-\\[motion\\=to-start\\]\\:slide-out-to-left-52[data-motion=\"to-start\"] {\n --tw-exit-translate-x: calc(52*var(--spacing)*-1);\n }\n\n .data-\\[motion\\^\\=from-\\]\\:animate-in[data-motion^=\"from-\"] {\n animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-\\[motion\\^\\=from-\\]\\:fade-in[data-motion^=\"from-\"] {\n --tw-enter-opacity: 0;\n }\n\n .data-\\[motion\\^\\=to-\\]\\:animate-out[data-motion^=\"to-\"] {\n animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-\\[motion\\^\\=to-\\]\\:fade-out[data-motion^=\"to-\"] {\n --tw-exit-opacity: 0;\n }\n\n .data-\\[orientation\\=horizontal\\]\\:flex[data-orientation=\"horizontal\"] {\n display: flex;\n }\n\n .data-\\[orientation\\=horizontal\\]\\:items-center[data-orientation=\"horizontal\"] {\n align-items: center;\n }\n\n .data-\\[orientation\\=vertical\\]\\:flex-col[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .data-\\[range-end\\=true\\]\\:rounded-\\(--cell-radius\\)[data-range-end=\"true\"] {\n border-radius: var(--cell-radius);\n }\n\n .data-\\[range-end\\=true\\]\\:rounded-r-\\(--cell-radius\\)[data-range-end=\"true\"] {\n border-top-right-radius: var(--cell-radius);\n border-bottom-right-radius: var(--cell-radius);\n }\n\n .data-\\[range-end\\=true\\]\\:bg-primary[data-range-end=\"true\"] {\n background-color: var(--primary);\n }\n\n .data-\\[range-end\\=true\\]\\:text-primary-foreground[data-range-end=\"true\"] {\n color: var(--primary-foreground);\n }\n\n .data-\\[range-middle\\=true\\]\\:rounded-none[data-range-middle=\"true\"] {\n border-radius: 0;\n }\n\n .data-\\[range-middle\\=true\\]\\:bg-muted[data-range-middle=\"true\"] {\n background-color: var(--muted);\n }\n\n .data-\\[range-middle\\=true\\]\\:text-foreground[data-range-middle=\"true\"] {\n color: var(--foreground);\n }\n\n .data-\\[range-start\\=true\\]\\:rounded-\\(--cell-radius\\)[data-range-start=\"true\"] {\n border-radius: var(--cell-radius);\n }\n\n .data-\\[range-start\\=true\\]\\:rounded-l-\\(--cell-radius\\)[data-range-start=\"true\"] {\n border-top-left-radius: var(--cell-radius);\n border-bottom-left-radius: var(--cell-radius);\n }\n\n .data-\\[range-start\\=true\\]\\:bg-primary[data-range-start=\"true\"] {\n background-color: var(--primary);\n }\n\n .data-\\[range-start\\=true\\]\\:text-primary-foreground[data-range-start=\"true\"] {\n color: var(--primary-foreground);\n }\n\n .data-\\[selected\\]\\:font-medium[data-selected] {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .data-\\[selected-single\\=true\\]\\:bg-primary[data-selected-single=\"true\"] {\n background-color: var(--primary);\n }\n\n .data-\\[selected-single\\=true\\]\\:text-primary-foreground[data-selected-single=\"true\"] {\n color: var(--primary-foreground);\n }\n\n .data-\\[selected\\=true\\]\\:rounded-none[data-selected=\"true\"] {\n border-radius: 0;\n }\n\n .data-\\[side\\=bottom\\]\\:inset-x-0[data-side=\"bottom\"] {\n inset-inline: 0;\n }\n\n .data-\\[side\\=bottom\\]\\:top-1[data-side=\"bottom\"] {\n top: var(--spacing);\n }\n\n .data-\\[side\\=bottom\\]\\:bottom-0[data-side=\"bottom\"] {\n bottom: 0;\n }\n\n .data-\\[side\\=bottom\\]\\:h-auto[data-side=\"bottom\"] {\n height: auto;\n }\n\n .data-\\[side\\=bottom\\]\\:border-t[data-side=\"bottom\"] {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=\"bottom\"] {\n --tw-enter-translate-y: calc(2*var(--spacing)*-1);\n }\n\n .data-\\[side\\=bottom\\]\\:before\\:top-\\[-10px\\][data-side=\"bottom\"]:before {\n content: var(--tw-content);\n top: -10px;\n }\n\n .data-\\[side\\=bottom\\]\\:before\\:right-0[data-side=\"bottom\"]:before {\n content: var(--tw-content);\n right: 0;\n }\n\n .data-\\[side\\=bottom\\]\\:before\\:left-0[data-side=\"bottom\"]:before {\n content: var(--tw-content);\n left: 0;\n }\n\n .data-\\[side\\=bottom\\]\\:data-ending-style\\:translate-y-\\[2\\.5rem\\][data-side=\"bottom\"][data-ending-style], .data-\\[side\\=bottom\\]\\:data-starting-style\\:translate-y-\\[2\\.5rem\\][data-side=\"bottom\"][data-starting-style] {\n --tw-translate-y: 2.5rem;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=inline-end\\]\\:top-1\\/2\\![data-side=\"inline-end\"] {\n top: 50% !important;\n }\n\n .data-\\[side\\=inline-end\\]\\:-left-1[data-side=\"inline-end\"] {\n left: calc(var(--spacing) * -1);\n }\n\n .data-\\[side\\=inline-end\\]\\:-translate-y-1\\/2[data-side=\"inline-end\"] {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=inline-end\\]\\:slide-in-from-left-2[data-side=\"inline-end\"] {\n --tw-enter-translate-x: calc(2*var(--spacing)*-1);\n }\n\n .data-\\[side\\=inline-start\\]\\:top-1\\/2\\![data-side=\"inline-start\"] {\n top: 50% !important;\n }\n\n .data-\\[side\\=inline-start\\]\\:-right-1[data-side=\"inline-start\"] {\n right: calc(var(--spacing) * -1);\n }\n\n .data-\\[side\\=inline-start\\]\\:-translate-y-1\\/2[data-side=\"inline-start\"] {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=inline-start\\]\\:slide-in-from-right-2[data-side=\"inline-start\"] {\n --tw-enter-translate-x: calc(2*var(--spacing));\n }\n\n .data-\\[side\\=left\\]\\:inset-y-0[data-side=\"left\"] {\n inset-block: 0;\n }\n\n .data-\\[side\\=left\\]\\:top-1\\/2\\![data-side=\"left\"] {\n top: 50% !important;\n }\n\n .data-\\[side\\=left\\]\\:-right-1[data-side=\"left\"] {\n right: calc(var(--spacing) * -1);\n }\n\n .data-\\[side\\=left\\]\\:left-0[data-side=\"left\"] {\n left: 0;\n }\n\n .data-\\[side\\=left\\]\\:h-full[data-side=\"left\"] {\n height: 100%;\n }\n\n .data-\\[side\\=left\\]\\:w-3\\/4[data-side=\"left\"] {\n width: 75%;\n }\n\n .data-\\[side\\=left\\]\\:-translate-y-1\\/2[data-side=\"left\"] {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=left\\]\\:border-r[data-side=\"left\"] {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=\"left\"] {\n --tw-enter-translate-x: calc(2*var(--spacing));\n }\n\n .data-\\[side\\=left\\]\\:group-data-\\[collapsible\\=offcanvas\\]\\:left-\\[calc\\(var\\(--sidebar-width\\)\\*-1\\)\\][data-side=\"left\"]:is(:where(.group)[data-collapsible=\"offcanvas\"] *) {\n left: calc(var(--sidebar-width) * -1);\n }\n\n .data-\\[side\\=left\\]\\:data-ending-style\\:translate-x-\\[-2\\.5rem\\][data-side=\"left\"][data-ending-style], .data-\\[side\\=left\\]\\:data-starting-style\\:translate-x-\\[-2\\.5rem\\][data-side=\"left\"][data-starting-style] {\n --tw-translate-x: -2.5rem;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=right\\]\\:inset-y-0[data-side=\"right\"] {\n inset-block: 0;\n }\n\n .data-\\[side\\=right\\]\\:top-1\\/2\\![data-side=\"right\"] {\n top: 50% !important;\n }\n\n .data-\\[side\\=right\\]\\:right-0[data-side=\"right\"] {\n right: 0;\n }\n\n .data-\\[side\\=right\\]\\:-left-1[data-side=\"right\"] {\n left: calc(var(--spacing) * -1);\n }\n\n .data-\\[side\\=right\\]\\:h-full[data-side=\"right\"] {\n height: 100%;\n }\n\n .data-\\[side\\=right\\]\\:w-3\\/4[data-side=\"right\"] {\n width: 75%;\n }\n\n .data-\\[side\\=right\\]\\:-translate-y-1\\/2[data-side=\"right\"] {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=right\\]\\:border-l[data-side=\"right\"] {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=\"right\"] {\n --tw-enter-translate-x: calc(2*var(--spacing)*-1);\n }\n\n .data-\\[side\\=right\\]\\:group-data-\\[collapsible\\=offcanvas\\]\\:right-\\[calc\\(var\\(--sidebar-width\\)\\*-1\\)\\][data-side=\"right\"]:is(:where(.group)[data-collapsible=\"offcanvas\"] *) {\n right: calc(var(--sidebar-width) * -1);\n }\n\n .data-\\[side\\=right\\]\\:data-ending-style\\:translate-x-\\[2\\.5rem\\][data-side=\"right\"][data-ending-style], .data-\\[side\\=right\\]\\:data-starting-style\\:translate-x-\\[2\\.5rem\\][data-side=\"right\"][data-starting-style] {\n --tw-translate-x: 2.5rem;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[side\\=top\\]\\:inset-x-0[data-side=\"top\"] {\n inset-inline: 0;\n }\n\n .data-\\[side\\=top\\]\\:top-0[data-side=\"top\"] {\n top: 0;\n }\n\n .data-\\[side\\=top\\]\\:-bottom-2\\.5[data-side=\"top\"] {\n bottom: calc(var(--spacing) * -2.5);\n }\n\n .data-\\[side\\=top\\]\\:h-auto[data-side=\"top\"] {\n height: auto;\n }\n\n .data-\\[side\\=top\\]\\:border-b[data-side=\"top\"] {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=\"top\"] {\n --tw-enter-translate-y: calc(2*var(--spacing));\n }\n\n .data-\\[side\\=top\\]\\:data-ending-style\\:translate-y-\\[-2\\.5rem\\][data-side=\"top\"][data-ending-style], .data-\\[side\\=top\\]\\:data-starting-style\\:translate-y-\\[-2\\.5rem\\][data-side=\"top\"][data-starting-style] {\n --tw-translate-y: -2.5rem;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .data-\\[size\\=default\\]\\:h-4\\.5[data-size=\"default\"] {\n height: calc(var(--spacing) * 4.5);\n }\n\n .data-\\[size\\=default\\]\\:w-8[data-size=\"default\"] {\n width: calc(var(--spacing) * 8);\n }\n\n .data-\\[size\\=default\\]\\:max-w-xs[data-size=\"default\"] {\n max-width: var(--container-xs);\n }\n\n .data-\\[size\\=lg\\]\\:size-10[data-size=\"lg\"] {\n width: calc(var(--spacing) * 10);\n height: calc(var(--spacing) * 10);\n }\n\n .data-\\[size\\=md\\]\\:text-sm[data-size=\"md\"] {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .data-\\[size\\=sm\\]\\:size-6[data-size=\"sm\"] {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .data-\\[size\\=sm\\]\\:h-3\\.5[data-size=\"sm\"] {\n height: calc(var(--spacing) * 3.5);\n }\n\n .data-\\[size\\=sm\\]\\:h-7[data-size=\"sm\"] {\n height: calc(var(--spacing) * 7);\n }\n\n .data-\\[size\\=sm\\]\\:w-6[data-size=\"sm\"] {\n width: calc(var(--spacing) * 6);\n }\n\n .data-\\[size\\=sm\\]\\:max-w-xs[data-size=\"sm\"] {\n max-width: var(--container-xs);\n }\n\n .data-\\[size\\=sm\\]\\:gap-3[data-size=\"sm\"] {\n gap: calc(var(--spacing) * 3);\n }\n\n .data-\\[size\\=sm\\]\\:rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\][data-size=\"sm\"] {\n border-radius: min(var(--radius-md), 10px);\n }\n\n .data-\\[size\\=sm\\]\\:py-0\\.5[data-size=\"sm\"] {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .data-\\[size\\=sm\\]\\:py-3[data-size=\"sm\"] {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .data-\\[size\\=sm\\]\\:text-xs[data-size=\"sm\"] {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .data-\\[size\\=sm\\]\\:has-data-\\[slot\\=card-footer\\]\\:pb-0[data-size=\"sm\"]:has([data-slot=\"card-footer\"]) {\n padding-bottom: 0;\n }\n\n :is(.\\*\\:data-\\[slot\\=alert-description\\]\\:text-destructive > *)[data-slot=\"alert-description\"] {\n color: var(--destructive);\n }\n\n :is(.\\*\\:data-\\[slot\\=alert-description\\]\\:text-info > *)[data-slot=\"alert-description\"] {\n color: var(--info);\n }\n\n :is(.\\*\\:data-\\[slot\\=alert-description\\]\\:text-success > *)[data-slot=\"alert-description\"] {\n color: var(--success);\n }\n\n :is(.\\*\\:data-\\[slot\\=alert-description\\]\\:text-warning > *)[data-slot=\"alert-description\"] {\n color: var(--warning);\n }\n\n :is(.\\*\\:data-\\[slot\\=attachment\\]\\:flex-none > *)[data-slot=\"attachment\"] {\n flex: none;\n }\n\n :is(.\\*\\:data-\\[slot\\=attachment\\]\\:snap-start > *)[data-slot=\"attachment\"] {\n scroll-snap-align: start;\n }\n\n :is(.\\*\\:data-\\[slot\\=avatar\\]\\:ring-2 > *)[data-slot=\"avatar\"] {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n :is(.\\*\\:data-\\[slot\\=avatar\\]\\:ring-background > *)[data-slot=\"avatar\"] {\n --tw-ring-color: var(--background);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:rounded-none > *)[data-slot=\"bubble-content\"] {\n border-radius: 0;\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:border-border > *)[data-slot=\"bubble-content\"] {\n border-color: var(--border);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-\\[oklch\\(from_var\\(--primary\\)_0\\.93_calc\\(c\\*0\\.4\\)_h\\)\\] > *)[data-slot=\"bubble-content\"] {\n background-color: oklch(from var(--primary) .93 calc(c * .4) h);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-background > *)[data-slot=\"bubble-content\"] {\n background-color: var(--background);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-destructive\\/10 > *)[data-slot=\"bubble-content\"] {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-destructive\\/10 > *)[data-slot=\"bubble-content\"] {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-muted > *)[data-slot=\"bubble-content\"] {\n background-color: var(--muted);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-primary > *)[data-slot=\"bubble-content\"] {\n background-color: var(--primary);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-secondary > *)[data-slot=\"bubble-content\"] {\n background-color: var(--secondary);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-transparent > *)[data-slot=\"bubble-content\"] {\n background-color: #0000;\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:p-0 > *)[data-slot=\"bubble-content\"] {\n padding: 0;\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:text-destructive > *)[data-slot=\"bubble-content\"] {\n color: var(--destructive);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:text-foreground > *)[data-slot=\"bubble-content\"] {\n color: var(--foreground);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:text-primary-foreground > *)[data-slot=\"bubble-content\"] {\n color: var(--primary-foreground);\n }\n\n :is(.\\*\\:data-\\[slot\\=bubble-content\\]\\:text-secondary-foreground > *)[data-slot=\"bubble-content\"] {\n color: var(--secondary-foreground);\n }\n\n :is(.\\*\\:data-\\[slot\\=input-group-addon\\]\\:pl-2\\! > *)[data-slot=\"input-group-addon\"] {\n padding-left: calc(var(--spacing) * 2) !important;\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=kbd\\]\\:relative *)[data-slot=\"kbd\"] {\n position: relative;\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=kbd\\]\\:isolate *)[data-slot=\"kbd\"] {\n isolation: isolate;\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=kbd\\]\\:z-50 *)[data-slot=\"kbd\"] {\n z-index: 50;\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=kbd\\]\\:rounded-sm *)[data-slot=\"kbd\"] {\n border-radius: calc(var(--radius) * .6);\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=navigation-menu-link\\]\\:focus\\:ring-0 *)[data-slot=\"navigation-menu-link\"]:focus {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n :is(.\\*\\*\\:data-\\[slot\\=navigation-menu-link\\]\\:focus\\:outline-none *)[data-slot=\"navigation-menu-link\"]:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n :is(.group-data-\\[orientation\\=vertical\\]\\/attachment\\:\\*\\:data-\\[slot\\=spinner\\]\\:size-6\\!:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) > *)[data-slot=\"spinner\"] {\n width: calc(var(--spacing) * 6) !important;\n height: calc(var(--spacing) * 6) !important;\n }\n\n .group-data-horizontal\\/toggle-group\\:data-\\[spacing\\=0\\]\\:first\\:rounded-l-lg:is(:where(.group\\/toggle-group):where([data-orientation=\"horizontal\"]) *)[data-spacing=\"0\"]:first-child {\n border-top-left-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n .group-data-vertical\\/toggle-group\\:data-\\[spacing\\=0\\]\\:first\\:rounded-t-lg:is(:where(.group\\/toggle-group):where([data-orientation=\"vertical\"]) *)[data-spacing=\"0\"]:first-child {\n border-top-left-radius: var(--radius);\n border-top-right-radius: var(--radius);\n }\n\n .group-data-horizontal\\/toggle-group\\:data-\\[spacing\\=0\\]\\:last\\:rounded-r-lg:is(:where(.group\\/toggle-group):where([data-orientation=\"horizontal\"]) *)[data-spacing=\"0\"]:last-child {\n border-top-right-radius: var(--radius);\n border-bottom-right-radius: var(--radius);\n }\n\n .group-data-vertical\\/toggle-group\\:data-\\[spacing\\=0\\]\\:last\\:rounded-b-lg:is(:where(.group\\/toggle-group):where([data-orientation=\"vertical\"]) *)[data-spacing=\"0\"]:last-child {\n border-bottom-right-radius: var(--radius);\n border-bottom-left-radius: var(--radius);\n }\n\n .data-\\[state\\=delayed-open\\]\\:animate-in[data-state=\"delayed-open\"] {\n animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-\\[state\\=delayed-open\\]\\:fade-in-0[data-state=\"delayed-open\"] {\n --tw-enter-opacity: 0;\n }\n\n .data-\\[state\\=delayed-open\\]\\:zoom-in-95[data-state=\"delayed-open\"] {\n --tw-enter-scale: .95;\n }\n\n .data-\\[state\\=error\\]\\:border-destructive\\/30[data-state=\"error\"] {\n border-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-\\[state\\=error\\]\\:border-destructive\\/30[data-state=\"error\"] {\n border-color: color-mix(in oklab, var(--destructive) 30%, transparent);\n }\n }\n\n .data-\\[state\\=hidden\\]\\:animate-out[data-state=\"hidden\"] {\n animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-\\[state\\=hidden\\]\\:fade-out[data-state=\"hidden\"] {\n --tw-exit-opacity: 0;\n }\n\n .data-\\[state\\=idle\\]\\:border-dashed[data-state=\"idle\"] {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .data-\\[state\\=selected\\]\\:bg-muted[data-state=\"selected\"] {\n background-color: var(--muted);\n }\n\n .data-\\[state\\=visible\\]\\:animate-in[data-state=\"visible\"] {\n animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-\\[state\\=visible\\]\\:fade-in[data-state=\"visible\"] {\n --tw-enter-opacity: 0;\n }\n\n .data-ending-style\\:data-\\[swipe-direction\\=down\\]\\:\\[transform\\:translateY\\(calc\\(var\\(--toast-swipe-movement-y\\)\\+150\\%\\)\\)\\][data-ending-style][data-swipe-direction=\"down\"], .data-expanded\\:data-ending-style\\:data-\\[swipe-direction\\=down\\]\\:\\[transform\\:translateY\\(calc\\(var\\(--toast-swipe-movement-y\\)\\+150\\%\\)\\)\\][data-expanded][data-ending-style][data-swipe-direction=\"down\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));\n }\n\n .data-ending-style\\:data-\\[swipe-direction\\=left\\]\\:\\[transform\\:translateX\\(calc\\(var\\(--toast-swipe-movement-x\\)-150\\%\\)\\)_translateY\\(var\\(--offset-y\\)\\)\\][data-ending-style][data-swipe-direction=\"left\"], .data-expanded\\:data-ending-style\\:data-\\[swipe-direction\\=left\\]\\:\\[transform\\:translateX\\(calc\\(var\\(--toast-swipe-movement-x\\)-150\\%\\)\\)_translateY\\(var\\(--offset-y\\)\\)\\][data-expanded][data-ending-style][data-swipe-direction=\"left\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y));\n }\n\n .data-ending-style\\:data-\\[swipe-direction\\=right\\]\\:\\[transform\\:translateX\\(calc\\(var\\(--toast-swipe-movement-x\\)\\+150\\%\\)\\)_translateY\\(var\\(--offset-y\\)\\)\\][data-ending-style][data-swipe-direction=\"right\"], .data-expanded\\:data-ending-style\\:data-\\[swipe-direction\\=right\\]\\:\\[transform\\:translateX\\(calc\\(var\\(--toast-swipe-movement-x\\)\\+150\\%\\)\\)_translateY\\(var\\(--offset-y\\)\\)\\][data-expanded][data-ending-style][data-swipe-direction=\"right\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y));\n }\n\n .data-ending-style\\:data-\\[swipe-direction\\=up\\]\\:\\[transform\\:translateY\\(calc\\(var\\(--toast-swipe-movement-y\\)-150\\%\\)\\)\\][data-ending-style][data-swipe-direction=\"up\"], .data-expanded\\:data-ending-style\\:data-\\[swipe-direction\\=up\\]\\:\\[transform\\:translateY\\(calc\\(var\\(--toast-swipe-movement-y\\)-150\\%\\)\\)\\][data-expanded][data-ending-style][data-swipe-direction=\"up\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));\n }\n\n .data-\\[variant\\=destructive\\]\\:text-destructive[data-variant=\"destructive\"] {\n color: var(--destructive);\n }\n\n .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10[data-variant=\"destructive\"]:focus {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10[data-variant=\"destructive\"]:focus {\n background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n }\n }\n\n .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive[data-variant=\"destructive\"]:focus {\n color: var(--destructive);\n }\n\n .data-\\[variant\\=ghost\\]\\:max-w-full[data-variant=\"ghost\"] {\n max-width: 100%;\n }\n\n .data-\\[variant\\=line\\]\\:rounded-none[data-variant=\"line\"] {\n border-radius: 0;\n }\n\n .group-data-horizontal\\/toggle-group\\:data-\\[spacing\\=0\\]\\:data-\\[variant\\=outline\\]\\:border-l-0:is(:where(.group\\/toggle-group):where([data-orientation=\"horizontal\"]) *)[data-spacing=\"0\"][data-variant=\"outline\"] {\n border-left-style: var(--tw-border-style);\n border-left-width: 0;\n }\n\n .group-data-vertical\\/toggle-group\\:data-\\[spacing\\=0\\]\\:data-\\[variant\\=outline\\]\\:border-t-0:is(:where(.group\\/toggle-group):where([data-orientation=\"vertical\"]) *)[data-spacing=\"0\"][data-variant=\"outline\"] {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .group-data-horizontal\\/toggle-group\\:data-\\[spacing\\=0\\]\\:data-\\[variant\\=outline\\]\\:first\\:border-l:is(:where(.group\\/toggle-group):where([data-orientation=\"horizontal\"]) *)[data-spacing=\"0\"][data-variant=\"outline\"]:first-child {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .group-data-vertical\\/toggle-group\\:data-\\[spacing\\=0\\]\\:data-\\[variant\\=outline\\]\\:first\\:border-t:is(:where(.group\\/toggle-group):where([data-orientation=\"vertical\"]) *)[data-spacing=\"0\"][data-variant=\"outline\"]:first-child {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {\n .supports-backdrop-filter\\:backdrop-blur-xs {\n --tw-backdrop-blur: blur(var(--blur-xs));\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .motion-safe\\:transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .motion-safe\\:duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .motion-reduce\\:transform-none {\n transform: none;\n }\n\n .motion-reduce\\:animate-none {\n animation: none;\n }\n\n .motion-reduce\\:transition-none {\n transition-property: none;\n }\n }\n\n @media (min-width: 40rem) {\n .sm\\:right-4 {\n right: calc(var(--spacing) * 4);\n }\n\n .sm\\:left-auto {\n left: auto;\n }\n\n .sm\\:mx-0 {\n margin-inline: 0;\n }\n\n .sm\\:flex {\n display: flex;\n }\n\n .sm\\:min-h-0 {\n min-height: 0;\n }\n\n .sm\\:min-h-8 {\n min-height: calc(var(--spacing) * 8);\n }\n\n .sm\\:w-full {\n width: 100%;\n }\n\n .sm\\:max-w-sm {\n max-width: var(--container-sm);\n }\n\n .sm\\:flex-row {\n flex-direction: row;\n }\n\n .sm\\:justify-end {\n justify-content: flex-end;\n }\n\n .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:row-span-2:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n grid-row: span 2 / span 2;\n }\n\n .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:place-items-start:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n place-items: start;\n }\n\n .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:text-left:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *) {\n text-align: left;\n }\n\n .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:group-has-data-\\[slot\\=alert-dialog-media\\]\\/alert-dialog-content\\:col-start-2:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *):is(:where(.group\\/alert-dialog-content):has([data-slot=\"alert-dialog-media\"]) *) {\n grid-column-start: 2;\n }\n\n .sm\\:group-data-\\[size\\=default\\]\\/alert-dialog-content\\:has-data-\\[slot\\=alert-dialog-media\\]\\:grid-rows-\\[auto_1fr\\]:is(:where(.group\\/alert-dialog-content)[data-size=\"default\"] *):has([data-slot=\"alert-dialog-media\"]) {\n grid-template-rows: auto 1fr;\n }\n\n .data-\\[side\\=left\\]\\:sm\\:max-w-sm[data-side=\"left\"], .data-\\[side\\=right\\]\\:sm\\:max-w-sm[data-side=\"right\"], .data-\\[size\\=default\\]\\:sm\\:max-w-sm[data-size=\"default\"] {\n max-width: var(--container-sm);\n }\n }\n\n @media (min-width: 48rem) {\n .md\\:block {\n display: block;\n }\n\n .md\\:flex {\n display: flex;\n }\n\n .md\\:flex-row {\n flex-direction: row;\n }\n\n .md\\:text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .md\\:text-pretty {\n text-wrap: pretty;\n }\n\n .md\\:opacity-0 {\n opacity: 0;\n }\n\n .md\\:peer-data-\\[variant\\=inset\\]\\:m-2:is(:where(.peer)[data-variant=\"inset\"] ~ *) {\n margin: calc(var(--spacing) * 2);\n }\n\n .md\\:peer-data-\\[variant\\=inset\\]\\:ml-0:is(:where(.peer)[data-variant=\"inset\"] ~ *) {\n margin-left: 0;\n }\n\n .md\\:peer-data-\\[variant\\=inset\\]\\:rounded-xl:is(:where(.peer)[data-variant=\"inset\"] ~ *) {\n border-radius: calc(var(--radius) * 1.4);\n }\n\n .md\\:peer-data-\\[variant\\=inset\\]\\:shadow-sm:is(:where(.peer)[data-variant=\"inset\"] ~ *) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .md\\:peer-data-\\[variant\\=inset\\]\\:peer-data-\\[state\\=collapsed\\]\\:ml-2:is(:where(.peer)[data-variant=\"inset\"] ~ *):is(:where(.peer)[data-state=\"collapsed\"] ~ *) {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .md\\:after\\:hidden:after {\n content: var(--tw-content);\n display: none;\n }\n }\n\n .ltr\\:-translate-x-1\\/2:where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *), .rtl\\:-translate-x-1\\/2:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .rtl\\:translate-x-1\\/2:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n --tw-translate-x: calc(1 / 2 * 100%);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .dark\\:border-input:is(.dark *) {\n border-color: var(--input);\n }\n\n .dark\\:bg-destructive\\/15:is(.dark *) {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-destructive\\/15:is(.dark *) {\n background-color: color-mix(in oklab, var(--destructive) 15%, transparent);\n }\n }\n\n .dark\\:bg-destructive\\/20:is(.dark *) {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-destructive\\/20:is(.dark *) {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .dark\\:bg-info-ring\\/30:is(.dark *) {\n background-color: var(--info-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-info-ring\\/30:is(.dark *) {\n background-color: color-mix(in oklab, var(--info-ring) 30%, transparent);\n }\n }\n\n .dark\\:bg-input\\/20:is(.dark *) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-input\\/20:is(.dark *) {\n background-color: color-mix(in oklab, var(--input) 20%, transparent);\n }\n }\n\n .dark\\:bg-input\\/30:is(.dark *) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-input\\/30:is(.dark *) {\n background-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n\n .dark\\:bg-success-ring\\/30:is(.dark *) {\n background-color: var(--success-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-success-ring\\/30:is(.dark *) {\n background-color: color-mix(in oklab, var(--success-ring) 30%, transparent);\n }\n }\n\n .dark\\:bg-transparent:is(.dark *) {\n background-color: #0000;\n }\n\n .dark\\:bg-warning-ring\\/30:is(.dark *) {\n background-color: var(--warning-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:bg-warning-ring\\/30:is(.dark *) {\n background-color: color-mix(in oklab, var(--warning-ring) 30%, transparent);\n }\n }\n\n .dark\\:text-background:is(.dark *) {\n color: var(--background);\n }\n\n .dark\\:text-muted-foreground:is(.dark *) {\n color: var(--muted-foreground);\n }\n\n .dark\\:group-data-checked\\/questionnaire-choice\\:bg-primary:is(.dark *):is(:is(:where(.group\\/questionnaire-choice):where([data-state=\"checked\"]), :where(.group\\/questionnaire-choice):where([data-checked]:not([data-checked=\"false\"]))) *) {\n background-color: var(--primary);\n }\n\n .dark\\:after\\:mix-blend-lighten:is(.dark *):after {\n content: var(--tw-content);\n mix-blend-mode: lighten;\n }\n\n @media (hover: hover) {\n .dark\\:hover\\:bg-destructive\\/20:is(.dark *):hover {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:hover\\:bg-destructive\\/20:is(.dark *):hover {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .dark\\:hover\\:bg-input\\/50:is(.dark *):hover {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:hover\\:bg-input\\/50:is(.dark *):hover {\n background-color: color-mix(in oklab, var(--input) 50%, transparent);\n }\n }\n\n .dark\\:hover\\:bg-muted\\/50:is(.dark *):hover {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:hover\\:bg-muted\\/50:is(.dark *):hover {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .dark\\:hover\\:text-foreground:is(.dark *):hover {\n color: var(--foreground);\n }\n }\n\n .dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n .dark\\:disabled\\:bg-input\\/80:is(.dark *):disabled {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:disabled\\:bg-input\\/80:is(.dark *):disabled {\n background-color: color-mix(in oklab, var(--input) 80%, transparent);\n }\n }\n\n .dark\\:disabled\\:bg-transparent:is(.dark *):disabled {\n background-color: #0000;\n }\n\n :where([data-slot=\"tooltip-content\"]) .dark\\:in-data-\\[slot\\=tooltip-content\\]\\:bg-background\\/10:is(.dark *) {\n background-color: var(--background);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n :where([data-slot=\"tooltip-content\"]) .dark\\:in-data-\\[slot\\=tooltip-content\\]\\:bg-background\\/10:is(.dark *) {\n background-color: color-mix(in oklab, var(--background) 10%, transparent);\n }\n }\n\n .dark\\:has-disabled\\:bg-input\\/80:is(.dark *):has(:disabled) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:has-disabled\\:bg-input\\/80:is(.dark *):has(:disabled) {\n background-color: color-mix(in oklab, var(--input) 80%, transparent);\n }\n }\n\n .dark\\:has-aria-invalid\\:ring-destructive\\/40:is(.dark *):has([aria-invalid=\"true\"]) {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:has-aria-invalid\\:ring-destructive\\/40:is(.dark *):has([aria-invalid=\"true\"]) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n .dark\\:has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:ring-destructive\\/40:is(.dark *):has([data-slot][aria-invalid=\"true\"]) {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:has-\\[\\[data-slot\\]\\[aria-invalid\\=true\\]\\]\\:ring-destructive\\/40:is(.dark *):has([data-slot][aria-invalid=\"true\"]) {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n .dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=\"true\"] {\n border-color: color-mix(in oklab, var(--destructive) 50%, transparent);\n }\n }\n\n .dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n .dark\\:data-\\[active\\=true\\]\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[data-active=\"true\"][aria-invalid=\"true\"] {\n --tw-ring-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:data-\\[active\\=true\\]\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[data-active=\"true\"][aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n\n :is(.dark\\:\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-\\[oklch\\(from_var\\(--primary\\)_0\\.3_calc\\(c\\*0\\.4\\)_h\\)\\]:is(.dark *) > *)[data-slot=\"bubble-content\"] {\n background-color: oklch(from var(--primary) .3 calc(c * .4) h);\n }\n\n :is(.dark\\:\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-destructive\\/20:is(.dark *) > *)[data-slot=\"bubble-content\"] {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n :is(.dark\\:\\*\\:data-\\[slot\\=bubble-content\\]\\:bg-destructive\\/20:is(.dark *) > *)[data-slot=\"bubble-content\"] {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20:is(.dark *)[data-variant=\"destructive\"]:focus {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20:is(.dark *)[data-variant=\"destructive\"]:focus {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .data-open\\:scale-100:where([data-state=\"open\"]), .data-open\\:scale-100:where([data-open]:not([data-open=\"false\"])) {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-open\\:animate-in:where([data-state=\"open\"]), .data-open\\:animate-in:where([data-open]:not([data-open=\"false\"])) {\n animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-open\\:bg-accent:where([data-state=\"open\"]), .data-open\\:bg-accent:where([data-open]:not([data-open=\"false\"])) {\n background-color: var(--accent);\n }\n\n .data-open\\:bg-muted\\/50:where([data-state=\"open\"]), .data-open\\:bg-muted\\/50:where([data-open]:not([data-open=\"false\"])) {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-open\\:bg-muted\\/50:where([data-state=\"open\"]), .data-open\\:bg-muted\\/50:where([data-open]:not([data-open=\"false\"])) {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .data-open\\:text-accent-foreground:where([data-state=\"open\"]), .data-open\\:text-accent-foreground:where([data-open]:not([data-open=\"false\"])) {\n color: var(--accent-foreground);\n }\n\n .data-open\\:opacity-100:where([data-state=\"open\"]), .data-open\\:opacity-100:where([data-open]:not([data-open=\"false\"])) {\n opacity: 1;\n }\n\n .data-open\\:fade-in-0:where([data-state=\"open\"]), .data-open\\:fade-in-0:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-opacity: 0;\n }\n\n .data-open\\:zoom-in-95:where([data-state=\"open\"]), .data-open\\:zoom-in-95:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-scale: .95;\n }\n\n .data-open\\:slide-in-from-bottom:where([data-state=\"open\"]), .data-open\\:slide-in-from-bottom:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-translate-y: 100%;\n }\n\n .data-open\\:slide-in-from-left:where([data-state=\"open\"]), .data-open\\:slide-in-from-left:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-translate-x: -100%;\n }\n\n .data-open\\:slide-in-from-right:where([data-state=\"open\"]), .data-open\\:slide-in-from-right:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-translate-x: 100%;\n }\n\n .data-open\\:slide-in-from-top:where([data-state=\"open\"]), .data-open\\:slide-in-from-top:where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-translate-y: -100%;\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:animate-in:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"open\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:animate-in:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-open]:not([data-open=\"false\"])) {\n animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:fade-in-0:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"open\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:fade-in-0:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-opacity: 0;\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:zoom-in-95:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"open\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-open\\:zoom-in-95:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-open]:not([data-open=\"false\"])) {\n --tw-enter-scale: .95;\n }\n\n @media (hover: hover) {\n :is(.data-open\\:hover\\:bg-muted:where([data-state=\"open\"]), .data-open\\:hover\\:bg-muted:where([data-open]:not([data-open=\"false\"]))):hover {\n background-color: var(--muted);\n }\n\n :is(.data-open\\:hover\\:bg-sidebar-accent:where([data-state=\"open\"]), .data-open\\:hover\\:bg-sidebar-accent:where([data-open]:not([data-open=\"false\"]))):hover {\n background-color: var(--sidebar-accent);\n }\n\n :is(.data-open\\:hover\\:text-sidebar-accent-foreground:where([data-state=\"open\"]), .data-open\\:hover\\:text-sidebar-accent-foreground:where([data-open]:not([data-open=\"false\"]))):hover {\n color: var(--sidebar-accent-foreground);\n }\n }\n\n :is(.data-open\\:focus\\:bg-muted:where([data-state=\"open\"]), .data-open\\:focus\\:bg-muted:where([data-open]:not([data-open=\"false\"]))):focus {\n background-color: var(--muted);\n }\n\n .data-closed\\:scale-95:where([data-state=\"closed\"]), .data-closed\\:scale-95:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .data-closed\\:animate-out:where([data-state=\"closed\"]), .data-closed\\:animate-out:where([data-closed]:not([data-closed=\"false\"])) {\n animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .data-closed\\:overflow-hidden:where([data-state=\"closed\"]), .data-closed\\:overflow-hidden:where([data-closed]:not([data-closed=\"false\"])) {\n overflow: hidden;\n }\n\n .data-closed\\:opacity-0:where([data-state=\"closed\"]), .data-closed\\:opacity-0:where([data-closed]:not([data-closed=\"false\"])) {\n opacity: 0;\n }\n\n .data-closed\\:fade-out-0:where([data-state=\"closed\"]), .data-closed\\:fade-out-0:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-opacity: 0;\n }\n\n .data-closed\\:zoom-out-95:where([data-state=\"closed\"]), .data-closed\\:zoom-out-95:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-scale: .95;\n }\n\n .data-closed\\:slide-out-to-bottom:where([data-state=\"closed\"]), .data-closed\\:slide-out-to-bottom:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-translate-y: 100%;\n }\n\n .data-closed\\:slide-out-to-left:where([data-state=\"closed\"]), .data-closed\\:slide-out-to-left:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-translate-x: -100%;\n }\n\n .data-closed\\:slide-out-to-right:where([data-state=\"closed\"]), .data-closed\\:slide-out-to-right:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-translate-x: 100%;\n }\n\n .data-closed\\:slide-out-to-top:where([data-state=\"closed\"]), .data-closed\\:slide-out-to-top:where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-translate-y: -100%;\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:animate-out:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"closed\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:animate-out:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-closed]:not([data-closed=\"false\"])) {\n animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:fade-out-0:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"closed\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:fade-out-0:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-opacity: 0;\n }\n\n .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:zoom-out-95:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-state=\"closed\"]), .group-data-\\[viewport\\=false\\]\\/navigation-menu\\:data-closed\\:zoom-out-95:is(:where(.group\\/navigation-menu)[data-viewport=\"false\"] *):where([data-closed]:not([data-closed=\"false\"])) {\n --tw-exit-scale: .95;\n }\n\n .data-checked\\:border-primary:where([data-state=\"checked\"]), .data-checked\\:border-primary:where([data-checked]:not([data-checked=\"false\"])), .data-checked\\:border-primary\\/40:where([data-state=\"checked\"]), .data-checked\\:border-primary\\/40:where([data-checked]:not([data-checked=\"false\"])) {\n border-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-checked\\:border-primary\\/40:where([data-state=\"checked\"]), .data-checked\\:border-primary\\/40:where([data-checked]:not([data-checked=\"false\"])) {\n border-color: color-mix(in oklab, var(--primary) 40%, transparent);\n }\n }\n\n .data-checked\\:bg-muted:where([data-state=\"checked\"]), .data-checked\\:bg-muted:where([data-checked]:not([data-checked=\"false\"])) {\n background-color: var(--muted);\n }\n\n .data-checked\\:bg-primary:where([data-state=\"checked\"]), .data-checked\\:bg-primary:where([data-checked]:not([data-checked=\"false\"])) {\n background-color: var(--primary);\n }\n\n .data-checked\\:text-primary-foreground:where([data-state=\"checked\"]), .data-checked\\:text-primary-foreground:where([data-checked]:not([data-checked=\"false\"])) {\n color: var(--primary-foreground);\n }\n\n .group-data-\\[size\\=default\\]\\/switch\\:data-checked\\:translate-x-\\[calc\\(100\\%-2px\\)\\]:is(:where(.group\\/switch)[data-size=\"default\"] *):where([data-state=\"checked\"]), .group-data-\\[size\\=default\\]\\/switch\\:data-checked\\:translate-x-\\[calc\\(100\\%-2px\\)\\]:is(:where(.group\\/switch)[data-size=\"default\"] *):where([data-checked]:not([data-checked=\"false\"])), .group-data-\\[size\\=sm\\]\\/switch\\:data-checked\\:translate-x-\\[calc\\(100\\%-2px\\)\\]:is(:where(.group\\/switch)[data-size=\"sm\"] *):where([data-state=\"checked\"]), .group-data-\\[size\\=sm\\]\\/switch\\:data-checked\\:translate-x-\\[calc\\(100\\%-2px\\)\\]:is(:where(.group\\/switch)[data-size=\"sm\"] *):where([data-checked]:not([data-checked=\"false\"])) {\n --tw-translate-x: calc(100% - 2px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .dark\\:data-checked\\:bg-muted:is(.dark *):where([data-state=\"checked\"]), .dark\\:data-checked\\:bg-muted:is(.dark *):where([data-checked]:not([data-checked=\"false\"])) {\n background-color: var(--muted);\n }\n\n .dark\\:data-checked\\:bg-primary:is(.dark *):where([data-state=\"checked\"]), .dark\\:data-checked\\:bg-primary:is(.dark *):where([data-checked]:not([data-checked=\"false\"])) {\n background-color: var(--primary);\n }\n\n .dark\\:data-checked\\:bg-primary-foreground:is(.dark *):where([data-state=\"checked\"]), .dark\\:data-checked\\:bg-primary-foreground:is(.dark *):where([data-checked]:not([data-checked=\"false\"])) {\n background-color: var(--primary-foreground);\n }\n\n .data-unchecked\\:bg-input:where([data-state=\"unchecked\"]), .data-unchecked\\:bg-input:where([data-unchecked]:not([data-unchecked=\"false\"])) {\n background-color: var(--input);\n }\n\n .group-data-\\[size\\=default\\]\\/switch\\:data-unchecked\\:translate-x-0:is(:where(.group\\/switch)[data-size=\"default\"] *):where([data-state=\"unchecked\"]), .group-data-\\[size\\=default\\]\\/switch\\:data-unchecked\\:translate-x-0:is(:where(.group\\/switch)[data-size=\"default\"] *):where([data-unchecked]:not([data-unchecked=\"false\"])), .group-data-\\[size\\=sm\\]\\/switch\\:data-unchecked\\:translate-x-0:is(:where(.group\\/switch)[data-size=\"sm\"] *):where([data-state=\"unchecked\"]), .group-data-\\[size\\=sm\\]\\/switch\\:data-unchecked\\:translate-x-0:is(:where(.group\\/switch)[data-size=\"sm\"] *):where([data-unchecked]:not([data-unchecked=\"false\"])) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .dark\\:data-unchecked\\:bg-foreground:is(.dark *):where([data-state=\"unchecked\"]), .dark\\:data-unchecked\\:bg-foreground:is(.dark *):where([data-unchecked]:not([data-unchecked=\"false\"])) {\n background-color: var(--foreground);\n }\n\n .dark\\:data-unchecked\\:bg-input\\/80:is(.dark *):where([data-state=\"unchecked\"]), .dark\\:data-unchecked\\:bg-input\\/80:is(.dark *):where([data-unchecked]:not([data-unchecked=\"false\"])) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:data-unchecked\\:bg-input\\/80:is(.dark *):where([data-state=\"unchecked\"]), .dark\\:data-unchecked\\:bg-input\\/80:is(.dark *):where([data-unchecked]:not([data-unchecked=\"false\"])) {\n background-color: color-mix(in oklab, var(--input) 80%, transparent);\n }\n }\n\n .data-selected\\:bg-muted:where([data-selected=\"true\"]) {\n background-color: var(--muted);\n }\n\n .data-selected\\:text-foreground:where([data-selected=\"true\"]) {\n color: var(--foreground);\n }\n\n .data-disabled\\:pointer-events-none:where([data-disabled=\"true\"]), .data-disabled\\:pointer-events-none:where([data-disabled]:not([data-disabled=\"false\"])) {\n pointer-events: none;\n }\n\n .data-disabled\\:cursor-not-allowed:where([data-disabled=\"true\"]), .data-disabled\\:cursor-not-allowed:where([data-disabled]:not([data-disabled=\"false\"])) {\n cursor: not-allowed;\n }\n\n .data-disabled\\:opacity-50:where([data-disabled=\"true\"]), .data-disabled\\:opacity-50:where([data-disabled]:not([data-disabled=\"false\"])) {\n opacity: .5;\n }\n\n .data-active\\:bg-background:where([data-state=\"active\"]), .data-active\\:bg-background:where([data-active]:not([data-active=\"false\"])) {\n background-color: var(--background);\n }\n\n .data-active\\:bg-muted\\/50:where([data-state=\"active\"]), .data-active\\:bg-muted\\/50:where([data-active]:not([data-active=\"false\"])) {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .data-active\\:bg-muted\\/50:where([data-state=\"active\"]), .data-active\\:bg-muted\\/50:where([data-active]:not([data-active=\"false\"])) {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .data-active\\:bg-sidebar-accent:where([data-state=\"active\"]), .data-active\\:bg-sidebar-accent:where([data-active]:not([data-active=\"false\"])) {\n background-color: var(--sidebar-accent);\n }\n\n .data-active\\:font-medium:where([data-state=\"active\"]), .data-active\\:font-medium:where([data-active]:not([data-active=\"false\"])) {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .data-active\\:text-foreground:where([data-state=\"active\"]), .data-active\\:text-foreground:where([data-active]:not([data-active=\"false\"])) {\n color: var(--foreground);\n }\n\n .data-active\\:text-sidebar-accent-foreground:where([data-state=\"active\"]), .data-active\\:text-sidebar-accent-foreground:where([data-active]:not([data-active=\"false\"])) {\n color: var(--sidebar-accent-foreground);\n }\n\n .group-data-\\[variant\\=default\\]\\/tabs-list\\:data-active\\:shadow-sm:is(:where(.group\\/tabs-list)[data-variant=\"default\"] *):where([data-state=\"active\"]), .group-data-\\[variant\\=default\\]\\/tabs-list\\:data-active\\:shadow-sm:is(:where(.group\\/tabs-list)[data-variant=\"default\"] *):where([data-active]:not([data-active=\"false\"])) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-state=\"active\"]), .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-active]:not([data-active=\"false\"])) {\n background-color: #0000;\n }\n\n .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:shadow-none:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-state=\"active\"]), .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:shadow-none:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-active]:not([data-active=\"false\"])) {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n :is(.group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:after\\:opacity-100:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-state=\"active\"]), .group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:after\\:opacity-100:is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-active]:not([data-active=\"false\"]))):after {\n content: var(--tw-content);\n opacity: 1;\n }\n\n @media (hover: hover) {\n :is(.data-active\\:hover\\:bg-muted:where([data-state=\"active\"]), .data-active\\:hover\\:bg-muted:where([data-active]:not([data-active=\"false\"]))):hover {\n background-color: var(--muted);\n }\n }\n\n :is(.data-active\\:focus\\:bg-muted:where([data-state=\"active\"]), .data-active\\:focus\\:bg-muted:where([data-active]:not([data-active=\"false\"]))):focus {\n background-color: var(--muted);\n }\n\n .dark\\:data-active\\:border-input:is(.dark *):where([data-state=\"active\"]), .dark\\:data-active\\:border-input:is(.dark *):where([data-active]:not([data-active=\"false\"])) {\n border-color: var(--input);\n }\n\n .dark\\:data-active\\:bg-input\\/30:is(.dark *):where([data-state=\"active\"]), .dark\\:data-active\\:bg-input\\/30:is(.dark *):where([data-active]:not([data-active=\"false\"])) {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:data-active\\:bg-input\\/30:is(.dark *):where([data-state=\"active\"]), .dark\\:data-active\\:bg-input\\/30:is(.dark *):where([data-active]:not([data-active=\"false\"])) {\n background-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n\n .dark\\:data-active\\:text-foreground:is(.dark *):where([data-state=\"active\"]), .dark\\:data-active\\:text-foreground:is(.dark *):where([data-active]:not([data-active=\"false\"])) {\n color: var(--foreground);\n }\n\n .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:border-transparent:is(.dark *):is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-state=\"active\"]), .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:border-transparent:is(.dark *):is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-active]:not([data-active=\"false\"])) {\n border-color: #0000;\n }\n\n .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent:is(.dark *):is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-state=\"active\"]), .dark\\:group-data-\\[variant\\=line\\]\\/tabs-list\\:data-active\\:bg-transparent:is(.dark *):is(:where(.group\\/tabs-list)[data-variant=\"line\"] *):where([data-active]:not([data-active=\"false\"])) {\n background-color: #0000;\n }\n\n .data-horizontal\\:h-px:where([data-orientation=\"horizontal\"]) {\n height: 1px;\n }\n\n .data-horizontal\\:w-full:where([data-orientation=\"horizontal\"]) {\n width: 100%;\n }\n\n .data-horizontal\\:flex-col:where([data-orientation=\"horizontal\"]) {\n flex-direction: column;\n }\n\n .data-vertical\\:w-px:where([data-orientation=\"vertical\"]) {\n width: 1px;\n }\n\n .data-vertical\\:flex-col:where([data-orientation=\"vertical\"]) {\n flex-direction: column;\n }\n\n .data-vertical\\:items-stretch:where([data-orientation=\"vertical\"]) {\n align-items: stretch;\n }\n\n .data-vertical\\:self-stretch:where([data-orientation=\"vertical\"]) {\n align-self: stretch;\n }\n\n .\\[\\&_\\.recharts-cartesian-axis-tick_text\\]\\:fill-muted-foreground .recharts-cartesian-axis-tick text {\n fill: var(--muted-foreground);\n }\n\n .\\[\\&_\\.recharts-cartesian-grid_line\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border\\/50 .recharts-cartesian-grid line[stroke=\"#ccc\"] {\n stroke: var(--border);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&_\\.recharts-cartesian-grid_line\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border\\/50 .recharts-cartesian-grid line[stroke=\"#ccc\"] {\n stroke: color-mix(in oklab, var(--border) 50%, transparent);\n }\n }\n\n .\\[\\&_\\.recharts-curve\\.recharts-tooltip-cursor\\]\\:stroke-border .recharts-curve.recharts-tooltip-cursor {\n stroke: var(--border);\n }\n\n .\\[\\&_\\.recharts-dot\\[stroke\\=\\'\\#fff\\'\\]\\]\\:stroke-transparent .recharts-dot[stroke=\"#fff\"] {\n stroke: #0000;\n }\n\n .\\[\\&_\\.recharts-layer\\]\\:outline-hidden .recharts-layer {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (forced-colors: active) {\n .\\[\\&_\\.recharts-layer\\]\\:outline-hidden .recharts-layer {\n outline-offset: 2px;\n outline: 2px solid #0000;\n }\n }\n\n .\\[\\&_\\.recharts-polar-grid_\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border .recharts-polar-grid [stroke=\"#ccc\"] {\n stroke: var(--border);\n }\n\n .\\[\\&_\\.recharts-radial-bar-background-sector\\]\\:fill-muted .recharts-radial-bar-background-sector, .\\[\\&_\\.recharts-rectangle\\.recharts-tooltip-cursor\\]\\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {\n fill: var(--muted);\n }\n\n .\\[\\&_\\.recharts-reference-line_\\[stroke\\=\\'\\#ccc\\'\\]\\]\\:stroke-border .recharts-reference-line [stroke=\"#ccc\"] {\n stroke: var(--border);\n }\n\n .\\[\\&_\\.recharts-sector\\]\\:outline-hidden .recharts-sector {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (forced-colors: active) {\n .\\[\\&_\\.recharts-sector\\]\\:outline-hidden .recharts-sector {\n outline-offset: 2px;\n outline: 2px solid #0000;\n }\n }\n\n .\\[\\&_\\.recharts-sector\\[stroke\\=\\'\\#fff\\'\\]\\]\\:stroke-transparent .recharts-sector[stroke=\"#fff\"] {\n stroke: #0000;\n }\n\n .\\[\\&_\\.recharts-surface\\]\\:outline-hidden .recharts-surface {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n @media (forced-colors: active) {\n .\\[\\&_\\.recharts-surface\\]\\:outline-hidden .recharts-surface {\n outline-offset: 2px;\n outline: 2px solid #0000;\n }\n }\n\n .\\[\\&_\\[data-slot\\=slider-control\\]\\]\\:py-1\\.5 [data-slot=\"slider-control\"] {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .\\[\\&_\\[data-slot\\=slider-thumb\\]\\]\\:size-3 [data-slot=\"slider-thumb\"] {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .\\[\\&_\\[data-slot\\=slider-track\\]\\]\\:h-1 [data-slot=\"slider-track\"] {\n height: var(--spacing);\n }\n\n .\\[\\&_\\[data-slot\\=slider-track\\]\\]\\:bg-foreground\\/15 [data-slot=\"slider-track\"] {\n background-color: var(--foreground);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&_\\[data-slot\\=slider-track\\]\\]\\:bg-foreground\\/15 [data-slot=\"slider-track\"] {\n background-color: color-mix(in oklab, var(--foreground) 15%, transparent);\n }\n }\n\n .\\[\\&_a\\]\\:underline a {\n text-decoration-line: underline;\n }\n\n .\\[\\&_a\\]\\:underline-offset-3 a {\n text-underline-offset: 3px;\n }\n\n @media (hover: hover) {\n .\\[\\&_a\\]\\:hover\\:text-foreground a:hover {\n color: var(--foreground);\n }\n }\n\n .\\[\\&_img\\]\\:size-full img {\n width: 100%;\n height: 100%;\n }\n\n .\\[\\&_img\\]\\:object-cover img {\n object-fit: cover;\n }\n\n .\\[\\&_p\\:not\\(\\:last-child\\)\\]\\:mb-4 p:not(:last-child) {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .\\[\\&_svg\\]\\:pointer-events-none svg {\n pointer-events: none;\n }\n\n .\\[\\&_svg\\]\\:size-4 svg {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .\\[\\&_svg\\]\\:shrink-0 svg {\n flex-shrink: 0;\n }\n\n .data-\\[direction\\=start\\]\\:\\[\\&_svg\\]\\:rotate-180[data-direction=\"start\"] svg {\n rotate: 180deg;\n }\n\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\\"size-\\\"\\]\\)\\]\\:size-4 svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5 svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .group-data-\\[orientation\\=vertical\\]\\/attachment\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-6:is(:where(.group\\/attachment)[data-orientation=\"vertical\"] *) svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .group-data-\\[size\\=xs\\]\\/attachment\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5:is(:where(.group\\/attachment)[data-size=\"xs\"] *) svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n .\\[\\&_tr\\]\\:border-b tr {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .\\[\\&\\+\\[data-slot\\=item-content\\]\\]\\:flex-none + [data-slot=\"item-content\"] {\n flex: none;\n }\n\n .\\[\\&\\:first-child\\[data-selected\\=true\\]_button\\]\\:rounded-l-\\(--cell-radius\\):first-child[data-selected=\"true\"] button {\n border-top-left-radius: var(--cell-radius);\n border-bottom-left-radius: var(--cell-radius);\n }\n\n .\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=\"checkbox\"]) {\n padding-right: 0;\n }\n\n .\\[\\.border-b\\]\\:pb-2.border-b {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .\\[\\.border-b\\]\\:pb-4.border-b {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .group-data-\\[size\\=sm\\]\\/card\\:\\[\\.border-b\\]\\:pb-3:is(:where(.group\\/card)[data-size=\"sm\"] *).border-b {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .\\[\\.border-t\\]\\:pt-2.border-t {\n padding-top: calc(var(--spacing) * 2);\n }\n\n :is(.rtl\\:\\*\\*\\:\\[\\.rdp-button\\\\_next\\>svg\\]\\:rotate-180:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) *):is(.rdp-button_next > svg), :is(.rtl\\:\\*\\*\\:\\[\\.rdp-button\\\\_previous\\>svg\\]\\:rotate-180:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) *):is(.rdp-button_previous > svg) {\n rotate: 180deg;\n }\n\n :is(.\\*\\*\\:\\[\\[cmdk-group-heading\\]\\]\\:px-2 *)[cmdk-group-heading] {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n :is(.\\*\\*\\:\\[\\[cmdk-group-heading\\]\\]\\:py-1\\.5 *)[cmdk-group-heading] {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n :is(.\\*\\*\\:\\[\\[cmdk-group-heading\\]\\]\\:text-xs *)[cmdk-group-heading] {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n :is(.\\*\\*\\:\\[\\[cmdk-group-heading\\]\\]\\:font-medium *)[cmdk-group-heading] {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n :is(.\\*\\*\\:\\[\\[cmdk-group-heading\\]\\]\\:text-muted-foreground *)[cmdk-group-heading] {\n color: var(--muted-foreground);\n }\n\n .\\[a\\]\\:underline:is(a) {\n text-decoration-line: underline;\n }\n\n .\\[a\\]\\:underline-offset-3:is(a) {\n text-underline-offset: 3px;\n }\n\n .\\[a\\]\\:transition-colors:is(a) {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n :is(.\\*\\:\\[a\\]\\:underline > *):is(a) {\n text-decoration-line: underline;\n }\n\n :is(.\\*\\:\\[a\\]\\:underline-offset-3 > *):is(a) {\n text-underline-offset: 3px;\n }\n\n @media (hover: hover) {\n .\\[a\\]\\:hover\\:bg-destructive\\/20:is(a):hover {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-destructive\\/20:is(a):hover {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:bg-info-ring\\/60:is(a):hover {\n background-color: var(--info-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-info-ring\\/60:is(a):hover {\n background-color: color-mix(in oklab, var(--info-ring) 60%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:bg-muted:is(a):hover {\n background-color: var(--muted);\n }\n\n .\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover {\n background-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover {\n background-color: color-mix(in oklab, var(--primary) 80%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:bg-secondary\\/80:is(a):hover {\n background-color: var(--secondary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-secondary\\/80:is(a):hover {\n background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:bg-success-ring\\/60:is(a):hover {\n background-color: var(--success-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-success-ring\\/60:is(a):hover {\n background-color: color-mix(in oklab, var(--success-ring) 60%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:bg-warning-ring\\/60:is(a):hover {\n background-color: var(--warning-ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[a\\]\\:hover\\:bg-warning-ring\\/60:is(a):hover {\n background-color: color-mix(in oklab, var(--warning-ring) 60%, transparent);\n }\n }\n\n .\\[a\\]\\:hover\\:text-foreground:is(a):hover {\n color: var(--foreground);\n }\n\n .\\[a\\]\\:hover\\:text-muted-foreground:is(a):hover {\n color: var(--muted-foreground);\n }\n\n :is(.\\*\\:\\[a\\]\\:hover\\:text-foreground > *):is(a):hover {\n color: var(--foreground);\n }\n }\n\n .\\[button\\]\\:text-left:is(button) {\n text-align: left;\n }\n\n .\\[button\\,a\\]\\:transition-colors:is(button, a) {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .\\[button\\,a\\]\\:outline-none:is(button, a) {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .\\[button\\,a\\]\\:focus-visible\\:border-ring:is(button, a):focus-visible {\n border-color: var(--ring);\n }\n\n .\\[button\\,a\\]\\:focus-visible\\:ring-3:is(button, a):focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .\\[button\\,a\\]\\:focus-visible\\:ring-ring\\/50:is(button, a):focus-visible {\n --tw-ring-color: var(--ring);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[button\\,a\\]\\:focus-visible\\:ring-ring\\/50:is(button, a):focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n\n :is(.\\*\\:\\[img\\]\\:aspect-square > *):is(img) {\n aspect-ratio: 1;\n }\n\n :is(.\\*\\:\\[img\\]\\:w-full > *):is(img) {\n width: 100%;\n }\n\n :is(.\\*\\:\\[img\\]\\:object-cover > *):is(img) {\n object-fit: cover;\n }\n\n :is(.\\*\\:\\[img\\:first-child\\]\\:rounded-t-xl > *):is(img:first-child) {\n border-top-left-radius: calc(var(--radius) * 1.4);\n border-top-right-radius: calc(var(--radius) * 1.4);\n }\n\n :is(.\\*\\:\\[img\\:last-child\\]\\:rounded-b-xl > *):is(img:last-child) {\n border-bottom-right-radius: calc(var(--radius) * 1.4);\n border-bottom-left-radius: calc(var(--radius) * 1.4);\n }\n\n :is(.\\*\\:\\[svg\\]\\:row-span-2 > *):is(svg) {\n grid-row: span 2 / span 2;\n }\n\n :is(.\\*\\:\\[svg\\]\\:translate-y-0\\.5 > *):is(svg) {\n --tw-translate-y: calc(var(--spacing) * .5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n :is(.\\*\\:\\[svg\\]\\:text-current > *):is(svg) {\n color: currentColor;\n }\n\n :is(.focus\\:\\*\\:\\[svg\\]\\:text-accent-foreground:focus > *):is(svg) {\n color: var(--accent-foreground);\n }\n\n :is(.data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:text-destructive[data-variant=\"destructive\"] > *):is(svg) {\n color: var(--destructive);\n }\n\n :is(.data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:text-destructive\\![data-variant=\"destructive\"] > *):is(svg) {\n color: var(--destructive) !important;\n }\n\n :is(.data-selected\\:\\*\\:\\[svg\\]\\:text-foreground:where([data-selected=\"true\"]) > *):is(svg) {\n color: var(--foreground);\n }\n\n :is(.\\*\\:\\[svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 > *):is(svg:not([class*=\"size-\"])) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n :is(.\\*\\:\\[svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-6 > *):is(svg:not([class*=\"size-\"])) {\n width: calc(var(--spacing) * 6);\n height: calc(var(--spacing) * 6);\n }\n\n .\\[\\&\\:last-child\\[data-selected\\=true\\]_button\\]\\:rounded-r-\\(--cell-radius\\):last-child[data-selected=\"true\"] button {\n border-top-right-radius: var(--cell-radius);\n border-bottom-right-radius: var(--cell-radius);\n }\n\n .\\[\\&\\:not\\(\\:has\\(\\~\\[data-slot\\=questionnaire-description\\]\\)\\)\\]\\:mb-4:not(:has( ~ [data-slot=\"questionnaire-description\"])) {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .\\[\\&\\:nth-child\\(2\\)\\[data-selected\\=true\\]_button\\]\\:rounded-l-\\(--cell-radius\\):nth-child(2)[data-selected=\"true\"] button {\n border-top-left-radius: var(--cell-radius);\n border-bottom-left-radius: var(--cell-radius);\n }\n\n .\\[\\&\\>\\*\\]\\:relative > * {\n position: relative;\n }\n\n .\\[\\&\\>\\*\\]\\:z-0 > * {\n z-index: 0;\n }\n\n .data-\\[orientation\\=horizontal\\]\\:\\[\\&\\>\\*\\:first-child\\]\\:rounded-r-none[data-orientation=\"horizontal\"] > :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .data-\\[orientation\\=vertical\\]\\:\\[\\&\\>\\*\\:first-child\\]\\:rounded-b-none[data-orientation=\"vertical\"] > :first-child {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .\\[\\&\\>\\*\\:focus-visible\\]\\:z-10 > :focus-visible, .\\[\\&\\>\\*\\:hover\\]\\:z-10 > :hover {\n z-index: 10;\n }\n\n .data-\\[orientation\\=horizontal\\]\\:\\[\\&\\>\\*\\:last-child\\]\\:rounded-l-none[data-orientation=\"horizontal\"] > :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .data-\\[orientation\\=vertical\\]\\:\\[\\&\\>\\*\\:last-child\\]\\:rounded-t-none[data-orientation=\"vertical\"] > :last-child {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .data-\\[orientation\\=horizontal\\]\\:\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:-ml-px[data-orientation=\"horizontal\"] > :not(:first-child) {\n margin-left: -1px;\n }\n\n .data-\\[orientation\\=vertical\\]\\:\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\]\\:-mt-px[data-orientation=\"vertical\"] > :not(:first-child) {\n margin-top: -1px;\n }\n\n .\\[\\&\\>\\*\\:not\\(\\:first-child\\)\\:not\\(\\:last-child\\)\\]\\:rounded-none > :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--muted\\)\\,var\\(--foreground\\)_5\\%\\)\\] > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--muted\\)\\,var\\(--foreground\\)_5\\%\\)\\] > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklch,var(--muted),var(--foreground) 5%);\n }\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--secondary\\)\\,var\\(--foreground\\)_5\\%\\)\\] > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--secondary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[color-mix\\(in_oklch\\,var\\(--secondary\\)\\,var\\(--foreground\\)_5\\%\\)\\] > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);\n }\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[oklch\\(from_var\\(--primary\\)_0\\.88_calc\\(c\\*0\\.5\\)_h\\)\\] > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: oklch(from var(--primary) .88 calc(c * .5) h);\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-destructive\\/20 > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-destructive\\/20 > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-muted > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--muted);\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-primary\\/80 > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--primary);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-primary\\/80 > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklab, var(--primary) 80%, transparent);\n }\n }\n\n .\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:text-foreground > [data-slot=\"bubble-content\"]:is(button, a):hover {\n color: var(--foreground);\n }\n\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-\\[oklch\\(from_var\\(--primary\\)_0\\.35_calc\\(c\\*0\\.5\\)_h\\)\\]:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: oklch(from var(--primary) .35 calc(c * .5) h);\n }\n\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-destructive\\/30:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--destructive);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-destructive\\/30:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklab, var(--destructive) 30%, transparent);\n }\n }\n\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-input\\/30:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--input);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-input\\/30:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklab, var(--input) 30%, transparent);\n }\n }\n\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-muted\\/50:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: var(--muted);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .dark\\:\\[\\&\\>\\[data-slot\\=bubble-content\\]\\:is\\(button\\,a\\)\\:hover\\]\\:bg-muted\\/50:is(.dark *) > [data-slot=\"bubble-content\"]:is(button, a):hover {\n background-color: color-mix(in oklab, var(--muted) 50%, transparent);\n }\n }\n\n .\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\] > [role=\"checkbox\"] {\n --tw-translate-y: 2px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .\\[\\&\\>a\\]\\:underline > a {\n text-decoration-line: underline;\n }\n\n .\\[\\&\\>a\\]\\:underline-offset-4 > a {\n text-underline-offset: 4px;\n }\n\n .\\[\\&\\>a\\:hover\\]\\:text-primary > a:hover {\n color: var(--primary);\n }\n\n .\\[\\&\\>button\\]\\:hidden > button {\n display: none;\n }\n\n .has-\\[\\>\\[data-align\\=block-end\\]\\]\\:\\[\\&\\>input\\]\\:pt-3:has( > [data-align=\"block-end\"]) > input {\n padding-top: calc(var(--spacing) * 3);\n }\n\n .has-\\[\\>\\[data-align\\=block-start\\]\\]\\:\\[\\&\\>input\\]\\:pb-3:has( > [data-align=\"block-start\"]) > input {\n padding-bottom: calc(var(--spacing) * 3);\n }\n\n .has-\\[\\>\\[data-align\\=inline-end\\]\\]\\:\\[\\&\\>input\\]\\:pr-1\\.5:has( > [data-align=\"inline-end\"]) > input {\n padding-right: calc(var(--spacing) * 1.5);\n }\n\n .has-\\[\\>\\[data-align\\=inline-start\\]\\]\\:\\[\\&\\>input\\]\\:pl-1\\.5:has( > [data-align=\"inline-start\"]) > input {\n padding-left: calc(var(--spacing) * 1.5);\n }\n\n .\\[\\&\\>kbd\\]\\:rounded-\\[calc\\(var\\(--radius\\)-5px\\)\\] > kbd {\n border-radius: calc(var(--radius) - 5px);\n }\n\n .\\[\\&\\>span\\]\\:text-xs > span {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .\\[\\&\\>span\\]\\:opacity-70 > span {\n opacity: .7;\n }\n\n .\\[\\&\\>span\\:last-child\\]\\:truncate > span:last-child {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .\\[\\&\\>svg\\]\\:pointer-events-none > svg {\n pointer-events: none;\n }\n\n .\\[\\&\\>svg\\]\\:size-3\\! > svg {\n width: calc(var(--spacing) * 3) !important;\n height: calc(var(--spacing) * 3) !important;\n }\n\n .\\[\\&\\>svg\\]\\:size-3\\.5 > svg {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n .\\[\\&\\>svg\\]\\:size-4 > svg {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .\\[\\&\\>svg\\]\\:h-2\\.5 > svg {\n height: calc(var(--spacing) * 2.5);\n }\n\n .\\[\\&\\>svg\\]\\:h-3 > svg {\n height: calc(var(--spacing) * 3);\n }\n\n .\\[\\&\\>svg\\]\\:w-2\\.5 > svg {\n width: calc(var(--spacing) * 2.5);\n }\n\n .\\[\\&\\>svg\\]\\:w-3 > svg {\n width: calc(var(--spacing) * 3);\n }\n\n .\\[\\&\\>svg\\]\\:shrink-0 > svg {\n flex-shrink: 0;\n }\n\n .\\[\\&\\>svg\\]\\:text-muted-foreground > svg {\n color: var(--muted-foreground);\n }\n\n .\\[\\&\\>svg\\]\\:text-sidebar-accent-foreground > svg {\n color: var(--sidebar-accent-foreground);\n }\n\n .group-has-data-\\[size\\=lg\\]\\/avatar-group\\:\\[\\&\\>svg\\]\\:size-5:is(:where(.group\\/avatar-group):has([data-size=\"lg\"]) *) > svg {\n width: calc(var(--spacing) * 5);\n height: calc(var(--spacing) * 5);\n }\n\n .group-has-data-\\[size\\=sm\\]\\/avatar-group\\:\\[\\&\\>svg\\]\\:size-3:is(:where(.group\\/avatar-group):has([data-size=\"sm\"]) *) > svg {\n width: calc(var(--spacing) * 3);\n height: calc(var(--spacing) * 3);\n }\n\n .group-data-\\[size\\=default\\]\\/avatar\\:\\[\\&\\>svg\\]\\:size-2:is(:where(.group\\/avatar)[data-size=\"default\"] *) > svg, .group-data-\\[size\\=lg\\]\\/avatar\\:\\[\\&\\>svg\\]\\:size-2:is(:where(.group\\/avatar)[data-size=\"lg\"] *) > svg {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n\n .group-data-\\[size\\=sm\\]\\/avatar\\:\\[\\&\\>svg\\]\\:hidden:is(:where(.group\\/avatar)[data-size=\"sm\"] *) > svg {\n display: none;\n }\n\n .\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5 > svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n\n .\\[\\&\\>svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 > svg:not([class*=\"size-\"]) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n\n .\\[\\&\\>tr\\]\\:last\\:border-b-0 > tr:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .\\[\\&\\[aria-orientation\\=horizontal\\]\\>div\\]\\:rotate-90[aria-orientation=\"horizontal\"] > div {\n rotate: 90deg;\n }\n\n .\\[\\&\\[data-ending-style\\]\\:not\\(\\[data-limited\\]\\)\\:not\\(\\[data-swipe-direction\\]\\)\\]\\:\\[transform\\:translateY\\(150\\%\\)\\][data-ending-style]:not([data-limited]):not([data-swipe-direction]) {\n transform: translateY(150%);\n }\n\n .\\[\\&\\[data-panel-open\\]\\>svg\\]\\:rotate-180[data-panel-open] > svg {\n rotate: 180deg;\n }\n\n [data-side=\"left\"][data-collapsible=\"offcanvas\"] .\\[\\[data-side\\=left\\]\\[data-collapsible\\=offcanvas\\]_\\&\\]\\:-right-2 {\n right: calc(var(--spacing) * -2);\n }\n\n [data-side=\"left\"][data-state=\"collapsed\"] .\\[\\[data-side\\=left\\]\\[data-state\\=collapsed\\]_\\&\\]\\:cursor-e-resize {\n cursor: e-resize;\n }\n\n [data-side=\"right\"][data-collapsible=\"offcanvas\"] .\\[\\[data-side\\=right\\]\\[data-collapsible\\=offcanvas\\]_\\&\\]\\:-left-2 {\n left: calc(var(--spacing) * -2);\n }\n\n [data-side=\"right\"][data-state=\"collapsed\"] .\\[\\[data-side\\=right\\]\\[data-state\\=collapsed\\]_\\&\\]\\:cursor-w-resize {\n cursor: w-resize;\n }\n}\n\n@property --tw-animation-delay {\n syntax: \"*\";\n inherits: false;\n initial-value: 0s;\n}\n\n@property --tw-animation-direction {\n syntax: \"*\";\n inherits: false;\n initial-value: normal;\n}\n\n@property --tw-animation-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-animation-fill-mode {\n syntax: \"*\";\n inherits: false;\n initial-value: none;\n}\n\n@property --tw-animation-iteration-count {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-enter-blur {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-enter-opacity {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-enter-rotate {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-enter-scale {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-enter-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-enter-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-exit-blur {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-exit-opacity {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-exit-rotate {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-exit-scale {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-exit-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-exit-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --scroll-fade-t {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --scroll-fade-b {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --scroll-fade-s {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --scroll-fade-e {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --scroll-fade-mask {\n syntax: \"*\";\n inherits: false\n}\n\n@property --shimmer-angle {\n syntax: \"<angle>\";\n inherits: true;\n initial-value: 20deg;\n}\n\n@property --shimmer-image {\n syntax: \"*\";\n inherits: false\n}\n\n@property --shimmer-text-fill {\n syntax: \"*\";\n inherits: false\n}\n\n@media (prefers-reduced-motion: reduce) {\n .shimmer {\n -webkit-text-fill-color: currentColor;\n background-image: none;\n animation: none;\n }\n}\n\n@keyframes edx-faded-under-reveal {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n:root {\n --radius: .625rem;\n --background: oklch(100% 0 0);\n --foreground: oklch(14.5% 0 0);\n --card: oklch(100% 0 0);\n --card-foreground: oklch(14.5% 0 0);\n --popover: oklch(100% 0 0);\n --popover-foreground: oklch(14.5% 0 0);\n --overlay: oklch(0% 0 0 / .1);\n --primary: oklch(20.5% 0 0);\n --primary-foreground: oklch(98.5% 0 0);\n --secondary: oklch(97% 0 0);\n --secondary-foreground: oklch(20.5% 0 0);\n --muted: oklch(97% 0 0);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(97% 0 0);\n --accent-foreground: oklch(20.5% 0 0);\n --destructive: oklch(50.5% .213 27.518);\n --destructive-foreground: oklch(98.5% 0 0);\n --success: oklch(44.8% .119 151.328);\n --success-foreground: oklch(97.9% .021 166.113);\n --success-ring: oklch(90.5% .093 164.15);\n --warning: oklch(47.3% .137 46.201);\n --warning-foreground: oklch(98.7% .022 95.277);\n --warning-ring: oklch(92.4% .12 95.746);\n --info: oklch(50% .134 242.749);\n --info-foreground: oklch(97.7% .013 236.62);\n --info-ring: oklch(90.1% .058 230.902);\n --border: oklch(92.2% 0 0);\n --input: oklch(92.2% 0 0);\n --ring: oklch(70.8% 0 0);\n --chart-1: oklch(64.6% .222 41.116);\n --chart-2: oklch(60% .118 184.704);\n --chart-3: oklch(39.8% .07 227.392);\n --chart-4: oklch(82.8% .189 84.429);\n --chart-5: oklch(76.9% .188 70.08);\n --sidebar: oklch(98.5% 0 0);\n --sidebar-foreground: oklch(14.5% 0 0);\n --sidebar-primary: oklch(20.5% 0 0);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(97% 0 0);\n --sidebar-accent-foreground: oklch(20.5% 0 0);\n --sidebar-border: oklch(92.2% 0 0);\n --sidebar-ring: oklch(70.8% 0 0);\n}\n\n.dark {\n --background: oklch(14.5% 0 0);\n --foreground: oklch(98.5% 0 0);\n --card: oklch(20.5% 0 0);\n --card-foreground: oklch(98.5% 0 0);\n --popover: oklch(20.5% 0 0);\n --popover-foreground: oklch(98.5% 0 0);\n --overlay: oklch(0% 0 0 / .1);\n --primary: oklch(92.2% 0 0);\n --primary-foreground: oklch(20.5% 0 0);\n --secondary: oklch(26.9% 0 0);\n --secondary-foreground: oklch(98.5% 0 0);\n --muted: oklch(26.9% 0 0);\n --muted-foreground: oklch(70.8% 0 0);\n --accent: oklch(26.9% 0 0);\n --accent-foreground: oklch(98.5% 0 0);\n --destructive: oklch(70.4% .191 22.216);\n --destructive-foreground: oklch(98.5% 0 0);\n --success: oklch(79.2% .209 151.711);\n --success-foreground: oklch(26.2% .051 172.552);\n --success-ring: oklch(43.2% .095 166.913);\n --warning: oklch(87.9% .169 91.605);\n --warning-foreground: oklch(27.9% .077 45.635);\n --warning-ring: oklch(47.3% .137 46.201);\n --info: oklch(82.8% .111 230.318);\n --info-foreground: oklch(29.3% .066 243.157);\n --info-ring: oklch(44.3% .11 240.79);\n --border: oklch(100% 0 0 / .1);\n --input: oklch(100% 0 0 / .15);\n --ring: oklch(55.6% 0 0);\n --chart-1: oklch(48.8% .243 264.376);\n --chart-2: oklch(69.6% .17 162.48);\n --chart-3: oklch(76.9% .188 70.08);\n --chart-4: oklch(62.7% .265 303.9);\n --chart-5: oklch(64.5% .246 16.439);\n --sidebar: oklch(20.5% 0 0);\n --sidebar-foreground: oklch(98.5% 0 0);\n --sidebar-primary: oklch(48.8% .243 264.376);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(26.9% 0 0);\n --sidebar-accent-foreground: oklch(98.5% 0 0);\n --sidebar-border: oklch(100% 0 0 / .1);\n --sidebar-ring: oklch(55.6% 0 0);\n}\n\n@keyframes progress-indeterminate {\n from {\n translate: -100%;\n }\n\n to {\n translate: 300%;\n }\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-scroll-snap-strictness {\n syntax: \"*\";\n inherits: false;\n initial-value: proximity;\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-space-x-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-gradient-position {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-gradient-from {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-via {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-to {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-stops {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-gradient-via-stops {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-gradient-from-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0%;\n}\n\n@property --tw-gradient-via-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 50%;\n}\n\n@property --tw-gradient-to-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ordinal {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-slashed-zero {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-numeric-figure {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-numeric-spacing {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-numeric-fraction {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-content {\n syntax: \"*\";\n inherits: false;\n initial-value: \"\";\n}\n\n@property --tw-scrollbar-thumb {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-scrollbar-track {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-backdrop-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-backdrop-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));\n filter: blur(var(--tw-enter-blur, 0));\n }\n}\n\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));\n filter: blur(var(--tw-exit-blur, 0));\n }\n}\n\n@keyframes caret-blink {\n 0%, 70%, 100% {\n opacity: 1;\n }\n\n 20%, 50% {\n opacity: 0;\n }\n}\n\n@keyframes scroll-fade-reveal-b {\n from {\n --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n }\n\n to {\n --scroll-fade-b: 0px;\n }\n}\n\n@keyframes scroll-fade-reveal-s {\n from {\n --scroll-fade-s: 0px;\n }\n\n to {\n --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n }\n}\n\n@keyframes scroll-fade-reveal-e {\n from {\n --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n }\n\n to {\n --scroll-fade-e: 0px;\n }\n}\n\n@keyframes tw-shimmer {\n from {\n background-position: 100% 0;\n }\n\n to {\n background-position: 0 0;\n }\n}\n";
|
|
4001
|
-
//#endregion
|
|
4002
|
-
//#region src/elements.ts
|
|
4003
|
-
/** The design system's compiled CSS, as a string, for shadow roots. */
|
|
4004
|
-
var elementStyles = styles_default;
|
|
4005
|
-
/**
|
|
4006
|
-
* Register every `<edx-*>` element. Defaults to shadow DOM with the bundled
|
|
4007
|
-
* stylesheet; pass `styles` to override, or `mode: 'light'` to opt out of
|
|
4008
|
-
* shadow DOM. Calling it more than once is harmless.
|
|
4009
|
-
*/
|
|
4010
|
-
var registerElements = (options = {}) => {
|
|
4011
|
-
registerElements$1({
|
|
4012
|
-
mode: "shadow",
|
|
4013
|
-
styles: styles_default,
|
|
4014
|
-
...options
|
|
4015
|
-
});
|
|
4016
|
-
};
|
|
4017
|
-
//#endregion
|
|
4018
|
-
export { EDX_FIELD_CONTROL_CONNECT_EVENT, EdxHostProvider, Slot, coerceBool, coerceJson, coerceNumber, defineElement, elementStyles, getDefaultMode, getStyleSheet, registerElements, setDefaultMode, useDomMode, useEdxHost, useEmit, usePortalContainer };
|
|
4019
|
-
|
|
4020
|
-
//# sourceMappingURL=elements.js.map
|