@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8
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/accordion/accordion.js.map +1 -1
- package/alert/alert.js.map +1 -1
- package/alert/types.d.ts +2 -0
- package/animations/loading-dots/loading-dots.d.ts +5 -2
- package/animations/loading-dots/loading-dots.js.map +1 -1
- package/animations/loading-dots-spinner/loading-dots-spinner.d.ts +3 -0
- package/animations/loading-dots-spinner/loading-dots-spinner.js.map +1 -1
- package/animations/loading-dots-spinner/lottie-animation.d.ts +2 -2
- package/animations/loading-dots-spinner/lottie-animation.js.map +1 -1
- package/animations/loading-spinner/loading-spinner.d.ts +5 -2
- package/animations/loading-spinner/loading-spinner.js.map +1 -1
- package/animations/themed-loading-spinner/themed-loading-spinner.d.ts +5 -2
- package/animations/themed-loading-spinner/themed-loading-spinner.js.map +1 -1
- package/animations/types.d.ts +13 -6
- package/avatar/avatar.js.map +1 -1
- package/badge/badge.js.map +1 -1
- package/badge/types.d.ts +13 -2
- package/box-container/box-container.js.map +1 -1
- package/box-container/types.d.ts +2 -0
- package/breadcrumb/breadcrumb.js.map +1 -1
- package/breadcrumb/types.d.ts +7 -2
- package/button/button.js +1 -1
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts +1 -0
- package/button/button.styles.js +1 -1
- package/button/button.styles.js.map +1 -1
- package/button/button.styles_19i4dfq.css +21 -0
- package/button/types.d.ts +5 -0
- package/calendar/calendar.js.map +1 -1
- package/calendar/types.d.ts +3 -3
- package/card/card.js.map +1 -1
- package/checkbox/checkbox.js.map +1 -1
- package/checkbox/types.d.ts +4 -0
- package/cjs/accordion/accordion.js.map +1 -1
- package/cjs/alert/alert.js.map +1 -1
- package/cjs/animations/loading-dots/loading-dots.js.map +1 -1
- package/cjs/animations/loading-dots-spinner/loading-dots-spinner.js.map +1 -1
- package/cjs/animations/loading-dots-spinner/lottie-animation.js.map +1 -1
- package/cjs/animations/loading-spinner/loading-spinner.js.map +1 -1
- package/cjs/animations/themed-loading-spinner/themed-loading-spinner.js.map +1 -1
- package/cjs/avatar/avatar.js.map +1 -1
- package/cjs/badge/badge.js.map +1 -1
- package/cjs/box-container/box-container.js.map +1 -1
- package/cjs/breadcrumb/breadcrumb.js.map +1 -1
- package/cjs/button/button.js +1 -1
- package/cjs/button/button.js.map +1 -1
- package/cjs/button/button.styles.js +1 -1
- package/cjs/button/button.styles.js.map +1 -1
- package/cjs/button/button.styles_19i4dfq.css +21 -0
- package/cjs/calendar/calendar.js.map +1 -1
- package/cjs/card/card.js.map +1 -1
- package/cjs/checkbox/checkbox.js.map +1 -1
- package/cjs/countdown-timer/countdown-timer.js.map +1 -1
- package/cjs/dashed-border/dashed-border.js.map +1 -1
- package/cjs/data-table/data-table.js +1 -1
- package/cjs/data-table/data-table.js.map +1 -1
- package/cjs/data-table/data-table.styles.js +1 -1
- package/cjs/data-table/data-table.styles.js.map +1 -1
- package/cjs/data-table/{data-table.styles_rxganh.css → data-table.styles_1tnlmhe.css} +7 -6
- package/cjs/date-input/date-input.js.map +1 -1
- package/cjs/date-navigator/date-navigator.js.map +1 -1
- package/cjs/date-range-input/date-range-input.js.map +1 -1
- package/cjs/divider/divider.js.map +1 -1
- package/cjs/drawer/drawer.js.map +1 -1
- package/cjs/e-signature/e-signature.js.map +1 -1
- package/cjs/error-display/error-display-data.js +1 -1
- package/cjs/error-display/error-display-data.js.map +1 -1
- package/cjs/error-display/error-display.js.map +1 -1
- package/cjs/feedback-rating/feedback-rating.js.map +1 -1
- package/cjs/file-download/file-download.js.map +1 -1
- package/cjs/file-upload/file-item-edit.js.map +1 -1
- package/cjs/file-upload/file-list/file-list.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.styles.js +1 -1
- package/cjs/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/{file-upload/file-list-item/file-list-item.styles_o8000f.css → cjs/file-upload/file-list-item/file-list-item.styles_kgtfke.css} +1 -1
- package/cjs/file-upload/file-upload.js.map +1 -1
- package/cjs/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
- package/cjs/filter/addons/filter-item-checkbox.js.map +1 -1
- package/cjs/filter/addons/filter-item-checkbox.styles.js +1 -1
- package/cjs/filter/addons/filter-item-checkbox.styles.js.map +1 -1
- package/cjs/filter/addons/{filter-item-checkbox.styles_7degw7.css → filter-item-checkbox.styles_6nbpdl.css} +1 -1
- package/cjs/filter/filter-item.js +1 -1
- package/cjs/filter/filter-item.js.map +1 -1
- package/cjs/filter/filter-item.styles.js +1 -1
- package/cjs/filter/filter-item.styles.js.map +1 -1
- package/cjs/filter/{filter-item.styles_cphjnj.css → filter-item.styles_1yixp8h.css} +1 -1
- package/cjs/filter/filter-modal.styles.js +1 -1
- package/cjs/filter/filter-modal.styles.js.map +1 -1
- package/{filter/filter-modal.styles_qw3xlg.css → cjs/filter/filter-modal.styles_kuth21.css} +1 -1
- package/cjs/filter/filter-sidebar.styles.js +1 -1
- package/cjs/filter/filter-sidebar.styles.js.map +1 -1
- package/cjs/filter/{filter-sidebar.styles_1otwpjl.css → filter-sidebar.styles_rbfq4f.css} +1 -1
- package/cjs/filter/filter.js.map +1 -1
- package/cjs/footer/footer.js.map +1 -1
- package/cjs/form/form-custom-field/form-custom-field.js +2 -0
- package/cjs/form/form-custom-field/form-custom-field.js.map +1 -0
- package/cjs/form/form-date-input/form-date-input.js +2 -0
- package/cjs/form/form-date-input/form-date-input.js.map +1 -0
- package/cjs/form/form-date-range-input/form-date-range-input.js +2 -0
- package/cjs/form/form-date-range-input/form-date-range-input.js.map +1 -0
- package/cjs/form/form-e-signature/form-e-signature.js +2 -0
- package/cjs/form/form-e-signature/form-e-signature.js.map +1 -0
- package/cjs/form/form-histogram-slider/form-histogram-slider.js +2 -0
- package/cjs/form/form-histogram-slider/form-histogram-slider.js.map +1 -0
- package/cjs/form/form-input/form-input.js +2 -0
- package/cjs/form/form-input/form-input.js.map +1 -0
- package/cjs/form/form-input-group/form-input-group.js +2 -0
- package/cjs/form/form-input-group/form-input-group.js.map +1 -0
- package/cjs/form/form-label/form-label-addon.js +2 -0
- package/cjs/form/form-label/form-label-addon.js.map +1 -0
- package/cjs/form/form-label/form-label-addon.styles.js +2 -0
- package/cjs/form/form-label/form-label-addon.styles.js.map +1 -0
- package/cjs/form/form-label/form-label-addon.styles_aztasj.css +1 -0
- package/cjs/form/form-label/form-label.js +2 -0
- package/cjs/form/form-label/form-label.js.map +1 -0
- package/cjs/form/form-label/form-label.styles.js +2 -0
- package/cjs/form/form-label/form-label.styles.js.map +1 -0
- package/cjs/form/form-label/form-label.styles_180zf7j.css +6 -0
- package/cjs/form/form-masked-input/form-masked-input.js +2 -0
- package/cjs/form/form-masked-input/form-masked-input.js.map +1 -0
- package/cjs/form/form-multi-select/form-multi-select.js +2 -0
- package/cjs/form/form-multi-select/form-multi-select.js.map +1 -0
- package/cjs/form/form-nested-multi-select/form-nested-multi-select.js +2 -0
- package/cjs/form/form-nested-multi-select/form-nested-multi-select.js.map +1 -0
- package/cjs/form/form-nested-select/form-nested-select.js +2 -0
- package/cjs/form/form-nested-select/form-nested-select.js.map +1 -0
- package/cjs/form/form-otp-verification/form-otp-verification.js +2 -0
- package/cjs/form/form-otp-verification/form-otp-verification.js.map +1 -0
- package/cjs/form/form-phone-number-input/form-phone-number-input.js +2 -0
- package/cjs/form/form-phone-number-input/form-phone-number-input.js.map +1 -0
- package/cjs/form/form-predictive-text-input/form-predictive-text-input.js +2 -0
- package/cjs/form/form-predictive-text-input/form-predictive-text-input.js.map +1 -0
- package/cjs/form/form-range-select/form-range-select.js +2 -0
- package/cjs/form/form-range-select/form-range-select.js.map +1 -0
- package/cjs/form/form-range-slider/form-range-slider.js +2 -0
- package/cjs/form/form-range-slider/form-range-slider.js.map +1 -0
- package/cjs/form/form-select/form-select.js +2 -0
- package/cjs/form/form-select/form-select.js.map +1 -0
- package/cjs/form/form-select-histogram/form-select-histogram.js +2 -0
- package/cjs/form/form-select-histogram/form-select-histogram.js.map +1 -0
- package/cjs/form/form-slider/form-slider.js +2 -0
- package/cjs/form/form-slider/form-slider.js.map +1 -0
- package/cjs/form/form-textarea/form-textarea.js +2 -0
- package/cjs/form/form-textarea/form-textarea.js.map +1 -0
- package/cjs/form/form-textarea/form-textarea.styles.js +2 -0
- package/cjs/form/form-textarea/form-textarea.styles.js.map +1 -0
- package/cjs/form/form-textarea/form-textarea.styles_1kneyif.css +3 -0
- package/cjs/form/form-time-range-picker/form-time-range-picker.js +2 -0
- package/cjs/form/form-time-range-picker/form-time-range-picker.js.map +1 -0
- package/cjs/form/form-timepicker/form-timepicker.js +2 -0
- package/cjs/form/form-timepicker/form-timepicker.js.map +1 -0
- package/cjs/form/form-unit-number-input/form-unit-number-input.js +2 -0
- package/cjs/form/form-unit-number-input/form-unit-number-input.js.map +1 -0
- package/cjs/form/form-wrapper.js +1 -1
- package/cjs/form/form-wrapper.js.map +1 -1
- package/cjs/form/index.js +1 -1
- package/cjs/form/index.js.map +1 -1
- package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js.map +1 -1
- package/cjs/histogram-slider/histogram-slider.js.map +1 -1
- package/cjs/image-button/image-button.js.map +1 -1
- package/cjs/input/input.js.map +1 -1
- package/cjs/input-group/input-group.js.map +1 -1
- package/cjs/input-multi-select/input-multi-select.js.map +1 -1
- package/cjs/input-nested-multi-select/input-nested-multi-select.js.map +1 -1
- package/cjs/input-nested-select/input-nested-select.js.map +1 -1
- package/cjs/input-range-select/input-range-select.js.map +1 -1
- package/cjs/input-range-slider/input-range-slider.js.map +1 -1
- package/cjs/input-select/input-select.js.map +1 -1
- package/cjs/input-slider/input-slider.js.map +1 -1
- package/cjs/input-textarea/textarea.js.map +1 -1
- package/cjs/input-textarea/textarea.styles.js +1 -1
- package/cjs/input-textarea/textarea.styles.js.map +1 -1
- package/cjs/input-textarea/{textarea.styles_22z4n3.css → textarea.styles_q77m5x.css} +1 -1
- package/cjs/language-switcher/language-switcher.js.map +1 -1
- package/cjs/layout/index.js.map +1 -1
- package/cjs/link-list/components/common.js.map +1 -1
- package/cjs/link-list/components/link-list-eager.js.map +1 -1
- package/cjs/link-list/components/link-list-lazy.js.map +1 -1
- package/cjs/link-list/link-list.js.map +1 -1
- package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map +1 -1
- package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map +1 -1
- package/cjs/markup/markup.js.map +1 -1
- package/cjs/masked-input/masked-input.js.map +1 -1
- package/cjs/masthead/masthead.js.map +1 -1
- package/cjs/menu/menu.js.map +1 -1
- package/cjs/modal/index.js.map +1 -1
- package/cjs/modal-v2/modal-v2.js.map +1 -1
- package/cjs/navbar/navbar.js.map +1 -1
- package/cjs/notification-banner/notification-banner.js.map +1 -1
- package/cjs/otp-input/otp-input.js +1 -1
- package/cjs/otp-input/otp-input.js.map +1 -1
- package/cjs/otp-verification/contact-input-section.js +1 -1
- package/cjs/otp-verification/contact-input-section.js.map +1 -1
- package/cjs/otp-verification/otp-verification.js.map +1 -1
- package/cjs/otp-verification/verification-section.js +1 -1
- package/cjs/otp-verification/verification-section.js.map +1 -1
- package/cjs/overlay/overlay.js.map +1 -1
- package/cjs/pagination/pagination.js.map +1 -1
- package/cjs/phone-number-input/phone-number-input.js.map +1 -1
- package/cjs/pill/pill.js.map +1 -1
- package/cjs/popover/popover-inline/popover-inline.js.map +1 -1
- package/cjs/popover/popover.js.map +1 -1
- package/cjs/predictive-text-input/predictive-text-input.js +1 -1
- package/cjs/predictive-text-input/predictive-text-input.js.map +1 -1
- package/cjs/progress-indicator/progress-indicator.js.map +1 -1
- package/cjs/radio-button/radio-button.js.map +1 -1
- package/cjs/schedule/schedule.js.map +1 -1
- package/cjs/select-histogram/select-histogram.js.map +1 -1
- package/cjs/shared/dropdown-list/dropdown-list.js +1 -1
- package/cjs/shared/dropdown-list/dropdown-list.js.map +1 -1
- package/cjs/shared/dropdown-wrapper/element-with-dropdown.js +1 -1
- package/cjs/shared/dropdown-wrapper/element-with-dropdown.js.map +1 -1
- package/cjs/sidenav/sidenav.js.map +1 -1
- package/cjs/singpass-button/singpass-button.js.map +1 -1
- package/cjs/singpass-button/singpass-button.styles.js +1 -1
- package/cjs/singpass-button/singpass-button.styles.js.map +1 -1
- package/cjs/singpass-button/{singpass-button.styles_1miyex3.css → singpass-button.styles_1fj2lru.css} +1 -1
- package/cjs/smart-app-banner/smart-app-banner.js.map +1 -1
- package/cjs/smart-app-banner/smart-app-banner.styles.js +1 -1
- package/cjs/smart-app-banner/smart-app-banner.styles.js.map +1 -1
- package/{smart-app-banner/smart-app-banner.styles_15u6yv4.css → cjs/smart-app-banner/smart-app-banner.styles_r6yjq9.css} +1 -1
- package/cjs/tab/tab.js.map +1 -1
- package/cjs/table/table.js.map +1 -1
- package/cjs/tag/tag.js.map +1 -1
- package/cjs/text-list/index.js.map +1 -1
- package/cjs/theme/theme-provider/hooks.js.map +1 -1
- package/cjs/theme/theme-provider/index.js.map +1 -1
- package/cjs/theme/tokens/border.js.map +1 -1
- package/cjs/theme/tokens/breakpoint.js.map +1 -1
- package/cjs/theme/tokens/colour.js.map +1 -1
- package/cjs/theme/tokens/component.js.map +1 -1
- package/cjs/theme/tokens/font.js.map +1 -1
- package/cjs/theme/tokens/media-query.js.map +1 -1
- package/cjs/theme/tokens/motion.js.map +1 -1
- package/cjs/theme/tokens/radius.js.map +1 -1
- package/cjs/theme/tokens/shadow.js.map +1 -1
- package/cjs/theme/tokens/spacing.js.map +1 -1
- package/cjs/theme/utils/use-apply-styles.js.map +1 -1
- package/cjs/theme/utils/use-design-token.js.map +1 -1
- package/cjs/theme/utils/use-media-query.js.map +1 -1
- package/cjs/time-range-picker/combobox-picker/combobox-picker.js +1 -1
- package/cjs/time-range-picker/combobox-picker/combobox-picker.js.map +1 -1
- package/cjs/time-range-picker/time-range-picker.js.map +1 -1
- package/cjs/time-slot-bar/time-slot-bar.js.map +1 -1
- package/cjs/time-slot-bar-week/time-slot-bar-week.js.map +1 -1
- package/cjs/time-slot-week-view/time-slot-week-view.js.map +1 -1
- package/cjs/timeline/timeline.js.map +1 -1
- package/cjs/timepicker/timepicker.js.map +1 -1
- package/cjs/timetable/timetable.js.map +1 -1
- package/cjs/toast/toast.js.map +1 -1
- package/cjs/toast/toast.styles.js +1 -1
- package/cjs/toast/toast.styles.js.map +1 -1
- package/{toast/toast.styles_1e0l60w.css → cjs/toast/toast.styles_57j3lf.css} +1 -1
- package/cjs/toggle/toggle.js.map +1 -1
- package/cjs/typography/index.js.map +1 -1
- package/cjs/uneditable-section/index.js.map +1 -1
- package/cjs/uneditable-section/section-item.js +1 -1
- package/cjs/uneditable-section/section-item.js.map +1 -1
- package/cjs/unit-number/unit-number-input.js.map +1 -1
- package/countdown-timer/countdown-timer.js.map +1 -1
- package/countdown-timer/types.d.ts +3 -3
- package/dashed-border/dashed-border.js.map +1 -1
- package/data-table/data-table.d.ts +1 -1
- package/data-table/data-table.js +1 -1
- package/data-table/data-table.js.map +1 -1
- package/data-table/data-table.styles.d.ts +1 -0
- package/data-table/data-table.styles.js +1 -1
- package/data-table/data-table.styles.js.map +1 -1
- package/data-table/{data-table.styles_rxganh.css → data-table.styles_1tnlmhe.css} +7 -6
- package/data-table/types.d.ts +2 -0
- package/date-input/date-input.js.map +1 -1
- package/date-input/types.d.ts +1 -1
- package/date-navigator/date-navigator.js.map +1 -1
- package/date-navigator/types.d.ts +1 -1
- package/date-range-input/date-range-input.js.map +1 -1
- package/date-range-input/types.d.ts +1 -1
- package/divider/divider.js.map +1 -1
- package/divider/types.d.ts +1 -1
- package/docs/component-catalog.json +644 -0
- package/drawer/drawer.js.map +1 -1
- package/e-signature/e-signature.js.map +1 -1
- package/error-display/error-display-data.js +1 -1
- package/error-display/error-display-data.js.map +1 -1
- package/error-display/error-display.js.map +1 -1
- package/feedback-rating/feedback-rating.js.map +1 -1
- package/file-download/file-download.js.map +1 -1
- package/file-download/types.d.ts +6 -1
- package/file-upload/file-item-edit.d.ts +1 -1
- package/file-upload/file-item-edit.js.map +1 -1
- package/file-upload/file-list/file-list.d.ts +1 -1
- package/file-upload/file-list/file-list.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.d.ts +1 -1
- package/file-upload/file-list-item/file-list-item.js.map +1 -1
- package/file-upload/file-list-item/file-list-item.styles.js +1 -1
- package/file-upload/file-list-item/file-list-item.styles.js.map +1 -1
- package/{cjs/file-upload/file-list-item/file-list-item.styles_o8000f.css → file-upload/file-list-item/file-list-item.styles_kgtfke.css} +1 -1
- package/file-upload/file-upload.js.map +1 -1
- package/file-upload/types.d.ts +6 -2
- package/filter/addons/filter-item-checkbox-helpers.d.ts +2 -2
- package/filter/addons/filter-item-checkbox-helpers.js.map +1 -1
- package/filter/addons/filter-item-checkbox.d.ts +1 -1
- package/filter/addons/filter-item-checkbox.js.map +1 -1
- package/filter/addons/filter-item-checkbox.styles.js +1 -1
- package/filter/addons/filter-item-checkbox.styles.js.map +1 -1
- package/filter/addons/{filter-item-checkbox.styles_7degw7.css → filter-item-checkbox.styles_6nbpdl.css} +1 -1
- package/filter/addons/internal-types.d.ts +12 -0
- package/filter/addons/types.d.ts +60 -9
- package/filter/filter-item.js +1 -1
- package/filter/filter-item.js.map +1 -1
- package/filter/filter-item.styles.js +1 -1
- package/filter/filter-item.styles.js.map +1 -1
- package/filter/{filter-item.styles_cphjnj.css → filter-item.styles_1yixp8h.css} +1 -1
- package/filter/filter-modal.styles.js +1 -1
- package/filter/filter-modal.styles.js.map +1 -1
- package/{cjs/filter/filter-modal.styles_qw3xlg.css → filter/filter-modal.styles_kuth21.css} +1 -1
- package/filter/filter-sidebar.styles.js +1 -1
- package/filter/filter-sidebar.styles.js.map +1 -1
- package/filter/{filter-sidebar.styles_1otwpjl.css → filter-sidebar.styles_rbfq4f.css} +1 -1
- package/filter/filter.d.ts +1 -1
- package/filter/filter.js.map +1 -1
- package/filter/index.d.ts +1 -0
- package/filter/types.d.ts +31 -63
- package/footer/footer.js.map +1 -1
- package/form/form-custom-field/form-custom-field.js +2 -0
- package/form/form-custom-field/form-custom-field.js.map +1 -0
- package/form/form-custom-field/index.d.ts +2 -0
- package/form/form-custom-field/types.d.ts +7 -0
- package/form/form-date-input/form-date-input.js +2 -0
- package/form/form-date-input/form-date-input.js.map +1 -0
- package/form/form-date-input/index.d.ts +2 -0
- package/form/form-date-input/types.d.ts +8 -0
- package/form/form-date-range-input/form-date-range-input.js +2 -0
- package/form/form-date-range-input/form-date-range-input.js.map +1 -0
- package/form/form-date-range-input/index.d.ts +2 -0
- package/form/form-date-range-input/types.d.ts +8 -0
- package/form/form-e-signature/form-e-signature.js +2 -0
- package/form/form-e-signature/form-e-signature.js.map +1 -0
- package/form/form-e-signature/index.d.ts +2 -0
- package/form/form-e-signature/types.d.ts +8 -0
- package/form/form-histogram-slider/form-histogram-slider.js +2 -0
- package/form/form-histogram-slider/form-histogram-slider.js.map +1 -0
- package/form/form-histogram-slider/index.d.ts +2 -0
- package/form/form-histogram-slider/types.d.ts +8 -0
- package/form/form-input/form-input.js +2 -0
- package/form/form-input/form-input.js.map +1 -0
- package/form/form-input/index.d.ts +2 -0
- package/form/form-input/types.d.ts +8 -0
- package/form/form-input-group/form-input-group.js +2 -0
- package/form/form-input-group/form-input-group.js.map +1 -0
- package/form/form-input-group/index.d.ts +2 -0
- package/form/form-input-group/types.d.ts +10 -0
- package/form/form-label/form-label-addon.js +2 -0
- package/form/form-label/form-label-addon.js.map +1 -0
- package/form/form-label/form-label-addon.styles.js +2 -0
- package/form/form-label/form-label-addon.styles.js.map +1 -0
- package/form/form-label/form-label-addon.styles_aztasj.css +1 -0
- package/form/form-label/form-label.js +2 -0
- package/form/form-label/form-label.js.map +1 -0
- package/form/form-label/form-label.styles.js +2 -0
- package/form/form-label/form-label.styles.js.map +1 -0
- package/form/form-label/form-label.styles_180zf7j.css +6 -0
- package/form/form-label/index.d.ts +2 -0
- package/form/form-label/types.d.ts +39 -0
- package/form/form-masked-input/form-masked-input.js +2 -0
- package/form/form-masked-input/form-masked-input.js.map +1 -0
- package/form/form-masked-input/index.d.ts +2 -0
- package/form/form-masked-input/types.d.ts +8 -0
- package/form/form-multi-select/form-multi-select.js +2 -0
- package/form/form-multi-select/form-multi-select.js.map +1 -0
- package/form/form-multi-select/index.d.ts +2 -0
- package/form/form-multi-select/types.d.ts +10 -0
- package/form/form-nested-multi-select/form-nested-multi-select.js +2 -0
- package/form/form-nested-multi-select/form-nested-multi-select.js.map +1 -0
- package/form/form-nested-multi-select/index.d.ts +2 -0
- package/form/form-nested-multi-select/types.d.ts +11 -0
- package/form/form-nested-select/form-nested-select.js +2 -0
- package/form/form-nested-select/form-nested-select.js.map +1 -0
- package/form/form-nested-select/index.d.ts +2 -0
- package/form/form-nested-select/types.d.ts +11 -0
- package/form/{form-otp-verification.d.ts → form-otp-verification/form-otp-verification.d.ts} +1 -1
- package/form/form-otp-verification/form-otp-verification.js +2 -0
- package/form/form-otp-verification/form-otp-verification.js.map +1 -0
- package/form/form-otp-verification/index.d.ts +2 -0
- package/form/form-otp-verification/types.d.ts +1 -0
- package/form/form-phone-number-input/form-phone-number-input.js +2 -0
- package/form/form-phone-number-input/form-phone-number-input.js.map +1 -0
- package/form/form-phone-number-input/index.d.ts +2 -0
- package/form/form-phone-number-input/types.d.ts +8 -0
- package/form/form-predictive-text-input/form-predictive-text-input.js +2 -0
- package/form/form-predictive-text-input/form-predictive-text-input.js.map +1 -0
- package/form/form-predictive-text-input/index.d.ts +2 -0
- package/form/form-predictive-text-input/types.d.ts +10 -0
- package/form/form-range-select/form-range-select.js +2 -0
- package/form/form-range-select/form-range-select.js.map +1 -0
- package/form/form-range-select/index.d.ts +2 -0
- package/form/form-range-select/types.d.ts +10 -0
- package/form/form-range-slider/form-range-slider.js +2 -0
- package/form/form-range-slider/form-range-slider.js.map +1 -0
- package/form/form-range-slider/index.d.ts +2 -0
- package/form/form-range-slider/types.d.ts +8 -0
- package/form/form-select/form-select.js +2 -0
- package/form/form-select/form-select.js.map +1 -0
- package/form/form-select/index.d.ts +2 -0
- package/form/form-select/types.d.ts +10 -0
- package/form/form-select-histogram/form-select-histogram.js +2 -0
- package/form/form-select-histogram/form-select-histogram.js.map +1 -0
- package/form/form-select-histogram/index.d.ts +2 -0
- package/form/form-select-histogram/types.d.ts +8 -0
- package/form/form-slider/form-slider.js +2 -0
- package/form/form-slider/form-slider.js.map +1 -0
- package/form/form-slider/index.d.ts +2 -0
- package/form/form-slider/types.d.ts +8 -0
- package/form/form-textarea/form-textarea.js +2 -0
- package/form/form-textarea/form-textarea.js.map +1 -0
- package/form/form-textarea/form-textarea.styles.js +2 -0
- package/form/form-textarea/form-textarea.styles.js.map +1 -0
- package/form/form-textarea/form-textarea.styles_1kneyif.css +3 -0
- package/form/form-textarea/index.d.ts +2 -0
- package/form/form-textarea/types.d.ts +8 -0
- package/form/form-time-range-picker/form-time-range-picker.js +2 -0
- package/form/form-time-range-picker/form-time-range-picker.js.map +1 -0
- package/form/form-time-range-picker/index.d.ts +2 -0
- package/form/form-time-range-picker/types.d.ts +8 -0
- package/form/form-timepicker/form-timepicker.js +2 -0
- package/form/form-timepicker/form-timepicker.js.map +1 -0
- package/form/form-timepicker/index.d.ts +2 -0
- package/form/form-timepicker/types.d.ts +8 -0
- package/form/form-unit-number-input/form-unit-number-input.js +2 -0
- package/form/form-unit-number-input/form-unit-number-input.js.map +1 -0
- package/form/form-unit-number-input/index.d.ts +2 -0
- package/form/form-unit-number-input/types.d.ts +8 -0
- package/form/form-wrapper.js +1 -1
- package/form/form-wrapper.js.map +1 -1
- package/form/index.d.ts +47 -24
- package/form/index.js +1 -1
- package/form/index.js.map +1 -1
- package/form/types.d.ts +1 -208
- package/fullscreen-image-carousel/fullscreen-image-carousel.js.map +1 -1
- package/histogram-slider/histogram-slider.js.map +1 -1
- package/image-button/image-button.js.map +1 -1
- package/input/input.js.map +1 -1
- package/input-group/input-group.js.map +1 -1
- package/input-group/types.d.ts +1 -1
- package/input-multi-select/input-multi-select.js.map +1 -1
- package/input-multi-select/types.d.ts +1 -1
- package/input-nested-multi-select/input-nested-multi-select.js.map +1 -1
- package/input-nested-select/input-nested-select.js.map +1 -1
- package/input-nested-select/types.d.ts +1 -1
- package/input-range-select/input-range-select.js.map +1 -1
- package/input-range-select/types.d.ts +1 -1
- package/input-range-slider/input-range-slider.js.map +1 -1
- package/input-select/input-select.js.map +1 -1
- package/input-select/types.d.ts +1 -1
- package/input-slider/input-slider.js.map +1 -1
- package/input-slider/types.d.ts +1 -1
- package/input-textarea/textarea.js.map +1 -1
- package/input-textarea/textarea.styles.js +1 -1
- package/input-textarea/textarea.styles.js.map +1 -1
- package/input-textarea/{textarea.styles_22z4n3.css → textarea.styles_q77m5x.css} +1 -1
- package/language-switcher/language-switcher.js.map +1 -1
- package/layout/index.js.map +1 -1
- package/link-list/components/common.d.ts +1 -1
- package/link-list/components/common.js.map +1 -1
- package/link-list/components/link-list-eager.d.ts +2 -2
- package/link-list/components/link-list-eager.js.map +1 -1
- package/link-list/components/link-list-lazy.d.ts +2 -2
- package/link-list/components/link-list-lazy.js.map +1 -1
- package/link-list/link-list.js.map +1 -1
- package/link-list/types.d.ts +89 -3
- package/local-nav/local-nav-dropdown/local-nav-dropdown.js.map +1 -1
- package/local-nav/local-nav-menu/local-nav-menu.js.map +1 -1
- package/markup/markup.js.map +1 -1
- package/masked-input/masked-input.js.map +1 -1
- package/masthead/masthead.js.map +1 -1
- package/menu/menu.js.map +1 -1
- package/menu/types.d.ts +17 -1
- package/modal/index.js.map +1 -1
- package/modal/types.d.ts +3 -1
- package/modal-v2/modal-v2.js.map +1 -1
- package/modal-v2/types.d.ts +17 -0
- package/navbar/navbar.js.map +1 -1
- package/navbar/types.d.ts +1 -0
- package/notification-banner/notification-banner.js.map +1 -1
- package/otp-input/otp-input.js +1 -1
- package/otp-input/otp-input.js.map +1 -1
- package/otp-input/types.d.ts +14 -9
- package/otp-verification/contact-input-section.js +1 -1
- package/otp-verification/contact-input-section.js.map +1 -1
- package/otp-verification/otp-verification.js.map +1 -1
- package/otp-verification/verification-section.js +1 -1
- package/otp-verification/verification-section.js.map +1 -1
- package/overlay/overlay.js.map +1 -1
- package/package.json +1 -1
- package/pagination/pagination.js.map +1 -1
- package/phone-number-input/phone-number-input.js.map +1 -1
- package/pill/pill.js.map +1 -1
- package/popover/popover-inline/index.d.ts +1 -0
- package/popover/popover-inline/popover-inline.d.ts +1 -1
- package/popover/popover-inline/popover-inline.js.map +1 -1
- package/popover/popover-inline/types.d.ts +36 -0
- package/popover/popover.js.map +1 -1
- package/popover/types.d.ts +2 -35
- package/predictive-text-input/predictive-text-input.js +1 -1
- package/predictive-text-input/predictive-text-input.js.map +1 -1
- package/predictive-text-input/types.d.ts +1 -1
- package/progress-indicator/progress-indicator.js.map +1 -1
- package/radio-button/radio-button.js.map +1 -1
- package/radio-button/types.d.ts +3 -0
- package/schedule/schedule.js.map +1 -1
- package/select-histogram/select-histogram.js.map +1 -1
- package/select-histogram/types.d.ts +1 -1
- package/shared/dropdown-list/dropdown-list.js +1 -1
- package/shared/dropdown-list/dropdown-list.js.map +1 -1
- package/shared/dropdown-wrapper/element-with-dropdown.d.ts +5 -4
- package/shared/dropdown-wrapper/element-with-dropdown.js +1 -1
- package/shared/dropdown-wrapper/element-with-dropdown.js.map +1 -1
- package/sidenav/sidenav.js.map +1 -1
- package/sidenav/types.d.ts +1 -0
- package/singpass-button/singpass-button.js.map +1 -1
- package/singpass-button/singpass-button.styles.js +1 -1
- package/singpass-button/singpass-button.styles.js.map +1 -1
- package/singpass-button/{singpass-button.styles_1miyex3.css → singpass-button.styles_1fj2lru.css} +1 -1
- package/smart-app-banner/smart-app-banner.js.map +1 -1
- package/smart-app-banner/smart-app-banner.styles.js +1 -1
- package/smart-app-banner/smart-app-banner.styles.js.map +1 -1
- package/{cjs/smart-app-banner/smart-app-banner.styles_15u6yv4.css → smart-app-banner/smart-app-banner.styles_r6yjq9.css} +1 -1
- package/smart-app-banner/types.d.ts +2 -0
- package/tab/tab.js.map +1 -1
- package/table/table.d.ts +9 -8
- package/table/table.js.map +1 -1
- package/table/types.d.ts +35 -0
- package/tag/tag.js.map +1 -1
- package/text-list/index.js.map +1 -1
- package/theme/styles/pa.css +0 -41
- package/theme/theme-provider/hooks.js.map +1 -1
- package/theme/theme-provider/index.js.map +1 -1
- package/theme/tokens/border.d.ts +9 -3
- package/theme/tokens/border.js.map +1 -1
- package/theme/tokens/breakpoint.js.map +1 -1
- package/theme/tokens/colour.d.ts +9 -3
- package/theme/tokens/colour.js.map +1 -1
- package/theme/tokens/component.d.ts +3 -1
- package/theme/tokens/component.js.map +1 -1
- package/theme/tokens/font.d.ts +6 -2
- package/theme/tokens/font.js.map +1 -1
- package/theme/tokens/media-query.d.ts +3 -1
- package/theme/tokens/media-query.js.map +1 -1
- package/theme/tokens/motion.d.ts +3 -1
- package/theme/tokens/motion.js.map +1 -1
- package/theme/tokens/radius.d.ts +3 -1
- package/theme/tokens/radius.js.map +1 -1
- package/theme/tokens/shadow.d.ts +3 -1
- package/theme/tokens/shadow.js.map +1 -1
- package/theme/tokens/spacing.d.ts +3 -1
- package/theme/tokens/spacing.js.map +1 -1
- package/theme/utils/use-apply-styles.js.map +1 -1
- package/theme/utils/use-design-token.js.map +1 -1
- package/theme/utils/use-media-query.js.map +1 -1
- package/time-range-picker/combobox-picker/combobox-picker.js +1 -1
- package/time-range-picker/combobox-picker/combobox-picker.js.map +1 -1
- package/time-range-picker/time-range-picker.js.map +1 -1
- package/time-range-picker/types.d.ts +1 -1
- package/time-slot-bar/time-slot-bar.js.map +1 -1
- package/time-slot-bar/types.d.ts +5 -1
- package/time-slot-bar-week/time-slot-bar-week.js.map +1 -1
- package/time-slot-bar-week/types.d.ts +6 -0
- package/time-slot-week-view/time-slot-week-view.js.map +1 -1
- package/time-slot-week-view/types.d.ts +2 -0
- package/timeline/timeline.js.map +1 -1
- package/timeline/types.d.ts +1 -1
- package/timepicker/timepicker.js.map +1 -1
- package/timepicker/types.d.ts +2 -2
- package/timetable/timetable.js.map +1 -1
- package/toast/toast.js.map +1 -1
- package/toast/toast.styles.js +1 -1
- package/toast/toast.styles.js.map +1 -1
- package/{cjs/toast/toast.styles_1e0l60w.css → toast/toast.styles_57j3lf.css} +1 -1
- package/toast/types.d.ts +2 -0
- package/toggle/toggle.js.map +1 -1
- package/tools/shared/generated-file-formatter.d.ts +6 -0
- package/tools/shared/jsdoc-parser.d.ts +36 -0
- package/tools/shared/ts-morph-project-factory.d.ts +9 -0
- package/tools/shared/typescript-source-provider.d.ts +9 -0
- package/tools/storybook-argtypes/adapters/file-system-adapter.d.ts +69 -0
- package/tools/storybook-argtypes/arg-types-generator.d.ts +85 -0
- package/tools/storybook-argtypes/config/arg-types-config.d.ts +31 -0
- package/tools/storybook-argtypes/index.d.ts +11 -0
- package/tools/storybook-argtypes/services/arg-types-row-builder.d.ts +49 -0
- package/tools/storybook-argtypes/services/file-path-resolver.d.ts +118 -0
- package/tools/storybook-argtypes/services/index.d.ts +6 -0
- package/tools/storybook-argtypes/services/jsdoc-metadata-extractor.d.ts +33 -0
- package/tools/storybook-argtypes/services/story-registry-generator.d.ts +27 -0
- package/tools/storybook-argtypes/services/type-dependency-resolver.d.ts +46 -0
- package/tools/storybook-argtypes/services/type-formatting-service.d.ts +27 -0
- package/tools/storybook-argtypes/types.d.ts +114 -0
- package/typography/index.js.map +1 -1
- package/uneditable-section/index.js.map +1 -1
- package/uneditable-section/section-item.js +1 -1
- package/uneditable-section/section-item.js.map +1 -1
- package/uneditable-section/types.d.ts +2 -2
- package/unit-number/unit-number-input.js.map +1 -1
- package/button/button.styles_1pxy0co.css +0 -20
- package/cjs/button/button.styles_1pxy0co.css +0 -20
- package/cjs/form/form-custom-field.js +0 -2
- package/cjs/form/form-custom-field.js.map +0 -1
- package/cjs/form/form-date-input.js +0 -2
- package/cjs/form/form-date-input.js.map +0 -1
- package/cjs/form/form-date-range-input.js +0 -2
- package/cjs/form/form-date-range-input.js.map +0 -1
- package/cjs/form/form-e-signature.js +0 -2
- package/cjs/form/form-e-signature.js.map +0 -1
- package/cjs/form/form-histogram.js +0 -2
- package/cjs/form/form-histogram.js.map +0 -1
- package/cjs/form/form-input-group.js +0 -2
- package/cjs/form/form-input-group.js.map +0 -1
- package/cjs/form/form-input.js +0 -2
- package/cjs/form/form-input.js.map +0 -1
- package/cjs/form/form-label-addon.js +0 -2
- package/cjs/form/form-label-addon.js.map +0 -1
- package/cjs/form/form-label-addon.styles.js +0 -2
- package/cjs/form/form-label-addon.styles.js.map +0 -1
- package/cjs/form/form-label-addon.styles_b00z8p.css +0 -1
- package/cjs/form/form-label.js +0 -2
- package/cjs/form/form-label.js.map +0 -1
- package/cjs/form/form-label.styles.js +0 -2
- package/cjs/form/form-label.styles.js.map +0 -1
- package/cjs/form/form-label.styles_1nbe0bm.css +0 -6
- package/cjs/form/form-masked-input.js +0 -2
- package/cjs/form/form-masked-input.js.map +0 -1
- package/cjs/form/form-multi-select.js +0 -2
- package/cjs/form/form-multi-select.js.map +0 -1
- package/cjs/form/form-nested-multi-select.js +0 -2
- package/cjs/form/form-nested-multi-select.js.map +0 -1
- package/cjs/form/form-nested-select.js +0 -2
- package/cjs/form/form-nested-select.js.map +0 -1
- package/cjs/form/form-otp-verification.js +0 -2
- package/cjs/form/form-otp-verification.js.map +0 -1
- package/cjs/form/form-phone-number-input.js +0 -2
- package/cjs/form/form-phone-number-input.js.map +0 -1
- package/cjs/form/form-predictive-text-input.js +0 -2
- package/cjs/form/form-predictive-text-input.js.map +0 -1
- package/cjs/form/form-range-select.js +0 -2
- package/cjs/form/form-range-select.js.map +0 -1
- package/cjs/form/form-range-slider.js +0 -2
- package/cjs/form/form-range-slider.js.map +0 -1
- package/cjs/form/form-select-histogram.js +0 -2
- package/cjs/form/form-select-histogram.js.map +0 -1
- package/cjs/form/form-select.js +0 -2
- package/cjs/form/form-select.js.map +0 -1
- package/cjs/form/form-slider.js +0 -2
- package/cjs/form/form-slider.js.map +0 -1
- package/cjs/form/form-textarea.js +0 -2
- package/cjs/form/form-textarea.js.map +0 -1
- package/cjs/form/form-textarea.styles.js +0 -2
- package/cjs/form/form-textarea.styles.js.map +0 -1
- package/cjs/form/form-textarea.styles_3p9qoy.css +0 -3
- package/cjs/form/form-time-range-picker.js +0 -2
- package/cjs/form/form-time-range-picker.js.map +0 -1
- package/cjs/form/form-timepicker.js +0 -2
- package/cjs/form/form-timepicker.js.map +0 -1
- package/cjs/form/form-unit-number-input.js +0 -2
- package/cjs/form/form-unit-number-input.js.map +0 -1
- package/form/form-custom-field.js +0 -2
- package/form/form-custom-field.js.map +0 -1
- package/form/form-date-input.js +0 -2
- package/form/form-date-input.js.map +0 -1
- package/form/form-date-range-input.js +0 -2
- package/form/form-date-range-input.js.map +0 -1
- package/form/form-e-signature.js +0 -2
- package/form/form-e-signature.js.map +0 -1
- package/form/form-histogram.js +0 -2
- package/form/form-histogram.js.map +0 -1
- package/form/form-input-group.js +0 -2
- package/form/form-input-group.js.map +0 -1
- package/form/form-input.js +0 -2
- package/form/form-input.js.map +0 -1
- package/form/form-label-addon.js +0 -2
- package/form/form-label-addon.js.map +0 -1
- package/form/form-label-addon.styles.js +0 -2
- package/form/form-label-addon.styles.js.map +0 -1
- package/form/form-label-addon.styles_b00z8p.css +0 -1
- package/form/form-label.js +0 -2
- package/form/form-label.js.map +0 -1
- package/form/form-label.styles.js +0 -2
- package/form/form-label.styles.js.map +0 -1
- package/form/form-label.styles_1nbe0bm.css +0 -6
- package/form/form-masked-input.js +0 -2
- package/form/form-masked-input.js.map +0 -1
- package/form/form-multi-select.js +0 -2
- package/form/form-multi-select.js.map +0 -1
- package/form/form-nested-multi-select.js +0 -2
- package/form/form-nested-multi-select.js.map +0 -1
- package/form/form-nested-select.js +0 -2
- package/form/form-nested-select.js.map +0 -1
- package/form/form-otp-verification.js +0 -2
- package/form/form-otp-verification.js.map +0 -1
- package/form/form-phone-number-input.js +0 -2
- package/form/form-phone-number-input.js.map +0 -1
- package/form/form-predictive-text-input.js +0 -2
- package/form/form-predictive-text-input.js.map +0 -1
- package/form/form-range-select.js +0 -2
- package/form/form-range-select.js.map +0 -1
- package/form/form-range-slider.js +0 -2
- package/form/form-range-slider.js.map +0 -1
- package/form/form-select-histogram.js +0 -2
- package/form/form-select-histogram.js.map +0 -1
- package/form/form-select.js +0 -2
- package/form/form-select.js.map +0 -1
- package/form/form-slider.js +0 -2
- package/form/form-slider.js.map +0 -1
- package/form/form-textarea.js +0 -2
- package/form/form-textarea.js.map +0 -1
- package/form/form-textarea.styles.js +0 -2
- package/form/form-textarea.styles.js.map +0 -1
- package/form/form-textarea.styles_3p9qoy.css +0 -3
- package/form/form-time-range-picker.js +0 -2
- package/form/form-time-range-picker.js.map +0 -1
- package/form/form-timepicker.js +0 -2
- package/form/form-timepicker.js.map +0 -1
- package/form/form-unit-number-input.js +0 -2
- package/form/form-unit-number-input.js.map +0 -1
- package/link-list/internal-types.d.ts +0 -85
- /package/{codemod-utils.d.ts → codemods/codemod-utils.d.ts} +0 -0
- /package/{migrate-popover → codemods/migrate-popover}/index.d.ts +0 -0
- /package/{run-codemod.d.ts → codemods/run-codemod.d.ts} +0 -0
- /package/form/{form-custom-field.d.ts → form-custom-field/form-custom-field.d.ts} +0 -0
- /package/form/{form-date-input.d.ts → form-date-input/form-date-input.d.ts} +0 -0
- /package/form/{form-date-range-input.d.ts → form-date-range-input/form-date-range-input.d.ts} +0 -0
- /package/form/{form-e-signature.d.ts → form-e-signature/form-e-signature.d.ts} +0 -0
- /package/form/{form-histogram.d.ts → form-histogram-slider/form-histogram-slider.d.ts} +0 -0
- /package/form/{form-input.d.ts → form-input/form-input.d.ts} +0 -0
- /package/form/{form-input-group.d.ts → form-input-group/form-input-group.d.ts} +0 -0
- /package/form/{form-label-addon.d.ts → form-label/form-label-addon.d.ts} +0 -0
- /package/form/{form-label-addon.styles.d.ts → form-label/form-label-addon.styles.d.ts} +0 -0
- /package/form/{form-label.d.ts → form-label/form-label.d.ts} +0 -0
- /package/form/{form-label.styles.d.ts → form-label/form-label.styles.d.ts} +0 -0
- /package/form/{form-masked-input.d.ts → form-masked-input/form-masked-input.d.ts} +0 -0
- /package/form/{form-multi-select.d.ts → form-multi-select/form-multi-select.d.ts} +0 -0
- /package/form/{form-nested-multi-select.d.ts → form-nested-multi-select/form-nested-multi-select.d.ts} +0 -0
- /package/form/{form-nested-select.d.ts → form-nested-select/form-nested-select.d.ts} +0 -0
- /package/form/{form-phone-number-input.d.ts → form-phone-number-input/form-phone-number-input.d.ts} +0 -0
- /package/form/{form-predictive-text-input.d.ts → form-predictive-text-input/form-predictive-text-input.d.ts} +0 -0
- /package/form/{form-range-select.d.ts → form-range-select/form-range-select.d.ts} +0 -0
- /package/form/{form-range-slider.d.ts → form-range-slider/form-range-slider.d.ts} +0 -0
- /package/form/{form-select.d.ts → form-select/form-select.d.ts} +0 -0
- /package/form/{form-select-histogram.d.ts → form-select-histogram/form-select-histogram.d.ts} +0 -0
- /package/form/{form-slider.d.ts → form-slider/form-slider.d.ts} +0 -0
- /package/form/{form-textarea.d.ts → form-textarea/form-textarea.d.ts} +0 -0
- /package/form/{form-textarea.styles.d.ts → form-textarea/form-textarea.styles.d.ts} +0 -0
- /package/form/{form-time-range-picker.d.ts → form-time-range-picker/form-time-range-picker.d.ts} +0 -0
- /package/form/{form-timepicker.d.ts → form-timepicker/form-timepicker.d.ts} +0 -0
- /package/form/{form-unit-number-input.d.ts → form-unit-number-input/form-unit-number-input.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n {\n children,\n theme = \"lifesg\",\n mode = \"auto\",\n className,\n style,\n }: ThemeProviderProps,\n ref: Ref<HTMLDivElement>\n) => {\n const isModeControlled = mode !== \"auto\";\n\n const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n isModeControlled ? mode : \"light\"\n );\n const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n null\n );\n\n // Re-subscribe when the source node or token set changes:\n // - `themeElement`: scoped breakpoint tokens may live on this element\n // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n useIsomorphicLayoutEffect(() => {\n const sourceElement = themeElement ?? document.documentElement;\n const cleanup = setupBreakpointListener(sourceElement);\n return cleanup;\n }, [themeElement, theme, computedMode]);\n\n useEffect(() => {\n if (isModeControlled) {\n setComputedMode(mode);\n return;\n }\n\n return listenToSystemColourMode(setComputedMode);\n }, [isModeControlled, mode]);\n\n const contextValue = useMemo(\n () => ({\n theme,\n mode: computedMode,\n themeElement,\n }),\n [theme, computedMode, themeElement]\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div\n ref={mergeRefs(ref, setThemeElement)}\n data-fds-theme={theme}\n data-fds-theme-mode={computedMode}\n className={className}\n style={style}\n >\n {children}\n </div>\n </ThemeContext.Provider>\n );\n};\n\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"2mBAUA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n {\n children,\n theme = \"lifesg\",\n mode = \"auto\",\n className,\n style,\n }: ThemeProviderProps,\n ref: Ref<HTMLDivElement>\n) => {\n const isModeControlled = mode !== \"auto\";\n\n const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n isModeControlled ? mode : \"light\"\n );\n const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n null\n );\n\n // Re-subscribe when the source node or token set changes:\n // - `themeElement`: scoped breakpoint tokens may live on this element\n // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n useIsomorphicLayoutEffect(() => {\n const sourceElement = themeElement ?? document.documentElement;\n const cleanup = setupBreakpointListener(sourceElement);\n return cleanup;\n }, [themeElement, theme, computedMode]);\n\n useEffect(() => {\n if (isModeControlled) {\n setComputedMode(mode);\n return;\n }\n\n return listenToSystemColourMode(setComputedMode);\n }, [isModeControlled, mode]);\n\n const contextValue = useMemo(\n () => ({\n theme,\n mode: computedMode,\n themeElement,\n }),\n [theme, computedMode, themeElement]\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <div\n ref={mergeRefs(ref, setThemeElement)}\n data-fds-theme={theme}\n data-fds-theme-mode={computedMode}\n className={className}\n style={style}\n >\n {children}\n </div>\n </ThemeContext.Provider>\n );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"2mBAUA,MAqEaA,EAAgBC,GArEF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,SAEJC,KAEA,MAAMC,EAA4B,SAATJ,GAElBK,EAAcC,GAAmBC,EACpCH,EAAmBJ,EAAO,UAEvBQ,EAAcC,GAAmBF,EACpC,MAMJG,GAA0B,KACtB,MAAMC,EAAgBH,QAAAA,EAAgBI,SAASC,gBAE/C,OADgBC,EAAwBH,EAC1B,GACf,CAACH,EAAcT,EAAOM,IAEzBU,GAAU,KACN,IAAIX,EAKJ,OAAOY,EAAyBV,GAJ5BA,EAAgBN,EAI4B,GACjD,CAACI,EAAkBJ,IAEtB,MAAMiB,EAAeC,GACjB,KAAA,CACInB,QACAC,KAAMK,EACNG,kBAEJ,CAACT,EAAOM,EAAcG,IAG1B,OACIW,EAACC,EAAaC,UAASC,MAAOL,EAAYnB,SACtCqB,SACIhB,IAAKoB,EAAUpB,EAAKM,GAAgB,iBACpBV,EAAK,sBACAM,EACrBJ,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}
|
package/theme/tokens/border.d.ts
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Border width tokens.
|
|
3
|
+
*/
|
|
2
4
|
export declare const BorderThickness: {
|
|
3
5
|
readonly "width-005": "var(--fds-border-width-005)";
|
|
4
6
|
readonly "width-010": "var(--fds-border-width-010)";
|
|
5
7
|
readonly "width-020": "var(--fds-border-width-020)";
|
|
6
8
|
readonly "width-040": "var(--fds-border-width-040)";
|
|
7
9
|
};
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Border style tokens.
|
|
12
|
+
*/
|
|
9
13
|
export declare const BorderStyle: {
|
|
10
14
|
readonly solid: "var(--fds-border-style-solid)";
|
|
11
15
|
};
|
|
12
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Border tokens consisting of border width and border style.
|
|
18
|
+
*/
|
|
13
19
|
export declare const Border: {
|
|
14
20
|
readonly solid: "var(--fds-border-style-solid)";
|
|
15
21
|
readonly "width-005": "var(--fds-border-width-005)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"border.js","sources":["../../../src/theme/tokens/border.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"border.js","sources":["../../../src/theme/tokens/border.ts"],"sourcesContent":["/**\n * Border width tokens.\n */\nexport const BorderThickness = {\n \"width-005\": \"var(--fds-border-width-005)\",\n \"width-010\": \"var(--fds-border-width-010)\",\n \"width-020\": \"var(--fds-border-width-020)\",\n \"width-040\": \"var(--fds-border-width-040)\",\n} as const;\n\n/**\n * Border style tokens.\n */\nexport const BorderStyle = {\n solid: \"var(--fds-border-style-solid)\",\n} as const;\n\n// @catalog\n/**\n * Border tokens consisting of border width and border style.\n */\nexport const Border = {\n ...BorderThickness,\n ...BorderStyle,\n} as const;\n"],"names":["BorderThickness","BorderStyle","solid","Border","Object"],"mappings":"AAGO,MAAMA,EAAkB,CAC3B,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,+BAMJC,EAAc,CACvBC,MAAO,iCAOEC,EAASC,+BACfJ,GACAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/tokens/breakpoint.ts"],"sourcesContent":["/**\n * Responsive breakpoint tokens for each named breakpoint.\n */\nexport const Breakpoint = {\n \"xxs-min\": \"var(--fds-breakpoint-xxs-min)\",\n \"xxs-max\": \"var(--fds-breakpoint-xxs-max)\",\n \"xs-min\": \"var(--fds-breakpoint-xs-min)\",\n \"xs-max\": \"var(--fds-breakpoint-xs-max)\",\n \"sm-min\": \"var(--fds-breakpoint-sm-min)\",\n \"sm-max\": \"var(--fds-breakpoint-sm-max)\",\n \"md-min\": \"var(--fds-breakpoint-md-min)\",\n \"md-max\": \"var(--fds-breakpoint-md-max)\",\n \"lg-min\": \"var(--fds-breakpoint-lg-min)\",\n \"lg-max\": \"var(--fds-breakpoint-lg-max)\",\n \"xl-min\": \"var(--fds-breakpoint-xl-min)\",\n \"xl-max\": \"var(--fds-breakpoint-xl-max)\",\n \"xxl-min\": \"var(--fds-breakpoint-xxl-min)\",\n\n \"xxs-column\": \"var(--fds-breakpoint-column-xxs)\",\n \"xs-column\": \"var(--fds-breakpoint-column-xs)\",\n \"sm-column\": \"var(--fds-breakpoint-column-sm)\",\n \"md-column\": \"var(--fds-breakpoint-column-md)\",\n \"lg-column\": \"var(--fds-breakpoint-column-lg)\",\n \"xl-column\": \"var(--fds-breakpoint-column-xl)\",\n \"xxl-column\": \"var(--fds-breakpoint-column-xxl)\",\n\n \"xxs-gutter\": \"var(--fds-breakpoint-gutter-xxs)\",\n \"xs-gutter\": \"var(--fds-breakpoint-gutter-xs)\",\n \"sm-gutter\": \"var(--fds-breakpoint-gutter-sm)\",\n \"md-gutter\": \"var(--fds-breakpoint-gutter-md)\",\n \"lg-gutter\": \"var(--fds-breakpoint-gutter-lg)\",\n \"xl-gutter\": \"var(--fds-breakpoint-gutter-xl)\",\n \"xxl-gutter\": \"var(--fds-breakpoint-gutter-xxl)\",\n\n \"xxs-margin\": \"var(--fds-breakpoint-margin-xxs)\",\n \"xs-margin\": \"var(--fds-breakpoint-margin-xs)\",\n \"sm-margin\": \"var(--fds-breakpoint-margin-sm)\",\n \"md-margin\": \"var(--fds-breakpoint-margin-md)\",\n \"lg-margin\": \"var(--fds-breakpoint-margin-lg)\",\n \"xl-margin\": \"var(--fds-breakpoint-margin-xl)\",\n \"xxl-margin\": \"var(--fds-breakpoint-margin-xxl)\",\n} as const;\n"],"names":["Breakpoint"],"mappings":"
|
|
1
|
+
{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/tokens/breakpoint.ts"],"sourcesContent":["// @catalog\n/**\n * Responsive breakpoint tokens for each named breakpoint.\n */\nexport const Breakpoint = {\n \"xxs-min\": \"var(--fds-breakpoint-xxs-min)\",\n \"xxs-max\": \"var(--fds-breakpoint-xxs-max)\",\n \"xs-min\": \"var(--fds-breakpoint-xs-min)\",\n \"xs-max\": \"var(--fds-breakpoint-xs-max)\",\n \"sm-min\": \"var(--fds-breakpoint-sm-min)\",\n \"sm-max\": \"var(--fds-breakpoint-sm-max)\",\n \"md-min\": \"var(--fds-breakpoint-md-min)\",\n \"md-max\": \"var(--fds-breakpoint-md-max)\",\n \"lg-min\": \"var(--fds-breakpoint-lg-min)\",\n \"lg-max\": \"var(--fds-breakpoint-lg-max)\",\n \"xl-min\": \"var(--fds-breakpoint-xl-min)\",\n \"xl-max\": \"var(--fds-breakpoint-xl-max)\",\n \"xxl-min\": \"var(--fds-breakpoint-xxl-min)\",\n\n \"xxs-column\": \"var(--fds-breakpoint-column-xxs)\",\n \"xs-column\": \"var(--fds-breakpoint-column-xs)\",\n \"sm-column\": \"var(--fds-breakpoint-column-sm)\",\n \"md-column\": \"var(--fds-breakpoint-column-md)\",\n \"lg-column\": \"var(--fds-breakpoint-column-lg)\",\n \"xl-column\": \"var(--fds-breakpoint-column-xl)\",\n \"xxl-column\": \"var(--fds-breakpoint-column-xxl)\",\n\n \"xxs-gutter\": \"var(--fds-breakpoint-gutter-xxs)\",\n \"xs-gutter\": \"var(--fds-breakpoint-gutter-xs)\",\n \"sm-gutter\": \"var(--fds-breakpoint-gutter-sm)\",\n \"md-gutter\": \"var(--fds-breakpoint-gutter-md)\",\n \"lg-gutter\": \"var(--fds-breakpoint-gutter-lg)\",\n \"xl-gutter\": \"var(--fds-breakpoint-gutter-xl)\",\n \"xxl-gutter\": \"var(--fds-breakpoint-gutter-xxl)\",\n\n \"xxs-margin\": \"var(--fds-breakpoint-margin-xxs)\",\n \"xs-margin\": \"var(--fds-breakpoint-margin-xs)\",\n \"sm-margin\": \"var(--fds-breakpoint-margin-sm)\",\n \"md-margin\": \"var(--fds-breakpoint-margin-md)\",\n \"lg-margin\": \"var(--fds-breakpoint-margin-lg)\",\n \"xl-margin\": \"var(--fds-breakpoint-margin-xl)\",\n \"xxl-margin\": \"var(--fds-breakpoint-margin-xxl)\",\n} as const;\n"],"names":["Breakpoint"],"mappings":"AAIO,MAAMA,EAAa,CACtB,UAAW,gCACX,UAAW,gCACX,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,UAAW,gCAEX,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc,mCAEd,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc,mCAEd,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc"}
|
package/theme/tokens/colour.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Base colour palette.
|
|
3
|
+
*/
|
|
2
4
|
export declare const PrimitiveColours: {
|
|
3
5
|
readonly "brand-10": "var(--fds-colour-brand-10)";
|
|
4
6
|
readonly "brand-20": "var(--fds-colour-brand-20)";
|
|
@@ -92,7 +94,9 @@ export declare const PrimitiveColours: {
|
|
|
92
94
|
readonly black: "var(--fds-colour-black)";
|
|
93
95
|
readonly "primary-inverse": "var(--fds-colour-primary-inverse)";
|
|
94
96
|
};
|
|
95
|
-
/**
|
|
97
|
+
/**
|
|
98
|
+
* Purpose-driven colour tokens.
|
|
99
|
+
*/
|
|
96
100
|
export declare const SemanticColours: {
|
|
97
101
|
readonly text: "var(--fds-colour-text)";
|
|
98
102
|
readonly "text-subtle": "var(--fds-colour-text-subtle)";
|
|
@@ -223,7 +227,9 @@ export declare const SemanticColours: {
|
|
|
223
227
|
readonly "focus-ring": "var(--fds-colour-focus-ring)";
|
|
224
228
|
readonly "focus-ring-inverse": "var(--fds-colour-focus-ring-inverse)";
|
|
225
229
|
};
|
|
226
|
-
/**
|
|
230
|
+
/**
|
|
231
|
+
* Combined colour token set.
|
|
232
|
+
*/
|
|
227
233
|
export declare const Colour: {
|
|
228
234
|
readonly text: "var(--fds-colour-text)";
|
|
229
235
|
readonly "text-subtle": "var(--fds-colour-text-subtle)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colour.js","sources":["../../../src/theme/tokens/colour.ts"],"sourcesContent":["/** Base colour palette */\nexport const PrimitiveColours = {\n \"brand-10\": \"var(--fds-colour-brand-10)\",\n \"brand-20\": \"var(--fds-colour-brand-20)\",\n \"brand-30\": \"var(--fds-colour-brand-30)\",\n \"brand-40\": \"var(--fds-colour-brand-40)\",\n \"brand-50\": \"var(--fds-colour-brand-50)\",\n \"brand-60\": \"var(--fds-colour-brand-60)\",\n \"brand-70\": \"var(--fds-colour-brand-70)\",\n \"brand-80\": \"var(--fds-colour-brand-80)\",\n \"brand-90\": \"var(--fds-colour-brand-90)\",\n \"brand-95\": \"var(--fds-colour-brand-95)\",\n \"brand-100\": \"var(--fds-colour-brand-100)\",\n\n \"primary-10\": \"var(--fds-colour-primary-10)\",\n \"primary-20\": \"var(--fds-colour-primary-20)\",\n \"primary-30\": \"var(--fds-colour-primary-30)\",\n \"primary-40\": \"var(--fds-colour-primary-40)\",\n \"primary-50\": \"var(--fds-colour-primary-50)\",\n \"primary-60\": \"var(--fds-colour-primary-60)\",\n \"primary-70\": \"var(--fds-colour-primary-70)\",\n \"primary-80\": \"var(--fds-colour-primary-80)\",\n \"primary-90\": \"var(--fds-colour-primary-90)\",\n \"primary-95\": \"var(--fds-colour-primary-95)\",\n \"primary-100\": \"var(--fds-colour-primary-100)\",\n\n \"secondary-10\": \"var(--fds-colour-secondary-10)\",\n \"secondary-20\": \"var(--fds-colour-secondary-20)\",\n \"secondary-30\": \"var(--fds-colour-secondary-30)\",\n \"secondary-40\": \"var(--fds-colour-secondary-40)\",\n \"secondary-50\": \"var(--fds-colour-secondary-50)\",\n \"secondary-60\": \"var(--fds-colour-secondary-60)\",\n \"secondary-70\": \"var(--fds-colour-secondary-70)\",\n \"secondary-80\": \"var(--fds-colour-secondary-80)\",\n \"secondary-90\": \"var(--fds-colour-secondary-90)\",\n \"secondary-95\": \"var(--fds-colour-secondary-95)\",\n \"secondary-100\": \"var(--fds-colour-secondary-100)\",\n\n \"neutral-10\": \"var(--fds-colour-neutral-10)\",\n \"neutral-20\": \"var(--fds-colour-neutral-20)\",\n \"neutral-30\": \"var(--fds-colour-neutral-30)\",\n \"neutral-40\": \"var(--fds-colour-neutral-40)\",\n \"neutral-50\": \"var(--fds-colour-neutral-50)\",\n \"neutral-60\": \"var(--fds-colour-neutral-60)\",\n \"neutral-70\": \"var(--fds-colour-neutral-70)\",\n \"neutral-80\": \"var(--fds-colour-neutral-80)\",\n \"neutral-90\": \"var(--fds-colour-neutral-90)\",\n \"neutral-95\": \"var(--fds-colour-neutral-95)\",\n \"neutral-100\": \"var(--fds-colour-neutral-100)\",\n\n \"success-10\": \"var(--fds-colour-success-10)\",\n \"success-20\": \"var(--fds-colour-success-20)\",\n \"success-30\": \"var(--fds-colour-success-30)\",\n \"success-40\": \"var(--fds-colour-success-40)\",\n \"success-50\": \"var(--fds-colour-success-50)\",\n \"success-60\": \"var(--fds-colour-success-60)\",\n \"success-70\": \"var(--fds-colour-success-70)\",\n \"success-80\": \"var(--fds-colour-success-80)\",\n \"success-90\": \"var(--fds-colour-success-90)\",\n \"success-95\": \"var(--fds-colour-success-95)\",\n \"success-100\": \"var(--fds-colour-success-100)\",\n\n \"warning-10\": \"var(--fds-colour-warning-10)\",\n \"warning-20\": \"var(--fds-colour-warning-20)\",\n \"warning-30\": \"var(--fds-colour-warning-30)\",\n \"warning-40\": \"var(--fds-colour-warning-40)\",\n \"warning-50\": \"var(--fds-colour-warning-50)\",\n \"warning-60\": \"var(--fds-colour-warning-60)\",\n \"warning-70\": \"var(--fds-colour-warning-70)\",\n \"warning-80\": \"var(--fds-colour-warning-80)\",\n \"warning-90\": \"var(--fds-colour-warning-90)\",\n \"warning-95\": \"var(--fds-colour-warning-95)\",\n \"warning-100\": \"var(--fds-colour-warning-100)\",\n\n \"error-10\": \"var(--fds-colour-error-10)\",\n \"error-20\": \"var(--fds-colour-error-20)\",\n \"error-30\": \"var(--fds-colour-error-30)\",\n \"error-40\": \"var(--fds-colour-error-40)\",\n \"error-50\": \"var(--fds-colour-error-50)\",\n \"error-60\": \"var(--fds-colour-error-60)\",\n \"error-70\": \"var(--fds-colour-error-70)\",\n \"error-80\": \"var(--fds-colour-error-80)\",\n \"error-90\": \"var(--fds-colour-error-90)\",\n \"error-95\": \"var(--fds-colour-error-95)\",\n \"error-100\": \"var(--fds-colour-error-100)\",\n\n \"info-10\": \"var(--fds-colour-info-10)\",\n \"info-20\": \"var(--fds-colour-info-20)\",\n \"info-30\": \"var(--fds-colour-info-30)\",\n \"info-40\": \"var(--fds-colour-info-40)\",\n \"info-50\": \"var(--fds-colour-info-50)\",\n \"info-60\": \"var(--fds-colour-info-60)\",\n \"info-70\": \"var(--fds-colour-info-70)\",\n \"info-80\": \"var(--fds-colour-info-80)\",\n \"info-90\": \"var(--fds-colour-info-90)\",\n \"info-95\": \"var(--fds-colour-info-95)\",\n \"info-100\": \"var(--fds-colour-info-100)\",\n\n white: \"var(--fds-colour-white)\",\n black: \"var(--fds-colour-black)\",\n \"primary-inverse\": \"var(--fds-colour-primary-inverse)\",\n} as const;\n\n/** Purpose-driven colour tokens. */\nexport const SemanticColours = {\n text: \"var(--fds-colour-text)\",\n \"text-subtle\": \"var(--fds-colour-text-subtle)\",\n \"text-subtler\": \"var(--fds-colour-text-subtler)\",\n \"text-subtlest\": \"var(--fds-colour-text-subtlest)\",\n \"text-primary\": \"var(--fds-colour-text-primary)\",\n \"text-primary-strong\": \"var(--fds-colour-text-primary-strong)\",\n \"text-primary-strongest\": \"var(--fds-colour-text-primary-strongest)\",\n \"text-brand\": \"var(--fds-colour-text-brand)\",\n \"text-secondary\": \"var(--fds-colour-text-secondary)\",\n \"text-secondary-subtle\": \"var(--fds-colour-text-secondary-subtle)\",\n \"text-hover\": \"var(--fds-colour-text-hover)\",\n \"text-selected\": \"var(--fds-colour-text-selected)\",\n \"text-selected-hover\": \"var(--fds-colour-text-selected-hover)\",\n \"text-disabled\": \"var(--fds-colour-text-disabled)\",\n \"text-disabled-subtle\": \"var(--fds-colour-text-disabled-subtle)\",\n \"text-disabled-subtlest\": \"var(--fds-colour-text-disabled-subtlest)\",\n \"text-selected-disabled\": \"var(--fds-colour-text-selected-disabled)\",\n \"text-success\": \"var(--fds-colour-text-success)\",\n \"text-warning\": \"var(--fds-colour-text-warning)\",\n \"text-error\": \"var(--fds-colour-text-error)\",\n \"text-info\": \"var(--fds-colour-text-info)\",\n \"text-inverse\": \"var(--fds-colour-text-inverse)\",\n\n icon: \"var(--fds-colour-icon)\",\n \"icon-subtle\": \"var(--fds-colour-icon-subtle)\",\n \"icon-strongest\": \"var(--fds-colour-icon-strongest)\",\n \"icon-primary\": \"var(--fds-colour-icon-primary)\",\n \"icon-primary-subtle\": \"var(--fds-colour-icon-primary-subtle)\",\n \"icon-primary-subtlest\": \"var(--fds-colour-icon-primary-subtlest)\",\n \"icon-brand\": \"var(--fds-colour-icon-brand)\",\n \"icon-secondary\": \"var(--fds-colour-icon-secondary)\",\n \"icon-secondary-subtle\": \"var(--fds-colour-icon-secondary-subtle)\",\n \"icon-hover\": \"var(--fds-colour-icon-hover)\",\n \"icon-selected\": \"var(--fds-colour-icon-selected)\",\n \"icon-selected-hover\": \"var(--fds-colour-icon-selected-hover)\",\n \"icon-disabled\": \"var(--fds-colour-icon-disabled)\",\n \"icon-disabled-subtle\": \"var(--fds-colour-icon-disabled-subtle)\",\n \"icon-selected-disabled\": \"var(--fds-colour-icon-selected-disabled)\",\n \"icon-success\": \"var(--fds-colour-icon-success)\",\n \"icon-warning\": \"var(--fds-colour-icon-warning)\",\n \"icon-error\": \"var(--fds-colour-icon-error)\",\n \"icon-error-strong\": \"var(--fds-colour-icon-error-strong)\",\n \"icon-info\": \"var(--fds-colour-icon-info)\",\n \"icon-inverse\": \"var(--fds-colour-icon-inverse)\",\n \"icon-primary-inverse\": \"var(--fds-colour-icon-primary-inverse)\",\n\n border: \"var(--fds-colour-border)\",\n \"border-strong\": \"var(--fds-colour-border-strong)\",\n \"border-stronger\": \"var(--fds-colour-border-stronger)\",\n \"border-primary\": \"var(--fds-colour-border-primary)\",\n \"border-primary-strong\": \"var(--fds-colour-border-primary-strong)\",\n \"border-primary-subtle\": \"var(--fds-colour-border-primary-subtle)\",\n \"border-hover\": \"var(--fds-colour-border-hover)\",\n \"border-hover-strong\": \"var(--fds-colour-border-hover-strong)\",\n \"border-selected\": \"var(--fds-colour-border-selected)\",\n \"border-selected-subtle\": \"var(--fds-colour-border-selected-subtle)\",\n \"border-selected-subtlest\": \"var(--fds-colour-border-selected-subtlest)\",\n \"border-selected-hover\": \"var(--fds-colour-border-selected-hover)\",\n \"border-focus\": \"var(--fds-colour-border-focus)\",\n \"border-focus-strong\": \"var(--fds-colour-border-focus-strong)\",\n \"border-disabled\": \"var(--fds-colour-border-disabled)\",\n \"border-selected-disabled\": \"var(--fds-colour-border-selected-disabled)\",\n \"border-success\": \"var(--fds-colour-border-success)\",\n \"border-warning\": \"var(--fds-colour-border-warning)\",\n \"border-error\": \"var(--fds-colour-border-error)\",\n \"border-error-focus\": \"var(--fds-colour-border-error-focus)\",\n \"border-error-focus-strong\": \"var(--fds-colour-border-error-focus-strong)\",\n \"border-error-strong\": \"var(--fds-colour-border-error-strong)\",\n \"border-info\": \"var(--fds-colour-border-info)\",\n\n bg: \"var(--fds-colour-bg)\",\n \"bg-strong\": \"var(--fds-colour-bg-strong)\",\n \"bg-stronger\": \"var(--fds-colour-bg-stronger)\",\n \"bg-strongest\": \"var(--fds-colour-bg-strongest)\",\n \"bg-hover\": \"var(--fds-colour-bg-hover)\",\n \"bg-hover-strong\": \"var(--fds-colour-bg-hover-strong)\",\n \"bg-hover-subtle\": \"var(--fds-colour-bg-hover-subtle)\",\n \"bg-hover-neutral\": \"var(--fds-colour-bg-hover-neutral)\",\n \"bg-hover-neutral-strong\": \"var(--fds-colour-bg-hover-neutral-strong)\",\n \"bg-selected\": \"var(--fds-colour-bg-selected)\",\n \"bg-selected-hover\": \"var(--fds-colour-bg-selected-hover)\",\n \"bg-selected-strong\": \"var(--fds-colour-bg-selected-strong)\",\n \"bg-selected-stronger\": \"var(--fds-colour-bg-selected-stronger)\",\n \"bg-selected-strongest\": \"var(--fds-colour-bg-selected-strongest)\",\n \"bg-selected-strongest-hover\":\n \"var(--fds-colour-bg-selected-strongest-hover)\",\n \"bg-disabled\": \"var(--fds-colour-bg-disabled)\",\n \"bg-selected-disabled\": \"var(--fds-colour-bg-selected-disabled)\",\n \"bg-selected-stronger-disabled\":\n \"var(--fds-colour-bg-selected-stronger-disabled)\",\n \"bg-success\": \"var(--fds-colour-bg-success)\",\n \"bg-success-hover\": \"var(--fds-colour-bg-success-hover)\",\n \"bg-success-strong\": \"var(--fds-colour-bg-success-strong)\",\n \"bg-success-strong-hover\": \"var(--fds-colour-bg-success-strong-hover)\",\n \"bg-warning\": \"var(--fds-colour-bg-warning)\",\n \"bg-warning-hover\": \"var(--fds-colour-bg-warning-hover)\",\n \"bg-warning-strong\": \"var(--fds-colour-bg-warning-strong)\",\n \"bg-warning-strong-hover\": \"var(--fds-colour-bg-warning-strong-hover)\",\n \"bg-info\": \"var(--fds-colour-bg-info)\",\n \"bg-info-hover\": \"var(--fds-colour-bg-info-hover)\",\n \"bg-info-strong\": \"var(--fds-colour-bg-info-strong)\",\n \"bg-info-strong-hover\": \"var(--fds-colour-bg-info-strong-hover)\",\n \"bg-error\": \"var(--fds-colour-bg-error)\",\n \"bg-error-hover\": \"var(--fds-colour-bg-error-hover)\",\n \"bg-error-strong\": \"var(--fds-colour-bg-error-strong)\",\n \"bg-error-strong-hover\": \"var(--fds-colour-bg-error-strong-hover)\",\n \"bg-inverse\": \"var(--fds-colour-bg-inverse)\",\n \"bg-inverse-subtle\": \"var(--fds-colour-bg-inverse-subtle)\",\n \"bg-inverse-subtler\": \"var(--fds-colour-bg-inverse-subtler)\",\n \"bg-inverse-subtlest\": \"var(--fds-colour-bg-inverse-subtlest)\",\n \"bg-inverse-hover\": \"var(--fds-colour-bg-inverse-hover)\",\n \"bg-primary\": \"var(--fds-colour-bg-primary)\",\n \"bg-primary-strong\": \"var(--fds-colour-bg-primary-strong)\",\n \"bg-primary-subtle\": \"var(--fds-colour-bg-primary-subtle)\",\n \"bg-primary-subtler\": \"var(--fds-colour-bg-primary-subtler)\",\n \"bg-primary-subtlest\": \"var(--fds-colour-bg-primary-subtlest)\",\n \"bg-secondary\": \"var(--fds-colour-bg-secondary)\",\n \"bg-secondary-subtle\": \"var(--fds-colour-bg-secondary-subtle)\",\n \"bg-secondary-subtler\": \"var(--fds-colour-bg-secondary-subtler)\",\n \"bg-secondary-subtlest\": \"var(--fds-colour-bg-secondary-subtlest)\",\n \"bg-available\": \"var(--fds-colour-bg-available)\",\n \"bg-primary-hover\": \"var(--fds-colour-bg-primary-hover)\",\n \"bg-primary-strong-hover\": \"var(--fds-colour-bg-primary-strong-hover)\",\n \"bg-primary-subtlest-hover\": \"var(--fds-colour-bg-primary-subtlest-hover)\",\n \"bg-primary-subtlest-selected\":\n \"var(--fds-colour-bg-primary-subtlest-selected)\",\n\n \"overlay-strong\": \"var(--fds-colour-overlay-strong)\",\n \"overlay-subtle\": \"var(--fds-colour-overlay-subtle)\",\n\n hyperlink: \"var(--fds-colour-hyperlink)\",\n \"hyperlink-hover\": \"var(--fds-colour-hyperlink-hover)\",\n \"hyperlink-visited\": \"var(--fds-colour-hyperlink-visited)\",\n \"hyperlink-inverse\": \"var(--fds-colour-hyperlink-inverse)\",\n\n \"focus-ring\": \"var(--fds-colour-focus-ring)\",\n \"focus-ring-inverse\": \"var(--fds-colour-focus-ring-inverse)\",\n} as const;\n\n/** Combined colour token set. */\nexport const Colour = {\n Primitive: PrimitiveColours,\n ...SemanticColours,\n} as const;\n"],"names":["PrimitiveColours","white","black","SemanticColours","text","icon","border","bg","hyperlink","Colour","Object","assign","Primitive"],"mappings":"AACO,MAAMA,EAAmB,CAC5B,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BAEb,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BAEb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,WAAY,6BAEZC,MAAO,0BACPC,MAAO,0BACP,kBAAmB,qCAIVC,EAAkB,CAC3BC,KAAM,yBACN,cAAe,gCACf,eAAgB,iCAChB,gBAAiB,kCACjB,eAAgB,iCAChB,sBAAuB,wCACvB,yBAA0B,2CAC1B,aAAc,+BACd,iBAAkB,mCAClB,wBAAyB,0CACzB,aAAc,+BACd,gBAAiB,kCACjB,sBAAuB,wCACvB,gBAAiB,kCACjB,uBAAwB,yCACxB,yBAA0B,2CAC1B,yBAA0B,2CAC1B,eAAgB,iCAChB,eAAgB,iCAChB,aAAc,+BACd,YAAa,8BACb,eAAgB,iCAEhBC,KAAM,yBACN,cAAe,gCACf,iBAAkB,mCAClB,eAAgB,iCAChB,sBAAuB,wCACvB,wBAAyB,0CACzB,aAAc,+BACd,iBAAkB,mCAClB,wBAAyB,0CACzB,aAAc,+BACd,gBAAiB,kCACjB,sBAAuB,wCACvB,gBAAiB,kCACjB,uBAAwB,yCACxB,yBAA0B,2CAC1B,eAAgB,iCAChB,eAAgB,iCAChB,aAAc,+BACd,oBAAqB,sCACrB,YAAa,8BACb,eAAgB,iCAChB,uBAAwB,yCAExBC,OAAQ,2BACR,gBAAiB,kCACjB,kBAAmB,oCACnB,iBAAkB,mCAClB,wBAAyB,0CACzB,wBAAyB,0CACzB,eAAgB,iCAChB,sBAAuB,wCACvB,kBAAmB,oCACnB,yBAA0B,2CAC1B,2BAA4B,6CAC5B,wBAAyB,0CACzB,eAAgB,iCAChB,sBAAuB,wCACvB,kBAAmB,oCACnB,2BAA4B,6CAC5B,iBAAkB,mCAClB,iBAAkB,mCAClB,eAAgB,iCAChB,qBAAsB,uCACtB,4BAA6B,8CAC7B,sBAAuB,wCACvB,cAAe,gCAEfC,GAAI,uBACJ,YAAa,8BACb,cAAe,gCACf,eAAgB,iCAChB,WAAY,6BACZ,kBAAmB,oCACnB,kBAAmB,oCACnB,mBAAoB,qCACpB,0BAA2B,4CAC3B,cAAe,gCACf,oBAAqB,sCACrB,qBAAsB,uCACtB,uBAAwB,yCACxB,wBAAyB,0CACzB,8BACI,gDACJ,cAAe,gCACf,uBAAwB,yCACxB,gCACI,kDACJ,aAAc,+BACd,mBAAoB,qCACpB,oBAAqB,sCACrB,0BAA2B,4CAC3B,aAAc,+BACd,mBAAoB,qCACpB,oBAAqB,sCACrB,0BAA2B,4CAC3B,UAAW,4BACX,gBAAiB,kCACjB,iBAAkB,mCAClB,uBAAwB,yCACxB,WAAY,6BACZ,iBAAkB,mCAClB,kBAAmB,oCACnB,wBAAyB,0CACzB,aAAc,+BACd,oBAAqB,sCACrB,qBAAsB,uCACtB,sBAAuB,wCACvB,mBAAoB,qCACpB,aAAc,+BACd,oBAAqB,sCACrB,oBAAqB,sCACrB,qBAAsB,uCACtB,sBAAuB,wCACvB,eAAgB,iCAChB,sBAAuB,wCACvB,uBAAwB,yCACxB,wBAAyB,0CACzB,eAAgB,iCAChB,mBAAoB,qCACpB,0BAA2B,4CAC3B,4BAA6B,8CAC7B,+BACI,iDAEJ,iBAAkB,mCAClB,iBAAkB,mCAElBC,UAAW,8BACX,kBAAmB,oCACnB,oBAAqB,sCACrB,oBAAqB,sCAErB,aAAc,+BACd,qBAAsB,wCAIbC,EAASC,OAAAC,OAAA,CAClBC,UAAWZ,GACRG"}
|
|
1
|
+
{"version":3,"file":"colour.js","sources":["../../../src/theme/tokens/colour.ts"],"sourcesContent":["/**\n * Base colour palette.\n */\nexport const PrimitiveColours = {\n \"brand-10\": \"var(--fds-colour-brand-10)\",\n \"brand-20\": \"var(--fds-colour-brand-20)\",\n \"brand-30\": \"var(--fds-colour-brand-30)\",\n \"brand-40\": \"var(--fds-colour-brand-40)\",\n \"brand-50\": \"var(--fds-colour-brand-50)\",\n \"brand-60\": \"var(--fds-colour-brand-60)\",\n \"brand-70\": \"var(--fds-colour-brand-70)\",\n \"brand-80\": \"var(--fds-colour-brand-80)\",\n \"brand-90\": \"var(--fds-colour-brand-90)\",\n \"brand-95\": \"var(--fds-colour-brand-95)\",\n \"brand-100\": \"var(--fds-colour-brand-100)\",\n\n \"primary-10\": \"var(--fds-colour-primary-10)\",\n \"primary-20\": \"var(--fds-colour-primary-20)\",\n \"primary-30\": \"var(--fds-colour-primary-30)\",\n \"primary-40\": \"var(--fds-colour-primary-40)\",\n \"primary-50\": \"var(--fds-colour-primary-50)\",\n \"primary-60\": \"var(--fds-colour-primary-60)\",\n \"primary-70\": \"var(--fds-colour-primary-70)\",\n \"primary-80\": \"var(--fds-colour-primary-80)\",\n \"primary-90\": \"var(--fds-colour-primary-90)\",\n \"primary-95\": \"var(--fds-colour-primary-95)\",\n \"primary-100\": \"var(--fds-colour-primary-100)\",\n\n \"secondary-10\": \"var(--fds-colour-secondary-10)\",\n \"secondary-20\": \"var(--fds-colour-secondary-20)\",\n \"secondary-30\": \"var(--fds-colour-secondary-30)\",\n \"secondary-40\": \"var(--fds-colour-secondary-40)\",\n \"secondary-50\": \"var(--fds-colour-secondary-50)\",\n \"secondary-60\": \"var(--fds-colour-secondary-60)\",\n \"secondary-70\": \"var(--fds-colour-secondary-70)\",\n \"secondary-80\": \"var(--fds-colour-secondary-80)\",\n \"secondary-90\": \"var(--fds-colour-secondary-90)\",\n \"secondary-95\": \"var(--fds-colour-secondary-95)\",\n \"secondary-100\": \"var(--fds-colour-secondary-100)\",\n\n \"neutral-10\": \"var(--fds-colour-neutral-10)\",\n \"neutral-20\": \"var(--fds-colour-neutral-20)\",\n \"neutral-30\": \"var(--fds-colour-neutral-30)\",\n \"neutral-40\": \"var(--fds-colour-neutral-40)\",\n \"neutral-50\": \"var(--fds-colour-neutral-50)\",\n \"neutral-60\": \"var(--fds-colour-neutral-60)\",\n \"neutral-70\": \"var(--fds-colour-neutral-70)\",\n \"neutral-80\": \"var(--fds-colour-neutral-80)\",\n \"neutral-90\": \"var(--fds-colour-neutral-90)\",\n \"neutral-95\": \"var(--fds-colour-neutral-95)\",\n \"neutral-100\": \"var(--fds-colour-neutral-100)\",\n\n \"success-10\": \"var(--fds-colour-success-10)\",\n \"success-20\": \"var(--fds-colour-success-20)\",\n \"success-30\": \"var(--fds-colour-success-30)\",\n \"success-40\": \"var(--fds-colour-success-40)\",\n \"success-50\": \"var(--fds-colour-success-50)\",\n \"success-60\": \"var(--fds-colour-success-60)\",\n \"success-70\": \"var(--fds-colour-success-70)\",\n \"success-80\": \"var(--fds-colour-success-80)\",\n \"success-90\": \"var(--fds-colour-success-90)\",\n \"success-95\": \"var(--fds-colour-success-95)\",\n \"success-100\": \"var(--fds-colour-success-100)\",\n\n \"warning-10\": \"var(--fds-colour-warning-10)\",\n \"warning-20\": \"var(--fds-colour-warning-20)\",\n \"warning-30\": \"var(--fds-colour-warning-30)\",\n \"warning-40\": \"var(--fds-colour-warning-40)\",\n \"warning-50\": \"var(--fds-colour-warning-50)\",\n \"warning-60\": \"var(--fds-colour-warning-60)\",\n \"warning-70\": \"var(--fds-colour-warning-70)\",\n \"warning-80\": \"var(--fds-colour-warning-80)\",\n \"warning-90\": \"var(--fds-colour-warning-90)\",\n \"warning-95\": \"var(--fds-colour-warning-95)\",\n \"warning-100\": \"var(--fds-colour-warning-100)\",\n\n \"error-10\": \"var(--fds-colour-error-10)\",\n \"error-20\": \"var(--fds-colour-error-20)\",\n \"error-30\": \"var(--fds-colour-error-30)\",\n \"error-40\": \"var(--fds-colour-error-40)\",\n \"error-50\": \"var(--fds-colour-error-50)\",\n \"error-60\": \"var(--fds-colour-error-60)\",\n \"error-70\": \"var(--fds-colour-error-70)\",\n \"error-80\": \"var(--fds-colour-error-80)\",\n \"error-90\": \"var(--fds-colour-error-90)\",\n \"error-95\": \"var(--fds-colour-error-95)\",\n \"error-100\": \"var(--fds-colour-error-100)\",\n\n \"info-10\": \"var(--fds-colour-info-10)\",\n \"info-20\": \"var(--fds-colour-info-20)\",\n \"info-30\": \"var(--fds-colour-info-30)\",\n \"info-40\": \"var(--fds-colour-info-40)\",\n \"info-50\": \"var(--fds-colour-info-50)\",\n \"info-60\": \"var(--fds-colour-info-60)\",\n \"info-70\": \"var(--fds-colour-info-70)\",\n \"info-80\": \"var(--fds-colour-info-80)\",\n \"info-90\": \"var(--fds-colour-info-90)\",\n \"info-95\": \"var(--fds-colour-info-95)\",\n \"info-100\": \"var(--fds-colour-info-100)\",\n\n white: \"var(--fds-colour-white)\",\n black: \"var(--fds-colour-black)\",\n \"primary-inverse\": \"var(--fds-colour-primary-inverse)\",\n} as const;\n\n/**\n * Purpose-driven colour tokens.\n */\nexport const SemanticColours = {\n text: \"var(--fds-colour-text)\",\n \"text-subtle\": \"var(--fds-colour-text-subtle)\",\n \"text-subtler\": \"var(--fds-colour-text-subtler)\",\n \"text-subtlest\": \"var(--fds-colour-text-subtlest)\",\n \"text-primary\": \"var(--fds-colour-text-primary)\",\n \"text-primary-strong\": \"var(--fds-colour-text-primary-strong)\",\n \"text-primary-strongest\": \"var(--fds-colour-text-primary-strongest)\",\n \"text-brand\": \"var(--fds-colour-text-brand)\",\n \"text-secondary\": \"var(--fds-colour-text-secondary)\",\n \"text-secondary-subtle\": \"var(--fds-colour-text-secondary-subtle)\",\n \"text-hover\": \"var(--fds-colour-text-hover)\",\n \"text-selected\": \"var(--fds-colour-text-selected)\",\n \"text-selected-hover\": \"var(--fds-colour-text-selected-hover)\",\n \"text-disabled\": \"var(--fds-colour-text-disabled)\",\n \"text-disabled-subtle\": \"var(--fds-colour-text-disabled-subtle)\",\n \"text-disabled-subtlest\": \"var(--fds-colour-text-disabled-subtlest)\",\n \"text-selected-disabled\": \"var(--fds-colour-text-selected-disabled)\",\n \"text-success\": \"var(--fds-colour-text-success)\",\n \"text-warning\": \"var(--fds-colour-text-warning)\",\n \"text-error\": \"var(--fds-colour-text-error)\",\n \"text-info\": \"var(--fds-colour-text-info)\",\n \"text-inverse\": \"var(--fds-colour-text-inverse)\",\n\n icon: \"var(--fds-colour-icon)\",\n \"icon-subtle\": \"var(--fds-colour-icon-subtle)\",\n \"icon-strongest\": \"var(--fds-colour-icon-strongest)\",\n \"icon-primary\": \"var(--fds-colour-icon-primary)\",\n \"icon-primary-subtle\": \"var(--fds-colour-icon-primary-subtle)\",\n \"icon-primary-subtlest\": \"var(--fds-colour-icon-primary-subtlest)\",\n \"icon-brand\": \"var(--fds-colour-icon-brand)\",\n \"icon-secondary\": \"var(--fds-colour-icon-secondary)\",\n \"icon-secondary-subtle\": \"var(--fds-colour-icon-secondary-subtle)\",\n \"icon-hover\": \"var(--fds-colour-icon-hover)\",\n \"icon-selected\": \"var(--fds-colour-icon-selected)\",\n \"icon-selected-hover\": \"var(--fds-colour-icon-selected-hover)\",\n \"icon-disabled\": \"var(--fds-colour-icon-disabled)\",\n \"icon-disabled-subtle\": \"var(--fds-colour-icon-disabled-subtle)\",\n \"icon-selected-disabled\": \"var(--fds-colour-icon-selected-disabled)\",\n \"icon-success\": \"var(--fds-colour-icon-success)\",\n \"icon-warning\": \"var(--fds-colour-icon-warning)\",\n \"icon-error\": \"var(--fds-colour-icon-error)\",\n \"icon-error-strong\": \"var(--fds-colour-icon-error-strong)\",\n \"icon-info\": \"var(--fds-colour-icon-info)\",\n \"icon-inverse\": \"var(--fds-colour-icon-inverse)\",\n \"icon-primary-inverse\": \"var(--fds-colour-icon-primary-inverse)\",\n\n border: \"var(--fds-colour-border)\",\n \"border-strong\": \"var(--fds-colour-border-strong)\",\n \"border-stronger\": \"var(--fds-colour-border-stronger)\",\n \"border-primary\": \"var(--fds-colour-border-primary)\",\n \"border-primary-strong\": \"var(--fds-colour-border-primary-strong)\",\n \"border-primary-subtle\": \"var(--fds-colour-border-primary-subtle)\",\n \"border-hover\": \"var(--fds-colour-border-hover)\",\n \"border-hover-strong\": \"var(--fds-colour-border-hover-strong)\",\n \"border-selected\": \"var(--fds-colour-border-selected)\",\n \"border-selected-subtle\": \"var(--fds-colour-border-selected-subtle)\",\n \"border-selected-subtlest\": \"var(--fds-colour-border-selected-subtlest)\",\n \"border-selected-hover\": \"var(--fds-colour-border-selected-hover)\",\n \"border-focus\": \"var(--fds-colour-border-focus)\",\n \"border-focus-strong\": \"var(--fds-colour-border-focus-strong)\",\n \"border-disabled\": \"var(--fds-colour-border-disabled)\",\n \"border-selected-disabled\": \"var(--fds-colour-border-selected-disabled)\",\n \"border-success\": \"var(--fds-colour-border-success)\",\n \"border-warning\": \"var(--fds-colour-border-warning)\",\n \"border-error\": \"var(--fds-colour-border-error)\",\n \"border-error-focus\": \"var(--fds-colour-border-error-focus)\",\n \"border-error-focus-strong\": \"var(--fds-colour-border-error-focus-strong)\",\n \"border-error-strong\": \"var(--fds-colour-border-error-strong)\",\n \"border-info\": \"var(--fds-colour-border-info)\",\n\n bg: \"var(--fds-colour-bg)\",\n \"bg-strong\": \"var(--fds-colour-bg-strong)\",\n \"bg-stronger\": \"var(--fds-colour-bg-stronger)\",\n \"bg-strongest\": \"var(--fds-colour-bg-strongest)\",\n \"bg-hover\": \"var(--fds-colour-bg-hover)\",\n \"bg-hover-strong\": \"var(--fds-colour-bg-hover-strong)\",\n \"bg-hover-subtle\": \"var(--fds-colour-bg-hover-subtle)\",\n \"bg-hover-neutral\": \"var(--fds-colour-bg-hover-neutral)\",\n \"bg-hover-neutral-strong\": \"var(--fds-colour-bg-hover-neutral-strong)\",\n \"bg-selected\": \"var(--fds-colour-bg-selected)\",\n \"bg-selected-hover\": \"var(--fds-colour-bg-selected-hover)\",\n \"bg-selected-strong\": \"var(--fds-colour-bg-selected-strong)\",\n \"bg-selected-stronger\": \"var(--fds-colour-bg-selected-stronger)\",\n \"bg-selected-strongest\": \"var(--fds-colour-bg-selected-strongest)\",\n \"bg-selected-strongest-hover\":\n \"var(--fds-colour-bg-selected-strongest-hover)\",\n \"bg-disabled\": \"var(--fds-colour-bg-disabled)\",\n \"bg-selected-disabled\": \"var(--fds-colour-bg-selected-disabled)\",\n \"bg-selected-stronger-disabled\":\n \"var(--fds-colour-bg-selected-stronger-disabled)\",\n \"bg-success\": \"var(--fds-colour-bg-success)\",\n \"bg-success-hover\": \"var(--fds-colour-bg-success-hover)\",\n \"bg-success-strong\": \"var(--fds-colour-bg-success-strong)\",\n \"bg-success-strong-hover\": \"var(--fds-colour-bg-success-strong-hover)\",\n \"bg-warning\": \"var(--fds-colour-bg-warning)\",\n \"bg-warning-hover\": \"var(--fds-colour-bg-warning-hover)\",\n \"bg-warning-strong\": \"var(--fds-colour-bg-warning-strong)\",\n \"bg-warning-strong-hover\": \"var(--fds-colour-bg-warning-strong-hover)\",\n \"bg-info\": \"var(--fds-colour-bg-info)\",\n \"bg-info-hover\": \"var(--fds-colour-bg-info-hover)\",\n \"bg-info-strong\": \"var(--fds-colour-bg-info-strong)\",\n \"bg-info-strong-hover\": \"var(--fds-colour-bg-info-strong-hover)\",\n \"bg-error\": \"var(--fds-colour-bg-error)\",\n \"bg-error-hover\": \"var(--fds-colour-bg-error-hover)\",\n \"bg-error-strong\": \"var(--fds-colour-bg-error-strong)\",\n \"bg-error-strong-hover\": \"var(--fds-colour-bg-error-strong-hover)\",\n \"bg-inverse\": \"var(--fds-colour-bg-inverse)\",\n \"bg-inverse-subtle\": \"var(--fds-colour-bg-inverse-subtle)\",\n \"bg-inverse-subtler\": \"var(--fds-colour-bg-inverse-subtler)\",\n \"bg-inverse-subtlest\": \"var(--fds-colour-bg-inverse-subtlest)\",\n \"bg-inverse-hover\": \"var(--fds-colour-bg-inverse-hover)\",\n \"bg-primary\": \"var(--fds-colour-bg-primary)\",\n \"bg-primary-strong\": \"var(--fds-colour-bg-primary-strong)\",\n \"bg-primary-subtle\": \"var(--fds-colour-bg-primary-subtle)\",\n \"bg-primary-subtler\": \"var(--fds-colour-bg-primary-subtler)\",\n \"bg-primary-subtlest\": \"var(--fds-colour-bg-primary-subtlest)\",\n \"bg-secondary\": \"var(--fds-colour-bg-secondary)\",\n \"bg-secondary-subtle\": \"var(--fds-colour-bg-secondary-subtle)\",\n \"bg-secondary-subtler\": \"var(--fds-colour-bg-secondary-subtler)\",\n \"bg-secondary-subtlest\": \"var(--fds-colour-bg-secondary-subtlest)\",\n \"bg-available\": \"var(--fds-colour-bg-available)\",\n \"bg-primary-hover\": \"var(--fds-colour-bg-primary-hover)\",\n \"bg-primary-strong-hover\": \"var(--fds-colour-bg-primary-strong-hover)\",\n \"bg-primary-subtlest-hover\": \"var(--fds-colour-bg-primary-subtlest-hover)\",\n \"bg-primary-subtlest-selected\":\n \"var(--fds-colour-bg-primary-subtlest-selected)\",\n\n \"overlay-strong\": \"var(--fds-colour-overlay-strong)\",\n \"overlay-subtle\": \"var(--fds-colour-overlay-subtle)\",\n\n hyperlink: \"var(--fds-colour-hyperlink)\",\n \"hyperlink-hover\": \"var(--fds-colour-hyperlink-hover)\",\n \"hyperlink-visited\": \"var(--fds-colour-hyperlink-visited)\",\n \"hyperlink-inverse\": \"var(--fds-colour-hyperlink-inverse)\",\n\n \"focus-ring\": \"var(--fds-colour-focus-ring)\",\n \"focus-ring-inverse\": \"var(--fds-colour-focus-ring-inverse)\",\n} as const;\n\n// @catalog\n/**\n * Combined colour token set.\n */\nexport const Colour = {\n Primitive: PrimitiveColours,\n ...SemanticColours,\n} as const;\n"],"names":["PrimitiveColours","white","black","SemanticColours","text","icon","border","bg","hyperlink","Colour","Object","assign","Primitive"],"mappings":"AAGO,MAAMA,EAAmB,CAC5B,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BAEb,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,cAAe,gCAEf,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BAEb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,WAAY,6BAEZC,MAAO,0BACPC,MAAO,0BACP,kBAAmB,qCAMVC,EAAkB,CAC3BC,KAAM,yBACN,cAAe,gCACf,eAAgB,iCAChB,gBAAiB,kCACjB,eAAgB,iCAChB,sBAAuB,wCACvB,yBAA0B,2CAC1B,aAAc,+BACd,iBAAkB,mCAClB,wBAAyB,0CACzB,aAAc,+BACd,gBAAiB,kCACjB,sBAAuB,wCACvB,gBAAiB,kCACjB,uBAAwB,yCACxB,yBAA0B,2CAC1B,yBAA0B,2CAC1B,eAAgB,iCAChB,eAAgB,iCAChB,aAAc,+BACd,YAAa,8BACb,eAAgB,iCAEhBC,KAAM,yBACN,cAAe,gCACf,iBAAkB,mCAClB,eAAgB,iCAChB,sBAAuB,wCACvB,wBAAyB,0CACzB,aAAc,+BACd,iBAAkB,mCAClB,wBAAyB,0CACzB,aAAc,+BACd,gBAAiB,kCACjB,sBAAuB,wCACvB,gBAAiB,kCACjB,uBAAwB,yCACxB,yBAA0B,2CAC1B,eAAgB,iCAChB,eAAgB,iCAChB,aAAc,+BACd,oBAAqB,sCACrB,YAAa,8BACb,eAAgB,iCAChB,uBAAwB,yCAExBC,OAAQ,2BACR,gBAAiB,kCACjB,kBAAmB,oCACnB,iBAAkB,mCAClB,wBAAyB,0CACzB,wBAAyB,0CACzB,eAAgB,iCAChB,sBAAuB,wCACvB,kBAAmB,oCACnB,yBAA0B,2CAC1B,2BAA4B,6CAC5B,wBAAyB,0CACzB,eAAgB,iCAChB,sBAAuB,wCACvB,kBAAmB,oCACnB,2BAA4B,6CAC5B,iBAAkB,mCAClB,iBAAkB,mCAClB,eAAgB,iCAChB,qBAAsB,uCACtB,4BAA6B,8CAC7B,sBAAuB,wCACvB,cAAe,gCAEfC,GAAI,uBACJ,YAAa,8BACb,cAAe,gCACf,eAAgB,iCAChB,WAAY,6BACZ,kBAAmB,oCACnB,kBAAmB,oCACnB,mBAAoB,qCACpB,0BAA2B,4CAC3B,cAAe,gCACf,oBAAqB,sCACrB,qBAAsB,uCACtB,uBAAwB,yCACxB,wBAAyB,0CACzB,8BACI,gDACJ,cAAe,gCACf,uBAAwB,yCACxB,gCACI,kDACJ,aAAc,+BACd,mBAAoB,qCACpB,oBAAqB,sCACrB,0BAA2B,4CAC3B,aAAc,+BACd,mBAAoB,qCACpB,oBAAqB,sCACrB,0BAA2B,4CAC3B,UAAW,4BACX,gBAAiB,kCACjB,iBAAkB,mCAClB,uBAAwB,yCACxB,WAAY,6BACZ,iBAAkB,mCAClB,kBAAmB,oCACnB,wBAAyB,0CACzB,aAAc,+BACd,oBAAqB,sCACrB,qBAAsB,uCACtB,sBAAuB,wCACvB,mBAAoB,qCACpB,aAAc,+BACd,oBAAqB,sCACrB,oBAAqB,sCACrB,qBAAsB,uCACtB,sBAAuB,wCACvB,eAAgB,iCAChB,sBAAuB,wCACvB,uBAAwB,yCACxB,wBAAyB,0CACzB,eAAgB,iCAChB,mBAAoB,qCACpB,0BAA2B,4CAC3B,4BAA6B,8CAC7B,+BACI,iDAEJ,iBAAkB,mCAClB,iBAAkB,mCAElBC,UAAW,8BACX,kBAAmB,oCACnB,oBAAqB,sCACrB,oBAAqB,sCAErB,aAAc,+BACd,qBAAsB,wCAObC,EAASC,OAAAC,OAAA,CAClBC,UAAWZ,GACRG"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Component-scoped design tokens grouped by component.
|
|
3
|
+
*/
|
|
2
4
|
export declare const ComponentToken: {
|
|
3
5
|
readonly Animation: {
|
|
4
6
|
readonly "loading-dots-spinner-colour": "var(--fds-animation-loading-dots-spinner-colour)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/theme/tokens/component.ts"],"sourcesContent":["const Button = {\n radius: \"var(--fds-button-radius)\",\n \"default-colour-bg\": \"var(--fds-button-default-colour-bg)\",\n \"default-colour-bg-hover\": \"var(--fds-button-default-colour-bg-hover)\",\n \"default-colour-text\": \"var(--fds-button-default-colour-text)\",\n \"secondary-colour-border\": \"var(--fds-button-secondary-colour-border)\",\n \"secondary-colour-text\": \"var(--fds-button-secondary-colour-text)\",\n \"light-colour-text\": \"var(--fds-button-light-colour-text)\",\n \"link-colour-text\": \"var(--fds-button-link-colour-text)\",\n} as const;\n\nconst Animation = {\n \"loading-dots-spinner-colour\":\n \"var(--fds-animation-loading-dots-spinner-colour)\",\n} as const;\n\nconst Navbar = {\n \"full-height\": \"var(--fds-navbar-full-height)\",\n \"full-logo-height\": \"var(--fds-navbar-full-logo-height)\",\n \"compressed-height\": \"var(--fds-navbar-compressed-height)\",\n \"compressed-logo-height\": \"var(--fds-navbar-compressed-logo-height)\",\n \"mobile-height\": \"var(--fds-navbar-mobile-height)\",\n \"mobile-logo-height\": \"var(--fds-navbar-mobile-logo-height)\",\n \"colour-bg\": \"var(--fds-navbar-colour-bg)\",\n \"colour-icon\": \"var(--fds-navbar-colour-icon)\",\n \"link-colour-text\": \"var(--fds-navbar-link-colour-text)\",\n \"link-colour-text-hover\": \"var(--fds-navbar-link-colour-text-hover)\",\n \"link-colour-text-selected-hover\":\n \"var(--fds-navbar-link-colour-text-selected-hover)\",\n} as const;\n\nconst Footer = {\n \"colour-bg\": \"var(--fds-footer-colour-bg)\",\n \"colour-text\": \"var(--fds-footer-colour-text)\",\n \"link-colour-text\": \"var(--fds-footer-link-colour-text)\",\n \"link-colour-text-hover\": \"var(--fds-footer-link-colour-text-hover)\",\n \"disclaimer-link-colour-text\":\n \"var(--fds-footer-disclaimer-link-colour-text)\",\n \"disclaimer-link-colour-text-hover\":\n \"var(--fds-footer-disclaimer-link-colour-text-hover)\",\n} as const;\n\n
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/theme/tokens/component.ts"],"sourcesContent":["const Button = {\n radius: \"var(--fds-button-radius)\",\n \"default-colour-bg\": \"var(--fds-button-default-colour-bg)\",\n \"default-colour-bg-hover\": \"var(--fds-button-default-colour-bg-hover)\",\n \"default-colour-text\": \"var(--fds-button-default-colour-text)\",\n \"secondary-colour-border\": \"var(--fds-button-secondary-colour-border)\",\n \"secondary-colour-text\": \"var(--fds-button-secondary-colour-text)\",\n \"light-colour-text\": \"var(--fds-button-light-colour-text)\",\n \"link-colour-text\": \"var(--fds-button-link-colour-text)\",\n} as const;\n\nconst Animation = {\n \"loading-dots-spinner-colour\":\n \"var(--fds-animation-loading-dots-spinner-colour)\",\n} as const;\n\nconst Navbar = {\n \"full-height\": \"var(--fds-navbar-full-height)\",\n \"full-logo-height\": \"var(--fds-navbar-full-logo-height)\",\n \"compressed-height\": \"var(--fds-navbar-compressed-height)\",\n \"compressed-logo-height\": \"var(--fds-navbar-compressed-logo-height)\",\n \"mobile-height\": \"var(--fds-navbar-mobile-height)\",\n \"mobile-logo-height\": \"var(--fds-navbar-mobile-logo-height)\",\n \"colour-bg\": \"var(--fds-navbar-colour-bg)\",\n \"colour-icon\": \"var(--fds-navbar-colour-icon)\",\n \"link-colour-text\": \"var(--fds-navbar-link-colour-text)\",\n \"link-colour-text-hover\": \"var(--fds-navbar-link-colour-text-hover)\",\n \"link-colour-text-selected-hover\":\n \"var(--fds-navbar-link-colour-text-selected-hover)\",\n} as const;\n\nconst Footer = {\n \"colour-bg\": \"var(--fds-footer-colour-bg)\",\n \"colour-text\": \"var(--fds-footer-colour-text)\",\n \"link-colour-text\": \"var(--fds-footer-link-colour-text)\",\n \"link-colour-text-hover\": \"var(--fds-footer-link-colour-text-hover)\",\n \"disclaimer-link-colour-text\":\n \"var(--fds-footer-disclaimer-link-colour-text)\",\n \"disclaimer-link-colour-text-hover\":\n \"var(--fds-footer-disclaimer-link-colour-text-hover)\",\n} as const;\n\n// @catalog\n/**\n * Component-scoped design tokens grouped by component.\n */\nexport const ComponentToken = {\n Animation,\n Button,\n Footer,\n Navbar,\n} as const;\n"],"names":["ComponentToken","Animation","Button","radius","Footer","Navbar"],"mappings":"AAAA,MA8CaA,EAAiB,CAC1BC,UApCc,CACd,8BACI,oDAmCJC,OAhDW,CACXC,OAAQ,2BACR,oBAAqB,sCACrB,0BAA2B,4CAC3B,sBAAuB,wCACvB,0BAA2B,4CAC3B,wBAAyB,0CACzB,oBAAqB,sCACrB,mBAAoB,sCAyCpBC,OAlBW,CACX,YAAa,8BACb,cAAe,gCACf,mBAAoB,qCACpB,yBAA0B,2CAC1B,8BACI,gDACJ,oCACI,uDAWJC,OAlCW,CACX,cAAe,gCACf,mBAAoB,qCACpB,oBAAqB,sCACrB,yBAA0B,2CAC1B,gBAAiB,kCACjB,qBAAsB,uCACtB,YAAa,8BACb,cAAe,gCACf,mBAAoB,qCACpB,yBAA0B,2CAC1B,kCACI"}
|
package/theme/tokens/font.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Raw font CSS variable tokens.
|
|
3
|
+
*/
|
|
2
4
|
export declare const FontSpec: {
|
|
3
5
|
readonly "font-family-heading": "var(--fds-font-family-heading)";
|
|
4
6
|
readonly "font-family-body": "var(--fds-font-family-body)";
|
|
@@ -44,7 +46,9 @@ export declare const FontSpec: {
|
|
|
44
46
|
readonly "form-description-lh": "var(--fds-font-form-description-lh)";
|
|
45
47
|
readonly "form-description-ls": "var(--fds-font-form-description-ls)";
|
|
46
48
|
};
|
|
47
|
-
/**
|
|
49
|
+
/**
|
|
50
|
+
* Pre-composed font declaration strings for all size & weight combinations.
|
|
51
|
+
*/
|
|
48
52
|
export declare const Font: {
|
|
49
53
|
readonly "heading-xxl-light": string;
|
|
50
54
|
readonly "heading-xxl-regular": string;
|
package/theme/tokens/font.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font.js","sources":["../../../src/theme/tokens/font.ts"],"sourcesContent":["import { generateFont } from \"../utils/font\";\n\n
|
|
1
|
+
{"version":3,"file":"font.js","sources":["../../../src/theme/tokens/font.ts"],"sourcesContent":["import { generateFont } from \"../utils/font\";\n\n/**\n * Raw font CSS variable tokens.\n */\nexport const FontSpec = {\n \"font-family-heading\": \"var(--fds-font-family-heading)\",\n \"font-family-body\": \"var(--fds-font-family-body)\",\n \"font-variant\": \"var(--fds-font-variant)\",\n\n \"weight-light\": \"var(--fds-font-weight-light)\",\n \"weight-regular\": \"var(--fds-font-weight-regular)\",\n \"weight-semibold\": \"var(--fds-font-weight-semibold)\",\n \"weight-bold\": \"var(--fds-font-weight-bold)\",\n\n \"heading-size-xxl\": \"var(--fds-font-heading-size-xxl)\",\n \"heading-size-xl\": \"var(--fds-font-heading-size-xl)\",\n \"heading-size-lg\": \"var(--fds-font-heading-size-lg)\",\n \"heading-size-md\": \"var(--fds-font-heading-size-md)\",\n \"heading-size-sm\": \"var(--fds-font-heading-size-sm)\",\n \"heading-size-xs\": \"var(--fds-font-heading-size-xs)\",\n\n \"heading-lh-xxl\": \"var(--fds-font-heading-lh-xxl)\",\n \"heading-lh-xl\": \"var(--fds-font-heading-lh-xl)\",\n \"heading-lh-lg\": \"var(--fds-font-heading-lh-lg)\",\n \"heading-lh-md\": \"var(--fds-font-heading-lh-md)\",\n \"heading-lh-sm\": \"var(--fds-font-heading-lh-sm)\",\n \"heading-lh-xs\": \"var(--fds-font-heading-lh-xs)\",\n\n \"heading-ls-xxl\": \"var(--fds-font-heading-ls-xxl)\",\n \"heading-ls-xl\": \"var(--fds-font-heading-ls-xl)\",\n \"heading-ls-lg\": \"var(--fds-font-heading-ls-lg)\",\n \"heading-ls-md\": \"var(--fds-font-heading-ls-md)\",\n \"heading-ls-sm\": \"var(--fds-font-heading-ls-sm)\",\n \"heading-ls-xs\": \"var(--fds-font-heading-ls-xs)\",\n\n \"body-size-baseline\": \"var(--fds-font-body-size-baseline)\",\n \"body-size-md\": \"var(--fds-font-body-size-md)\",\n \"body-size-sm\": \"var(--fds-font-body-size-sm)\",\n \"body-size-xs\": \"var(--fds-font-body-size-xs)\",\n\n \"body-lh-baseline\": \"var(--fds-font-body-lh-baseline)\",\n \"body-lh-md\": \"var(--fds-font-body-lh-md)\",\n \"body-lh-sm\": \"var(--fds-font-body-lh-sm)\",\n \"body-lh-xs\": \"var(--fds-font-body-lh-xs)\",\n\n \"body-ls-baseline\": \"var(--fds-font-body-ls-baseline)\",\n \"body-ls-md\": \"var(--fds-font-body-ls-md)\",\n \"body-ls-sm\": \"var(--fds-font-body-ls-sm)\",\n \"body-ls-xs\": \"var(--fds-font-body-ls-xs)\",\n\n \"form-label-size\": \"var(--fds-font-form-label-size)\",\n \"form-label-lh\": \"var(--fds-font-form-label-lh)\",\n \"form-label-ls\": \"var(--fds-font-form-label-ls)\",\n\n \"form-description-size\": \"var(--fds-font-form-description-size)\",\n \"form-description-lh\": \"var(--fds-font-form-description-lh)\",\n \"form-description-ls\": \"var(--fds-font-form-description-ls)\",\n} as const;\n\n// @catalog\n/**\n * Pre-composed font declaration strings for all size & weight combinations.\n */\nexport const Font = {\n \"heading-xxl-light\": generateFont(\"heading-xxl\", \"light\"),\n \"heading-xxl-regular\": generateFont(\"heading-xxl\", \"regular\"),\n \"heading-xxl-semibold\": generateFont(\"heading-xxl\", \"semibold\"),\n \"heading-xxl-bold\": generateFont(\"heading-xxl\", \"bold\"),\n\n \"heading-xl-light\": generateFont(\"heading-xl\", \"light\"),\n \"heading-xl-regular\": generateFont(\"heading-xl\", \"regular\"),\n \"heading-xl-semibold\": generateFont(\"heading-xl\", \"semibold\"),\n \"heading-xl-bold\": generateFont(\"heading-xl\", \"bold\"),\n\n \"heading-lg-light\": generateFont(\"heading-lg\", \"light\"),\n \"heading-lg-regular\": generateFont(\"heading-lg\", \"regular\"),\n \"heading-lg-semibold\": generateFont(\"heading-lg\", \"semibold\"),\n \"heading-lg-bold\": generateFont(\"heading-lg\", \"bold\"),\n\n \"heading-md-light\": generateFont(\"heading-md\", \"light\"),\n \"heading-md-regular\": generateFont(\"heading-md\", \"regular\"),\n \"heading-md-semibold\": generateFont(\"heading-md\", \"semibold\"),\n \"heading-md-bold\": generateFont(\"heading-md\", \"bold\"),\n\n \"heading-sm-light\": generateFont(\"heading-sm\", \"light\"),\n \"heading-sm-regular\": generateFont(\"heading-sm\", \"regular\"),\n \"heading-sm-semibold\": generateFont(\"heading-sm\", \"semibold\"),\n \"heading-sm-bold\": generateFont(\"heading-sm\", \"bold\"),\n\n \"heading-xs-light\": generateFont(\"heading-xs\", \"light\"),\n \"heading-xs-regular\": generateFont(\"heading-xs\", \"regular\"),\n \"heading-xs-semibold\": generateFont(\"heading-xs\", \"semibold\"),\n \"heading-xs-bold\": generateFont(\"heading-xs\", \"bold\"),\n\n \"body-baseline-light\": generateFont(\"body-baseline\", \"light\"),\n \"body-baseline-regular\": generateFont(\"body-baseline\", \"regular\"),\n \"body-baseline-semibold\": generateFont(\"body-baseline\", \"semibold\"),\n \"body-baseline-bold\": generateFont(\"body-baseline\", \"bold\"),\n\n \"body-md-light\": generateFont(\"body-md\", \"light\"),\n \"body-md-regular\": generateFont(\"body-md\", \"regular\"),\n \"body-md-semibold\": generateFont(\"body-md\", \"semibold\"),\n \"body-md-bold\": generateFont(\"body-md\", \"bold\"),\n\n \"body-sm-light\": generateFont(\"body-sm\", \"light\"),\n \"body-sm-regular\": generateFont(\"body-sm\", \"regular\"),\n \"body-sm-semibold\": generateFont(\"body-sm\", \"semibold\"),\n \"body-sm-bold\": generateFont(\"body-sm\", \"bold\"),\n\n \"body-xs-light\": generateFont(\"body-xs\", \"light\"),\n \"body-xs-regular\": generateFont(\"body-xs\", \"regular\"),\n \"body-xs-semibold\": generateFont(\"body-xs\", \"semibold\"),\n \"body-xs-bold\": generateFont(\"body-xs\", \"bold\"),\n\n \"form-label\": generateFont(\"form-label\", \"semibold\"),\n \"form-description\": generateFont(\"form-description\", \"regular\"),\n\n Spec: FontSpec,\n} as const;\n"],"names":["FontSpec","Font","generateFont","Spec"],"mappings":"gDAKO,MAAMA,EAAW,CACpB,sBAAuB,iCACvB,mBAAoB,8BACpB,eAAgB,0BAEhB,eAAgB,+BAChB,iBAAkB,iCAClB,kBAAmB,kCACnB,cAAe,8BAEf,mBAAoB,mCACpB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCAEnB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,qBAAsB,qCACtB,eAAgB,+BAChB,eAAgB,+BAChB,eAAgB,+BAEhB,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,kBAAmB,kCACnB,gBAAiB,gCACjB,gBAAiB,gCAEjB,wBAAyB,wCACzB,sBAAuB,sCACvB,sBAAuB,uCAOdC,EAAO,CAChB,oBAAqBC,EAAa,cAAe,SACjD,sBAAuBA,EAAa,cAAe,WACnD,uBAAwBA,EAAa,cAAe,YACpD,mBAAoBA,EAAa,cAAe,QAEhD,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,sBAAuBA,EAAa,gBAAiB,SACrD,wBAAyBA,EAAa,gBAAiB,WACvD,yBAA0BA,EAAa,gBAAiB,YACxD,qBAAsBA,EAAa,gBAAiB,QAEpD,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,aAAcA,EAAa,aAAc,YACzC,mBAAoBA,EAAa,mBAAoB,WAErDC,KAAMH"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
type PseudoMediaQuerySpec<T extends readonly string[]> = Record<T[number], string>;
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* CSS class-based pseudo media-query selectors keyed by breakpoint name.
|
|
4
|
+
*/
|
|
3
5
|
export declare const MediaQuery: {
|
|
4
6
|
readonly MaxWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl"]>;
|
|
5
7
|
readonly MinWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-query.js","sources":["../../../src/theme/tokens/media-query.ts"],"sourcesContent":["const MAX_WIDTH_BREAKPOINTS = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst MIN_WIDTH_BREAKPOINTS = [...MAX_WIDTH_BREAKPOINTS, \"xxl\"] as const;\n\ntype WidthConstraint = \"min\" | \"max\";\ntype PseudoMediaQuerySpec<T extends readonly string[]> = Record<\n T[number],\n string\n>;\n\nconst getPseudoMediaQuery = (breakpoint: string, type: WidthConstraint) =>\n `:where(body.fds-breakpoint-${breakpoint}-${type}) &`;\n\nconst getPseudoMediaQuerySpec = <T extends readonly string[]>(\n breakpoints: T,\n type: WidthConstraint\n): PseudoMediaQuerySpec<T> => {\n const spec = {} as Record<T[number], string>;\n\n breakpoints.forEach((breakpoint) => {\n spec[breakpoint as T[number]] = getPseudoMediaQuery(breakpoint, type);\n });\n\n return spec;\n};\n\n
|
|
1
|
+
{"version":3,"file":"media-query.js","sources":["../../../src/theme/tokens/media-query.ts"],"sourcesContent":["const MAX_WIDTH_BREAKPOINTS = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst MIN_WIDTH_BREAKPOINTS = [...MAX_WIDTH_BREAKPOINTS, \"xxl\"] as const;\n\ntype WidthConstraint = \"min\" | \"max\";\ntype PseudoMediaQuerySpec<T extends readonly string[]> = Record<\n T[number],\n string\n>;\n\nconst getPseudoMediaQuery = (breakpoint: string, type: WidthConstraint) =>\n `:where(body.fds-breakpoint-${breakpoint}-${type}) &`;\n\nconst getPseudoMediaQuerySpec = <T extends readonly string[]>(\n breakpoints: T,\n type: WidthConstraint\n): PseudoMediaQuerySpec<T> => {\n const spec = {} as Record<T[number], string>;\n\n breakpoints.forEach((breakpoint) => {\n spec[breakpoint as T[number]] = getPseudoMediaQuery(breakpoint, type);\n });\n\n return spec;\n};\n\n// @catalog\n/**\n * CSS class-based pseudo media-query selectors keyed by breakpoint name.\n */\nexport const MediaQuery = {\n MaxWidth: getPseudoMediaQuerySpec(MAX_WIDTH_BREAKPOINTS, \"max\"),\n MinWidth: getPseudoMediaQuerySpec(MIN_WIDTH_BREAKPOINTS, \"min\"),\n} as const;\n"],"names":["MAX_WIDTH_BREAKPOINTS","MIN_WIDTH_BREAKPOINTS","getPseudoMediaQuerySpec","breakpoints","type","spec","forEach","breakpoint","getPseudoMediaQuery","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAAA,MAAMA,EAAwB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,MACxDC,EAAwB,IAAID,EAAuB,OAWnDE,EAA0B,CAC5BC,EACAC,KAEA,MAAMC,EAAO,CAAA,EAMb,OAJAF,EAAYG,SAASC,IACjBF,EAAKE,GAVe,EAACA,EAAoBH,IAC7C,8BAA8BG,KAAcH,OASRI,CAAoBD,EAAYH,EAAK,IAGlEC,CAAI,EAOFI,EAAa,CACtBC,SAAUR,EAAwBF,EAAuB,OACzDW,SAAUT,EAAwBD,EAAuB"}
|
package/theme/tokens/motion.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Animation tokens consisting of durations and easing functions.
|
|
3
|
+
*/
|
|
2
4
|
export declare const Motion: {
|
|
3
5
|
readonly "duration-150": "var(--fds-motion-duration-150)";
|
|
4
6
|
readonly "duration-250": "var(--fds-motion-duration-250)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.js","sources":["../../../src/theme/tokens/motion.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"motion.js","sources":["../../../src/theme/tokens/motion.ts"],"sourcesContent":["// @catalog\n/**\n * Animation tokens consisting of durations and easing functions.\n */\nexport const Motion = {\n \"duration-150\": \"var(--fds-motion-duration-150)\",\n \"duration-250\": \"var(--fds-motion-duration-250)\",\n \"duration-350\": \"var(--fds-motion-duration-350)\",\n \"duration-500\": \"var(--fds-motion-duration-500)\",\n \"duration-800\": \"var(--fds-motion-duration-800)\",\n \"duration-1000\": \"var(--fds-motion-duration-1000)\",\n\n \"ease-default\": \"var(--fds-motion-timing-ease-default)\",\n \"ease-standard\": \"var(--fds-motion-timing-ease-standard)\",\n \"ease-entrance\": \"var(--fds-motion-timing-ease-entrance)\",\n \"ease-exit\": \"var(--fds-motion-timing-ease-exit)\",\n} as const;\n"],"names":["Motion"],"mappings":"AAIO,MAAMA,EAAS,CAClB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,eAAgB,wCAChB,gBAAiB,yCACjB,gBAAiB,yCACjB,YAAa"}
|
package/theme/tokens/radius.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radius.js","sources":["../../../src/theme/tokens/radius.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"radius.js","sources":["../../../src/theme/tokens/radius.ts"],"sourcesContent":["// @catalog\n/**\n * Border radius tokens.\n */\nexport const Radius = {\n none: \"var(--fds-radius-none)\",\n xs: \"var(--fds-radius-xs)\",\n sm: \"var(--fds-radius-sm)\",\n md: \"var(--fds-radius-md)\",\n lg: \"var(--fds-radius-lg)\",\n full: \"var(--fds-radius-full)\",\n} as const;\n"],"names":["Radius","none","xs","sm","md","lg","full"],"mappings":"AAIO,MAAMA,EAAS,CAClBC,KAAM,yBACNC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,KAAM"}
|
package/theme/tokens/shadow.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadow.js","sources":["../../../src/theme/tokens/shadow.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"shadow.js","sources":["../../../src/theme/tokens/shadow.ts"],"sourcesContent":["// @catalog\n/**\n * Box-shadow tokens.\n */\nexport const Shadow = {\n \"xs-subtle\": \"var(--fds-shadow-xs-subtle)\",\n \"xs-strong\": \"var(--fds-shadow-xs-strong)\",\n \"xs-focus-strong\": \"var(--fds-shadow-xs-focus-strong)\",\n \"xs-error-strong\": \"var(--fds-shadow-xs-error-strong)\",\n \"sm-subtle\": \"var(--fds-shadow-sm-subtle)\",\n \"sm-strong\": \"var(--fds-shadow-sm-strong)\",\n \"md-subtle\": \"var(--fds-shadow-md-subtle)\",\n \"md-strong\": \"var(--fds-shadow-md-strong)\",\n \"lg-subtle\": \"var(--fds-shadow-lg-subtle)\",\n \"lg-strong\": \"var(--fds-shadow-lg-strong)\",\n} as const;\n"],"names":["Shadow"],"mappings":"AAIO,MAAMA,EAAS,CAClB,YAAa,8BACb,YAAa,8BACb,kBAAmB,oCACnB,kBAAmB,oCACnB,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Spacing tokens consisting of component spacing and layout spacing.
|
|
3
|
+
*/
|
|
2
4
|
export declare const Spacing: {
|
|
3
5
|
readonly "spacing-0": "var(--fds-spacing-0)";
|
|
4
6
|
readonly "spacing-4": "var(--fds-spacing-4)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spacing.js","sources":["../../../src/theme/tokens/spacing.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"spacing.js","sources":["../../../src/theme/tokens/spacing.ts"],"sourcesContent":["// @catalog\n/**\n * Spacing tokens consisting of component spacing and layout spacing.\n */\nexport const Spacing = {\n \"spacing-0\": \"var(--fds-spacing-0)\",\n \"spacing-4\": \"var(--fds-spacing-4)\",\n \"spacing-8\": \"var(--fds-spacing-8)\",\n \"spacing-12\": \"var(--fds-spacing-12)\",\n \"spacing-16\": \"var(--fds-spacing-16)\",\n \"spacing-20\": \"var(--fds-spacing-20)\",\n \"spacing-24\": \"var(--fds-spacing-24)\",\n \"spacing-32\": \"var(--fds-spacing-32)\",\n \"spacing-40\": \"var(--fds-spacing-40)\",\n \"spacing-48\": \"var(--fds-spacing-48)\",\n \"spacing-64\": \"var(--fds-spacing-64)\",\n \"spacing-72\": \"var(--fds-spacing-72)\",\n\n \"layout-xs\": \"var(--fds-layout-xs)\",\n \"layout-sm\": \"var(--fds-layout-sm)\",\n \"layout-md\": \"var(--fds-layout-md)\",\n \"layout-lg\": \"var(--fds-layout-lg)\",\n \"layout-xl\": \"var(--fds-layout-xl)\",\n \"layout-xxl\": \"var(--fds-layout-xxl)\",\n \"layout-xxxl\": \"var(--fds-layout-xxxl)\",\n} as const;\n"],"names":["Spacing"],"mappings":"AAIO,MAAMA,EAAU,CACnB,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBAEd,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,cAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableString } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\ntype ExtractCleanCSSVariableName<T extends string> =\n T extends `var(${infer Name})` ? Name : never;\ntype CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;\n\n/**\n * Style map accepted by `useApplyStyle`. Supports camelCase CSS properties,\n * theme CSS variable keys, and arbitrary `--custom-property` names.\n */\nexport type ApplyStyleMap =\n | ({\n [K in keyof CSSStyleDeclaration]?: StyleValue;\n } & {\n [K in CSSVariableKey]?: StyleValue;\n } & {\n [K in `--${string}`]?: StyleValue;\n })\n | CSSProperties;\n\n/**\n * List of properties that expect units but can be provided as\n * numbers through React style prop\n */\nconst numericCssStyleProperties: Set<keyof CSSStyleDeclaration> = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"margin\",\n \"marginTop\",\n \"marginLeft\",\n \"marginRight\",\n \"marginBottom\",\n \"padding\",\n \"paddingTop\",\n \"paddingLeft\",\n \"paddingRight\",\n \"paddingBottom\",\n]);\n\n/**\n * Normalises standard CSS property names from camelCase to kebab-case\n * - `backgroundColor` → `background-color`\n * - `WebkitLineClamp` → `-webkit-line-clamp`\n * - `--custom-variable` → `--custom-variable`\n *\n * Ref\n * https://github.com/facebook/react/blob/ad5dfc82b7107728da1430dd142f75b97b684dac/packages/react-dom-bindings/src/shared/hyphenateStyleName.js#L26\n */\nfunction normaliseCssProperty(key: string): string {\n if (key.startsWith(\"--\")) return key;\n\n const kebabCased = key.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n if (/^(o|moz|ms|webkit)-/.test(kebabCased)) {\n return `-${kebabCased}`;\n }\n\n return kebabCased;\n}\n\nfunction normaliseCssValue(key: string, value: string | number): string {\n if (\n typeof value === \"number\" &&\n numericCssStyleProperties.has(key as keyof CSSStyleDeclaration)\n ) {\n return `${value}px`;\n }\n\n return String(value);\n}\n\n/**\n * Hook to apply styles to a HTML DOM element. Use when you need to apply inline\n * styles but cannot use the inline React `style` prop due to strict CSP rules.\n *\n * @param ref The HTML element to receive the styles\n * @param styles The styles to apply, in the same format as the React `style`\n * prop, or CSS variables. Values will be normalised to strings and numeric\n * values will have \"px\" appended for properties that typically require units.\n */\nexport function useApplyStyle<TElement extends HTMLElement>(\n ref: RefObject<TElement | null>,\n styles: ApplyStyleMap | undefined\n) {\n useIsomorphicLayoutEffect(() => {\n const element = ref?.current;\n if (!element || !styles) return;\n\n Object.entries(styles).forEach(([key, value]: [string, StyleValue]) => {\n const normalisedKey = normaliseCssProperty(key);\n\n if (value == null) {\n element.style.removeProperty(normalisedKey);\n return;\n }\n\n const normalisedValue = normaliseCssValue(key, value);\n element.style.setProperty(normalisedKey, normalisedValue);\n });\n }, [ref, styles]);\n}\n"],"names":["numericCssStyleProperties","Set","useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","normalisedKey","startsWith","kebabCased","replace","toLowerCase","test","normaliseCssProperty","style","removeProperty","normalisedValue","has","String","normaliseCssValue","setProperty"],"mappings":"sSA6BA,MAAMA,EAA4D,IAAIC,IAAI,CACtE,QACA,SACA,MACA,OACA,QACA,SACA,SACA,YACA,aACA,cACA,eACA,UACA,aACA,cACA,eACA,
|
|
1
|
+
{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableString } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\ntype ExtractCleanCSSVariableName<T extends string> =\n T extends `var(${infer Name})` ? Name : never;\ntype CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;\n\n/**\n * Style map accepted by `useApplyStyle`. Supports camelCase CSS properties,\n * theme CSS variable keys, and arbitrary `--custom-property` names.\n */\nexport type ApplyStyleMap =\n | ({\n [K in keyof CSSStyleDeclaration]?: StyleValue;\n } & {\n [K in CSSVariableKey]?: StyleValue;\n } & {\n [K in `--${string}`]?: StyleValue;\n })\n | CSSProperties;\n\n/**\n * List of properties that expect units but can be provided as\n * numbers through React style prop\n */\nconst numericCssStyleProperties: Set<keyof CSSStyleDeclaration> = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"margin\",\n \"marginTop\",\n \"marginLeft\",\n \"marginRight\",\n \"marginBottom\",\n \"padding\",\n \"paddingTop\",\n \"paddingLeft\",\n \"paddingRight\",\n \"paddingBottom\",\n]);\n\n/**\n * Normalises standard CSS property names from camelCase to kebab-case\n * - `backgroundColor` → `background-color`\n * - `WebkitLineClamp` → `-webkit-line-clamp`\n * - `--custom-variable` → `--custom-variable`\n *\n * Ref\n * https://github.com/facebook/react/blob/ad5dfc82b7107728da1430dd142f75b97b684dac/packages/react-dom-bindings/src/shared/hyphenateStyleName.js#L26\n */\nfunction normaliseCssProperty(key: string): string {\n if (key.startsWith(\"--\")) return key;\n\n const kebabCased = key.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n if (/^(o|moz|ms|webkit)-/.test(kebabCased)) {\n return `-${kebabCased}`;\n }\n\n return kebabCased;\n}\n\nfunction normaliseCssValue(key: string, value: string | number): string {\n if (\n typeof value === \"number\" &&\n numericCssStyleProperties.has(key as keyof CSSStyleDeclaration)\n ) {\n return `${value}px`;\n }\n\n return String(value);\n}\n\n// @catalog\n/**\n * Hook to apply styles to a HTML DOM element. Use when you need to apply inline\n * styles but cannot use the inline React `style` prop due to strict CSP rules.\n *\n * @param ref The HTML element to receive the styles\n * @param styles The styles to apply, in the same format as the React `style`\n * prop, or CSS variables. Values will be normalised to strings and numeric\n * values will have \"px\" appended for properties that typically require units.\n */\nexport function useApplyStyle<TElement extends HTMLElement>(\n ref: RefObject<TElement | null>,\n styles: ApplyStyleMap | undefined\n) {\n useIsomorphicLayoutEffect(() => {\n const element = ref?.current;\n if (!element || !styles) return;\n\n Object.entries(styles).forEach(([key, value]: [string, StyleValue]) => {\n const normalisedKey = normaliseCssProperty(key);\n\n if (value == null) {\n element.style.removeProperty(normalisedKey);\n return;\n }\n\n const normalisedValue = normaliseCssValue(key, value);\n element.style.setProperty(normalisedKey, normalisedValue);\n });\n }, [ref, styles]);\n}\n"],"names":["numericCssStyleProperties","Set","useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","normalisedKey","startsWith","kebabCased","replace","toLowerCase","test","normaliseCssProperty","style","removeProperty","normalisedValue","has","String","normaliseCssValue","setProperty"],"mappings":"sSA6BA,MAAMA,EAA4D,IAAIC,IAAI,CACtE,QACA,SACA,MACA,OACA,QACA,SACA,SACA,YACA,aACA,cACA,eACA,UACA,aACA,cACA,eACA,kBA6CE,SAAUC,EACZC,EACAC,GAEAC,GAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAAYF,GAEjBI,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MAClC,MAAMC,EA1ClB,SAA8BF,GAC1B,GAAIA,EAAIG,WAAW,MAAO,OAAOH,EAEjC,MAAMI,EAAaJ,EAAIK,QAAQ,WAAY,OAAOC,cAElD,MAAI,sBAAsBC,KAAKH,GACpB,IAAIA,IAGRA,CACX,CAgCkCI,CAAqBR,GAE3C,GAAa,MAATC,EAEA,YADAN,EAAQc,MAAMC,eAAeR,GAIjC,MAAMS,EArClB,SAA2BX,EAAaC,GACpC,MACqB,iBAAVA,GACPZ,EAA0BuB,IAAIZ,GAEvB,GAAGC,MAGPY,OAAOZ,EAClB,CA4BoCa,CAAkBd,EAAKC,GAC/CN,EAAQc,MAAMM,YAAYb,EAAeS,EAAgB,GAC3D,GACH,CAACnB,EAAKC,GACb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-design-token.js","sources":["../../../src/theme/utils/use-design-token.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\n\nconst isEmptyValue = (value: unknown) => {\n return value == null || value === \"\";\n};\n\n/**\n * Resolves a design-token CSS variable to its computed string value within the\n * nearest `ThemeProvider` scope.\n *\n * @param tokenName A `CSSVariableString` token (e.g. `Colour[\"text\"]`), or\n * `undefined` to skip resolution.\n * @returns The computed CSS value, or `undefined` when the provider has not yet\n * mounted or `tokenName` is `undefined`.\n */\nexport const useDesignToken = (\n tokenName: CSSVariableString | undefined\n): string | undefined => {\n const { theme, mode, themeElement } = useTheme();\n const [value, setValue] = useState<string | undefined>(undefined);\n\n useEffect(() => {\n if (!themeElement) return;\n\n setValue(parseCSSVariableValue(tokenName, themeElement));\n }, [theme, mode, themeElement, tokenName]);\n\n return value;\n};\n\nexport interface UseResolvedTokenValueOptions<\n TToken extends CSSVariableString,\n TCustom\n> {\n /** Value used when `value` is empty. */\n fallback: TToken | TCustom;\n /** Type guard to identify token values. */\n isToken: (value: unknown) => value is TToken;\n /** Normalizer for non-token values. */\n normalizeCustom: (value: TCustom) => string;\n /** Candidate token or custom value. */\n value: TToken | TCustom | null | undefined;\n}\n\n/**\n * Resolves token-aware values with consistent fallback behavior.\n * - Empty values (`null`, `undefined`, `\"\"`) use `fallback`.\n * - Token values are resolved through `useDesignToken`.\n * - Non-token values are returned via `normalizeCustom`.\n * @param options Resolution options for token/custom values.\n * @returns Resolved token value or normalized custom/fallback value.\n */\nexport const useResolvedTokenValue = <\n TToken extends CSSVariableString,\n TCustom\n>(\n options: UseResolvedTokenValueOptions<TToken, TCustom>\n) => {\n const { value, fallback, isToken: checkToken, normalizeCustom } = options;\n const isToken = checkToken(value);\n const tokenName = isToken ? value : undefined;\n const resolvedToken = useDesignToken(tokenName);\n const isFallbackToken = checkToken(fallback);\n const fallbackTokenName = isFallbackToken ? fallback : undefined;\n const resolvedFallback = useDesignToken(fallbackTokenName);\n\n if (isToken && !isEmptyValue(resolvedToken)) {\n return resolvedToken;\n }\n\n if (!isToken && !isEmptyValue(value)) {\n return normalizeCustom(value);\n }\n\n if (isFallbackToken && !isEmptyValue(resolvedFallback)) {\n return resolvedFallback;\n }\n\n return normalizeCustom(fallback as TCustom);\n};\n"],"names":["isEmptyValue","value","useDesignToken","tokenName","theme","mode","themeElement","useTheme","setValue","useState","undefined","useEffect","parseCSSVariableValue","useResolvedTokenValue","options","fallback","isToken","checkToken","normalizeCustom","resolvedToken","isFallbackToken","resolvedFallback"],"mappings":"gKAMA,MAAMA,EAAgBC,GACF,MAATA,GAA2B,KAAVA,
|
|
1
|
+
{"version":3,"file":"use-design-token.js","sources":["../../../src/theme/utils/use-design-token.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\n\nconst isEmptyValue = (value: unknown) => {\n return value == null || value === \"\";\n};\n\n// @catalog\n/**\n * Resolves a design-token CSS variable to its computed string value within the\n * nearest `ThemeProvider` scope.\n *\n * @param tokenName A `CSSVariableString` token (e.g. `Colour[\"text\"]`), or\n * `undefined` to skip resolution.\n * @returns The computed CSS value, or `undefined` when the provider has not yet\n * mounted or `tokenName` is `undefined`.\n */\nexport const useDesignToken = (\n tokenName: CSSVariableString | undefined\n): string | undefined => {\n const { theme, mode, themeElement } = useTheme();\n const [value, setValue] = useState<string | undefined>(undefined);\n\n useEffect(() => {\n if (!themeElement) return;\n\n setValue(parseCSSVariableValue(tokenName, themeElement));\n }, [theme, mode, themeElement, tokenName]);\n\n return value;\n};\n\nexport interface UseResolvedTokenValueOptions<\n TToken extends CSSVariableString,\n TCustom\n> {\n /** Value used when `value` is empty. */\n fallback: TToken | TCustom;\n /** Type guard to identify token values. */\n isToken: (value: unknown) => value is TToken;\n /** Normalizer for non-token values. */\n normalizeCustom: (value: TCustom) => string;\n /** Candidate token or custom value. */\n value: TToken | TCustom | null | undefined;\n}\n\n/**\n * Resolves token-aware values with consistent fallback behavior.\n * - Empty values (`null`, `undefined`, `\"\"`) use `fallback`.\n * - Token values are resolved through `useDesignToken`.\n * - Non-token values are returned via `normalizeCustom`.\n * @param options Resolution options for token/custom values.\n * @returns Resolved token value or normalized custom/fallback value.\n */\nexport const useResolvedTokenValue = <\n TToken extends CSSVariableString,\n TCustom\n>(\n options: UseResolvedTokenValueOptions<TToken, TCustom>\n) => {\n const { value, fallback, isToken: checkToken, normalizeCustom } = options;\n const isToken = checkToken(value);\n const tokenName = isToken ? value : undefined;\n const resolvedToken = useDesignToken(tokenName);\n const isFallbackToken = checkToken(fallback);\n const fallbackTokenName = isFallbackToken ? fallback : undefined;\n const resolvedFallback = useDesignToken(fallbackTokenName);\n\n if (isToken && !isEmptyValue(resolvedToken)) {\n return resolvedToken;\n }\n\n if (!isToken && !isEmptyValue(value)) {\n return normalizeCustom(value);\n }\n\n if (isFallbackToken && !isEmptyValue(resolvedFallback)) {\n return resolvedFallback;\n }\n\n return normalizeCustom(fallback as TCustom);\n};\n"],"names":["isEmptyValue","value","useDesignToken","tokenName","theme","mode","themeElement","useTheme","setValue","useState","undefined","useEffect","parseCSSVariableValue","useResolvedTokenValue","options","fallback","isToken","checkToken","normalizeCustom","resolvedToken","isFallbackToken","resolvedFallback"],"mappings":"gKAMA,MAAMA,EAAgBC,GACF,MAATA,GAA2B,KAAVA,EAafC,EACTC,IAEA,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,aAAEA,GAAiBC,KAC/BN,EAAOO,GAAYC,OAA6BC,GAQvD,OANAC,GAAU,KACDL,GAELE,EAASI,EAAsBT,EAAWG,GAAc,GACzD,CAACF,EAAOC,EAAMC,EAAcH,IAExBF,CAAK,EAyBHY,EAITC,IAEA,MAAMb,MAAEA,EAAKc,SAAEA,EAAUC,QAASC,EAAUC,gBAAEA,GAAoBJ,EAC5DE,EAAUC,EAAWhB,GAErBkB,EAAgBjB,EADJc,EAAUf,OAAQS,GAE9BU,EAAkBH,EAAWF,GAE7BM,EAAmBnB,EADCkB,EAAkBL,OAAWL,GAGvD,OAAIM,IAAYhB,EAAamB,GAClBA,EAGNH,GAAYhB,EAAaC,GAI1BmB,IAAoBpB,EAAaqB,GAC1BA,EAGJH,EAAgBH,GAPZG,EAAgBjB,EAOgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-media-query.js","sources":["../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\n/** Named width breakpoint identifier used for responsive width comparisons. */\ntype BreakpointName = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\ntype MaxWidthBreakpointName = Exclude<BreakpointName, \"xxl\">;\ntype MinWidthBreakpointTokenKey = `${BreakpointName}-min`;\ntype MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;\ntype WidthBreakpointTokenKey =\n | MinWidthBreakpointTokenKey\n | MaxWidthBreakpointTokenKey;\ntype WidthBreakpointCSSVariableString =\n (typeof Breakpoint)[WidthBreakpointTokenKey];\n\ntype MediaQueryFeature =\n | \"aspect-ratio\"\n | \"color-index\"\n | \"color\"\n | \"device-aspect-ratio\"\n | \"device-height\"\n | \"device-width\"\n | \"grid\"\n | \"height\"\n | \"max-height\"\n | \"min-height\"\n | \"hover\"\n | \"monochrome\"\n | \"orientation\"\n | \"pointer\"\n | \"prefers-color-scheme\"\n | \"resolution\"\n | \"scan\"\n | \"width\";\n\ntype MediaQueryClauseValue = string | number | boolean;\n\n/** A single media-query feature condition. */\nexport interface MediaQueryClause {\n feature: MediaQueryFeature;\n /**\n * Value for the media-query feature.\n *\n * - A string or number emits `(feature: value)`.\n * - `true` emits a bare feature clause (e.g. `(hover)`).\n * - `false` or `undefined` omits the clause entirely.\n */\n value: MediaQueryClauseValue | undefined;\n}\n\n/** Options for `useMediaQuery`. */\nexport interface MediaQueryOptions {\n /** Lower-bound breakpoint token. Viewport must be >= this width. */\n minWidth?: WidthBreakpointCSSVariableString;\n /** Upper-bound breakpoint token. Viewport must be <= this width. */\n maxWidth?: WidthBreakpointCSSVariableString;\n /** Extra feature conditions (e.g. `hover`, `orientation`) combined with `and`. */\n clauses?: MediaQueryClause[];\n}\n\n/**\n * Default LifeSG breakpoint values for width-based tokens.\n * Extracted from src/theme/styles/default.css.\n */\nconst WIDTH_BREAKPOINT_DEFAULTS: Record<\n WidthBreakpointCSSVariableString,\n string\n> = {\n [Breakpoint[\"xxs-min\"]]: \"0\",\n [Breakpoint[\"xs-min\"]]: \"321px\",\n [Breakpoint[\"sm-min\"]]: \"376px\",\n [Breakpoint[\"md-min\"]]: \"481px\",\n [Breakpoint[\"lg-min\"]]: \"769px\",\n [Breakpoint[\"xl-min\"]]: \"1201px\",\n [Breakpoint[\"xxl-min\"]]: \"1441px\",\n [Breakpoint[\"xxs-max\"]]: \"320px\",\n [Breakpoint[\"xs-max\"]]: \"375px\",\n [Breakpoint[\"sm-max\"]]: \"480px\",\n [Breakpoint[\"md-max\"]]: \"768px\",\n [Breakpoint[\"lg-max\"]]: \"1200px\",\n [Breakpoint[\"xl-max\"]]: \"1440px\",\n};\n\nconst WIDTH_BREAKPOINT_TOKEN_SET = new Set<WidthBreakpointCSSVariableString>([\n Breakpoint[\"xxs-min\"],\n Breakpoint[\"xs-min\"],\n Breakpoint[\"sm-min\"],\n Breakpoint[\"md-min\"],\n Breakpoint[\"lg-min\"],\n Breakpoint[\"xl-min\"],\n Breakpoint[\"xxl-min\"],\n Breakpoint[\"xxs-max\"],\n Breakpoint[\"xs-max\"],\n Breakpoint[\"sm-max\"],\n Breakpoint[\"md-max\"],\n Breakpoint[\"lg-max\"],\n Breakpoint[\"xl-max\"],\n]);\n\nconst isBreakpointToken = (\n value: unknown\n): value is WidthBreakpointCSSVariableString => {\n return isTokenFromSet<WidthBreakpointCSSVariableString>(\n value,\n WIDTH_BREAKPOINT_TOKEN_SET\n );\n};\n\nconst getMinWidthBreakpointToken = (breakpoint: BreakpointName) => {\n return Breakpoint[`${breakpoint}-min`];\n};\n\nconst getMaxWidthBreakpointToken = (breakpoint: MaxWidthBreakpointName) => {\n return Breakpoint[`${breakpoint}-max`];\n};\n\n/**\n * Returns `true` when the viewport width is at or above the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n */\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n useMediaQuery({\n minWidth: getMinWidthBreakpointToken(breakpoint),\n });\n\n/**\n * Returns `true` when the viewport width is at or below the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n */\nexport const useMaxWidthMediaQuery = (breakpoint: MaxWidthBreakpointName) =>\n useMediaQuery({\n maxWidth: getMaxWidthBreakpointToken(breakpoint),\n });\n\nconst getMediaQueryClause = (\n feature: \"min-width\" | \"max-width\",\n value: string | undefined\n) => {\n if (!value) {\n return undefined;\n }\n\n return `(${feature}: ${value})`;\n};\n\nconst getCustomMediaQueryClause = (\n clause: MediaQueryClause | null | undefined\n) => {\n if (clause?.value === undefined) {\n return undefined;\n }\n\n if (clause.value === true) {\n return `(${clause.feature})`;\n }\n\n if (clause.value === false) {\n return undefined;\n }\n\n const value = `${clause.value}`.trim();\n\n if (!value) {\n return undefined;\n }\n\n return `(${clause.feature}: ${value})`;\n};\n\nconst getDefaultMatch = (hasMinWidth: boolean, hasMaxWidth: boolean) => {\n if (hasMaxWidth) {\n return false;\n }\n\n if (hasMinWidth) {\n return true;\n }\n\n return false;\n};\n\nconst getCurrentMatch = (queryString: string, defaultMatch: boolean) => {\n if (!queryString) {\n return defaultMatch;\n }\n\n if (!globalThis.window?.matchMedia) {\n return defaultMatch;\n }\n\n return globalThis.window.matchMedia(queryString).matches;\n};\n\n/**\n * Resolves a width breakpoint CSS variable token to its computed pixel string.\n *\n * @returns The resolved pixel value, falling back to default LifeSG breakpoint\n * values when the theme element is not yet mounted, or `\"\"` for unrecognised\n * tokens.\n */\nexport const useResolvedBreakpointToken = (\n breakpointToken: WidthBreakpointCSSVariableString | undefined\n): string => {\n const effectiveFallback =\n isBreakpointToken(breakpointToken) &&\n WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n ? WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n : \"\";\n\n return useResolvedTokenValue<WidthBreakpointCSSVariableString, string>({\n value: breakpointToken,\n fallback: effectiveFallback,\n isToken: isBreakpointToken,\n normalizeCustom: (value) => value,\n });\n};\n\nconst useMatchMediaQuery = (\n queryString: string,\n defaultMatch: boolean\n): boolean => {\n const [matches, setMatches] = useState(() =>\n getCurrentMatch(queryString, defaultMatch)\n );\n\n useEffect(() => {\n if (!queryString || !globalThis.window?.matchMedia) {\n setMatches(defaultMatch);\n return;\n }\n\n const mediaQueryList = globalThis.window.matchMedia(queryString);\n const handleChange = (event: MediaQueryListEvent) => {\n setMatches(event.matches);\n };\n\n setMatches(mediaQueryList.matches);\n mediaQueryList.addEventListener(\"change\", handleChange);\n\n return () => {\n mediaQueryList.removeEventListener(\"change\", handleChange);\n };\n }, [defaultMatch, queryString]);\n\n return matches;\n};\n\n/**\n * Reactive boolean hook that evaluates a media query built from width\n * breakpoint tokens and optional custom feature clauses.\n *\n * @returns `true` when the query matches. When `window.matchMedia` is\n * unavailable (SSR), defaults to `true` for min-width-only queries and\n * `false` for max-width-only.\n */\nexport const useMediaQuery = (options: MediaQueryOptions): boolean => {\n const { minWidth, maxWidth, clauses = [] } = options;\n const normalizedMinWidth = useResolvedBreakpointToken(minWidth);\n const normalizedMaxWidth = useResolvedBreakpointToken(maxWidth);\n const widthClauses = [\n getMediaQueryClause(\"min-width\", normalizedMinWidth),\n getMediaQueryClause(\"max-width\", normalizedMaxWidth),\n ].filter((value): value is string => !!value);\n const customClauses = clauses\n .map(getCustomMediaQueryClause)\n .filter((value): value is string => !!value);\n const queryString = [...widthClauses, ...customClauses].join(\" and \");\n const hasMinWidth = !!normalizedMinWidth;\n const hasMaxWidth = !!normalizedMaxWidth;\n const defaultMatch = getDefaultMatch(hasMinWidth, hasMaxWidth);\n\n return useMatchMediaQuery(queryString, defaultMatch);\n};\n"],"names":["WIDTH_BREAKPOINT_DEFAULTS","Breakpoint","WIDTH_BREAKPOINT_TOKEN_SET","Set","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","effectiveFallback","useResolvedTokenValue","fallback","isToken","normalizeCustom","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","_a","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"wNAkEA,MAAMA,EAGF,CACA,CAACC,EAAW,YAAa,IACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,YAAa,SACzB,CAACA,EAAW,YAAa,QACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,WAAY,UAGtBC,EAA6B,IAAIC,IAAsC,CACzEF,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTG,EACFC,GAEOC,EACHD,EACAH,GAIFK,EAA8BC,GACzBP,EAAW,GAAGO,SAGnBC,EAA8BD,GACzBP,EAAW,GAAGO,SAQZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAQhCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EAkC7BgB,EACTC,IAEA,MAAMC,EACFnB,EAAkBkB,IAClBtB,EAA0BsB,GACpBtB,EAA0BsB,GAC1B,GAEV,OAAOE,EAAgE,CACnEnB,MAAOiB,EACPG,SAAUF,EACVG,QAAStB,EACTuB,gBAAkBtB,GAAUA,GAC9B,EAGAuB,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IAxCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAIjBF,WAAWC,OAAOC,WAAWR,GAAaE,QAPtCD,CAO6C,EAgCpDQ,CAAgBT,EAAaC,KAsBjC,OAnBAS,GAAU,WACN,IAAKV,KAAiC,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAEpC,YADAL,EAAWF,GAIf,MAAMU,EAAiBL,WAAWC,OAAOC,WAAWR,GAC9CY,EAAgBC,IAClBV,EAAWU,EAAMX,QAAQ,EAM7B,OAHAC,EAAWQ,EAAeT,SAC1BS,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACX,EAAcD,IAEXE,CAAO,EAWLpB,EAAiBkC,IAC1B,MAAMjC,SAAEA,EAAQE,SAAEA,EAAQgC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB1B,EAA2BT,GAChDoC,EAAqB3B,EAA2BP,GAQhDe,EAAc,IAPC,CACjBd,EAAoB,YAAagC,GACjChC,EAAoB,YAAaiC,IACnCC,QAAQ5C,KAA6BA,OACjByC,EACjBI,IAAIjC,GACJgC,QAAQ5C,KAA6BA,KACc8C,KAAK,SAGvDrB,EApGc,EAACsB,EAAsBC,KACvCA,KAIAD,EA+FiBE,GAFCP,IACAC,GAGtB,OAAOpB,EAAmBC,EAAaC,EAAa"}
|
|
1
|
+
{"version":3,"file":"use-media-query.js","sources":["../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\n/** Named width breakpoint identifier used for responsive width comparisons. */\ntype BreakpointName = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\ntype MaxWidthBreakpointName = Exclude<BreakpointName, \"xxl\">;\ntype MinWidthBreakpointTokenKey = `${BreakpointName}-min`;\ntype MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;\ntype WidthBreakpointTokenKey =\n | MinWidthBreakpointTokenKey\n | MaxWidthBreakpointTokenKey;\ntype WidthBreakpointCSSVariableString =\n (typeof Breakpoint)[WidthBreakpointTokenKey];\n\ntype MediaQueryFeature =\n | \"aspect-ratio\"\n | \"color-index\"\n | \"color\"\n | \"device-aspect-ratio\"\n | \"device-height\"\n | \"device-width\"\n | \"grid\"\n | \"height\"\n | \"max-height\"\n | \"min-height\"\n | \"hover\"\n | \"monochrome\"\n | \"orientation\"\n | \"pointer\"\n | \"prefers-color-scheme\"\n | \"resolution\"\n | \"scan\"\n | \"width\";\n\ntype MediaQueryClauseValue = string | number | boolean;\n\n/** A single media-query feature condition. */\nexport interface MediaQueryClause {\n feature: MediaQueryFeature;\n /**\n * Value for the media-query feature.\n *\n * - A string or number emits `(feature: value)`.\n * - `true` emits a bare feature clause (e.g. `(hover)`).\n * - `false` or `undefined` omits the clause entirely.\n */\n value: MediaQueryClauseValue | undefined;\n}\n\n/** Options for `useMediaQuery`. */\nexport interface MediaQueryOptions {\n /** Lower-bound breakpoint token. Viewport must be >= this width. */\n minWidth?: WidthBreakpointCSSVariableString;\n /** Upper-bound breakpoint token. Viewport must be <= this width. */\n maxWidth?: WidthBreakpointCSSVariableString;\n /** Extra feature conditions (e.g. `hover`, `orientation`) combined with `and`. */\n clauses?: MediaQueryClause[];\n}\n\n/**\n * Default LifeSG breakpoint values for width-based tokens.\n * Extracted from src/theme/styles/default.css.\n */\nconst WIDTH_BREAKPOINT_DEFAULTS: Record<\n WidthBreakpointCSSVariableString,\n string\n> = {\n [Breakpoint[\"xxs-min\"]]: \"0\",\n [Breakpoint[\"xs-min\"]]: \"321px\",\n [Breakpoint[\"sm-min\"]]: \"376px\",\n [Breakpoint[\"md-min\"]]: \"481px\",\n [Breakpoint[\"lg-min\"]]: \"769px\",\n [Breakpoint[\"xl-min\"]]: \"1201px\",\n [Breakpoint[\"xxl-min\"]]: \"1441px\",\n [Breakpoint[\"xxs-max\"]]: \"320px\",\n [Breakpoint[\"xs-max\"]]: \"375px\",\n [Breakpoint[\"sm-max\"]]: \"480px\",\n [Breakpoint[\"md-max\"]]: \"768px\",\n [Breakpoint[\"lg-max\"]]: \"1200px\",\n [Breakpoint[\"xl-max\"]]: \"1440px\",\n};\n\nconst WIDTH_BREAKPOINT_TOKEN_SET = new Set<WidthBreakpointCSSVariableString>([\n Breakpoint[\"xxs-min\"],\n Breakpoint[\"xs-min\"],\n Breakpoint[\"sm-min\"],\n Breakpoint[\"md-min\"],\n Breakpoint[\"lg-min\"],\n Breakpoint[\"xl-min\"],\n Breakpoint[\"xxl-min\"],\n Breakpoint[\"xxs-max\"],\n Breakpoint[\"xs-max\"],\n Breakpoint[\"sm-max\"],\n Breakpoint[\"md-max\"],\n Breakpoint[\"lg-max\"],\n Breakpoint[\"xl-max\"],\n]);\n\nconst isBreakpointToken = (\n value: unknown\n): value is WidthBreakpointCSSVariableString => {\n return isTokenFromSet<WidthBreakpointCSSVariableString>(\n value,\n WIDTH_BREAKPOINT_TOKEN_SET\n );\n};\n\nconst getMinWidthBreakpointToken = (breakpoint: BreakpointName) => {\n return Breakpoint[`${breakpoint}-min`];\n};\n\nconst getMaxWidthBreakpointToken = (breakpoint: MaxWidthBreakpointName) => {\n return Breakpoint[`${breakpoint}-max`];\n};\n\n// @catalog\n/**\n * Returns `true` when the viewport width is at or above the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n */\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n useMediaQuery({\n minWidth: getMinWidthBreakpointToken(breakpoint),\n });\n\n// @catalog\n/**\n * Returns `true` when the viewport width is at or below the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n */\nexport const useMaxWidthMediaQuery = (breakpoint: MaxWidthBreakpointName) =>\n useMediaQuery({\n maxWidth: getMaxWidthBreakpointToken(breakpoint),\n });\n\nconst getMediaQueryClause = (\n feature: \"min-width\" | \"max-width\",\n value: string | undefined\n) => {\n if (!value) {\n return undefined;\n }\n\n return `(${feature}: ${value})`;\n};\n\nconst getCustomMediaQueryClause = (\n clause: MediaQueryClause | null | undefined\n) => {\n if (clause?.value === undefined) {\n return undefined;\n }\n\n if (clause.value === true) {\n return `(${clause.feature})`;\n }\n\n if (clause.value === false) {\n return undefined;\n }\n\n const value = `${clause.value}`.trim();\n\n if (!value) {\n return undefined;\n }\n\n return `(${clause.feature}: ${value})`;\n};\n\nconst getDefaultMatch = (hasMinWidth: boolean, hasMaxWidth: boolean) => {\n if (hasMaxWidth) {\n return false;\n }\n\n if (hasMinWidth) {\n return true;\n }\n\n return false;\n};\n\nconst getCurrentMatch = (queryString: string, defaultMatch: boolean) => {\n if (!queryString) {\n return defaultMatch;\n }\n\n if (!globalThis.window?.matchMedia) {\n return defaultMatch;\n }\n\n return globalThis.window.matchMedia(queryString).matches;\n};\n\n// @catalog\n/**\n * Resolves a width breakpoint CSS variable token to its computed pixel string.\n *\n * @returns The resolved pixel value, falling back to default LifeSG breakpoint\n * values when the theme element is not yet mounted, or `\"\"` for unrecognised\n * tokens.\n */\nexport const useResolvedBreakpointToken = (\n breakpointToken: WidthBreakpointCSSVariableString | undefined\n): string => {\n const effectiveFallback =\n isBreakpointToken(breakpointToken) &&\n WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n ? WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n : \"\";\n\n return useResolvedTokenValue<WidthBreakpointCSSVariableString, string>({\n value: breakpointToken,\n fallback: effectiveFallback,\n isToken: isBreakpointToken,\n normalizeCustom: (value) => value,\n });\n};\n\nconst useMatchMediaQuery = (\n queryString: string,\n defaultMatch: boolean\n): boolean => {\n const [matches, setMatches] = useState(() =>\n getCurrentMatch(queryString, defaultMatch)\n );\n\n useEffect(() => {\n if (!queryString || !globalThis.window?.matchMedia) {\n setMatches(defaultMatch);\n return;\n }\n\n const mediaQueryList = globalThis.window.matchMedia(queryString);\n const handleChange = (event: MediaQueryListEvent) => {\n setMatches(event.matches);\n };\n\n setMatches(mediaQueryList.matches);\n mediaQueryList.addEventListener(\"change\", handleChange);\n\n return () => {\n mediaQueryList.removeEventListener(\"change\", handleChange);\n };\n }, [defaultMatch, queryString]);\n\n return matches;\n};\n\n// @catalog\n/**\n * Reactive boolean hook that evaluates a media query built from width\n * breakpoint tokens and optional custom feature clauses.\n *\n * @returns `true` when the query matches. When `window.matchMedia` is\n * unavailable (SSR), defaults to `true` for min-width-only queries and\n * `false` for max-width-only.\n */\nexport const useMediaQuery = (options: MediaQueryOptions): boolean => {\n const { minWidth, maxWidth, clauses = [] } = options;\n const normalizedMinWidth = useResolvedBreakpointToken(minWidth);\n const normalizedMaxWidth = useResolvedBreakpointToken(maxWidth);\n const widthClauses = [\n getMediaQueryClause(\"min-width\", normalizedMinWidth),\n getMediaQueryClause(\"max-width\", normalizedMaxWidth),\n ].filter((value): value is string => !!value);\n const customClauses = clauses\n .map(getCustomMediaQueryClause)\n .filter((value): value is string => !!value);\n const queryString = [...widthClauses, ...customClauses].join(\" and \");\n const hasMinWidth = !!normalizedMinWidth;\n const hasMaxWidth = !!normalizedMaxWidth;\n const defaultMatch = getDefaultMatch(hasMinWidth, hasMaxWidth);\n\n return useMatchMediaQuery(queryString, defaultMatch);\n};\n"],"names":["WIDTH_BREAKPOINT_DEFAULTS","Breakpoint","WIDTH_BREAKPOINT_TOKEN_SET","Set","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","effectiveFallback","useResolvedTokenValue","fallback","isToken","normalizeCustom","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","_a","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"wNAkEA,MAAMA,EAGF,CACA,CAACC,EAAW,YAAa,IACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,YAAa,SACzB,CAACA,EAAW,YAAa,QACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,WAAY,UAGtBC,EAA6B,IAAIC,IAAsC,CACzEF,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTG,EACFC,GAEOC,EACHD,EACAH,GAIFK,EAA8BC,GACzBP,EAAW,GAAGO,SAGnBC,EAA8BD,GACzBP,EAAW,GAAGO,SASZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAShCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EAmC7BgB,EACTC,IAEA,MAAMC,EACFnB,EAAkBkB,IAClBtB,EAA0BsB,GACpBtB,EAA0BsB,GAC1B,GAEV,OAAOE,EAAgE,CACnEnB,MAAOiB,EACPG,SAAUF,EACVG,QAAStB,EACTuB,gBAAkBtB,GAAUA,GAC9B,EAGAuB,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IAzCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAIjBF,WAAWC,OAAOC,WAAWR,GAAaE,QAPtCD,CAO6C,EAiCpDQ,CAAgBT,EAAaC,KAsBjC,OAnBAS,GAAU,WACN,IAAKV,KAAiC,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAEpC,YADAL,EAAWF,GAIf,MAAMU,EAAiBL,WAAWC,OAAOC,WAAWR,GAC9CY,EAAgBC,IAClBV,EAAWU,EAAMX,QAAQ,EAM7B,OAHAC,EAAWQ,EAAeT,SAC1BS,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACX,EAAcD,IAEXE,CAAO,EAYLpB,EAAiBkC,IAC1B,MAAMjC,SAAEA,EAAQE,SAAEA,EAAQgC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB1B,EAA2BT,GAChDoC,EAAqB3B,EAA2BP,GAQhDe,EAAc,IAPC,CACjBd,EAAoB,YAAagC,GACjChC,EAAoB,YAAaiC,IACnCC,QAAQ5C,KAA6BA,OACjByC,EACjBI,IAAIjC,GACJgC,QAAQ5C,KAA6BA,KACc8C,KAAK,SAGvDrB,EAtGc,EAACsB,EAAsBC,KACvCA,KAIAD,EAiGiBE,GAFCP,IACAC,GAGtB,OAAOpB,EAAmBC,EAAaC,EAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import i from"clsx";import{useState as o,useRef as a,useMemo as l,useCallback as n,useEffect as s}from"react";import{FormErrorMessage as d}from"../../form/form-label.js";import{VisuallyHidden as m,concatIds as c}from"../../shared/accessibility/index.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as p}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as u}from"../../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../../shared/dropdown-list/dropdown-list-state.js";import"../../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../../markup/markup.js";import"../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as f}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as v,BasicInput as b,ClearButton as g}from"../../shared/input-wrapper/input-wrapper.js";import"../../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../../shared/dropdown-list/dropdown-search.js";import"../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import"../../shared/dropdown-list/virtuoso-components.js";import{clearButtonContainer as j}from"../../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as x}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as y}from"../../util/time-helper.js";import{wrapper as w,selectorInput as I,selectorInputDisabled as _}from"../common.styles.js";import{timeFieldContainer as T}from"./combobox-picker.styles.js";const k=k=>{var{id:C,disabled:S=!1,error:A,value:O,format:E="12hr",readOnly:N,onChange:F,onFocus:B,onBlur:q,alignment:H="left",dropdownZIndex:$,startLimit:L,endLimit:G,initialScrollStartTime:P,initialScrollEndTime:D,interval:M=15,dropdownRootNode:Z,"aria-labelledby":K,"aria-describedby":R,"aria-invalid":W}=k,z=e(k,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const J=p(),[Q,U]=o(null),[V,X]=o(!1),[Y,ee]=o(""),[te,re]=o(""),[ie,oe]=o(""),[ae,le]=o(""),[ne,se]=o(""),de=a(null),me=a(null),ce=a(null),pe=`${J}-listbox`,ue=`${J}-start-label`,he=`${J}-end-label`,fe=`${J}-error-message`,ve=l((()=>y.generateTimings(M,E,L,G)),[M,E,L,G]),be=l((()=>{if(""===ae)return ve;const e=y.findClosestFlooredTime(ae,ve);return e?ve.slice(ve.indexOf(e)):[]}),[ve,ae]),ge=n((e=>y.parseInput(e,E)),[E]),je=l((()=>{var e;return null!==(e=ge(P))&&void 0!==e?e:""}),[P,ge]),xe=l((()=>{var e;return null!==(e=ge(D))&&void 0!==e?e:""}),[D,ge]);s((()=>{var e,t;if(O){const r=null!==(e=ge(O.start))&&void 0!==e?e:"",i=null!==(t=ge(O.end))&&void 0!==t?t:"";re(r),oe(i),le(r),se(i)}}),[O,ge]),s((()=>{if(A)return void X(!1);const e=ge(te),t=ge(ie);if(void 0===e)ee("Invalid start time");else if(void 0===t)ee("Invalid end time");else{if(!(""!==e&&""!==t&&y.to24Hour(t)<y.to24Hour(e)))return ee(""),void(document.activeElement!==me.current&&document.activeElement!==ce.current||X(!0));ee("End time must be after start time")}X(!1)}),[te,ie,ge,A]);const ye=()=>"start"===Q?"Selecting for: Start time":"end"===Q?"Selecting for: End time":void 0,we=e=>c(K,"start"===e?ue:he),Ie=()=>c(R,!A&&Y?fe:void 0),_e=e=>{S||N||(Q||V||null==B||B(),U(e),X(!0))},Te=e=>{var t;S||N||(U(e),X(!0),null===(t=("start"===e?me:ce).current)||void 0===t||t.select())};function ke(e){var t;switch(e.code){case"Enter":"start"===Q?Ce(te):"end"===Q&&(V&&Se(ie),null===(t=ce.current)||void 0===t||t.blur());break;case"Tab":Ae(te,ie,{})}}const Ce=e=>{Ae(e,ie,{goToNextInput:!0})},Se=e=>{Ae(te,e,{triggerOnBlur:!0})},Ae=(e,t,{goToNextInput:r,triggerOnBlur:i})=>{var o,a,l;const n=null!==(o=ge(e))&&void 0!==o?o:ae,s=null!==(a=ge(t))&&void 0!==a?a:ne;re(n),oe(s);n===ae&&s===ne||null==F||F({start:n,end:s}),r&&void 0!==ge(e)&&(U("end"),null===(l=ce.current)||void 0===l||l.select()),i&&(U(null),X(!1),null==q||q()),le(n),se(s)},Oe=e=>{e.stopPropagation(),re(""),oe(""),le(""),se("");null==F||F({start:"",end:""}),U(null),X(!1)},Ee=e=>{var t,r;const i=e.relatedTarget,o=(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focusable]"))||(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focus-guard]")),a=de.current&&de.current.contains(i);Q&&!V&&!a&&!o&&Ae(te,ie,{triggerOnBlur:!0})},Ne=()=>{if(!N&&!S&&((null==te?void 0:te.length)>0||(null==ie?void 0:ie.length)>0))return r("div",{className:j,children:r(g,{onClick:Oe,type:"button","aria-label":"Clear"})})};return t("div",Object.assign({id:C},z,{className:i(w,z.className),children:[r(h,{children:r(f,{enabled:!N&&!S,isOpen:V,renderElement:()=>t(v,{ref:de,disabled:S,error:A||!!Y,readOnly:N,onBlur:Ee,role:"group","data-testid":"timepicker-container",className:T,children:[r(m,{id:ue,children:"Start time"}),r(m,{id:he,children:"End time"}),t(x,{error:A||!!Y,currentActive:null===Q?"none":Q,children:[r(b,{ref:me,onFocus:()=>_e("start"),placeholder:"start"===Q?"hh:mm":"From",onChange:e=>re(e.target.value),value:te,readOnly:N||S,"data-testid":z["data-testid"]?`${z["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>Te("start"),onKeyDown:ke,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":we("start"),"aria-describedby":Ie(),"aria-expanded":V&&"start"===Q,"aria-controls":pe,"aria-autocomplete":"list","aria-invalid":A||W||!!Y,"aria-disabled":S,"aria-readonly":N,className:i(I,S&&_)}),r(b,{ref:ce,onFocus:()=>_e("end"),placeholder:"end"===Q?"hh:mm":"To",onChange:e=>oe(e.target.value),value:ie,readOnly:N||S,"data-testid":z["data-testid"]?`${z["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>Te("end"),onKeyDown:ke,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":we("end"),"aria-describedby":Ie(),"aria-expanded":V&&"end"===Q,"aria-controls":pe,"aria-autocomplete":"list","aria-invalid":A||W||!!Y||void 0,"aria-disabled":S||void 0,"aria-readonly":N||void 0,className:i(I,S&&_)})]}),Ne()]}),renderDropdown:()=>{if("start"===Q){const e=ge(te)||je;return r(u,{listItems:ve,onSelectItem:Ce,selectedItems:[te],topScrollItem:y.findClosestFlooredTime(e,ve),listboxId:pe,ariaLabel:ye(),disableItemFocus:!0,matchElementWidth:!0})}{const e=ge(ie)||xe;return r(u,{listItems:be,onSelectItem:Se,selectedItems:[ie],topScrollItem:y.findClosestFlooredTime(e,be),listboxId:pe,ariaLabel:ye(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(U(null),X(!1),null==q||q()):Ae(te,ie,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===Q?me:ce).current)||void 0===e||e.focus(),X(!1)},offset:8,alignment:H,fitAvailableHeight:!0,customZIndex:$,rootNode:Z})}),!A&&Y&&r(d,{id:fe,tabIndex:0,"data-testid":C?`${C}-error-message`:"error-message",children:Y})]}))};export{k as ComboboxPicker};
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import i from"clsx";import{useState as o,useRef as a,useMemo as l,useCallback as n,useEffect as s}from"react";import{FormErrorMessage as d}from"../../form/form-label/form-label.js";import{VisuallyHidden as m,concatIds as c}from"../../shared/accessibility/index.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as p}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../shared/dropdown-list/dropdown-label.styles_mloii0.css";import{DropdownList as u}from"../../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../../shared/dropdown-list/dropdown-list-state.js";import"../../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../../markup/markup.js";import"../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as f}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as v,BasicInput as b,ClearButton as g}from"../../shared/input-wrapper/input-wrapper.js";import"../../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../../shared/dropdown-list/dropdown-search.js";import"../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import"../../shared/dropdown-list/virtuoso-components.js";import{clearButtonContainer as j}from"../../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as x}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as y}from"../../util/time-helper.js";import{wrapper as w,selectorInput as I,selectorInputDisabled as _}from"../common.styles.js";import{timeFieldContainer as T}from"./combobox-picker.styles.js";const k=k=>{var{id:C,disabled:S=!1,error:A,value:O,format:E="12hr",readOnly:N,onChange:F,onFocus:B,onBlur:q,alignment:H="left",dropdownZIndex:$,startLimit:L,endLimit:G,initialScrollStartTime:P,initialScrollEndTime:D,interval:M=15,dropdownRootNode:Z,"aria-labelledby":K,"aria-describedby":R,"aria-invalid":W}=k,z=e(k,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const J=p(),[Q,U]=o(null),[V,X]=o(!1),[Y,ee]=o(""),[te,re]=o(""),[ie,oe]=o(""),[ae,le]=o(""),[ne,se]=o(""),de=a(null),me=a(null),ce=a(null),pe=`${J}-listbox`,ue=`${J}-start-label`,he=`${J}-end-label`,fe=`${J}-error-message`,ve=l((()=>y.generateTimings(M,E,L,G)),[M,E,L,G]),be=l((()=>{if(""===ae)return ve;const e=y.findClosestFlooredTime(ae,ve);return e?ve.slice(ve.indexOf(e)):[]}),[ve,ae]),ge=n((e=>y.parseInput(e,E)),[E]),je=l((()=>{var e;return null!==(e=ge(P))&&void 0!==e?e:""}),[P,ge]),xe=l((()=>{var e;return null!==(e=ge(D))&&void 0!==e?e:""}),[D,ge]);s((()=>{var e,t;if(O){const r=null!==(e=ge(O.start))&&void 0!==e?e:"",i=null!==(t=ge(O.end))&&void 0!==t?t:"";re(r),oe(i),le(r),se(i)}}),[O,ge]),s((()=>{if(A)return void X(!1);const e=ge(te),t=ge(ie);if(void 0===e)ee("Invalid start time");else if(void 0===t)ee("Invalid end time");else{if(!(""!==e&&""!==t&&y.to24Hour(t)<y.to24Hour(e)))return ee(""),void(document.activeElement!==me.current&&document.activeElement!==ce.current||X(!0));ee("End time must be after start time")}X(!1)}),[te,ie,ge,A]);const ye=()=>"start"===Q?"Selecting for: Start time":"end"===Q?"Selecting for: End time":void 0,we=e=>c(K,"start"===e?ue:he),Ie=()=>c(R,!A&&Y?fe:void 0),_e=e=>{S||N||(Q||V||null==B||B(),U(e),X(!0))},Te=e=>{var t;S||N||(U(e),X(!0),null===(t=("start"===e?me:ce).current)||void 0===t||t.select())};function ke(e){var t;switch(e.code){case"Enter":"start"===Q?Ce(te):"end"===Q&&(V&&Se(ie),null===(t=ce.current)||void 0===t||t.blur());break;case"Tab":Ae(te,ie,{})}}const Ce=e=>{Ae(e,ie,{goToNextInput:!0})},Se=e=>{Ae(te,e,{triggerOnBlur:!0})},Ae=(e,t,{goToNextInput:r,triggerOnBlur:i})=>{var o,a,l;const n=null!==(o=ge(e))&&void 0!==o?o:ae,s=null!==(a=ge(t))&&void 0!==a?a:ne;re(n),oe(s);n===ae&&s===ne||null==F||F({start:n,end:s}),r&&void 0!==ge(e)&&(U("end"),null===(l=ce.current)||void 0===l||l.select()),i&&(U(null),X(!1),null==q||q()),le(n),se(s)},Oe=e=>{e.stopPropagation(),re(""),oe(""),le(""),se("");null==F||F({start:"",end:""}),U(null),X(!1)},Ee=e=>{var t,r;const i=e.relatedTarget,o=(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focusable]"))||(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focus-guard]")),a=de.current&&de.current.contains(i);Q&&!V&&!a&&!o&&Ae(te,ie,{triggerOnBlur:!0})},Ne=()=>{if(!N&&!S&&((null==te?void 0:te.length)>0||(null==ie?void 0:ie.length)>0))return r("div",{className:j,children:r(g,{onClick:Oe,type:"button","aria-label":"Clear"})})};return t("div",Object.assign({id:C},z,{className:i(w,z.className),children:[r(h,{children:r(f,{enabled:!N&&!S,isOpen:V,renderElement:()=>t(v,{ref:de,disabled:S,error:A||!!Y,readOnly:N,onBlur:Ee,role:"group","data-testid":"timepicker-container",className:T,children:[r(m,{id:ue,children:"Start time"}),r(m,{id:he,children:"End time"}),t(x,{error:A||!!Y,currentActive:null===Q?"none":Q,children:[r(b,{ref:me,onFocus:()=>_e("start"),placeholder:"start"===Q?"hh:mm":"From",onChange:e=>re(e.target.value),value:te,readOnly:N||S,"data-testid":z["data-testid"]?`${z["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>Te("start"),onKeyDown:ke,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":we("start"),"aria-describedby":Ie(),"aria-expanded":V&&"start"===Q,"aria-controls":pe,"aria-autocomplete":"list","aria-invalid":A||W||!!Y,"aria-disabled":S,"aria-readonly":N,className:i(I,S&&_)}),r(b,{ref:ce,onFocus:()=>_e("end"),placeholder:"end"===Q?"hh:mm":"To",onChange:e=>oe(e.target.value),value:ie,readOnly:N||S,"data-testid":z["data-testid"]?`${z["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>Te("end"),onKeyDown:ke,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":we("end"),"aria-describedby":Ie(),"aria-expanded":V&&"end"===Q,"aria-controls":pe,"aria-autocomplete":"list","aria-invalid":A||W||!!Y||void 0,"aria-disabled":S||void 0,"aria-readonly":N||void 0,className:i(I,S&&_)})]}),Ne()]}),renderDropdown:()=>{if("start"===Q){const e=ge(te)||je;return r(u,{listItems:ve,onSelectItem:Ce,selectedItems:[te],topScrollItem:y.findClosestFlooredTime(e,ve),listboxId:pe,ariaLabel:ye(),disableItemFocus:!0,matchElementWidth:!0})}{const e=ge(ie)||xe;return r(u,{listItems:be,onSelectItem:Se,selectedItems:[ie],topScrollItem:y.findClosestFlooredTime(e,be),listboxId:pe,ariaLabel:ye(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(U(null),X(!1),null==q||q()):Ae(te,ie,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===Q?me:ce).current)||void 0===e||e.focus(),X(!1)},offset:8,alignment:H,fitAvailableHeight:!0,customZIndex:$,rootNode:Z})}),!A&&Y&&r(d,{id:fe,tabIndex:0,"data-testid":C?`${C}-error-message`:"error-message",children:Y})]}))};export{k as ComboboxPicker};
|
|
2
2
|
//# sourceMappingURL=combobox-picker.js.map
|