@doist/reactist 19.1.1 → 20.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -0
- package/dist/reactist.cjs.development.js +3 -81
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/{new-components/alert → alert}/alert.js +1 -1
- package/es/alert/alert.js.map +1 -0
- package/es/{new-components/alert → alert}/alert.module.css.js +0 -0
- package/es/{new-components/alert → alert}/alert.module.css.js.map +0 -0
- package/es/{new-components/avatar → avatar}/avatar.js +2 -2
- package/es/avatar/avatar.js.map +1 -0
- package/es/{new-components/avatar → avatar}/avatar.module.css.js +0 -0
- package/es/{new-components/avatar → avatar}/avatar.module.css.js.map +0 -0
- package/es/{new-components/avatar → avatar}/utils.js +0 -0
- package/es/avatar/utils.js.map +1 -0
- package/es/{new-components/badge → badge}/badge.js +1 -1
- package/es/badge/badge.js.map +1 -0
- package/es/badge/badge.module.css.js +4 -0
- package/es/{new-components/badge → badge}/badge.module.css.js.map +0 -0
- package/es/{new-components/banner → banner}/banner.js +2 -2
- package/es/banner/banner.js.map +1 -0
- package/es/{new-components/banner → banner}/banner.module.css.js +0 -0
- package/es/{new-components/banner → banner}/banner.module.css.js.map +0 -0
- package/es/{new-components/base-button → base-button}/base-button.js +2 -2
- package/es/base-button/base-button.js.map +1 -0
- package/es/{new-components/base-button → base-button}/base-button.module.css.js +0 -0
- package/es/{new-components/base-button → base-button}/base-button.module.css.js.map +0 -0
- package/es/{new-components/base-field → base-field}/base-field.js +2 -2
- package/es/base-field/base-field.js.map +1 -0
- package/es/{new-components/base-field → base-field}/base-field.module.css.js +0 -0
- package/es/{new-components/base-field → base-field}/base-field.module.css.js.map +0 -0
- package/es/{new-components/box → box}/box.js +3 -3
- package/es/box/box.js.map +1 -0
- package/es/{new-components/box → box}/box.module.css.js +0 -0
- package/es/{new-components/box → box}/box.module.css.js.map +0 -0
- package/es/{new-components/box → box}/gap.module.css.js +0 -0
- package/es/{new-components/box → box}/gap.module.css.js.map +0 -0
- package/es/{new-components/box → box}/margin.module.css.js +0 -0
- package/es/{new-components/box → box}/margin.module.css.js.map +0 -0
- package/es/{new-components/box → box}/padding.module.css.js +0 -0
- package/es/{new-components/box → box}/padding.module.css.js.map +0 -0
- package/es/{new-components/box → box}/width.module.css.js +0 -0
- package/es/{new-components/box → box}/width.module.css.js.map +0 -0
- package/es/{new-components/button → button}/button.js +1 -1
- package/es/button/button.js.map +1 -0
- package/es/{new-components/button-link → button-link}/button-link.js +2 -2
- package/es/button-link/button-link.js.map +1 -0
- package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.js +1 -1
- package/es/checkbox-field/checkbox-field.js.map +1 -0
- package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js +0 -0
- package/es/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js.map +0 -0
- package/es/{new-components/checkbox-field → checkbox-field}/checkbox-icon.js +1 -1
- package/es/checkbox-field/checkbox-icon.js.map +1 -0
- package/es/{new-components/columns → columns}/columns.js +3 -3
- package/es/columns/columns.js.map +1 -0
- package/es/{new-components/columns → columns}/columns.module.css.js +0 -0
- package/es/{new-components/columns → columns}/columns.module.css.js.map +0 -0
- package/es/components/color-picker/color-picker.js +1 -1
- package/es/components/color-picker/color-picker.js.map +1 -1
- package/es/components/deprecated-button/deprecated-button.js +1 -1
- package/es/components/deprecated-button/deprecated-button.js.map +1 -1
- package/es/components/progress-bar/progress-bar.js +1 -1
- package/es/components/progress-bar/progress-bar.js.map +1 -1
- package/es/components/time/time.js +1 -1
- package/es/components/time/time.js.map +1 -1
- package/es/{new-components/deprecated-modal → deprecated-modal}/modal.js +1 -1
- package/es/deprecated-modal/modal.js.map +1 -0
- package/es/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js +0 -0
- package/es/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js.map +0 -0
- package/es/{new-components/divider → divider}/divider.js +2 -2
- package/es/divider/divider.js.map +1 -0
- package/es/{new-components/divider → divider}/divider.module.css.js +0 -0
- package/es/{new-components/divider → divider}/divider.module.css.js.map +0 -0
- package/es/{new-components/heading → heading}/heading.js +2 -2
- package/es/heading/heading.js.map +1 -0
- package/es/{new-components/heading → heading}/heading.module.css.js +0 -0
- package/es/{new-components/heading → heading}/heading.module.css.js.map +0 -0
- package/es/{new-components/hidden → hidden}/hidden.js +2 -2
- package/es/hidden/hidden.js.map +1 -0
- package/es/{new-components/hidden → hidden}/hidden.module.css.js +0 -0
- package/es/{new-components/hidden → hidden}/hidden.module.css.js.map +0 -0
- package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.js +2 -2
- package/es/hidden-visually/hidden-visually.js.map +1 -0
- package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js +0 -0
- package/es/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js.map +0 -0
- package/es/{new-components/icons → icons}/alert-icon.js +1 -1
- package/es/icons/alert-icon.js.map +1 -0
- package/es/{new-components/icons → icons}/close-icon.js +1 -1
- package/es/icons/close-icon.js.map +1 -0
- package/es/{new-components/icons → icons}/password-hidden-icon.js +1 -1
- package/es/icons/password-hidden-icon.js.map +1 -0
- package/es/{new-components/icons → icons}/password-visible-icon.js +1 -1
- package/es/icons/password-visible-icon.js.map +1 -0
- package/es/index.js +31 -33
- package/es/index.js.map +1 -1
- package/es/{new-components/inline → inline}/inline.js +3 -3
- package/es/inline/inline.js.map +1 -0
- package/es/{new-components/loading → loading}/loading.js +1 -1
- package/es/loading/loading.js.map +1 -0
- package/es/{new-components/menu → menu}/menu.js +2 -2
- package/es/menu/menu.js.map +1 -0
- package/es/{new-components/modal → modal}/modal.js +1 -1
- package/es/modal/modal.js.map +1 -0
- package/es/{new-components/modal → modal}/modal.module.css.js +0 -0
- package/es/{new-components/modal → modal}/modal.module.css.js.map +0 -0
- package/es/{new-components/notice → notice}/notice.js +1 -1
- package/es/notice/notice.js.map +1 -0
- package/es/{new-components/notice → notice}/notice.module.css.js +0 -0
- package/es/{new-components/notice → notice}/notice.module.css.js.map +0 -0
- package/es/{new-components/password-field → password-field}/password-field.js +2 -2
- package/es/password-field/password-field.js.map +1 -0
- package/es/{new-components/password-field → password-field}/password-field.module.css.js +0 -0
- package/es/{new-components/password-field → password-field}/password-field.module.css.js.map +0 -0
- package/es/{new-components/select-field → select-field}/select-field.js +1 -1
- package/es/select-field/select-field.js.map +1 -0
- package/es/{new-components/select-field → select-field}/select-field.module.css.js +0 -0
- package/es/{new-components/select-field → select-field}/select-field.module.css.js.map +0 -0
- package/es/{new-components/spinner → spinner}/spinner.js +0 -0
- package/es/spinner/spinner.js.map +1 -0
- package/es/{new-components/spinner → spinner}/spinner.module.css.js +0 -0
- package/es/{new-components/spinner → spinner}/spinner.module.css.js.map +0 -0
- package/es/{new-components/stack → stack}/stack.js +3 -3
- package/es/stack/stack.js.map +1 -0
- package/es/{new-components/switch-field → switch-field}/switch-field.js +2 -2
- package/es/switch-field/switch-field.js.map +1 -0
- package/es/{new-components/switch-field → switch-field}/switch-field.module.css.js +0 -0
- package/es/{new-components/switch-field → switch-field}/switch-field.module.css.js.map +0 -0
- package/es/{new-components/tabs → tabs}/tabs.js +3 -3
- package/es/tabs/tabs.js.map +1 -0
- package/es/{new-components/tabs → tabs}/tabs.module.css.js +0 -0
- package/es/{new-components/tabs → tabs}/tabs.module.css.js.map +0 -0
- package/es/{new-components/text → text}/text.js +3 -3
- package/es/text/text.js.map +1 -0
- package/es/{new-components/text → text}/text.module.css.js +0 -0
- package/es/{new-components/text → text}/text.module.css.js.map +0 -0
- package/es/{new-components/text-area → text-area}/text-area.js +1 -1
- package/es/text-area/text-area.js.map +1 -0
- package/es/{new-components/text-area → text-area}/text-area.module.css.js +0 -0
- package/es/{new-components/text-area → text-area}/text-area.module.css.js.map +0 -0
- package/es/{new-components/text-field → text-field}/text-field.js +1 -1
- package/es/text-field/text-field.js.map +1 -0
- package/es/{new-components/text-field → text-field}/text-field.module.css.js +0 -0
- package/es/{new-components/text-field → text-field}/text-field.module.css.js.map +0 -0
- package/es/{new-components/text-link → text-link}/text-link.js +2 -2
- package/es/text-link/text-link.js.map +1 -0
- package/es/{new-components/text-link → text-link}/text-link.module.css.js +0 -0
- package/es/{new-components/text-link → text-link}/text-link.module.css.js.map +0 -0
- package/es/{new-components/toast → toast}/static-toast.js +1 -1
- package/es/toast/static-toast.js.map +1 -0
- package/es/{new-components/toast → toast}/toast-animation.js +0 -0
- package/es/toast/toast-animation.js.map +1 -0
- package/es/{new-components/toast → toast}/toast.module.css.js +0 -0
- package/es/{new-components/toast → toast}/toast.module.css.js.map +0 -0
- package/es/{new-components/toast → toast}/use-toasts.js +2 -2
- package/es/toast/use-toasts.js.map +1 -0
- package/es/{new-components/tooltip → tooltip}/tooltip.js +1 -1
- package/es/tooltip/tooltip.js.map +1 -0
- package/es/{new-components/tooltip → tooltip}/tooltip.module.css.js +0 -0
- package/es/{new-components/tooltip → tooltip}/tooltip.module.css.js.map +0 -0
- package/es/{new-components → utils}/common-helpers.js +0 -0
- package/es/utils/common-helpers.js.map +1 -0
- package/es/{new-components → utils}/responsive-props.js +0 -0
- package/es/utils/responsive-props.js.map +1 -0
- package/lib/{new-components/alert → alert}/alert.d.ts +1 -1
- package/lib/alert/alert.js +2 -0
- package/lib/alert/alert.js.map +1 -0
- package/lib/{new-components/alert → alert}/alert.module.css.js +0 -0
- package/lib/{new-components/alert → alert}/alert.module.css.js.map +0 -0
- package/lib/{new-components/alert → alert}/alert.test.d.ts +0 -0
- package/lib/{new-components/alert → alert}/index.d.ts +0 -0
- package/lib/{new-components/avatar → avatar}/avatar.d.ts +1 -1
- package/lib/avatar/avatar.js +2 -0
- package/lib/avatar/avatar.js.map +1 -0
- package/lib/{new-components/avatar → avatar}/avatar.module.css.js +0 -0
- package/lib/{new-components/avatar → avatar}/avatar.module.css.js.map +0 -0
- package/lib/{new-components/avatar → avatar}/avatar.test.d.ts +0 -0
- package/lib/{new-components/avatar → avatar}/index.d.ts +0 -0
- package/lib/{new-components/avatar → avatar}/utils.d.ts +0 -0
- package/lib/{new-components/avatar → avatar}/utils.js +0 -0
- package/lib/avatar/utils.js.map +1 -0
- package/lib/{new-components/avatar → avatar}/utils.test.d.ts +0 -0
- package/lib/{new-components/badge → badge}/badge.d.ts +0 -0
- package/lib/badge/badge.js +2 -0
- package/lib/badge/badge.js.map +1 -0
- package/lib/badge/badge.module.css.js +2 -0
- package/lib/{new-components/badge → badge}/badge.module.css.js.map +0 -0
- package/lib/{new-components/badge → badge}/badge.test.d.ts +0 -0
- package/lib/{new-components/badge → badge}/index.d.ts +0 -0
- package/lib/{new-components/banner → banner}/banner.d.ts +0 -0
- package/lib/banner/banner.js +2 -0
- package/lib/banner/banner.js.map +1 -0
- package/lib/{new-components/banner → banner}/banner.module.css.js +0 -0
- package/lib/{new-components/banner → banner}/banner.module.css.js.map +0 -0
- package/lib/{new-components/banner → banner}/banner.test.d.ts +0 -0
- package/lib/{new-components/banner → banner}/index.d.ts +0 -0
- package/lib/{new-components/base-button → base-button}/base-button.d.ts +1 -1
- package/lib/base-button/base-button.js +2 -0
- package/lib/base-button/base-button.js.map +1 -0
- package/lib/{new-components/base-button → base-button}/base-button.module.css.js +0 -0
- package/lib/{new-components/base-button → base-button}/base-button.module.css.js.map +0 -0
- package/lib/{new-components/base-button → base-button}/index.d.ts +0 -0
- package/lib/{new-components/base-field → base-field}/base-field.d.ts +1 -1
- package/lib/base-field/base-field.js +2 -0
- package/lib/base-field/base-field.js.map +1 -0
- package/lib/{new-components/base-field → base-field}/base-field.module.css.js +0 -0
- package/lib/{new-components/base-field → base-field}/base-field.module.css.js.map +0 -0
- package/lib/{new-components/base-field → base-field}/index.d.ts +0 -0
- package/lib/{new-components/box → box}/box.d.ts +3 -3
- package/lib/{new-components/box → box}/box.js +1 -1
- package/lib/box/box.js.map +1 -0
- package/lib/{new-components/box → box}/box.module.css.js +0 -0
- package/lib/{new-components/box → box}/box.module.css.js.map +0 -0
- package/lib/{new-components/box → box}/box.test.d.ts +0 -0
- package/lib/{new-components/box → box}/gap.module.css.js +0 -0
- package/lib/{new-components/box → box}/gap.module.css.js.map +0 -0
- package/lib/{new-components/box → box}/index.d.ts +0 -0
- package/lib/{new-components/box → box}/margin.module.css.js +0 -0
- package/lib/{new-components/box → box}/margin.module.css.js.map +0 -0
- package/lib/{new-components/box → box}/padding.module.css.js +0 -0
- package/lib/{new-components/box → box}/padding.module.css.js.map +0 -0
- package/lib/{new-components/box → box}/width.module.css.js +0 -0
- package/lib/{new-components/box → box}/width.module.css.js.map +0 -0
- package/lib/{new-components/button → button}/button.d.ts +0 -0
- package/lib/button/button.js +2 -0
- package/lib/button/button.js.map +1 -0
- package/lib/{new-components/button → button}/button.test.d.ts +0 -0
- package/lib/{new-components/button → button}/index.d.ts +0 -0
- package/lib/{new-components/button-link → button-link}/button-link-story-wrapper.d.ts +0 -0
- package/lib/{new-components/button-link → button-link}/button-link.d.ts +2 -2
- package/lib/button-link/button-link.js +2 -0
- package/lib/button-link/button-link.js.map +1 -0
- package/lib/{new-components/button-link → button-link}/button-link.test.d.ts +0 -0
- package/lib/{new-components/button-link → button-link}/index.d.ts +0 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.d.ts +0 -0
- package/lib/checkbox-field/checkbox-field.js +2 -0
- package/lib/checkbox-field/checkbox-field.js.map +1 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js +0 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.module.css.js.map +0 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-field.test.d.ts +0 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/checkbox-icon.d.ts +0 -0
- package/lib/checkbox-field/checkbox-icon.js +2 -0
- package/lib/checkbox-field/checkbox-icon.js.map +1 -0
- package/lib/{new-components/checkbox-field → checkbox-field}/index.d.ts +0 -0
- package/lib/{new-components/columns → columns}/columns.d.ts +4 -4
- package/lib/{new-components/columns → columns}/columns.js +1 -1
- package/lib/columns/columns.js.map +1 -0
- package/lib/{new-components/columns → columns}/columns.module.css.js +0 -0
- package/lib/{new-components/columns → columns}/columns.module.css.js.map +0 -0
- package/lib/{new-components/columns → columns}/columns.test.d.ts +0 -0
- package/lib/{new-components/columns → columns}/index.d.ts +0 -0
- package/lib/components/color-picker/color-picker.js +1 -1
- package/lib/components/color-picker/color-picker.js.map +1 -1
- package/lib/components/deprecated-button/deprecated-button.js +1 -1
- package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
- package/lib/components/progress-bar/progress-bar.js +1 -1
- package/lib/components/progress-bar/progress-bar.js.map +1 -1
- package/lib/components/time/time.js +1 -1
- package/lib/components/time/time.js.map +1 -1
- package/lib/{new-components/deprecated-modal → deprecated-modal}/index.d.ts +0 -0
- package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.d.ts +0 -0
- package/lib/deprecated-modal/modal.js +2 -0
- package/lib/deprecated-modal/modal.js.map +1 -0
- package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js +0 -0
- package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.module.css.js.map +0 -0
- package/lib/{new-components/deprecated-modal → deprecated-modal}/modal.test.d.ts +0 -0
- package/lib/{new-components/divider → divider}/divider.d.ts +1 -1
- package/lib/divider/divider.js +2 -0
- package/lib/divider/divider.js.map +1 -0
- package/lib/{new-components/divider → divider}/divider.module.css.js +0 -0
- package/lib/{new-components/divider → divider}/divider.module.css.js.map +0 -0
- package/lib/{new-components/divider → divider}/index.d.ts +0 -0
- package/lib/{new-components/heading → heading}/heading.d.ts +2 -2
- package/lib/heading/heading.js +2 -0
- package/lib/heading/heading.js.map +1 -0
- package/lib/{new-components/heading → heading}/heading.module.css.js +0 -0
- package/lib/{new-components/heading → heading}/heading.module.css.js.map +0 -0
- package/lib/{new-components/heading → heading}/heading.test.d.ts +0 -0
- package/lib/{new-components/heading → heading}/index.d.ts +0 -0
- package/lib/{new-components/hidden → hidden}/hidden.d.ts +2 -2
- package/lib/hidden/hidden.js +2 -0
- package/lib/hidden/hidden.js.map +1 -0
- package/lib/{new-components/hidden → hidden}/hidden.module.css.js +0 -0
- package/lib/{new-components/hidden → hidden}/hidden.module.css.js.map +0 -0
- package/lib/{new-components/hidden → hidden}/hidden.test.d.ts +0 -0
- package/lib/{new-components/hidden → hidden}/index.d.ts +0 -0
- package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.d.ts +1 -1
- package/lib/hidden-visually/hidden-visually.js +2 -0
- package/lib/hidden-visually/hidden-visually.js.map +1 -0
- package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js +0 -0
- package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.module.css.js.map +0 -0
- package/lib/{new-components/hidden-visually → hidden-visually}/hidden-visually.test.d.ts +0 -0
- package/lib/{new-components/hidden-visually → hidden-visually}/index.d.ts +0 -0
- package/lib/{new-components/icons → icons}/alert-icon.d.ts +1 -1
- package/lib/icons/alert-icon.js +2 -0
- package/lib/icons/alert-icon.js.map +1 -0
- package/lib/{new-components/icons → icons}/close-icon.d.ts +0 -0
- package/lib/icons/close-icon.js +2 -0
- package/lib/icons/close-icon.js.map +1 -0
- package/lib/{new-components/icons → icons}/password-hidden-icon.d.ts +0 -0
- package/lib/icons/password-hidden-icon.js +2 -0
- package/lib/icons/password-hidden-icon.js.map +1 -0
- package/lib/{new-components/icons → icons}/password-visible-icon.d.ts +0 -0
- package/lib/icons/password-visible-icon.js +2 -0
- package/lib/icons/password-visible-icon.js.map +1 -0
- package/lib/index.d.ts +31 -33
- package/lib/index.js +1 -1
- package/lib/{new-components/inline → inline}/index.d.ts +0 -0
- package/lib/{new-components/inline → inline}/inline.d.ts +3 -3
- package/lib/{new-components/inline → inline}/inline.js +1 -1
- package/lib/inline/inline.js.map +1 -0
- package/lib/{new-components/inline → inline}/inline.test.d.ts +0 -0
- package/lib/{new-components/loading → loading}/index.d.ts +0 -0
- package/lib/{new-components/loading → loading}/loading.d.ts +0 -0
- package/lib/loading/loading.js +2 -0
- package/lib/loading/loading.js.map +1 -0
- package/lib/{new-components/loading → loading}/loading.test.d.ts +0 -0
- package/lib/{new-components/menu → menu}/index.d.ts +0 -0
- package/lib/{new-components/menu → menu}/menu.d.ts +5 -5
- package/lib/menu/menu.js +2 -0
- package/lib/menu/menu.js.map +1 -0
- package/lib/{new-components/menu → menu}/menu.test.d.ts +0 -0
- package/lib/{new-components/modal → modal}/index.d.ts +0 -0
- package/lib/{new-components/modal → modal}/modal-stories-components.d.ts +0 -0
- package/lib/{new-components/modal → modal}/modal.d.ts +0 -0
- package/lib/modal/modal.js +2 -0
- package/lib/modal/modal.js.map +1 -0
- package/lib/{new-components/modal → modal}/modal.module.css.js +0 -0
- package/lib/{new-components/modal → modal}/modal.module.css.js.map +0 -0
- package/lib/{new-components/modal → modal}/modal.test.d.ts +0 -0
- package/lib/{new-components/notice → notice}/index.d.ts +0 -0
- package/lib/{new-components/notice → notice}/notice.d.ts +1 -1
- package/lib/notice/notice.js +2 -0
- package/lib/notice/notice.js.map +1 -0
- package/lib/{new-components/notice → notice}/notice.module.css.js +0 -0
- package/lib/{new-components/notice → notice}/notice.module.css.js.map +0 -0
- package/lib/{new-components/notice → notice}/notice.test.d.ts +0 -0
- package/lib/{new-components/password-field → password-field}/index.d.ts +0 -0
- package/lib/{new-components/password-field → password-field}/password-field.d.ts +0 -0
- package/lib/password-field/password-field.js +2 -0
- package/lib/password-field/password-field.js.map +1 -0
- package/lib/{new-components/password-field → password-field}/password-field.module.css.js +0 -0
- package/lib/{new-components/password-field → password-field}/password-field.module.css.js.map +0 -0
- package/lib/{new-components/password-field → password-field}/password-field.test.d.ts +0 -0
- package/lib/{new-components/select-field → select-field}/index.d.ts +0 -0
- package/lib/{new-components/select-field → select-field}/select-field.d.ts +0 -0
- package/lib/select-field/select-field.js +2 -0
- package/lib/select-field/select-field.js.map +1 -0
- package/lib/{new-components/select-field → select-field}/select-field.module.css.js +0 -0
- package/lib/{new-components/select-field → select-field}/select-field.module.css.js.map +0 -0
- package/lib/{new-components/select-field → select-field}/select-field.test.d.ts +0 -0
- package/lib/{new-components/spinner → spinner}/index.d.ts +0 -0
- package/lib/{new-components/spinner → spinner}/spinner.d.ts +0 -0
- package/lib/{new-components/spinner → spinner}/spinner.js +0 -0
- package/lib/spinner/spinner.js.map +1 -0
- package/lib/{new-components/spinner → spinner}/spinner.module.css.js +0 -0
- package/lib/{new-components/spinner → spinner}/spinner.module.css.js.map +0 -0
- package/lib/{new-components/stack → stack}/index.d.ts +0 -0
- package/lib/{new-components/stack → stack}/stack.d.ts +3 -3
- package/lib/{new-components/stack → stack}/stack.js +1 -1
- package/lib/stack/stack.js.map +1 -0
- package/lib/{new-components/stack → stack}/stack.test.d.ts +0 -0
- package/lib/{new-components/switch-field → switch-field}/index.d.ts +0 -0
- package/lib/{new-components/switch-field → switch-field}/switch-field.d.ts +0 -0
- package/lib/switch-field/switch-field.js +2 -0
- package/lib/switch-field/switch-field.js.map +1 -0
- package/lib/{new-components/switch-field → switch-field}/switch-field.module.css.js +0 -0
- package/lib/{new-components/switch-field → switch-field}/switch-field.module.css.js.map +0 -0
- package/lib/{new-components/switch-field → switch-field}/switch-field.test.d.ts +0 -0
- package/lib/{new-components/tabs → tabs}/index.d.ts +0 -0
- package/lib/{new-components/tabs → tabs}/tabs.d.ts +3 -3
- package/lib/tabs/tabs.js +2 -0
- package/lib/tabs/tabs.js.map +1 -0
- package/lib/{new-components/tabs → tabs}/tabs.module.css.js +0 -0
- package/lib/{new-components/tabs → tabs}/tabs.module.css.js.map +0 -0
- package/lib/{new-components/tabs → tabs}/tabs.test.d.ts +0 -0
- package/lib/{new-components/text → text}/index.d.ts +0 -0
- package/lib/{new-components/text → text}/text.d.ts +2 -2
- package/lib/{new-components/text → text}/text.js +1 -1
- package/lib/text/text.js.map +1 -0
- package/lib/{new-components/text → text}/text.module.css.js +0 -0
- package/lib/{new-components/text → text}/text.module.css.js.map +0 -0
- package/lib/{new-components/text → text}/text.test.d.ts +0 -0
- package/lib/{new-components/text-area → text-area}/index.d.ts +0 -0
- package/lib/{new-components/text-area → text-area}/text-area.d.ts +0 -0
- package/lib/text-area/text-area.js +2 -0
- package/lib/text-area/text-area.js.map +1 -0
- package/lib/{new-components/text-area → text-area}/text-area.module.css.js +0 -0
- package/lib/{new-components/text-area → text-area}/text-area.module.css.js.map +0 -0
- package/lib/{new-components/text-area → text-area}/text-area.test.d.ts +0 -0
- package/lib/{new-components/text-field → text-field}/index.d.ts +0 -0
- package/lib/{new-components/text-field → text-field}/text-field.d.ts +0 -0
- package/lib/text-field/text-field.js +2 -0
- package/lib/text-field/text-field.js.map +1 -0
- package/lib/{new-components/text-field → text-field}/text-field.module.css.js +0 -0
- package/lib/{new-components/text-field → text-field}/text-field.module.css.js.map +0 -0
- package/lib/{new-components/text-field → text-field}/text-field.test.d.ts +0 -0
- package/lib/{new-components/text-link → text-link}/index.d.ts +0 -0
- package/lib/text-link/text-link.d.ts +5 -0
- package/lib/text-link/text-link.js +2 -0
- package/lib/text-link/text-link.js.map +1 -0
- package/lib/{new-components/text-link → text-link}/text-link.module.css.js +0 -0
- package/lib/{new-components/text-link → text-link}/text-link.module.css.js.map +0 -0
- package/lib/{new-components/toast → toast}/index.d.ts +0 -0
- package/lib/{new-components/toast → toast}/static-toast.d.ts +0 -0
- package/lib/toast/static-toast.js +2 -0
- package/lib/toast/static-toast.js.map +1 -0
- package/lib/{new-components/toast → toast}/toast-animation.d.ts +0 -0
- package/lib/{new-components/toast → toast}/toast-animation.js +0 -0
- package/lib/toast/toast-animation.js.map +1 -0
- package/lib/{new-components/toast → toast}/toast.module.css.js +0 -0
- package/lib/{new-components/toast → toast}/toast.module.css.js.map +0 -0
- package/lib/{new-components/toast → toast}/toast.test.d.ts +0 -0
- package/lib/{new-components/toast → toast}/use-toasts.d.ts +1 -1
- package/lib/toast/use-toasts.js +2 -0
- package/lib/toast/use-toasts.js.map +1 -0
- package/lib/{new-components/tooltip → tooltip}/index.d.ts +0 -0
- package/lib/{new-components/tooltip → tooltip}/tooltip.d.ts +0 -0
- package/lib/tooltip/tooltip.js +2 -0
- package/lib/tooltip/tooltip.js.map +1 -0
- package/lib/{new-components/tooltip → tooltip}/tooltip.module.css.js +0 -0
- package/lib/{new-components/tooltip → tooltip}/tooltip.module.css.js.map +0 -0
- package/lib/{new-components/tooltip → tooltip}/tooltip.test.d.ts +0 -0
- package/lib/{new-components → utils}/common-helpers.d.ts +0 -0
- package/lib/{new-components → utils}/common-helpers.js +0 -0
- package/lib/utils/common-helpers.js.map +1 -0
- package/lib/{new-components → utils}/common-types.d.ts +0 -0
- package/lib/{new-components → utils}/responsive-props.d.ts +0 -0
- package/lib/{new-components → utils}/responsive-props.js +0 -0
- package/lib/utils/responsive-props.js.map +1 -0
- package/lib/{new-components → utils}/test-helpers.d.ts +0 -0
- package/package.json +1 -1
- package/styles/badge.css +1 -1
- package/styles/badge.module.css.css +1 -1
- package/styles/menu.css +1 -1
- package/styles/reactist.css +2 -3
- package/es/components/deprecated-notification/deprecated-notification.js +0 -73
- package/es/components/deprecated-notification/deprecated-notification.js.map +0 -1
- package/es/components/icons/CloseIcon.svg.js +0 -14
- package/es/components/icons/CloseIcon.svg.js.map +0 -1
- package/es/new-components/alert/alert.js.map +0 -1
- package/es/new-components/avatar/avatar.js.map +0 -1
- package/es/new-components/avatar/utils.js.map +0 -1
- package/es/new-components/badge/badge.js.map +0 -1
- package/es/new-components/badge/badge.module.css.js +0 -4
- package/es/new-components/banner/banner.js.map +0 -1
- package/es/new-components/base-button/base-button.js.map +0 -1
- package/es/new-components/base-field/base-field.js.map +0 -1
- package/es/new-components/box/box.js.map +0 -1
- package/es/new-components/button/button.js.map +0 -1
- package/es/new-components/button-link/button-link.js.map +0 -1
- package/es/new-components/checkbox-field/checkbox-field.js.map +0 -1
- package/es/new-components/checkbox-field/checkbox-icon.js.map +0 -1
- package/es/new-components/columns/columns.js.map +0 -1
- package/es/new-components/common-helpers.js.map +0 -1
- package/es/new-components/deprecated-modal/modal.js.map +0 -1
- package/es/new-components/divider/divider.js.map +0 -1
- package/es/new-components/heading/heading.js.map +0 -1
- package/es/new-components/hidden/hidden.js.map +0 -1
- package/es/new-components/hidden-visually/hidden-visually.js.map +0 -1
- package/es/new-components/icons/alert-icon.js.map +0 -1
- package/es/new-components/icons/close-icon.js.map +0 -1
- package/es/new-components/icons/password-hidden-icon.js.map +0 -1
- package/es/new-components/icons/password-visible-icon.js.map +0 -1
- package/es/new-components/inline/inline.js.map +0 -1
- package/es/new-components/loading/loading.js.map +0 -1
- package/es/new-components/menu/menu.js.map +0 -1
- package/es/new-components/modal/modal.js.map +0 -1
- package/es/new-components/notice/notice.js.map +0 -1
- package/es/new-components/password-field/password-field.js.map +0 -1
- package/es/new-components/responsive-props.js.map +0 -1
- package/es/new-components/select-field/select-field.js.map +0 -1
- package/es/new-components/spinner/spinner.js.map +0 -1
- package/es/new-components/stack/stack.js.map +0 -1
- package/es/new-components/switch-field/switch-field.js.map +0 -1
- package/es/new-components/tabs/tabs.js.map +0 -1
- package/es/new-components/text/text.js.map +0 -1
- package/es/new-components/text-area/text-area.js.map +0 -1
- package/es/new-components/text-field/text-field.js.map +0 -1
- package/es/new-components/text-link/text-link.js.map +0 -1
- package/es/new-components/toast/static-toast.js.map +0 -1
- package/es/new-components/toast/toast-animation.js.map +0 -1
- package/es/new-components/toast/use-toasts.js.map +0 -1
- package/es/new-components/tooltip/tooltip.js.map +0 -1
- package/lib/components/deprecated-notification/deprecated-notification.d.ts +0 -18
- package/lib/components/deprecated-notification/deprecated-notification.js +0 -2
- package/lib/components/deprecated-notification/deprecated-notification.js.map +0 -1
- package/lib/components/deprecated-notification/deprecated-notification.test.d.ts +0 -1
- package/lib/components/deprecated-notification/index.d.ts +0 -1
- package/lib/components/icons/CloseIcon.svg.js +0 -2
- package/lib/components/icons/CloseIcon.svg.js.map +0 -1
- package/lib/new-components/alert/alert.js +0 -2
- package/lib/new-components/alert/alert.js.map +0 -1
- package/lib/new-components/avatar/avatar.js +0 -2
- package/lib/new-components/avatar/avatar.js.map +0 -1
- package/lib/new-components/avatar/utils.js.map +0 -1
- package/lib/new-components/badge/badge.js +0 -2
- package/lib/new-components/badge/badge.js.map +0 -1
- package/lib/new-components/badge/badge.module.css.js +0 -2
- package/lib/new-components/banner/banner.js +0 -2
- package/lib/new-components/banner/banner.js.map +0 -1
- package/lib/new-components/base-button/base-button.js +0 -2
- package/lib/new-components/base-button/base-button.js.map +0 -1
- package/lib/new-components/base-field/base-field.js +0 -2
- package/lib/new-components/base-field/base-field.js.map +0 -1
- package/lib/new-components/box/box.js.map +0 -1
- package/lib/new-components/button/button.js +0 -2
- package/lib/new-components/button/button.js.map +0 -1
- package/lib/new-components/button-link/button-link.js +0 -2
- package/lib/new-components/button-link/button-link.js.map +0 -1
- package/lib/new-components/checkbox-field/checkbox-field.js +0 -2
- package/lib/new-components/checkbox-field/checkbox-field.js.map +0 -1
- package/lib/new-components/checkbox-field/checkbox-icon.js +0 -2
- package/lib/new-components/checkbox-field/checkbox-icon.js.map +0 -1
- package/lib/new-components/columns/columns.js.map +0 -1
- package/lib/new-components/common-helpers.js.map +0 -1
- package/lib/new-components/deprecated-modal/modal.js +0 -2
- package/lib/new-components/deprecated-modal/modal.js.map +0 -1
- package/lib/new-components/divider/divider.js +0 -2
- package/lib/new-components/divider/divider.js.map +0 -1
- package/lib/new-components/heading/heading.js +0 -2
- package/lib/new-components/heading/heading.js.map +0 -1
- package/lib/new-components/hidden/hidden.js +0 -2
- package/lib/new-components/hidden/hidden.js.map +0 -1
- package/lib/new-components/hidden-visually/hidden-visually.js +0 -2
- package/lib/new-components/hidden-visually/hidden-visually.js.map +0 -1
- package/lib/new-components/icons/alert-icon.js +0 -2
- package/lib/new-components/icons/alert-icon.js.map +0 -1
- package/lib/new-components/icons/close-icon.js +0 -2
- package/lib/new-components/icons/close-icon.js.map +0 -1
- package/lib/new-components/icons/password-hidden-icon.js +0 -2
- package/lib/new-components/icons/password-hidden-icon.js.map +0 -1
- package/lib/new-components/icons/password-visible-icon.js +0 -2
- package/lib/new-components/icons/password-visible-icon.js.map +0 -1
- package/lib/new-components/inline/inline.js.map +0 -1
- package/lib/new-components/loading/loading.js +0 -2
- package/lib/new-components/loading/loading.js.map +0 -1
- package/lib/new-components/menu/menu.js +0 -2
- package/lib/new-components/menu/menu.js.map +0 -1
- package/lib/new-components/modal/modal.js +0 -2
- package/lib/new-components/modal/modal.js.map +0 -1
- package/lib/new-components/notice/notice.js +0 -2
- package/lib/new-components/notice/notice.js.map +0 -1
- package/lib/new-components/password-field/password-field.js +0 -2
- package/lib/new-components/password-field/password-field.js.map +0 -1
- package/lib/new-components/responsive-props.js.map +0 -1
- package/lib/new-components/select-field/select-field.js +0 -2
- package/lib/new-components/select-field/select-field.js.map +0 -1
- package/lib/new-components/spinner/spinner.js.map +0 -1
- package/lib/new-components/stack/stack.js.map +0 -1
- package/lib/new-components/switch-field/switch-field.js +0 -2
- package/lib/new-components/switch-field/switch-field.js.map +0 -1
- package/lib/new-components/tabs/tabs.js +0 -2
- package/lib/new-components/tabs/tabs.js.map +0 -1
- package/lib/new-components/text/text.js.map +0 -1
- package/lib/new-components/text-area/text-area.js +0 -2
- package/lib/new-components/text-area/text-area.js.map +0 -1
- package/lib/new-components/text-field/text-field.js +0 -2
- package/lib/new-components/text-field/text-field.js.map +0 -1
- package/lib/new-components/text-link/text-link.d.ts +0 -5
- package/lib/new-components/text-link/text-link.js +0 -2
- package/lib/new-components/text-link/text-link.js.map +0 -1
- package/lib/new-components/toast/static-toast.js +0 -2
- package/lib/new-components/toast/static-toast.js.map +0 -1
- package/lib/new-components/toast/toast-animation.js.map +0 -1
- package/lib/new-components/toast/use-toasts.js +0 -2
- package/lib/new-components/toast/use-toasts.js.map +0 -1
- package/lib/new-components/tooltip/tooltip.js +0 -2
- package/lib/new-components/tooltip/tooltip.js.map +0 -1
- package/styles/deprecated-notification.css +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),r=require("../utils/common-helpers.js"),n=require("./toast.module.css.js"),i=require("./static-toast.js"),u=require("ariakit/portal"),l=require("./toast-animation.js");const c=["toastId"],d=s.forwardRef((function({message:e,description:t,icon:o,action:a,autoDismissDelay:r,dismissLabel:n,showDismissButton:u=!0,toastId:l,onDismiss:c,onRemoveToast:d},m){const[f,p]=s.useState(Boolean(r)),b=s.useRef(),j=s.useCallback((function(){p(!0)}),[]),v=s.useCallback((function(){p(!1),clearTimeout(b.current),b.current=void 0}),[]);return s.useEffect((function(){if(f&&r)return b.current=window.setTimeout(()=>{d(l),null==c||c()},1e3*r),v}),[r,c,d,l,v,f]),s.createElement(i.StaticToast,{ref:m,message:e,description:t,icon:o,action:a,onDismiss:u?()=>{null==c||c(),d(l)}:void 0,dismissLabel:n,onMouseEnter:v,onMouseLeave:j})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:i="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close"}){const[b,j]=s.useState([]),{mappedRef:v,animateRemove:x}=l.useToastsAnimation(),k=s.useCallback((function(e){x(e,()=>{j(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[x]),D=s.useCallback((function(e){const s=r.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return j(e=>[...e,o]),()=>k(s)}),[f,p,k]);return s.createElement(m.Provider,{value:D},e,s.createElement(u.Portal,null,0===b.length?null:s.createElement(o.Box,{className:n.default.stackedToastsView,position:"fixed",width:"full",paddingX:i,paddingBottom:i},s.createElement(a.Stack,{space:"medium"},b.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,c);return s.createElement(d,t.objectSpread2({key:o,ref:v(o),toastId:o,onRemoveToast:k},a))})))))},exports.useToasts=f;
|
|
2
|
+
//# sourceMappingURL=use-toasts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n /**\n * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n * or false to disable auto-dismiss.\n *\n * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n */\n autoDismissDelay?: number | false\n\n /**\n * The label for the button that dismisses the toast.\n *\n * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n * different value if needed.\n */\n dismissLabel?: string\n\n /**\n * Whether to show the dismiss button or not.\n *\n * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n * dismiss the toast by calling the function returned by `showToast`.\n */\n showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n toastId: string\n onRemoveToast: (toastId: string) => void\n }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n {\n message,\n description,\n icon,\n action,\n autoDismissDelay,\n dismissLabel,\n showDismissButton = true,\n toastId,\n onDismiss,\n onRemoveToast,\n },\n ref,\n) {\n const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n const timeoutRef = React.useRef<number | undefined>()\n\n const startTimeout = React.useCallback(function startTimeout() {\n setTimeoutRunning(true)\n }, [])\n\n const stopTimeout = React.useCallback(function stopTimeout() {\n setTimeoutRunning(false)\n clearTimeout(timeoutRef.current)\n timeoutRef.current = undefined\n }, [])\n\n React.useEffect(\n function setupAutoDismiss() {\n if (!timeoutRunning || !autoDismissDelay) return\n timeoutRef.current = window.setTimeout(() => {\n onRemoveToast(toastId)\n onDismiss?.()\n }, autoDismissDelay * 1000)\n return stopTimeout\n },\n [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n )\n\n return (\n <StaticToast\n ref={ref}\n message={message}\n description={description}\n icon={icon}\n action={action}\n onDismiss={\n showDismissButton\n ? () => {\n onDismiss?.()\n onRemoveToast(toastId)\n }\n : undefined\n }\n dismissLabel={dismissLabel}\n // @ts-expect-error\n onMouseEnter={stopTimeout}\n onMouseLeave={startTimeout}\n />\n )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n /**\n * The default label to apply to toast dismiss buttons.\n *\n * This is useful in environments that need locatization, so you do not need to pass the same\n * translated label every time you trigger a toast.\n *\n * However, you can still apply a different label to a specific toast, by passing a different\n * value when calling showToast.\n *\n * @default 'Close'\n */\n defaultDismissLabel?: string\n\n /**\n * The default number of seconds after which the toast will be dismissed automatically.\n *\n * You can pass a different value to a specific toast when calling `showToast`. You can even\n * pass `false` if you want a certain toast to never be dismissed automatically.\n *\n * @default 10 (seconds)\n */\n defaultAutoDismissDelay?: number\n\n /**\n * The padding used to separate the toasts from the viewport borders.\n *\n * @default 'large'\n */\n padding?: Space\n\n /**\n * The app wrapped by the provider.\n */\n children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n children,\n padding = 'large',\n defaultAutoDismissDelay = 10 /* seconds */,\n defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n const [toasts, setToasts] = React.useState<ToastsList>([])\n const { mappedRef, animateRemove } = useToastsAnimation()\n\n const removeToast = React.useCallback(\n function onRemoveToast(toastId: string) {\n animateRemove(toastId, () => {\n setToasts((list) => {\n const index = list.findIndex((n) => n.toastId === toastId)\n if (index < 0) return list\n const copy = [...list]\n copy.splice(index, 1)\n return copy\n })\n })\n },\n [animateRemove],\n )\n\n const showToast = React.useCallback(\n function showToast(props: ToastProps) {\n const toastId = generateElementId('toast')\n const newToast: InternalToastEntry = {\n autoDismissDelay: defaultAutoDismissDelay,\n dismissLabel: defaultDismissLabel,\n ...props,\n toastId,\n }\n setToasts((list) => [...list, newToast])\n return () => removeToast(toastId)\n },\n [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n )\n\n return (\n <ToastsContext.Provider value={showToast}>\n {children}\n <Portal>\n {toasts.length === 0 ? null : (\n <Box\n className={styles.stackedToastsView}\n position=\"fixed\"\n width=\"full\"\n paddingX={padding}\n paddingBottom={padding}\n >\n <Stack space=\"medium\">\n {toasts.map(({ toastId, ...props }) => (\n <InternalToast\n key={toastId}\n ref={mappedRef(toastId)}\n toastId={toastId}\n onRemoveToast={removeToast}\n {...props}\n />\n ))}\n </Stack>\n </Box>\n )}\n </Portal>\n </ToastsContext.Provider>\n )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n * Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n * toasts rendered in this way will be removed from view when the context where it is rendered\n * is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n * by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n * `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n * the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n const showToast = useToasts()\n const propsRef = React.useRef<ToastProps>(props)\n React.useEffect(() => {\n const dismissToast = showToast(propsRef.current)\n return dismissToast\n }, [showToast])\n return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","useEffect","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","useToasts","useContext","props","showToast","propsRef","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","_ref","key"],"mappings":"4bAsDMA,EAAgBC,EAAMC,YAA+C,UACvEC,QACIA,EADJC,YAEIA,EAFJC,KAGIA,EAHJC,OAIIA,EAJJC,iBAKIA,EALJC,aAMIA,EANJC,kBAOIA,GAAoB,EAPxBC,QAQIA,EARJC,UASIA,EATJC,cAUIA,GAEJC,GAEA,MAAOC,EAAgBC,GAAqBd,EAAMe,SAASC,QAAQV,IAC7DW,EAAajB,EAAMkB,SAEnBC,EAAenB,EAAMoB,aAAY,WACnCN,GAAkB,KACnB,IAEGO,EAAcrB,EAAMoB,aAAY,WAClCN,GAAkB,GAClBQ,aAAaL,EAAWM,SACxBN,EAAWM,aAAUC,IACtB,IAcH,OAZAxB,EAAMyB,WACF,WACI,GAAKZ,GAAmBP,EAKxB,OAJAW,EAAWM,QAAUG,OAAOC,WAAW,KACnChB,EAAcF,SACdC,GAAAA,KACkB,IAAnBJ,GACIe,IAEX,CAACf,EAAkBI,EAAWC,EAAeF,EAASY,EAAaR,IAInEb,gBAAC4B,eACGhB,IAAKA,EACLV,QAASA,EACTC,YAAaA,EACbC,KAAMA,EACNC,OAAQA,EACRK,UACIF,EACM,WACIE,GAAAA,IACAC,EAAcF,SAElBe,EAEVjB,aAAcA,EAEdsB,aAAcR,EACdS,aAAcX,OAapBY,EAAgB/B,EAAMgC,cAA+B,IAAM,QA0IjE,SAASC,IACL,OAAOjC,EAAMkC,WAAWH,iBAgC5B,SAAeI,GACX,MAAMC,EAAYH,IACZI,EAAWrC,EAAMkB,OAAmBiB,GAK1C,OAJAnC,EAAMyB,UAAU,IACSW,EAAUC,EAASd,SAEzC,CAACa,IACG,6BA/HX,UAAwBE,SACpBA,EADoBC,QAEpBA,EAAU,QAFUC,wBAGpBA,EAA0B,uBAC1BC,EAAsB,UAEtB,MAAOC,EAAQC,GAAa3C,EAAMe,SAAqB,KACjD6B,UAAEA,EAAFC,cAAaA,GAAkBC,uBAE/BC,EAAc/C,EAAMoB,aACtB,SAAuBX,GACnBoC,EAAcpC,EAAS,KACnBkC,EAAWK,IACP,MAAMC,EAAQD,EAAKE,UAAWC,GAAMA,EAAE1C,UAAYA,GAClD,GAAIwC,EAAQ,EAAG,OAAOD,EACtB,MAAMI,EAAO,IAAIJ,GAEjB,OADAI,EAAKC,OAAOJ,EAAO,GACZG,QAInB,CAACP,IAGCT,EAAYpC,EAAMoB,aACpB,SAAmBe,GACf,MAAM1B,EAAU6C,oBAAkB,SAC5BC,mCACFjD,iBAAkBkC,EAClBjC,aAAckC,GACXN,OACH1B,QAAAA,IAGJ,OADAkC,EAAWK,GAAS,IAAIA,EAAMO,IACvB,IAAMR,EAAYtC,KAE7B,CAAC+B,EAAyBC,EAAqBM,IAGnD,OACI/C,gBAAC+B,EAAcyB,UAASC,MAAOrB,GAC1BE,EACDtC,gBAAC0D,cACsB,IAAlBhB,EAAOiB,OAAe,KACnB3D,gBAAC4D,OACGC,UAAWC,UAAOC,kBAClBC,SAAS,QACTC,MAAM,OACNC,SAAU3B,EACV4B,cAAe5B,GAEfvC,gBAACoE,SAAMC,MAAM,UACR3B,EAAO4B,IAAIC,IAAA,IAAC9D,QAAEA,KAAY0B,iCAAf,OACRnC,gBAACD,mBACGyE,IAAK/D,EACLG,IAAKgC,EAAUnC,GACfA,QAASA,EACTE,cAAeoC,GACXZ"}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),o=require("ariakit/tooltip"),n=require("./tooltip.module.css.js");exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function({children:l,content:u,position:i="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:c}){const p=function(r){const n=o.useTooltipState(r),l=function(){const e=t.useRef(),r=t.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return t.useEffect(()=>r,[r]),t.useCallback((function(t,o){return()=>{r(),e.current=setTimeout(t,o)}}),[r])}();return t.useMemo(()=>e.objectSpread2(e.objectSpread2({},n),{},{show:l(()=>n.show(),500),hide:l(()=>n.hide(),100)}),[l,n])}({placement:i,gutter:a}),d=t.Children.only(l);if(!u||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");function f(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&p.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}function m(e){var t;p.hide(),null==d||null==(t=d.props)||null==t.onBlur||t.onBlur(e)}return t.createElement(t.Fragment,null,t.createElement(o.TooltipAnchor,{state:p,ref:d.ref,described:!0},r=>t.cloneElement(d,e.objectSpread2(e.objectSpread2(e.objectSpread2({},r),d.props),{},{onFocus:f,onBlur:m}))),p.open?t.createElement(r.Box,{as:o.Tooltip,state:p,className:[n.default.tooltip,c],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?t.createElement(o.TooltipArrow,null):null,"function"==typeof u?u():u):null)};
|
|
2
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n useTooltipState as useAriakitTooltipState,\n Tooltip as AriakitTooltip,\n TooltipAnchor,\n TooltipArrow,\n} from 'ariakit/tooltip'\nimport { Box } from '../box'\n\nimport type {\n TooltipStateProps as AriakitTooltipStateProps,\n TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n /**\n * The element that triggers the tooltip. Generally a button or link.\n *\n * It should be an interactive element accessible both via mouse and keyboard interactions.\n */\n children: React.ReactNode\n\n /**\n * The content to show in the tooltip.\n *\n * It can be rich content provided via React elements, or string content. It should not include\n * interactive elements inside it. This includes links or buttons.\n *\n * You can provide a function instead of the content itself. In this case, the function should\n * return the desired content. This is useful if the content is expensive to generate. It can\n * also be useful if the content dynamically changes often, so every time you trigger the\n * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n *\n * The trigger element will be associated to this content via `aria-describedby`. This means\n * that the tooltip content will be read by assistive technologies such as screen readers. It\n * will likely read this content right after reading the trigger element label.\n */\n content: React.ReactNode | (() => React.ReactNode)\n\n /**\n * How to place the tooltip relative to its trigger element.\n *\n * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n * the vertical or horizontal axis with the trigger.\n *\n * The position is enforced whenever possible, but tooltips can appear in different positions\n * if the specified one would make the tooltip intersect with the viewport edges.\n *\n * @default 'top'\n */\n position?: PopoverState['placement']\n\n /**\n * The separation (in pixels) between the trigger element and the tooltip.\n * @default 3\n */\n gapSize?: number\n\n /**\n * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n * trigger element.\n * @default false\n */\n withArrow?: boolean\n\n /**\n * An escape hatch, in case you need to provide a custom class name to the tooltip.\n */\n exceptionallySetClassName?: string\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n const tooltipState = useAriakitTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n withArrow = false,\n exceptionallySetClassName,\n}: TooltipProps) {\n const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only(\n children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n )\n\n if (!content || !child) {\n return child\n }\n\n if (typeof child.ref === 'string') {\n throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/ariakit/ariakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n // If focus is not followed by a key up event, does it mean that it's not an intentional\n // keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of ariakit:\n // https://github.com/ariakit/ariakit/issues/750\n function handleKeyUp(event: Event) {\n const eventKey = (event as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n state.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n child?.props?.onFocus?.(event)\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n state.hide()\n child?.props?.onBlur?.(event)\n }\n\n return (\n <>\n <TooltipAnchor state={state} ref={child.ref} described>\n {(anchorProps: TooltipAnchorProps) => {\n // Let child props override anchor props so user can specify attributes like tabIndex\n // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n // by applying the replacement component/element twice\n return React.cloneElement(child, {\n ...anchorProps,\n ...child.props,\n onFocus: handleFocus,\n onBlur: handleBlur,\n })\n }}\n </TooltipAnchor>\n {state.open ? (\n <Box\n as={AriakitTooltip}\n state={state}\n className={[styles.tooltip, exceptionallySetClassName]}\n background=\"toast\"\n borderRadius=\"standard\"\n paddingX=\"small\"\n paddingY=\"xsmall\"\n maxWidth=\"medium\"\n width=\"fitContent\"\n overflow=\"hidden\"\n textAlign=\"center\"\n >\n {withArrow ? <TooltipArrow /> : null}\n {typeof content === 'function' ? content() : content}\n </Box>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","clearTimeouts","current","clearTimeout","fn","setTimeout","useDelay","show","hide","useDelayedTooltipState","placement","gutter","child","only","ref","Error","handleFocus","event","currentTarget","addEventListener","eventKey","key","once","preventDefault","props","onFocus","handleBlur","onBlur","TooltipAnchor","described","anchorProps","open","Box","as","AriakitTooltip","className","styles","tooltip","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"iQAgF0B,uBADA,oBAgB1B,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAkHV,WACI,MAAMC,EAAaC,WAEbC,EAAgBD,eAAkB,WACV,MAAtBD,EAAWG,SACXC,aAAaJ,EAAWG,WAE7B,IAKH,OAFAF,YAAgB,IAAMC,EAAe,CAACA,IAE/BD,eACH,SAAeI,EAAgBN,GAC3B,MAAO,KACHG,IACAF,EAAWG,QAAUG,WAAWD,EAAIN,MAG5C,CAACG,IArISK,GACd,OAAON,UACH,uCACOJ,OACHW,KAAMT,EAAM,IAAMF,EAAaW,OATjB,KAUdC,KAAMV,EAAM,IAAMF,EAAaY,OATjB,OAWlB,CAACV,EAAOF,IAYEa,CAAuB,CAAEC,UAAWpB,EAAUqB,OAAQpB,IAE9DqB,EAAQZ,WAAea,KACzBzB,GAGJ,IAAKC,IAAYuB,EACb,OAAOA,EAGX,GAAyB,iBAAdA,EAAME,IACb,MAAM,IAAIC,MAAM,mEASpB,SAASC,EAAYC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBF,GACjB,MAAMG,EAAYH,EAAwBI,IACzB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD1B,EAAMa,SAG6C,CAAEe,MAAM,IACnEL,EAAMM,uBACNX,YAAAA,EAAOY,gBAAOC,WAAAA,QAAUR,GAG5B,SAASS,EAAWT,SAChBvB,EAAMc,aACNI,YAAAA,EAAOY,gBAAOG,UAAAA,OAASV,GAG3B,OACIjB,gCACIA,gBAAC4B,iBAAclC,MAAOA,EAAOoB,IAAKF,EAAME,IAAKe,cACvCC,GAIS9B,eAAmBY,qDACnBkB,GACAlB,EAAMY,WACTC,QAAST,EACTW,OAAQD,MAInBhC,EAAMqC,KACH/B,gBAACgC,OACGC,GAAIC,UACJxC,MAAOA,EACPyC,UAAW,CAACC,UAAOC,QAAS5C,GAC5B6C,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAETrD,EAAYQ,gBAAC8C,qBAAkB,KACZ,mBAAZzD,EAAyBA,IAAYA,GAEjD"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n const num = uniqueId()\n return `${prefix}-${num}`\n}\n\nexport function useId(providedId?: string): string {\n const ref = React.useRef<string | null>(providedId ?? null)\n if (!ref.current) {\n ref.current = generateElementId('element')\n }\n return ref.current\n}\n"],"names":["uid","generateElementId","prefix","providedId","ref","React","current"],"mappings":"2FAEA,IAAIA,EAAM,WAKMC,EAAkBC,GAE9B,OAAUA,MALHF,uDAQWG,GAClB,MAAMC,EAAMC,eAA4BF,EAAAA,EAAc,MAItD,OAHKC,EAAIE,UACLF,EAAIE,QAAUL,EAAkB,YAE7BG,EAAIE"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n | AtomType\n | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n styles: Record<string, string>,\n property: string,\n value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n if (!value) {\n return null\n }\n\n const classList: Array<string | undefined> = []\n\n if (typeof value === 'string') {\n classList.push(styles[`${property}-${value}`])\n } else {\n if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n }\n\n if (DEBUG && !classList.every(Boolean)) {\n // eslint-disable-next-line no-console\n console.warn('Not all generated class names were found', { property, value, classList })\n }\n\n return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n fromValue: ResponsiveProp<From> | undefined,\n mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n if (!fromValue) {\n return undefined\n }\n\n if (typeof fromValue !== 'object') {\n return mapper(fromValue)\n }\n\n return {\n mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["styles","property","value","classList","push","mobile","tablet","desktop","fromValue","mapper","undefined"],"mappings":"0FAmCA,SACIA,EACAC,EACAC,GAEA,IAAKA,EACD,OAAO,KAGX,MAAMC,EAAuC,GAe7C,MAbqB,iBAAVD,EACPC,EAAUC,KAAKJ,EAAUC,MAAYC,KAEjCA,EAAMG,QAAQF,EAAUC,KAAKJ,EAAUC,MAAYC,EAAMG,SACzDH,EAAMI,QAAQH,EAAUC,KAAKJ,YAAiBC,MAAYC,EAAMI,SAChEJ,EAAMK,SAASJ,EAAUC,KAAKJ,aAAkBC,MAAYC,EAAMK,WAQnEJ,6BAaX,SACIK,EACAC,GAEA,GAAKD,EAIL,MAAyB,iBAAdA,EACAC,EAAOD,GAGX,CACHH,OAAQG,EAAUH,OAASI,EAAOD,EAAUH,aAAUK,EACtDJ,OAAQE,EAAUF,OAASG,EAAOD,EAAUF,aAAUI,EACtDH,QAASC,EAAUD,QAAUE,EAAOD,EAAUD,cAAWG"}
|
|
File without changes
|
package/package.json
CHANGED
package/styles/badge.css
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
|
|
4
4
|
._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
|
|
5
5
|
._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
|
|
6
|
-
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}.
|
|
6
|
+
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}._13c19ddf{font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-strong);font-size:var(--reactist-badge-font-size);text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:3px var(--reactist-spacing-xsmall);color:var(--reactist-badge-tint);background-color:var(--reactist-badge-fill);line-height:calc(var(--reactist-badge-font-size) + 6px)}._1377a171{--reactist-badge-tint:var(--reactist-badge-info-tint);--reactist-badge-fill:var(--reactist-badge-info-fill)}._9e2e287e{--reactist-badge-tint:var(--reactist-badge-positive-tint);--reactist-badge-fill:var(--reactist-badge-positive-fill)}._6b9a3e6f{--reactist-badge-tint:var(--reactist-badge-promote-tint);--reactist-badge-fill:var(--reactist-badge-promote-fill)}._573c013b{--reactist-badge-tint:var(--reactist-badge-attention-tint);--reactist-badge-fill:var(--reactist-badge-attention-fill)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}.
|
|
1
|
+
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}._13c19ddf{font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-strong);font-size:var(--reactist-badge-font-size);text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:3px var(--reactist-spacing-xsmall);color:var(--reactist-badge-tint);background-color:var(--reactist-badge-fill);line-height:calc(var(--reactist-badge-font-size) + 6px)}._1377a171{--reactist-badge-tint:var(--reactist-badge-info-tint);--reactist-badge-fill:var(--reactist-badge-info-fill)}._9e2e287e{--reactist-badge-tint:var(--reactist-badge-positive-tint);--reactist-badge-fill:var(--reactist-badge-positive-fill)}._6b9a3e6f{--reactist-badge-tint:var(--reactist-badge-promote-tint);--reactist-badge-fill:var(--reactist-badge-promote-fill)}._573c013b{--reactist-badge-tint:var(--reactist-badge-attention-tint);--reactist-badge-fill:var(--reactist-badge-attention-fill)}
|
package/styles/menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid
|
|
1
|
+
.reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid var(--reactist-divider-secondary);border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] .reactist_menugroup__label{color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true]{color:var(--reactist-content-secondary);pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu]{margin-top:-5px}.reactist_menulist[role=menu] hr{border:none;height:1px;background-color:var(--reactist-bg-selected);margin:4px 0}
|
package/styles/reactist.css
CHANGED
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
._21dbfa84{font-family:var(--reactist-font-family)}._43588660:after,._21dbfa84 textarea{outline:none;border:none;padding:0;box-sizing:border-box;font:inherit;width:100%;resize:vertical}._21dbfa84:not(.f081b428) ._43588660:after,._21dbfa84:not(.f081b428) textarea{border-radius:var(--reactist-border-radius-small);padding:var(--reactist-spacing-small)}._21dbfa84.f081b428{border-radius:var(--reactist-border-radius-large)}._21dbfa84.f081b428,._21dbfa84:not(.f081b428) ._43588660:after,._21dbfa84:not(.f081b428) textarea{border:1px solid var(--reactist-divider-secondary)}._21dbfa84.f081b428:focus-within,._21dbfa84:not(.f081b428) textarea:focus{border-color:var(--reactist-divider-primary)}._21dbfa84.f081b428.a862f0e5,._21dbfa84.a862f0e5:not(.f081b428) ._43588660:after,._21dbfa84.a862f0e5:not(.f081b428) textarea{border-color:var(--reactist-alert-tone-critical-border)!important}._43588660{display:grid}._43588660:after{content:attr(data-replicated-value) " ";white-space:pre-wrap;visibility:hidden}._43588660:after,._43588660>textarea{grid-area:1/1/2/2}textarea._46360b15{resize:none;overflow:hidden}
|
|
26
26
|
.fb09cd05{height:var(--reactist-input-wrapper-height)}.fb09cd05:not(.f65f40dd){--reactist-input-wrapper-height:32px;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);overflow:clip}.fb09cd05.f65f40dd{--reactist-input-wrapper-height:24px}.fb09cd05.f65f40dd input{padding:0;height:var(--reactist-input-wrapper-height)}.fb09cd05:not(.f65f40dd):focus-within{border-color:var(--reactist-divider-primary)}.fb09cd05:not(.f65f40dd)._29118bf0{border-color:var(--reactist-alert-tone-critical-border)!important}.fb09cd05 input{color:var(--reactist-content-primary);flex:1;outline:none;box-sizing:border-box;width:100%;background:transparent;border:none;--tmp-desired-height:30px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}.fb09cd05:not(.f65f40dd) input{padding:var(--tmp-vertical-padding) 10px}.a40eb111{cursor:text}
|
|
27
27
|
:root{--reactist-avatar-size-xxsmall:16px;--reactist-avatar-size-xsmall:20px;--reactist-avatar-size-small:30px;--reactist-avatar-size-medium:32px;--reactist-avatar-size-large:34px;--reactist-avatar-size-xlarge:48px;--reactist-avatar-size-xxlarge:70px;--reactist-avatar-size-xxxlarge:100px;--reactist-avatar-size:var(--reactist-avatar-size-large)}._38a1be89{flex-shrink:0;background-position:50%;color:#fff;text-align:center;border-radius:50%;width:var(--reactist-avatar-size);height:var(--reactist-avatar-size);line-height:var(--reactist-avatar-size);background-size:var(--reactist-avatar-size);font-size:calc(var(--reactist-avatar-size)/2)}.d32e92ae{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._0667d719{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}.cf529fcf{--reactist-avatar-size:var(--reactist-avatar-size-small)}._6e268eab{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.d64c62cf{--reactist-avatar-size:var(--reactist-avatar-size-large)}._44fb77de{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._01f85e0e{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._41a5fe19{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}@media (min-width:768px){._6ab1577d{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}.b52a4963{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._714a8419{--reactist-avatar-size:var(--reactist-avatar-size-small)}._81cd4d51{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.bf0a4edb{--reactist-avatar-size:var(--reactist-avatar-size-large)}.e4f0dabd{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._67ea065d{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._2af7f76f{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}@media (min-width:992px){._759081dc{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._8290d1c1{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._48ea172d{--reactist-avatar-size:var(--reactist-avatar-size-small)}._758f6641{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.f9ada088{--reactist-avatar-size:var(--reactist-avatar-size-large)}.d3bb7470{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._9a312ee3{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}.a1d30c23{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}
|
|
28
|
-
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}.
|
|
28
|
+
:root{--reactist-badge-font-size:10px;--reactist-badge-info-tint:#666;--reactist-badge-info-fill:#eee;--reactist-badge-positive-tint:#058527;--reactist-badge-positive-fill:#e0f0e3;--reactist-badge-promote-tint:#8f4700;--reactist-badge-promote-fill:#faead1;--reactist-badge-attention-tint:#cf473a;--reactist-badge-attention-fill:#f9e3e2}._13c19ddf{font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-strong);font-size:var(--reactist-badge-font-size);text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:3px var(--reactist-spacing-xsmall);color:var(--reactist-badge-tint);background-color:var(--reactist-badge-fill);line-height:calc(var(--reactist-badge-font-size) + 6px)}._1377a171{--reactist-badge-tint:var(--reactist-badge-info-tint);--reactist-badge-fill:var(--reactist-badge-info-fill)}._9e2e287e{--reactist-badge-tint:var(--reactist-badge-positive-tint);--reactist-badge-fill:var(--reactist-badge-positive-fill)}._6b9a3e6f{--reactist-badge-tint:var(--reactist-badge-promote-tint);--reactist-badge-fill:var(--reactist-badge-promote-fill)}._573c013b{--reactist-badge-tint:var(--reactist-badge-attention-tint);--reactist-badge-fill:var(--reactist-badge-attention-fill)}
|
|
29
29
|
@-webkit-keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}@keyframes _20c07ee6{0%{opacity:0}to{opacity:1}}:root{--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._8aa86dd3{isolation:isolate;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_20c07ee6 .2s;animation:_20c07ee6 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}._8aa86dd3>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}._8aa86dd3._713bc08f>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}._8aa86dd3._713bc08f>[data-focus-lock-disabled] ._45139719{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}._45139719{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out,box-shadow .5s;max-width:100%}.ec8619a2 ._45139719{width:100%}._86a1d5a4 ._45139719{width:768px}._11d61de3 ._45139719{width:580px}.aee19643 ._45139719{width:450px}@media (min-width:992px){.fe449c81 ._45139719{width:960px}}@media (min-width:1200px){.fe449c81 ._45139719{width:1060px}}@media (max-width:1000px){.fe449c81 ._45139719{width:768px}}@media (max-width:580px){._8aa86dd3:not(.aee19643) ._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f:not(.aee19643)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f:not(.aee19643) ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._45139719{width:100%!important;max-height:none}._8aa86dd3._61ffb38f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._8aa86dd3._61ffb38f ._45139719{border-bottom-left-radius:0;border-bottom-right-radius:0}}._49ffdac0{display:flex;align-items:center;height:32px}.ee92ccb3{min-height:32px}
|
|
30
30
|
:root{--reactist-tab-themed-background:var(--reactist-bg-default);--reactist-tab-themed-foreground:#006f85;--reactist-tab-themed-unselected:#006f85;--reactist-tab-themed-track:#f2f6f7;--reactist-tab-themed-border:var(--reactist-divider-secondary);--reactist-tab-neutral-background:var(--reactist-bg-default);--reactist-tab-neutral-foreground:var(--reactist-content-primary);--reactist-tab-neutral-unselected:var(--reactist-content-tertiary);--reactist-tab-neutral-track:var(--reactist-framework-fill-selected);--reactist-tab-neutral-border:var(--reactist-divider-primary);--reactist-tab-track-border-width:2px;--reactist-tab-border-radius:20px;--reactist-tab-border-width:1px;--reactist-tab-height:30px}.e96bf360{box-sizing:border-box;padding:0 var(--reactist-spacing-medium);border:none;background:none;cursor:pointer;font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-medium);line-height:var(--reactist-tab-height);z-index:1;text-decoration:none;border:var(--reactist-tab-border-width) solid transparent;border-radius:var(--reactist-tab-border-radius)}._430e252d{position:absolute;top:calc(-1*var(--reactist-tab-track-border-width));right:calc(-1*var(--reactist-tab-track-border-width));bottom:calc(-1*var(--reactist-tab-track-border-width));left:calc(-1*var(--reactist-tab-track-border-width));border-radius:var(--reactist-tab-border-radius);border-width:var(--reactist-tab-track-border-width);border-style:solid}.e96bf360,.f631ccbe{color:var(--reactist-tab-neutral-unselected)}.f631ccbe[aria-selected=true],.e96bf360[aria-selected=true]{background-color:var(--reactist-tab-neutral-background);color:var(--reactist-tab-neutral-foreground);border-color:var(--reactist-tab-neutral-border)}._6ba96acc{color:var(--reactist-tab-themed-unselected)}._6ba96acc[aria-selected=true]{background-color:var(--reactist-tab-themed-background);color:var(--reactist-tab-themed-foreground);border-color:var(--reactist-tab-themed-border)}._430e252d,.ef4cd8d3{background:var(--reactist-tab-neutral-track);border-color:var(--reactist-tab-neutral-track)}._344b3b10{background:var(--reactist-tab-themed-track);border-color:var(--reactist-tab-themed-track)}
|
|
31
31
|
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
32
|
-
.reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid
|
|
32
|
+
.reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid var(--reactist-divider-secondary);border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] .reactist_menugroup__label{color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true]{color:var(--reactist-content-secondary);pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu]{margin-top:-5px}.reactist_menulist[role=menu] hr{border:none;height:1px;background-color:var(--reactist-bg-selected);margin:4px 0}
|
|
33
33
|
.reactist_color_picker .color_trigger{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:24px;width:24px;border-radius:50%;cursor:pointer;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAxLjcwNy43MDhMMTIuNjA0IDE0YTEgMSAwIDAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwMS43MDctLjcwOHoiLz48L3N2Zz4=);background-position:50%;background-repeat:no-repeat;background-size:24px}.reactist_color_picker .color_trigger--inner_ring{background-color:rgba(0,0,0,.1);width:14px;height:14px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_trigger:hover .color_trigger--inner_ring{visibility:visible}.reactist_color_picker .color_trigger.small{height:18px;width:18px}.reactist_color_picker .color_trigger.small .color_trigger--inner_ring{width:12px;height:12px}.reactist_color_picker .color_item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin:4px;width:32px;height:32px;border-radius:50%;cursor:pointer}.reactist_color_picker .color_item--inner_ring{background-color:transparent;border:2px solid #fff;height:24px;width:24px;border-radius:50%;visibility:hidden}.reactist_color_picker .color_item:hover .color_item--inner_ring{visibility:visible}.reactist_color_picker .color_item.active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMTEuODYzLjQ5OWwtNC40NyA3Ljc0NGEuNDk5LjQ5OSAwIDAxLS43MzUuMTQ3LjUwMi41MDIgMCAwMS0uMDYxLS4wNDhsLTMuMzY2LTMuMTRhLjQ5OS40OTkgMCAxMS42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);background-position:50%;background-repeat:no-repeat}.reactist_color_picker .color_options{padding:6px;display:flex;flex-wrap:wrap;width:164px;position:relative}.reactist_color_picker .with_arrow:after,.reactist_color_picker .with_arrow:before{visibility:hidden}
|
|
34
34
|
.reactist_progress_bar{height:4px;border-radius:3px;background-color:#ececec;width:100%}.reactist_progress_bar .inner{height:inherit;border-radius:4px;background-color:#70bc1c}
|
|
35
35
|
.reactist_time{font-size:.75rem;color:grey;font-weight:400;line-height:1.8}.reactist_tooltip .reactist_time:hover{text-decoration:underline}
|
|
@@ -37,5 +37,4 @@
|
|
|
37
37
|
.reactist_dropdown .trigger{cursor:pointer;display:block}.reactist_dropdown .body{border-radius:3px;border:1px solid #dcdcdc;overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,.08);z-index:1;background-color:#fff}.reactist_dropdown hr{border:none;height:1px;background-color:#dcdcdc;margin:0 5px}.reactist_dropdown .with_arrow:after,.reactist_dropdown .with_arrow:before{z-index:1;content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:6px;right:14px}.reactist_dropdown .with_arrow:after{top:-11px;border-color:transparent transparent #fff}.reactist_dropdown .with_arrow:before{top:-12px;border-color:transparent transparent #dcdcdc}.reactist_dropdown .with_arrow.top:after{top:-1px;border-color:#fff transparent transparent}.reactist_dropdown .with_arrow.top:before{top:-1px;right:13px;border-width:7px;border-color:#dcdcdc transparent transparent}
|
|
38
38
|
.reactist_input{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;width:100%;display:block;outline:none;border:1px solid #dcdcdc;border-radius:3px;padding:5px 10px;margin:0}.reactist_input:focus{border-color:#3f82ef}.reactist_input:disabled{background-color:#fafafa}
|
|
39
39
|
.reactist_select{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;background-color:#fff;border:1px solid #dcdcdc;border-radius:3px;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0;padding:5px 25px 5px 10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSAzbDMtMyAzIDNNMSA3bDMgMyAzLTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuOCIvPjwvc3ZnPg==");background-position:calc(100% - 11px) 50%;background-repeat:no-repeat;background-size:8px 11px}.reactist_select.disabled{background-color:#fafafa}.reactist_select:focus{outline:none;border:1px solid #3f82ef}
|
|
40
|
-
.reactist-notification{display:flex;position:relative;font-size:.875rem}.reactist-notification:not(.reactist-notification--with-button){box-sizing:border-box;justify-content:space-between;align-items:flex-start;padding:10px 14px;border:1px solid #dcdcdc;border-radius:5px;box-shadow:0 2px 4px 0 rgba(0,0,0,.08);background:#fff}.reactist-notification__button,.reactist-notification__close-button{border:0;padding:0;margin:0;cursor:pointer;transition-property:background-color;transition-duration:.3s;background:#fff}.reactist-notification__button:hover,.reactist-notification__close-button:hover{background:#ececec}.reactist-notification__button{box-sizing:border-box;justify-content:space-between;align-items:flex-start;padding:10px 14px;border:1px solid #dcdcdc;border-radius:5px;box-shadow:0 2px 4px 0 rgba(0,0,0,.08);background:#fff;display:flex;flex:1}.reactist-notification__button:hover+.reactist-notification__close-button{background:#ececec}.reactist-notification__close-button{position:absolute;top:8px;right:8px;border-radius:5px}.reactist-notification__close-button>*{display:block}.reactist-notification__icon-content-group{display:flex;flex:1}.reactist-notification--with-close-button .reactist-notification__icon-content-group{padding-right:24px}.reactist-notification__content{display:flex;flex-direction:column;align-items:flex-start}.reactist-notification__title{margin:0 0 3px;font-size:.875rem;text-align:left}.reactist-notification__subtitle{font-size:.81rem;margin:0}
|
|
41
40
|
@-webkit-keyframes f7a1b219{0%{opacity:0}to{opacity:1}}@keyframes f7a1b219{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}.ad18b0a0{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:f7a1b219 .2s;animation:f7a1b219 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay]._8ed9bb5c>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay]._8ed9bb5c>[data-focus-lock-disabled] .f67e892e{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}.f67e892e{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}._4139421e .f67e892e{width:100%}._649eb5fe .f67e892e{width:768px}._5323e676 .f67e892e{width:580px}._56ca7ae6 .f67e892e{width:450px}@media (min-width:992px){.a7be0fce .f67e892e{width:960px}}@media (min-width:1200px){.a7be0fce .f67e892e{width:1060px}}@media (max-width:1000px){.a7be0fce .f67e892e{width:768px}}@media (max-width:580px){._88a7a680:not(._56ca7ae6) .f67e892e{width:100%!important;max-height:none}._88a7a680.b29456b8:not(._56ca7ae6)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._88a7a680.b29456b8:not(._56ca7ae6) .f67e892e{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.f67e892e{width:100%!important;max-height:none}._88a7a680.b29456b8>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}._88a7a680.b29456b8 .f67e892e{border-bottom-left-radius:0;border-bottom-right-radius:0}}._09ef1f4f{display:flex;align-items:center;height:32px}._0e5b530a{min-height:32px}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { createElement, Fragment } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import CloseIcon from '../icons/CloseIcon.svg.js';
|
|
5
|
-
|
|
6
|
-
const _excluded = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
|
|
7
|
-
|
|
8
|
-
function DeprecatedNotification(_ref) {
|
|
9
|
-
let {
|
|
10
|
-
id,
|
|
11
|
-
icon,
|
|
12
|
-
title,
|
|
13
|
-
subtitle,
|
|
14
|
-
children,
|
|
15
|
-
customCloseButton,
|
|
16
|
-
onClick,
|
|
17
|
-
onClose,
|
|
18
|
-
closeAltText = 'Close',
|
|
19
|
-
className,
|
|
20
|
-
'aria-live': ariaLive = 'polite'
|
|
21
|
-
} = _ref,
|
|
22
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
|
|
24
|
-
const titleId = title ? id + "-title" : null;
|
|
25
|
-
const titleIdAttribute = titleId ? {
|
|
26
|
-
id: titleId
|
|
27
|
-
} : null;
|
|
28
|
-
const subtitleId = subtitle ? id + "-subtitle" : null;
|
|
29
|
-
const subtitleIdAttribute = subtitleId ? {
|
|
30
|
-
id: subtitleId
|
|
31
|
-
} : null;
|
|
32
|
-
const contentId = children ? id + "-content" : null;
|
|
33
|
-
const contentIdAttribute = children ? {
|
|
34
|
-
id: id + "-content"
|
|
35
|
-
} : null;
|
|
36
|
-
const ariaLabelledBy = contentId ? {
|
|
37
|
-
'aria-labelledby': contentId
|
|
38
|
-
} : titleId ? {
|
|
39
|
-
'aria-labelledby': titleId
|
|
40
|
-
} : null;
|
|
41
|
-
const ariaDescribedBy = subtitleId && !children ? {
|
|
42
|
-
'aria-describedby': subtitleId
|
|
43
|
-
} : null;
|
|
44
|
-
const notificationContent = /*#__PURE__*/createElement("div", _objectSpread2({
|
|
45
|
-
className: "reactist-notification__content"
|
|
46
|
-
}, contentIdAttribute), children != null ? children : /*#__PURE__*/createElement(Fragment, null, title ? /*#__PURE__*/createElement("h3", _objectSpread2({
|
|
47
|
-
className: "reactist-notification__title"
|
|
48
|
-
}, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/createElement("p", _objectSpread2({
|
|
49
|
-
className: "reactist-notification__subtitle"
|
|
50
|
-
}, subtitleIdAttribute), subtitle) : null));
|
|
51
|
-
const notificationBody = /*#__PURE__*/createElement("div", {
|
|
52
|
-
className: "reactist-notification__icon-content-group"
|
|
53
|
-
}, icon != null ? icon : null, notificationContent);
|
|
54
|
-
return /*#__PURE__*/createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
|
|
55
|
-
id: id,
|
|
56
|
-
role: "alert",
|
|
57
|
-
className: classNames('reactist-notification', className, {
|
|
58
|
-
'reactist-notification--with-button': Boolean(onClick),
|
|
59
|
-
'reactist-notification--with-close-button': Boolean(onClose)
|
|
60
|
-
}),
|
|
61
|
-
"aria-live": ariaLive
|
|
62
|
-
}, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/createElement("button", {
|
|
63
|
-
className: "reactist-notification__button",
|
|
64
|
-
onClick: onClick
|
|
65
|
-
}, notificationBody) : notificationBody, onClose ? /*#__PURE__*/createElement("button", {
|
|
66
|
-
className: "reactist-notification__close-button",
|
|
67
|
-
onClick: onClose,
|
|
68
|
-
"aria-label": closeAltText
|
|
69
|
-
}, customCloseButton != null ? customCloseButton : /*#__PURE__*/createElement(CloseIcon, null)) : null);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export { DeprecatedNotification };
|
|
73
|
-
//# sourceMappingURL=deprecated-notification.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"deprecated-notification.js","sources":["../../../src/components/deprecated-notification/deprecated-notification.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './deprecated-notification.less'\n\ntype DeprecatedNotificationProps = {\n id: string\n icon?: React.ReactNode\n title?: React.ReactNode\n subtitle?: React.ReactNode\n children?: React.ReactNode\n customCloseButton?: React.ReactNode\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n closeAltText?: string\n className?: string\n /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n 'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction DeprecatedNotification({\n id,\n icon,\n title,\n subtitle,\n children,\n customCloseButton,\n onClick,\n onClose,\n closeAltText = 'Close',\n className,\n 'aria-live': ariaLive = 'polite',\n ...rest\n}: DeprecatedNotificationProps) {\n const titleId = title ? `${id}-title` : null\n const titleIdAttribute = titleId ? { id: titleId } : null\n const subtitleId = subtitle ? `${id}-subtitle` : null\n const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n const contentId = children ? `${id}-content` : null\n const contentIdAttribute = children ? { id: `${id}-content` } : null\n const ariaLabelledBy = contentId\n ? { 'aria-labelledby': contentId }\n : titleId\n ? { 'aria-labelledby': titleId }\n : null\n const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n const notificationContent = (\n <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n {children ?? (\n <>\n {title ? (\n <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n {title}\n </h3>\n ) : null}\n {subtitle ? (\n <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n {subtitle}\n </p>\n ) : null}\n </>\n )}\n </div>\n )\n const notificationBody = (\n <div className=\"reactist-notification__icon-content-group\">\n {icon ?? null}\n {notificationContent}\n </div>\n )\n\n return (\n <div\n id={id}\n role=\"alert\"\n className={classNames('reactist-notification', className, {\n 'reactist-notification--with-button': Boolean(onClick),\n 'reactist-notification--with-close-button': Boolean(onClose),\n })}\n aria-live={ariaLive}\n {...ariaLabelledBy}\n {...ariaDescribedBy}\n {...rest}\n >\n {onClick ? (\n <button className=\"reactist-notification__button\" onClick={onClick}>\n {notificationBody}\n </button>\n ) : (\n notificationBody\n )}\n\n {onClose ? (\n <button\n className=\"reactist-notification__close-button\"\n onClick={onClose}\n aria-label={closeAltText}\n >\n {customCloseButton ?? <CloseIcon />}\n </button>\n ) : null}\n </div>\n )\n}\n\nexport { DeprecatedNotification }\n"],"names":["DeprecatedNotification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;;;AAoBA,SAASA,sBAAT;MAAgC;IAC5BC,EAD4B;IAE5BC,IAF4B;IAG5BC,KAH4B;IAI5BC,QAJ4B;IAK5BC,QAL4B;IAM5BC,iBAN4B;IAO5BC,OAP4B;IAQ5BC,OAR4B;IAS5BC,YAAY,GAAG,OATa;IAU5BC,SAV4B;IAW5B,aAAaC,QAAQ,GAAG;;MACrBC;;EAEH,MAAMC,OAAO,GAAGV,KAAK,GAAMF,EAAN,cAAmB,IAAxC;EACA,MAAMa,gBAAgB,GAAGD,OAAO,GAAG;IAAEZ,EAAE,EAAEY;GAAT,GAAqB,IAArD;EACA,MAAME,UAAU,GAAGX,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;EACA,MAAMe,mBAAmB,GAAGD,UAAU,GAAG;IAAEd,EAAE,EAAEc;GAAT,GAAwB,IAA9D;EACA,MAAME,SAAS,GAAGZ,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;EACA,MAAMiB,kBAAkB,GAAGb,QAAQ,GAAG;IAAEJ,EAAE,EAAKA,EAAL;GAAP,GAA6B,IAAhE;EACA,MAAMkB,cAAc,GAAGF,SAAS,GAC1B;IAAE,mBAAmBA;GADK,GAE1BJ,OAAO,GACP;IAAE,mBAAmBA;GADd,GAEP,IAJN;EAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACV,QAAf,GAA0B;IAAE,oBAAoBU;GAAhD,GAA+D,IAAvF;EAEA,MAAMM,mBAAmB,gBACrBC,aAAA,MAAA;IAAKZ,SAAS,EAAC;KAAqCQ,kBAApD,GACKb,QADL,WACKA,QADL,gBAEQiB,aAAA,SAAA,MAAA,EACKnB,KAAK,gBACFmB,aAAA,KAAA;IAAIZ,SAAS,EAAC;KAAmCI,gBAAjD,GACKX,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLkB,aAAA,IAAA;IAAGZ,SAAS,EAAC;KAAsCM,mBAAnD,GACKZ,QADL,CADK,GAIL,IAVR,CAFR,CADJ;EAkBA,MAAMmB,gBAAgB,gBAClBD,aAAA,MAAA;IAAKZ,SAAS,EAAC;GAAf,EACKR,IADL,WACKA,IADL,GACa,IADb,EAEKmB,mBAFL,CADJ;EAOA,oBACIC,aAAA,MAAA;IACIrB,EAAE,EAAEA,EADR;IAEIuB,IAAI,EAAC,OAFT;IAGId,SAAS,EAAEe,UAAU,CAAC,uBAAD,EAA0Bf,SAA1B,EAAqC;MACtD,sCAAsCgB,OAAO,CAACnB,OAAD,CADS;MAEtD,4CAA4CmB,OAAO,CAAClB,OAAD;KAFlC,CAHzB;iBAOeG;KACPQ,cARR,GASQC,eATR,GAUQR,IAVR,GAYKL,OAAO,gBACJe,aAAA,SAAA;IAAQZ,SAAS,EAAC;IAAgCH,OAAO,EAAEA;GAA3D,EACKgB,gBADL,CADI,GAKJA,gBAjBR,EAoBKf,OAAO,gBACJc,aAAA,SAAA;IACIZ,SAAS,EAAC;IACVH,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,WAKKA,iBALL,gBAK0BgB,aAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA5BR,CADJ;AAgCH;;;;"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createElement } from 'react';
|
|
2
|
-
|
|
3
|
-
const CloseIcon = () => /*#__PURE__*/createElement("svg", {
|
|
4
|
-
width: "24",
|
|
5
|
-
height: "24",
|
|
6
|
-
viewBox: "0 0 24 24"
|
|
7
|
-
}, /*#__PURE__*/createElement("path", {
|
|
8
|
-
fill: "gray",
|
|
9
|
-
fillRule: "evenodd",
|
|
10
|
-
d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
|
|
11
|
-
}));
|
|
12
|
-
|
|
13
|
-
export default CloseIcon;
|
|
14
|
-
//# sourceMappingURL=CloseIcon.svg.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CloseIcon.svg.js","sources":["../../../src/components/icons/CloseIcon.svg.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst CloseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path\n fill=\"gray\"\n fillRule=\"evenodd\"\n d=\"M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z\"\n />\n </svg>\n)\n\nexport default CloseIcon\n"],"names":["CloseIcon","React","width","height","viewBox","fill","fillRule","d"],"mappings":";;AAEA,MAAMA,SAAS,GAAG,mBACdC,aAAA,MAAA;EAAKC,KAAK,EAAC;EAAKC,MAAM,EAAC;EAAKC,OAAO,EAAC;CAApC,eACIH,aAAA,OAAA;EACII,IAAI,EAAC;EACLC,QAAQ,EAAC;EACTC,CAAC,EAAC;CAHN,CADJ,CADJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n closeLabel: string\n onClose: () => void\n}>\n\ntype AlertProps = {\n id?: string\n children: React.ReactNode\n tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n return (\n <Box\n id={id}\n role=\"alert\"\n aria-live=\"polite\"\n borderRadius=\"standard\"\n className={[styles.container, getClassNames(styles, 'tone', tone)]}\n >\n <Columns space=\"small\" alignY=\"top\">\n <Column width=\"content\">\n <AlertIcon tone={tone} />\n </Column>\n <Column>\n <Box\n paddingY=\"xsmall\"\n paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n >\n {children}\n </Box>\n </Column>\n {onClose != null && closeLabel != null ? (\n <Column width=\"content\">\n <Button\n variant=\"quaternary\"\n size=\"small\"\n onClick={onClose}\n aria-label={closeLabel}\n icon={<CloseIcon />}\n style={{\n // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n '--reactist-btn-hover-fill': 'transparent',\n }}\n />\n </Column>\n ) : null}\n </Columns>\n </Box>\n )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["Alert","id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style"],"mappings":";;;;;;;;;AA0BA,SAASA,KAAT,CAAe;EAAEC,EAAF;EAAMC,QAAN;EAAgBC,IAAhB;EAAsBC,UAAtB;EAAkCC;AAAlC,CAAf;EACI,oBACIC,aAAA,CAACC,GAAD;IACIN,EAAE,EAAEA;IACJO,IAAI,EAAC;iBACK;IACVC,YAAY,EAAC;IACbC,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBR,IAAjB,CAAhC;GALf,eAOIG,aAAA,CAACQ,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACIV,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACa,SAAD;IAAWhB,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIG,aAAA,CAACW,MAAD,MAAA,eACIX,aAAA,CAACC,GAAD;IACIa,QAAQ,EAAC;IACTC,YAAY,EAAEhB,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,GAAwCkB,SAAxC,GAAoD;GAFtE,EAIKpB,QAJL,CADJ,CAJJ,EAYKG,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,gBACGE,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACiB,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAErB;kBACGD;IACZuB,IAAI,eAAErB,aAAA,CAACsB,SAAD,MAAA;IACNC,KAAK,EAAE;;MAEH,6BAA6B;;GARrC,CADJ,CADH,GAcG,IA1BR,CAPJ,CADJ;AAsCH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":["../../../src/new-components/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n '#fcc652',\n '#e9952c',\n '#e16b2d',\n '#d84b40',\n '#e8435a',\n '#e5198a',\n '#ad3889',\n '#86389c',\n '#a8a8a8',\n '#98be2f',\n '#5d9d50',\n '#5f9f85',\n '#5bbcb6',\n '#32a3bf',\n '#2bafeb',\n '#2d88c3',\n '#3863cc',\n '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n /** @deprecated Please use `exceptionallySetClassName` */\n className?: string\n exceptionallySetClassName?: string\n /** @deprecated */\n colorList?: string[]\n size?: ResponsiveProp<AvatarSize>\n avatarUrl?: string\n user: { name?: string; email: string }\n}\n\nfunction Avatar({\n user,\n avatarUrl,\n size = 'l',\n className,\n colorList = AVATAR_COLORS,\n exceptionallySetClassName,\n ...props\n}: Props) {\n const userInitials = getInitials(user.name) || getInitials(user.email)\n const avatarSize = size ? size : 'l'\n\n const style = avatarUrl\n ? {\n backgroundImage: `url(${avatarUrl})`,\n textIndent: '-9999px', // hide the initials\n }\n : {\n backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n }\n\n const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n return (\n <Box\n className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n style={style}\n {...props}\n >\n {userInitials}\n </Box>\n )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,aAAa,GAAG,CAClB,SADkB,EAElB,SAFkB,EAGlB,SAHkB,EAIlB,SAJkB,EAKlB,SALkB,EAMlB,SANkB,EAOlB,SAPkB,EAQlB,SARkB,EASlB,SATkB,EAUlB,SAVkB,EAWlB,SAXkB,EAYlB,SAZkB,EAalB,SAbkB,EAclB,SAdkB,EAelB,SAfkB,EAgBlB,SAhBkB,EAiBlB,SAjBkB,EAkBlB,SAlBkB,CAAtB;;AAkCA,SAASC,MAAT;MAAgB;IACZC,IADY;IAEZC,SAFY;IAGZC,IAAI,GAAG,GAHK;IAIZC,SAJY;IAKZC,SAAS,GAAGN,aALA;IAMZO;;MACGC;;EAEH,MAAMC,YAAY,GAAGC,WAAW,CAACR,IAAI,CAACS,IAAN,CAAX,IAA0BD,WAAW,CAACR,IAAI,CAACU,KAAN,CAA1D;EACA,MAAMC,UAAU,GAAGT,IAAI,GAAGA,IAAH,GAAU,GAAjC;EAEA,MAAMU,KAAK,GAAGX,SAAS,GACjB;IACIY,eAAe,WAASZ,SAAT,MADnB;IAEIa,UAAU,EAAE,SAFhB;;GADiB,GAKjB;IACIC,eAAe,EAAEX,SAAS,CAACY,YAAY,CAAChB,IAAI,CAACU,KAAN,EAAaN,SAAS,CAACa,MAAvB,CAAb;GANpC;EASA,MAAMC,aAAa,GAAGC,aAAa,CAACC,MAAD,EAAS,MAAT,EAAiBT,UAAjB,CAAnC;EAEA,oBACIU,aAAA,CAACC,GAAD;IACInB,SAAS,EAAE,CAACA,SAAD,EAAYiB,MAAM,CAACG,MAAnB,EAA2BL,aAA3B,EAA0Cb,yBAA1C,CADf;IAEIO,KAAK,EAAEA;KACHN,KAHR,GAKKC,YALL,CADJ;AASH;;AACDR,MAAM,CAACyB,WAAP,GAAqB,QAArB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/new-components/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n if (!name) {\n return ''\n }\n\n const seed = name.trim().split(' ')\n const firstInitial = seed[0]\n const lastInitial = seed[seed.length - 1]\n\n let initials = firstInitial?.[0]\n if (\n firstInitial != null &&\n lastInitial != null &&\n initials != null &&\n // Better readable this way.\n // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n firstInitial[0] !== lastInitial[0]\n ) {\n initials += lastInitial[0]\n }\n return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n const seed = email.split('@')[0]\n const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["getInitials","name","seed","trim","split","firstInitial","lastInitial","length","initials","toUpperCase","emailToIndex","email","maxIndex","hash","charCodeAt"],"mappings":"AAAA,SAASA,WAAT,CAAqBC,IAArB;;;EACI,IAAI,CAACA,IAAL,EAAW;IACP,OAAO,EAAP;;;EAGJ,MAAMC,IAAI,GAAGD,IAAI,CAACE,IAAL,GAAYC,KAAZ,CAAkB,GAAlB,CAAb;EACA,MAAMC,YAAY,GAAGH,IAAI,CAAC,CAAD,CAAzB;EACA,MAAMI,WAAW,GAAGJ,IAAI,CAACA,IAAI,CAACK,MAAL,GAAc,CAAf,CAAxB;EAEA,IAAIC,QAAQ,GAAGH,YAAH,oBAAGA,YAAY,CAAG,CAAH,CAA3B;;EACA,IACIA,YAAY,IAAI,IAAhB,IACAC,WAAW,IAAI,IADf,IAEAE,QAAQ,IAAI,IAFZ;;EAKAH,YAAY,CAAC,CAAD,CAAZ,KAAoBC,WAAW,CAAC,CAAD,CANnC,EAOE;IACEE,QAAQ,IAAIF,WAAW,CAAC,CAAD,CAAvB;;;EAEJ,oBAAOE,QAAP,qBAAO,UAAUC,WAAV,EAAP;AACH;;AAED,SAASC,YAAT,CAAsBC,KAAtB,EAAqCC,QAArC;EACI,MAAMV,IAAI,GAAGS,KAAK,CAACP,KAAN,CAAY,GAAZ,EAAiB,CAAjB,CAAb;EACA,MAAMS,IAAI,GAAGX,IAAI,GAAGA,IAAI,CAACY,UAAL,CAAgB,CAAhB,IAAqBZ,IAAI,CAACY,UAAL,CAAgBZ,IAAI,CAACK,MAAL,GAAc,CAA9B,CAArB,IAAyD,CAA5D,GAAgE,CAAjF;EACA,OAAOM,IAAI,GAAGD,QAAd;AACH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sources":["../../../src/new-components/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention'\n\ntype BadgeProps = {\n /**\n * The label to show inside the badge element.\n */\n label: string\n /**\n * The tone of the badge.\n */\n tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n return (\n <Box\n {...props}\n as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n display=\"inline\"\n className={[styles.badge, styles[`badge-${tone}`]]}\n >\n {label}\n </Box>\n )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["Badge","tone","label","props","React","Box","as","display","className","styles","badge"],"mappings":";;;;;;;AAmBA,SAASA,KAAT;MAAe;IAAEC,IAAF;IAAQC;;MAAUC;;EAC7B,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,EAAE,EAAC,MAFP;;IAGIC,OAAO,EAAC,QAHZ;IAIIC,SAAS,EAAE,CAACC,MAAM,CAACC,KAAR,EAAeD,MAAM,YAAUR,IAAV,CAArB;MAEVC,KANL,CADJ;AAUH;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","sources":["../../../src/new-components/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n id?: string\n /**\n * The tone of the Banner. Affects the background color and the outline.\n */\n tone: BannerTone\n /**\n * The icon that should be added inside the Banner.\n */\n icon: React.ReactChild\n /**\n * The title to be displayed at the top of the Banner.\n */\n title: React.ReactNode\n /**\n * An optional description to be displayed inside the Banner.\n */\n description?: React.ReactNode\n /**\n * An optional action to displayed inside the Banner.\n */\n action?: React.ReactChild\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { id, tone, icon, title, description, action, ...props }: BannerProps,\n ref,\n) {\n const titleId = useId()\n const descriptionId = useId()\n return (\n <Box\n {...props}\n ref={ref}\n id={id}\n role=\"status\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n aria-live=\"polite\"\n tabIndex={0}\n borderRadius=\"standard\"\n className={[styles.banner, styles[`banner-${tone}`]]}\n >\n <Columns space=\"medium\" alignY=\"center\">\n <Column\n width=\"content\"\n aria-hidden\n style={{\n /* Make sure the icon is centered vertically */\n lineHeight: 0,\n }}\n >\n {icon}\n </Column>\n <Column>\n <Box paddingY=\"xsmall\">\n {description ? (\n <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n {title}\n </Box>\n ) : (\n <Box\n id={titleId}\n className={[\n styles.title,\n // If the banner does not have a description, we need to slightly tweak\n // the styling of the title applying an extra css class\n styles[`title-without-description`],\n styles[`title-${tone}`],\n ]}\n >\n {title}\n </Box>\n )}\n {description ? (\n <Box\n id={descriptionId}\n className={[styles.description, styles[`description-${tone}`]]}\n >\n {description}\n </Box>\n ) : null}\n </Box>\n </Column>\n {action ? <Column width=\"content\">{action}</Column> : null}\n </Columns>\n </Box>\n )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["Banner","React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":";;;;;;;;MAiCMA,MAAM,gBAAGC,UAAA,CAA8C,SAASD,MAAT,OAEzDE,GAFyD;MACzD;IAAEC,EAAF;IAAMC,IAAN;IAAYC,IAAZ;IAAkBC,KAAlB;IAAyBC,WAAzB;IAAsCC;;MAAWC;;EAGjD,MAAMC,OAAO,GAAGC,KAAK,EAArB;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B;EACA,oBACIV,aAAA,CAACY,GAAD,oCACQJ,KADR;IAEIP,GAAG,EAAEA,GAFT;IAGIC,EAAE,EAAEA,EAHR;IAIIW,IAAI,EAAC,QAJT;uBAKqBJ,OALrB;wBAMsBE,aANtB;iBAOc,QAPd;IAQIG,QAAQ,EAAE,CARd;IASIC,YAAY,EAAC,UATjB;IAUIC,SAAS,EAAE,CAACC,MAAM,CAACC,MAAR,EAAgBD,MAAM,aAAWd,IAAX,CAAtB;mBAEXH,aAAA,CAACmB,OAAD;IAASC,KAAK,EAAC;IAASC,MAAM,EAAC;GAA/B,eACIrB,aAAA,CAACsB,MAAD;IACIC,KAAK,EAAC;;IAENC,KAAK,EAAE;;MAEHC,UAAU,EAAE;;GALpB,EAQKrB,IARL,CADJ,eAWIJ,aAAA,CAACsB,MAAD,MAAA,eACItB,aAAA,CAACY,GAAD;IAAKc,QAAQ,EAAC;GAAd,EACKpB,WAAW,gBACRN,aAAA,CAACY,GAAD;IAAKV,EAAE,EAAEO;IAASO,SAAS,EAAE,CAACC,MAAM,CAACZ,KAAR,EAAeY,MAAM,YAAUd,IAAV,CAArB;GAA7B,EACKE,KADL,CADQ,gBAKRL,aAAA,CAACY,GAAD;IACIV,EAAE,EAAEO;IACJO,SAAS,EAAE,CACPC,MAAM,CAACZ,KADA;;IAIPY,MAAM,6BAJC,EAKPA,MAAM,YAAUd,IAAV,CALC;GAFf,EAUKE,KAVL,CANR,EAmBKC,WAAW,gBACRN,aAAA,CAACY,GAAD;IACIV,EAAE,EAAES;IACJK,SAAS,EAAE,CAACC,MAAM,CAACX,WAAR,EAAqBW,MAAM,kBAAgBd,IAAhB,CAA3B;GAFf,EAIKG,WAJL,CADQ,GAOR,IA1BR,CADJ,CAXJ,EAyCKC,MAAM,gBAAGP,aAAA,CAACsB,MAAD;IAAQC,KAAK,EAAC;GAAd,EAAyBhB,MAAzB,CAAH,GAA+C,IAzC1D,CAZJ,CADJ;AA0DH,CAhEc;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n\n /**\n * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n * corners (the default) vs. having them fully curved to the point that they are as round as\n * possible. In icon-only buttons this allows to have the button be circular.\n * @default 'normal'\n */\n shape?: 'normal' | 'rounded'\n\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n width?: 'auto'\n align?: never\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n width?: never\n align?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n width = 'auto',\n align = 'center',\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n width={icon ? undefined : width}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? (\n <Box\n as=\"span\"\n className={styles.label}\n overflow=\"hidden\"\n width={width === 'full' ? 'full' : undefined}\n textAlign={width === 'auto' ? 'center' : align}\n >\n {children}\n </Box>\n ) : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;EACIA,KAAK,CAACD,cAAN;AACH;AAoFD;;;;;;;;;MAOaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAoBnEE,GApBmE;MACnE;IACIC,EAAE,GAAG,KADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,KAAK,GAAG,QALZ;IAMIC,QAAQ,GAAG,KANf;IAOIC,OAAO,GAAG,KAPd;IAQIC,OARJ;IASIC,OATJ;IAUIC,yBAVJ;IAWIC,QAXJ;IAYIC,SAZJ;IAaIC,OAbJ;IAcIC,IAdJ;IAeIC,KAAK,GAAG,MAfZ;IAgBIC,KAAK,GAAG;;MACLC;;EAIP,MAAMC,UAAU,GAAGX,OAAO,IAAID,QAA9B;EACA,MAAMa,aAAa,gBACfC,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIhB,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;qBAImBkB,UAJnB;IAKIT,OAAO,EAAES,UAAU,GAAGtB,cAAH,GAAoBa,OAL3C;IAMIM,KAAK,EAAED,IAAI,GAAGQ,SAAH,GAAeP,KAN9B;IAOIQ,SAAS,EAAE,CACPb,yBADO,EAEPc,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYtB,OAAZ,CAHC,EAIPsB,MAAM,WAASrB,IAAT,CAJC,EAKPqB,MAAM,WAASpB,IAAT,CALC,EAMPC,KAAK,KAAK,SAAV,GAAsBmB,MAAM,CAAC,eAAD,CAA5B,GAAgD,IANzC,EAOPV,IAAI,GAAGU,MAAM,CAACE,UAAV,GAAuB,IAPpB,EAQPpB,QAAQ,GAAGkB,MAAM,CAAClB,QAAV,GAAqB,IARtB;MAWVQ,IAAI,GACAP,OAAO,iBAAIa,aAAA,CAACO,OAAD,MAAA,CAAZ,IAA4Bb,IAD3B,gBAGDM,aAAA,SAAA,MAAA,EACKR,SAAS,gBACNQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACZ;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBO,aAAA,CAACO,OAAD,MAAA,CAAtB,GAAoCf,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBACLS,aAAA,CAACC,GAAD;IACIpB,EAAE,EAAC;IACHsB,SAAS,EAAEC,MAAM,CAACK;IAClBC,QAAQ,EAAC;IACTf,KAAK,EAAEA,KAAK,KAAK,MAAV,GAAmB,MAAnB,GAA4BO;IACnCS,SAAS,EAAEhB,KAAK,KAAK,MAAV,GAAmB,QAAnB,GAA8BC;GAL7C,EAOKL,QAPL,CADK,GAUL,IAhBR,EAiBKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGQ,aAAA,CAACC,GAAD;IAAKO,OAAO,EAAC;IAAOL,SAAS,EAAEC,MAAM,CAACX;;GAAtC,EACKN,OAAO,gBAAGa,aAAA,CAACO,OAAD,MAAA,CAAH,GAAiBd,OAD7B,CADH,GAIG,IArBR,CArBR,CADJ;;EAkDA,MAAMmB,cAAc,GAAGlB,IAAI,IAAIN,OAAO,KAAKc,SAApB,GAAgCL,KAAK,CAAC,YAAD,CAArC,GAAsDT,OAA7E;EACA,OAAOwB,cAAc,gBACjBZ,aAAA,CAACa,OAAD;IAASC,OAAO,EAAEF;GAAlB,EAAmCb,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CA/E6C;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n id: string\n children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n return (\n <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n </Box>\n {children}\n </Text>\n )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n id: string\n 'aria-describedby'?: string\n 'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n React.InputHTMLAttributes<T>,\n T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n /**\n * Provides alternative visual layouts or modes that the field can be rendered in.\n *\n * Namely, there are two variants supported:\n *\n * - the default one\n * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n * of just surrounding the actual field element\n *\n * In both cases, the message and description texts for the field lie outside the bordered\n * area.\n */\n variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n /**\n * The main label for this field element.\n *\n * This prop is not optional. Consumers of field components must be explicit about not\n * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n * should make sure that fields are properly labelled semantically by other means (e.g using\n * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n *\n * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n *\n * @see BaseFieldProps['secondaryLabel']\n * @see BaseFieldProps['auxiliaryLabel']\n */\n label: React.ReactNode\n\n /**\n * An optional secondary label for this field element. It is combined with the `label` to\n * form the field's entire accessible name (unless the field label is overriden by using\n * `aria-label` or `aria-labelledby`).\n *\n * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n *\n * @see BaseFieldProps['label']\n * @see BaseFieldProps['auxiliaryLabel']\n */\n secondaryLabel?: React.ReactNode\n\n /**\n * An optional extra element to be placed to the right of the main and secondary labels.\n *\n * This extra element is not included in the accessible name of the field element. Its only\n * purpose is either visual, or functional (if you include interactive elements in it).\n *\n * @see BaseFieldProps['label']\n * @see BaseFieldProps['secondaryLabel']\n */\n auxiliaryLabel?: React.ReactNode\n\n /**\n * A message associated with the field. It is rendered below the field, and with an\n * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n * success, etc).\n *\n * The message element is associated to the field via the `aria-describedby` attribute. If a\n * `hint` is provided, both the hint and the message are associated as the field accessible\n * description.\n *\n * In the future, when `aria-errormessage` gets better user agent support, we should use it\n * to associate the filed with a message when tone is `\"error\"`.\n *\n * @see BaseFieldProps['tone']\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n */\n message?: React.ReactNode\n\n /**\n * The tone with which the message, if any, is presented.\n *\n * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n * red.\n *\n * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n * this is not enforced by the component. It is only a recommendation.\n *\n * @see BaseFieldProps['message']\n * @see BaseFieldProps['hint']\n */\n tone?: FieldTone\n\n /**\n * A hint or help-like content associated as the accessible description of the field. It is\n * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n * as secondary text).\n *\n * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n * content.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n */\n hint?: React.ReactNode\n\n /**\n * The maximum width that the input field can expand to.\n */\n maxWidth?: BoxProps['maxWidth']\n\n /**\n * Used internally by components composed using `BaseField`. It is not exposed as part of\n * the public props of such components.\n */\n children: (props: ChildrenRenderProps) => React.ReactNode\n }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n BaseFieldProps,\n 'children' | 'className' | 'variant'\n> &\n Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n variant = 'default',\n label,\n secondaryLabel,\n auxiliaryLabel,\n hint,\n message,\n tone = 'neutral',\n className,\n children,\n maxWidth,\n hidden,\n 'aria-describedby': originalAriaDescribedBy,\n id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n const id = useId(originalId)\n const hintId = useId()\n const messageId = useId()\n\n const ariaDescribedBy =\n originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n const childrenProps: ChildrenRenderProps = {\n id,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': tone === 'error' ? true : undefined,\n }\n\n return (\n <Stack space=\"small\" hidden={hidden}>\n <Box\n className={[\n className,\n styles.container,\n tone === 'error' ? styles.error : null,\n variant === 'bordered' ? styles.bordered : null,\n ]}\n maxWidth={maxWidth}\n >\n {label || secondaryLabel || auxiliaryLabel ? (\n <Box\n as=\"span\"\n display=\"flex\"\n justifyContent=\"spaceBetween\"\n alignItems=\"flexEnd\"\n >\n <Text\n size={variant === 'bordered' ? 'caption' : 'body'}\n as=\"label\"\n htmlFor={id}\n >\n {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n {secondaryLabel ? (\n <span className={styles.secondaryLabel}>\n ({secondaryLabel})\n </span>\n ) : null}\n </Text>\n {auxiliaryLabel ? (\n <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n {auxiliaryLabel}\n </Box>\n ) : null}\n </Box>\n ) : null}\n {children(childrenProps)}\n </Box>\n {message ? (\n <FieldMessage id={messageId} tone={tone}>\n {message}\n </FieldMessage>\n ) : null}\n {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n </Stack>\n )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","textTone","Box","marginRight","display","className","styles","messageIcon","Spinner","BaseField","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","originalAriaDescribedBy","originalId","useId","hintId","messageId","ariaDescribedBy","filter","Boolean","join","childrenProps","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n DividerWeight,\n Space,\n SpaceWithNegatives,\n WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.module.css'\n\ninterface BoxPaddingProps {\n padding?: ResponsiveProp<Space>\n paddingX?: ResponsiveProp<Space>\n paddingY?: ResponsiveProp<Space>\n paddingTop?: ResponsiveProp<Space>\n paddingRight?: ResponsiveProp<Space>\n paddingBottom?: ResponsiveProp<Space>\n paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n margin?: ResponsiveProp<SpaceWithNegatives>\n marginX?: ResponsiveProp<SpaceWithNegatives>\n marginY?: ResponsiveProp<SpaceWithNegatives>\n marginTop?: ResponsiveProp<SpaceWithNegatives>\n marginRight?: ResponsiveProp<SpaceWithNegatives>\n marginBottom?: ResponsiveProp<SpaceWithNegatives>\n marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n | 'center'\n | 'flexEnd'\n | 'flexStart'\n | 'spaceAround'\n | 'spaceBetween'\n | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n borderRadius?: BoxBorderRadius\n border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n minWidth?: BoxMinWidth\n maxWidth?: BoxMaxWidth\n width?: BoxWidth\n background?: BoxBackground\n flexGrow?: 0 | 1\n flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n position?: ResponsiveProp<BoxPosition>\n display?: ResponsiveProp<BoxDisplay>\n flexDirection?: ResponsiveProp<BoxFlexDirection>\n flexWrap?: BoxFlexWrap\n gap?: ResponsiveProp<Space | 'none'>\n alignItems?: ResponsiveProp<BoxAlignItems>\n alignSelf?: ResponsiveProp<BoxAlignSelf>\n justifyContent?: ResponsiveProp<BoxJustifyContent>\n overflow?: BoxOverflow\n height?: 'full'\n textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n {\n as: component = 'div',\n position = 'static',\n display,\n flexDirection = 'row',\n flexWrap,\n flexGrow,\n flexShrink,\n gap,\n alignItems,\n justifyContent,\n alignSelf,\n overflow,\n width,\n height,\n background,\n border,\n borderRadius,\n minWidth,\n maxWidth,\n textAlign,\n padding,\n paddingY,\n paddingX,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n margin,\n marginY,\n marginX,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n className,\n children,\n ...props\n },\n ref,\n) {\n const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n const resolvedMarginTop = marginTop ?? marginY ?? margin\n const resolvedMarginRight = marginRight ?? marginX ?? margin\n const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n const omitFlex =\n !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n return React.createElement(\n component,\n {\n ...props,\n className:\n classNames(\n className,\n styles.box,\n display ? getClassNames(styles, 'display', display) : null,\n position !== 'static' ? getClassNames(styles, 'position', position) : null,\n minWidth != null\n ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n : null,\n getClassNames(widthStyles, 'maxWidth', maxWidth),\n getClassNames(styles, 'textAlign', textAlign),\n // padding\n getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n // margin\n getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n // flex props\n omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n flexShrink != null\n ? getClassNames(styles, 'flexShrink', String(flexShrink))\n : null,\n flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n gap ? getClassNames(gapStyles, 'gap', gap) : null,\n // other props\n getClassNames(styles, 'overflow', overflow),\n width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n getClassNames(styles, 'height', height),\n getClassNames(styles, 'bg', background),\n borderRadius !== 'none'\n ? getClassNames(styles, 'borderRadius', borderRadius)\n : null,\n border !== 'none' ? getClassNames(styles, 'border', border) : null,\n ) || undefined,\n ref,\n },\n children,\n )\n})\n\nexport type {\n BoxProps,\n BoxPaddingProps,\n BoxMarginProps,\n ReusableBoxProps,\n BoxMinWidth,\n BoxMaxWidth,\n BoxDisplay,\n BoxPosition,\n BoxFlexDirection,\n BoxFlexWrap,\n BoxAlignItems,\n BoxJustifyContent,\n BoxOverflow,\n BoxTextAlign,\n BoxBackground,\n BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","undefined"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n React.AllHTMLAttributes<HTMLButtonElement>,\n 'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n BaseButtonProps & {\n type?: 'button' | 'submit' | 'reset'\n exceptionallySetClassName?: string\n }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n type = 'button',\n disabled = false,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as=\"button\"\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n type={type}\n disabled={disabled}\n exceptionallySetClassName={exceptionallySetClassName}\n />\n )\n})\n"],"names":["Button","React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":";;;;;AAeA;;;;;;;MAMaA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAUnEE,GAVmE;MACnE;IACIC,OADJ;IAEIC,IAAI,GAAG,QAFX;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,QAAQ,GAAG,KALf;IAMIC;;MACGC;;EAIP,oBACIR,aAAA,CAACS,UAAD,oCACQD,KADR;IAEIE,EAAE,EAAC,QAFP;IAGIT,GAAG,EAAEA,GAHT;IAIIC,OAAO,EAAEA,OAJb;IAKIC,IAAI,EAAEA,IALV;IAMIC,IAAI,EAAEA,IANV;IAOIC,IAAI,EAAEA,IAPV;IAQIC,QAAQ,EAAEA,QARd;IASIC,yBAAyB,EAAEA;KAVnC;AAaH,CAzBqB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../common-types'\n\ntype NativeLinkProps = Omit<\n JSX.IntrinsicElements['a'],\n 'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n {\n as = 'a',\n variant,\n tone = 'normal',\n size = 'normal',\n exceptionallySetClassName,\n openInNewTab = false,\n ...props\n },\n ref,\n) {\n return (\n <BaseButton\n {...props}\n as={as}\n ref={ref}\n variant={variant}\n tone={tone}\n size={size}\n exceptionallySetClassName={exceptionallySetClassName}\n target={openInNewTab ? '_blank' : undefined}\n rel={openInNewTab ? 'noopener noreferrer' : undefined}\n />\n )\n})\n"],"names":["ButtonLink","polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":";;;;;;AAaA;;;;;;;MAMaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;MACjE;IACIC,EAAE,GAAG,GADT;IAEIC,OAFJ;IAGIC,IAAI,GAAG,QAHX;IAIIC,IAAI,GAAG,QAJX;IAKIC,yBALJ;IAMIC,YAAY,GAAG;;MACZC;;EAIP,oBACIC,aAAA,CAACC,UAAD,oCACQF,KADR;IAEIN,EAAE,EAAEA,EAFR;IAGID,GAAG,EAAEA,GAHT;IAIIE,OAAO,EAAEA,OAJb;IAKIC,IAAI,EAAEA,IALV;IAMIC,IAAI,EAAEA,IANV;IAOIC,yBAAyB,EAAEA,yBAP/B;IAQIK,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK,SARtC;IASIC,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;KAVpD;AAaH,CAzB6C;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** The icon that should be added to the checkbox label. */\n icon?: React.ReactChild\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {icon ? (\n <Box display=\"flex\" className={styles.icon} aria-hidden>\n {icon}\n </Box>\n ) : null}\n {label ? (\n <Box display=\"flex\" className={styles.label}>\n <Text>{label}</Text>\n </Box>\n ) : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}
|