@doist/reactist 9.2.0-beta.7 → 10.0.0-beta.10
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 +12 -2
- package/dist/reactist.cjs.development.js +1405 -842
- 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/components/color-picker/color-picker.js +1 -1
- package/es/components/color-picker/color-picker.js.map +1 -1
- package/es/components/{button/button.js → deprecated-button/deprecated-button.js} +7 -3
- package/es/components/deprecated-button/deprecated-button.js.map +1 -0
- package/es/components/{button → deprecated-button}/index.js +1 -1
- package/es/components/{button → deprecated-button}/index.js.map +0 -0
- package/es/components/{loading/loading.js → deprecated-loading/deprecated-loading.js} +3 -1
- package/es/components/deprecated-loading/deprecated-loading.js.map +1 -0
- package/es/components/{modal/modal.js → deprecated-modal/deprecated-modal.js} +9 -2
- package/es/components/deprecated-modal/deprecated-modal.js.map +1 -0
- package/es/components/{modal → deprecated-modal}/index.js +1 -1
- package/es/components/deprecated-modal/index.js.map +1 -0
- package/es/components/dropdown/dropdown.js +5 -3
- package/es/components/dropdown/dropdown.js.map +1 -1
- package/es/components/error-message/error-message.js +3 -1
- package/es/components/error-message/error-message.js.map +1 -1
- package/es/components/keyboard-shortcut/keyboard-shortcut.js +4 -2
- package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/es/components/menu/menu.js +22 -20
- package/es/components/menu/menu.js.map +1 -1
- package/es/components/range-input/range-input.js +1 -1
- package/es/components/range-input/range-input.js.map +1 -1
- package/es/components/select/select.js +1 -1
- package/es/components/select/select.js.map +1 -1
- package/es/hooks/use-previous/use-previous.js +26 -0
- package/es/hooks/use-previous/use-previous.js.map +1 -0
- package/es/index.js +11 -6
- package/es/index.js.map +1 -1
- package/es/new-components/base-button/base-button.js +70 -0
- package/es/new-components/base-button/base-button.js.map +1 -0
- package/es/new-components/base-button/base-button.module.css.js +4 -0
- package/es/new-components/base-button/base-button.module.css.js.map +1 -0
- package/es/new-components/base-field/base-field.js +29 -29
- package/es/new-components/base-field/base-field.js.map +1 -1
- package/es/new-components/base-field/base-field.module.css.js +1 -1
- package/es/new-components/box/box.js +28 -10
- package/es/new-components/box/box.js.map +1 -1
- package/es/new-components/box/box.module.css.js +1 -1
- package/es/new-components/box/margin.module.css.js +4 -0
- package/es/new-components/box/margin.module.css.js.map +1 -0
- package/es/new-components/box/padding.module.css.js +4 -0
- package/es/new-components/box/padding.module.css.js.map +1 -0
- package/es/new-components/button/button.js +40 -0
- package/es/new-components/button/button.js.map +1 -0
- package/es/new-components/button-link/button-link.js +25 -14
- package/es/new-components/button-link/button-link.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-field.js +45 -23
- package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-field.module.css.js +1 -1
- package/es/new-components/columns/columns.js +28 -17
- package/es/new-components/columns/columns.js.map +1 -1
- package/es/new-components/columns/columns.module.css.js +1 -1
- package/es/new-components/divider/divider.js +3 -3
- package/es/new-components/divider/divider.js.map +1 -1
- package/es/new-components/divider/divider.module.css.js +1 -1
- package/es/new-components/heading/heading.js +9 -3
- package/es/new-components/heading/heading.js.map +1 -1
- package/es/new-components/heading/heading.module.css.js +1 -1
- package/es/new-components/hidden/hidden.js +54 -0
- package/es/new-components/hidden/hidden.js.map +1 -0
- package/es/new-components/hidden/hidden.module.css.js +4 -0
- package/es/new-components/hidden/hidden.module.css.js.map +1 -0
- package/es/new-components/hidden-visually/hidden-visually.js +22 -0
- package/es/new-components/hidden-visually/hidden-visually.js.map +1 -0
- package/es/new-components/hidden-visually/hidden-visually.module.css.js +4 -0
- package/es/new-components/hidden-visually/hidden-visually.module.css.js.map +1 -0
- package/es/new-components/inline/inline.js +9 -8
- package/es/new-components/inline/inline.js.map +1 -1
- package/es/new-components/loading/loading.js +33 -0
- package/es/new-components/loading/loading.js.map +1 -0
- package/es/new-components/modal/modal.js +201 -0
- package/es/new-components/modal/modal.js.map +1 -0
- package/es/new-components/modal/modal.module.css.js +4 -0
- package/es/new-components/modal/modal.module.css.js.map +1 -0
- package/es/new-components/password-field/password-field.js +7 -4
- package/es/new-components/password-field/password-field.js.map +1 -1
- package/es/new-components/responsive-props.js +21 -11
- package/es/new-components/responsive-props.js.map +1 -1
- package/es/new-components/select-field/select-field.js +12 -6
- package/es/new-components/select-field/select-field.js.map +1 -1
- package/es/new-components/select-field/select-field.module.css.js +1 -1
- package/es/new-components/spinner/spinner.js +26 -0
- package/es/new-components/spinner/spinner.js.map +1 -0
- package/es/new-components/spinner/spinner.module.css.js +4 -0
- package/es/new-components/spinner/spinner.module.css.js.map +1 -0
- package/es/new-components/stack/stack.js +23 -13
- package/es/new-components/stack/stack.js.map +1 -1
- package/es/new-components/switch-field/switch-field.js +47 -28
- package/es/new-components/switch-field/switch-field.js.map +1 -1
- package/es/new-components/switch-field/switch-field.module.css.js +1 -1
- package/es/new-components/tabs/tabs.js +142 -0
- package/es/new-components/tabs/tabs.js.map +1 -0
- package/es/new-components/tabs/tabs.module.css.js +4 -0
- package/es/new-components/tabs/tabs.module.css.js.map +1 -0
- package/es/new-components/text/text.js +15 -10
- package/es/new-components/text/text.js.map +1 -1
- package/es/new-components/text/text.module.css.js +1 -1
- package/es/new-components/text-area/text-area.js.map +1 -1
- package/es/new-components/text-area/text-area.module.css.js +1 -1
- package/es/new-components/text-field/text-field.js +4 -2
- package/es/new-components/text-field/text-field.js.map +1 -1
- package/es/new-components/text-field/text-field.module.css.js +1 -1
- package/es/new-components/text-link/text-link.js +8 -7
- package/es/new-components/text-link/text-link.js.map +1 -1
- package/es/utils/polymorphism.js +17 -0
- package/es/utils/polymorphism.js.map +1 -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/{button/button.d.ts → deprecated-button/deprecated-button.d.ts} +7 -1
- package/lib/components/{button/button.js → deprecated-button/deprecated-button.js} +2 -2
- package/lib/components/deprecated-button/deprecated-button.js.map +1 -0
- package/lib/components/{button/button.test.d.ts → deprecated-button/deprecated-button.test.d.ts} +0 -0
- package/lib/components/deprecated-button/index.d.ts +4 -0
- package/lib/components/{loading → deprecated-button}/index.js +1 -1
- package/lib/components/{button → deprecated-button}/index.js.map +0 -0
- package/lib/components/{loading/loading.d.ts → deprecated-loading/deprecated-loading.d.ts} +2 -1
- package/lib/components/{loading/loading.js → deprecated-loading/deprecated-loading.js} +1 -1
- package/lib/components/deprecated-loading/deprecated-loading.js.map +1 -0
- package/lib/components/{loading/Loading.test.d.ts → deprecated-loading/deprecated-loading.test.d.ts} +0 -0
- package/lib/components/deprecated-loading/index.d.ts +1 -0
- package/lib/components/{modal/modal.d.ts → deprecated-modal/deprecated-modal.d.ts} +6 -1
- package/lib/components/{modal/modal.js → deprecated-modal/deprecated-modal.js} +2 -2
- package/lib/components/deprecated-modal/deprecated-modal.js.map +1 -0
- package/lib/components/{modal/modal.test.d.ts → deprecated-modal/deprecated-modal.test.d.ts} +0 -0
- package/lib/components/{modal → deprecated-modal}/index.d.ts +3 -3
- package/lib/components/deprecated-modal/index.js +2 -0
- package/lib/components/deprecated-modal/index.js.map +1 -0
- package/lib/components/dropdown/dropdown.js +1 -1
- package/lib/components/dropdown/dropdown.js.map +1 -1
- package/lib/components/error-message/error-message.js +1 -1
- package/lib/components/error-message/error-message.js.map +1 -1
- package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
- package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/lib/components/menu/index.d.ts +1 -1
- package/lib/components/menu/menu.d.ts +8 -10
- package/lib/components/menu/menu.js +1 -1
- package/lib/components/menu/menu.js.map +1 -1
- package/lib/components/range-input/range-input.js +1 -1
- package/lib/components/range-input/range-input.js.map +1 -1
- package/lib/components/select/select.js +1 -1
- package/lib/components/select/select.js.map +1 -1
- package/lib/components/tooltip/index.d.ts +1 -1
- package/lib/hooks/use-previous/index.d.ts +1 -0
- package/lib/hooks/use-previous/use-previous.d.ts +15 -0
- package/lib/hooks/use-previous/use-previous.js +2 -0
- package/lib/hooks/use-previous/use-previous.js.map +1 -0
- package/lib/index.d.ts +10 -5
- package/lib/index.js +1 -1
- package/lib/new-components/base-button/base-button.d.ts +65 -0
- package/lib/new-components/base-button/base-button.js +2 -0
- package/lib/new-components/base-button/base-button.js.map +1 -0
- package/lib/new-components/base-button/base-button.module.css.js +2 -0
- package/lib/new-components/base-button/base-button.module.css.js.map +1 -0
- package/lib/new-components/base-button/index.d.ts +1 -0
- package/lib/new-components/base-field/base-field.d.ts +53 -13
- package/lib/new-components/base-field/base-field.js +1 -1
- package/lib/new-components/base-field/base-field.js.map +1 -1
- package/lib/new-components/base-field/base-field.module.css.js +1 -1
- package/lib/new-components/box/box.d.ts +24 -13
- package/lib/new-components/box/box.js +1 -1
- package/lib/new-components/box/box.js.map +1 -1
- package/lib/new-components/box/box.module.css.js +1 -1
- package/lib/{components/tabs/tabs.test.d.ts → new-components/box/box.test.d.ts} +0 -0
- package/lib/new-components/box/margin.module.css.js +2 -0
- package/lib/new-components/box/margin.module.css.js.map +1 -0
- package/lib/new-components/box/padding.module.css.js +2 -0
- package/lib/new-components/box/padding.module.css.js.map +1 -0
- package/lib/new-components/button/button.d.ts +48 -0
- package/lib/new-components/button/button.js +2 -0
- package/lib/new-components/button/button.js.map +1 -0
- package/lib/new-components/button/button.test.d.ts +1 -0
- package/lib/new-components/button/index.d.ts +1 -0
- package/lib/new-components/button-link/button-link-story-wrapper.d.ts +7 -0
- package/lib/new-components/button-link/button-link.d.ts +14 -8
- package/lib/new-components/button-link/button-link.js +1 -1
- package/lib/new-components/button-link/button-link.js.map +1 -1
- package/lib/new-components/button-link/button-link.test.d.ts +1 -0
- package/lib/new-components/checkbox-field/checkbox-field.d.ts +3 -3
- package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.module.css.js +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.test.d.ts +1 -0
- package/lib/new-components/columns/columns.d.ts +4 -5
- package/lib/new-components/columns/columns.js +1 -1
- package/lib/new-components/columns/columns.js.map +1 -1
- package/lib/new-components/columns/columns.module.css.js +1 -1
- package/lib/new-components/columns/columns.test.d.ts +1 -0
- package/lib/new-components/common-types.d.ts +2 -0
- package/lib/new-components/divider/divider.d.ts +2 -2
- package/lib/new-components/divider/divider.js +1 -1
- package/lib/new-components/divider/divider.js.map +1 -1
- package/lib/new-components/divider/divider.module.css.js +1 -1
- package/lib/new-components/heading/heading.d.ts +101 -2
- package/lib/new-components/heading/heading.js +1 -1
- package/lib/new-components/heading/heading.js.map +1 -1
- package/lib/new-components/heading/heading.module.css.js +1 -1
- package/lib/new-components/heading/heading.test.d.ts +1 -0
- package/lib/new-components/hidden/hidden.d.ts +49 -0
- package/lib/new-components/hidden/hidden.js +2 -0
- package/lib/new-components/hidden/hidden.js.map +1 -0
- package/lib/new-components/hidden/hidden.module.css.js +2 -0
- package/lib/new-components/hidden/hidden.module.css.js.map +1 -0
- package/lib/new-components/hidden/hidden.test.d.ts +1 -0
- package/lib/new-components/hidden/index.d.ts +1 -0
- package/lib/new-components/hidden-visually/hidden-visually.d.ts +11 -0
- package/lib/new-components/hidden-visually/hidden-visually.js +2 -0
- package/lib/new-components/hidden-visually/hidden-visually.js.map +1 -0
- package/lib/new-components/hidden-visually/hidden-visually.module.css.js +2 -0
- package/lib/new-components/hidden-visually/hidden-visually.module.css.js.map +1 -0
- package/lib/new-components/hidden-visually/hidden-visually.test.d.ts +1 -0
- package/lib/new-components/hidden-visually/index.d.ts +1 -0
- package/lib/new-components/inline/inline.d.ts +1 -2
- package/lib/new-components/inline/inline.js +1 -1
- package/lib/new-components/inline/inline.js.map +1 -1
- package/lib/new-components/inline/inline.test.d.ts +1 -0
- package/lib/new-components/loading/index.d.ts +1 -0
- package/lib/new-components/loading/loading.d.ts +26 -0
- package/lib/new-components/loading/loading.js +2 -0
- package/lib/new-components/loading/loading.js.map +1 -0
- package/lib/new-components/loading/loading.test.d.ts +1 -0
- package/lib/new-components/modal/index.d.ts +1 -0
- package/lib/new-components/modal/modal-stories-components.d.ts +35 -0
- package/lib/new-components/modal/modal.d.ts +151 -0
- package/lib/new-components/modal/modal.js +2 -0
- package/lib/new-components/modal/modal.js.map +1 -0
- package/lib/new-components/modal/modal.module.css.js +2 -0
- package/lib/new-components/modal/modal.module.css.js.map +1 -0
- package/lib/new-components/modal/modal.test.d.ts +1 -0
- package/lib/new-components/password-field/password-field.d.ts +2 -2
- package/lib/new-components/password-field/password-field.js +1 -1
- package/lib/new-components/password-field/password-field.js.map +1 -1
- package/lib/new-components/password-field/password-field.test.d.ts +1 -0
- package/lib/new-components/responsive-props.d.ts +12 -14
- package/lib/new-components/responsive-props.js +1 -1
- package/lib/new-components/responsive-props.js.map +1 -1
- package/lib/new-components/select-field/select-field.d.ts +4 -4
- package/lib/new-components/select-field/select-field.js +1 -1
- package/lib/new-components/select-field/select-field.js.map +1 -1
- package/lib/new-components/select-field/select-field.module.css.js +1 -1
- package/lib/new-components/select-field/select-field.test.d.ts +1 -0
- package/lib/new-components/spinner/index.d.ts +1 -0
- package/lib/new-components/spinner/spinner.d.ts +5 -0
- package/lib/new-components/spinner/spinner.js +2 -0
- package/lib/new-components/spinner/spinner.js.map +1 -0
- package/lib/new-components/spinner/spinner.module.css.js +2 -0
- package/lib/new-components/spinner/spinner.module.css.js.map +1 -0
- package/lib/new-components/stack/stack.d.ts +8 -5
- package/lib/new-components/stack/stack.js +1 -1
- package/lib/new-components/stack/stack.js.map +1 -1
- package/lib/new-components/stack/stack.test.d.ts +1 -0
- package/lib/new-components/switch-field/switch-field.d.ts +4 -4
- package/lib/new-components/switch-field/switch-field.js +1 -1
- package/lib/new-components/switch-field/switch-field.js.map +1 -1
- package/lib/new-components/switch-field/switch-field.module.css.js +1 -1
- package/lib/new-components/switch-field/switch-field.test.d.ts +1 -0
- package/lib/new-components/tabs/index.d.ts +1 -0
- package/lib/new-components/tabs/tabs.d.ts +92 -0
- package/lib/new-components/tabs/tabs.js +2 -0
- package/lib/new-components/tabs/tabs.js.map +1 -0
- package/lib/new-components/tabs/tabs.module.css.js +2 -0
- package/lib/new-components/tabs/tabs.module.css.js.map +1 -0
- package/lib/new-components/tabs/tabs.test.d.ts +1 -0
- package/lib/new-components/test-helpers.d.ts +9 -0
- package/lib/new-components/text/text.d.ts +38 -5
- package/lib/new-components/text/text.js +1 -1
- package/lib/new-components/text/text.js.map +1 -1
- package/lib/new-components/text/text.module.css.js +1 -1
- package/lib/new-components/text/text.test.d.ts +1 -0
- package/lib/new-components/text-area/text-area.d.ts +2 -2
- package/lib/new-components/text-area/text-area.js.map +1 -1
- package/lib/new-components/text-area/text-area.module.css.js +1 -1
- package/lib/new-components/text-field/text-field.d.ts +7 -4
- package/lib/new-components/text-field/text-field.js +1 -1
- package/lib/new-components/text-field/text-field.js.map +1 -1
- package/lib/new-components/text-field/text-field.module.css.js +1 -1
- package/lib/new-components/text-field/text-field.test.d.ts +1 -0
- package/lib/new-components/text-link/text-link.d.ts +1 -2
- package/lib/new-components/text-link/text-link.js +1 -1
- package/lib/new-components/text-link/text-link.js.map +1 -1
- package/lib/utils/polymorphism.d.ts +151 -0
- package/lib/utils/polymorphism.js +2 -0
- package/lib/utils/polymorphism.js.map +1 -0
- package/package.json +27 -23
- package/styles/alert.css +4 -3
- package/styles/base-button.css +6 -0
- package/styles/base-button.module.css.css +1 -0
- package/styles/base-field.css +7 -3
- package/styles/base-field.module.css.css +1 -1
- package/styles/box.css +3 -0
- package/styles/box.module.css.css +1 -1
- package/styles/checkbox-field.css +6 -2
- package/styles/checkbox-field.module.css.css +1 -1
- package/styles/color-picker.css +1 -1
- package/styles/columns.css +4 -3
- package/styles/columns.module.css.css +1 -1
- package/styles/deprecated-button.css +2 -0
- package/styles/deprecated-loading.css +1 -0
- package/styles/deprecated-modal.css +1 -0
- package/styles/divider.css +4 -2
- package/styles/divider.module.css.css +1 -1
- package/styles/dropdown.css +1 -1
- package/styles/heading.css +4 -2
- package/styles/heading.module.css.css +1 -1
- package/styles/hidden-visually.css +4 -0
- package/styles/hidden-visually.module.css.css +1 -0
- package/styles/hidden.css +4 -0
- package/styles/hidden.module.css.css +1 -0
- package/styles/inline.css +3 -1
- package/styles/loading.css +4 -1
- package/styles/margin.module.css.css +1 -0
- package/styles/menu.css +1 -1
- package/styles/modal.css +10 -1
- package/styles/modal.module.css.css +1 -0
- package/styles/notice.css +4 -3
- package/styles/padding.module.css.css +1 -0
- package/styles/password-field.css +8 -4
- package/styles/reactist.css +24 -19
- package/styles/select-field.css +8 -4
- package/styles/select-field.module.css.css +1 -1
- package/styles/spinner.module.css.css +1 -0
- package/styles/stack.css +4 -2
- package/styles/switch-field.css +9 -4
- package/styles/switch-field.module.css.css +1 -1
- package/styles/tabs.css +5 -1
- package/styles/tabs.module.css.css +1 -0
- package/styles/text-area.css +8 -4
- package/styles/text-area.module.css.css +1 -1
- package/styles/text-field.css +8 -4
- package/styles/text-field.module.css.css +1 -1
- package/styles/text-link.css +3 -1
- package/styles/text.css +4 -2
- package/styles/text.module.css.css +1 -1
- package/styles/tip.css +1 -1
- package/CHANGELOG.md +0 -492
- package/es/components/button/button.js.map +0 -1
- package/es/components/loading/index.js +0 -6
- package/es/components/loading/index.js.map +0 -1
- package/es/components/loading/loading.js.map +0 -1
- package/es/components/menu/type-helpers.js +0 -9
- package/es/components/menu/type-helpers.js.map +0 -1
- package/es/components/modal/index.js.map +0 -1
- package/es/components/modal/modal.js.map +0 -1
- package/es/components/tabs/tabs.js +0 -123
- package/es/components/tabs/tabs.js.map +0 -1
- package/es/new-components/button-link/button-link.module.css.js +0 -4
- package/es/new-components/button-link/button-link.module.css.js.map +0 -1
- package/es/new-components/loading-spinner/loading-spinner.js +0 -37
- package/es/new-components/loading-spinner/loading-spinner.js.map +0 -1
- package/es/new-components/loading-spinner/loading-spinner.module.css.js +0 -4
- package/es/new-components/loading-spinner/loading-spinner.module.css.js.map +0 -1
- package/es/new-components/type-helpers.js +0 -10
- package/es/new-components/type-helpers.js.map +0 -1
- package/lib/components/button/button.js.map +0 -1
- package/lib/components/button/index.d.ts +0 -4
- package/lib/components/button/index.js +0 -2
- package/lib/components/loading/index.d.ts +0 -2
- package/lib/components/loading/index.js.map +0 -1
- package/lib/components/loading/loading.js.map +0 -1
- package/lib/components/menu/type-helpers.d.ts +0 -25
- package/lib/components/menu/type-helpers.js +0 -2
- package/lib/components/menu/type-helpers.js.map +0 -1
- package/lib/components/modal/index.js +0 -2
- package/lib/components/modal/index.js.map +0 -1
- package/lib/components/modal/modal.js.map +0 -1
- package/lib/components/tabs/index.d.ts +0 -1
- package/lib/components/tabs/tabs.d.ts +0 -33
- package/lib/components/tabs/tabs.js +0 -2
- package/lib/components/tabs/tabs.js.map +0 -1
- package/lib/new-components/button-link/button-link.module.css.js +0 -2
- package/lib/new-components/button-link/button-link.module.css.js.map +0 -1
- package/lib/new-components/loading-spinner/index.d.ts +0 -1
- package/lib/new-components/loading-spinner/loading-spinner.d.ts +0 -8
- package/lib/new-components/loading-spinner/loading-spinner.js +0 -2
- package/lib/new-components/loading-spinner/loading-spinner.js.map +0 -1
- package/lib/new-components/loading-spinner/loading-spinner.module.css.js +0 -2
- package/lib/new-components/loading-spinner/loading-spinner.module.css.js.map +0 -1
- package/lib/new-components/type-helpers.d.ts +0 -26
- package/lib/new-components/type-helpers.js +0 -2
- package/lib/new-components/type-helpers.js.map +0 -1
- package/styles/button-link.css +0 -2
- package/styles/button-link.module.css.css +0 -1
- package/styles/button.css +0 -2
- package/styles/loading-spinner.module.css.css +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { forwardRefWithAs } from '../type-helpers'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space, WithEnhancedClassName } from '../common-types'\n\nimport styles from './box.module.css'\n\ninterface PaddingProps {\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\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart'\ntype BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n borderRadius?: 'standard' | 'none' | 'full'\n border?: 'standard' | 'none' // to be extended with more options\n}\n\ninterface ReusableBoxProps extends BorderProps, PaddingProps {\n minWidth?: 0 | BoxMaxMinWidth\n maxWidth?: BoxMaxMinWidth\n background?: 'default' | 'aside' | 'highlight' | 'selected'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps {\n position?: ResponsiveProp<BoxPosition>\n display?: ResponsiveProp<BoxDisplay>\n flexDirection?: ResponsiveProp<BoxFlexDirection>\n flexWrap?: BoxFlexWrap\n flexGrow?: 0 | 1\n flexShrink?: 0\n alignItems?: ResponsiveProp<BoxAlignItems>\n justifyContent?: ResponsiveProp<BoxJustifyContent>\n overflow?: BoxOverflow\n width?: 'full'\n height?: 'full'\n}\n\nconst Box = forwardRefWithAs<BoxProps>(function Box(\n {\n component = 'div',\n position = 'static',\n display = 'block',\n flexDirection = 'row',\n flexWrap,\n flexGrow,\n flexShrink,\n alignItems,\n justifyContent,\n overflow,\n width,\n height,\n background,\n border,\n borderRadius,\n minWidth,\n maxWidth,\n padding,\n paddingY,\n paddingX,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\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 const isFlex = display === 'flex' || display === 'inlineFlex'\n\n return React.createElement(\n component,\n {\n ...props,\n className:\n classNames(\n className,\n styles.box,\n getClassNames(styles, 'display', display),\n position !== 'static' ? getClassNames(styles, 'position', position) : null,\n minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n getClassNames(styles, 'maxWidth', maxWidth),\n getClassNames(styles, 'paddingTop', resolvedPaddingTop),\n getClassNames(styles, 'paddingRight', resolvedPaddingRight),\n getClassNames(styles, 'paddingBottom', resolvedPaddingBottom),\n getClassNames(styles, 'paddingLeft', resolvedPaddingLeft),\n isFlex ? getClassNames(styles, 'flexDirection', flexDirection) : null,\n isFlex ? getClassNames(styles, 'flexWrap', flexWrap) : null,\n isFlex ? getClassNames(styles, 'alignItems', alignItems) : null,\n isFlex ? getClassNames(styles, 'justifyContent', justifyContent) : null,\n flexShrink != null\n ? getClassNames(styles, 'flexShrink', String(flexShrink))\n : null,\n flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n getClassNames(styles, 'overflow', overflow),\n getClassNames(styles, 'width', width),\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 ReusableBoxProps,\n BoxMaxMinWidth,\n BoxDisplay,\n BoxPosition,\n BoxFlexDirection,\n BoxFlexWrap,\n BoxAlignItems,\n BoxJustifyContent,\n BoxOverflow,\n}\n\nexport { Box }\n"],"names":["Box","forwardRefWithAs","ref","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","isFlex","React","classNames","styles","box","getClassNames","String","undefined"],"mappings":"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"}
|
|
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'\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 BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\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 BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n borderRadius?: 'standard' | 'none' | 'full'\n border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n minWidth?: 0 | BoxMaxMinWidth\n maxWidth?: BoxMaxMinWidth | 'full'\n background?: 'default' | 'aside' | 'highlight' | 'selected'\n flexGrow?: 0 | 1\n flexShrink?: 0\n width?: 'full'\n height?: 'full'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n position?: ResponsiveProp<BoxPosition>\n display?: ResponsiveProp<BoxDisplay>\n flexDirection?: ResponsiveProp<BoxFlexDirection>\n flexWrap?: BoxFlexWrap\n alignItems?: ResponsiveProp<BoxAlignItems>\n justifyContent?: ResponsiveProp<BoxJustifyContent>\n overflow?: BoxOverflow\n width?: 'full'\n height?: 'full'\n textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>\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 alignItems,\n justifyContent,\n overflow,\n width,\n height,\n background,\n border,\n borderRadius,\n minWidth,\n maxWidth,\n textAlign = 'start',\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 ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n getClassNames(styles, 'maxWidth', maxWidth),\n textAlign !== 'start' ? getClassNames(styles, 'textAlign', textAlign) : null,\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 flexShrink != null\n ? getClassNames(styles, 'flexShrink', String(flexShrink))\n : null,\n flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n // other props\n getClassNames(styles, 'overflow', overflow),\n getClassNames(styles, 'width', width),\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 BoxMaxMinWidth,\n BoxDisplay,\n BoxPosition,\n BoxFlexDirection,\n BoxFlexWrap,\n BoxAlignItems,\n BoxJustifyContent,\n BoxOverflow,\n}\n\nexport { Box }\n"],"names":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","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","String","paddingStyles","marginStyles","undefined"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var modules_54d944f2 = {"box":"
|
|
1
|
+
var modules_54d944f2 = {"box":"_26c5201d","position-absolute":"_77c3d8d1","position-fixed":"_37cb98fb","position-relative":"df16028f","position-sticky":"_4205abac","tablet-position-absolute":"d6993b5e","tablet-position-fixed":"a015e0f5","tablet-position-relative":"_236dd3b1","tablet-position-sticky":"b7ac4837","desktop-position-absolute":"fd93a726","desktop-position-fixed":"_49228edc","desktop-position-relative":"d972b518","desktop-position-sticky":"b2a2baf3","display-block":"_22f1edd1","display-flex":"c23d2d6f","display-inline":"_5359896d","display-inlineBlock":"a54a41a6","display-inlineFlex":"d02f3d43","display-none":"_760c0710","tablet-display-block":"_64e2ebe6","tablet-display-flex":"_25274f78","tablet-display-inline":"_2077d063","tablet-display-inlineBlock":"aaed581f","tablet-display-inlineFlex":"_1d4a6eb5","tablet-display-none":"_66f24c78","desktop-display-block":"_145cca89","desktop-display-flex":"_1861c899","desktop-display-inline":"_96a720c8","desktop-display-inlineBlock":"_56acf5d5","desktop-display-inlineFlex":"_2a268e4b","desktop-display-none":"b4f30b9e","minWidth-0":"_0b071847","minWidth-xsmall":"_8b67f007","minWidth-small":"e3ec3474","minWidth-medium":"_5cccd4fc","minWidth-large":"_06eeac65","minWidth-xlarge":"ee1b6344","maxWidth-xsmall":"_2df097d0","maxWidth-small":"b771df2a","maxWidth-medium":"_00ad4e35","maxWidth-large":"_4a848dab","maxWidth-xlarge":"bf216b15","maxWidth-full":"a60a7855","flexDirection-column":"_4cf1b6c9","flexDirection-row":"e056fa5a","tablet-flexDirection-column":"b9aa8d99","tablet-flexDirection-row":"_2e8b3442","desktop-flexDirection-column":"_2162c612","desktop-flexDirection-row":"_279bf1e4","flexWrap-wrap":"_346d3a71","flexWrap-nowrap":"_786fd122","flexShrink-0":"_4b864fc2","flexGrow-0":"_795f552f","flexGrow-1":"a68bcd0f","alignItems-flexStart":"_34e24973","alignItems-center":"_648380f4","alignItems-flexEnd":"_18b4e1d6","alignItems-baseline":"_805c1b65","tablet-alignItems-flexStart":"fd4006c2","tablet-alignItems-center":"c3ba10a7","tablet-alignItems-flexEnd":"_984cd304","tablet-alignItems-baseline":"_696cc167","desktop-alignItems-flexStart":"_74133d54","desktop-alignItems-center":"_92ab46df","desktop-alignItems-flexEnd":"_177026d9","desktop-alignItems-baseline":"ebd2f31f","justifyContent-flexStart":"_4969235b","justifyContent-center":"_9594db58","justifyContent-flexEnd":"_6789fdd3","justifyContent-spaceAround":"b9902d94","justifyContent-spaceBetween":"_3c3ae41b","justifyContent-spaceEvenly":"_8dce8767","tablet-justifyContent-flexStart":"_6bd82354","tablet-justifyContent-center":"_3044c29a","tablet-justifyContent-flexEnd":"_13da8745","tablet-justifyContent-spaceAround":"_981fa9c8","tablet-justifyContent-spaceBetween":"d34811a6","tablet-justifyContent-spaceEvenly":"_53e07124","desktop-justifyContent-flexStart":"e709f277","desktop-justifyContent-center":"abc87cc4","desktop-justifyContent-flexEnd":"ce410292","desktop-justifyContent-spaceBetween":"_5ab1bc04","overflow-hidden":"_11a684c0","overflow-auto":"_2c024f85","overflow-visible":"_4d4892bd","overflow-scroll":"_22ffbb40","width-full":"_330d9b0b","height-full":"fb8deb05","bg-default":"_133f5c00","bg-aside":"b2be7ffe","bg-highlight":"a45e67ff","bg-selected":"b90226b5","borderRadius-standard":"_6e988219","borderRadius-full":"_14cf204e","border-primary":"a710cfdd","border-secondary":"_52263feb","border-tertiary":"_546ec3ef","textAlign-start":"_7fa90cb9","textAlign-center":"_54c80396","textAlign-end":"e4b1ea49","textAlign-justify":"_0eecd510","tablet-textAlign-start":"a309e75d","tablet-textAlign-center":"_67fb1a07","tablet-textAlign-end":"_0fa851ec","tablet-textAlign-justify":"_585a0e34","desktop-textAlign-start":"_5f909690","desktop-textAlign-center":"_13e03993","desktop-textAlign-end":"f142a1cb","desktop-textAlign-justify":"_2bba79a9"};
|
|
2
2
|
|
|
3
3
|
export default modules_54d944f2;
|
|
4
4
|
//# sourceMappingURL=box.module.css.js.map
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da6","marginTop-medium":"_4ea254c1","marginTop-large":"c0844f64","marginTop-xlarge":"_213145b4","marginTop-xxlarge":"df61c84c","marginTop--xsmall":"efe72b13","marginTop--small":"_870c2768","marginTop--medium":"_0b927c57","marginTop--large":"_461db014","marginTop--xlarge":"_2a3a8cb8","marginTop--xxlarge":"_9bcda921","tablet-marginTop-xsmall":"_6add01e4","tablet-marginTop-small":"_735ef86b","tablet-marginTop-medium":"_0477d068","tablet-marginTop-large":"_2c90af97","tablet-marginTop-xlarge":"_63a82db6","tablet-marginTop-xxlarge":"_03cd7726","tablet-marginTop--xsmall":"c986a62a","tablet-marginTop--small":"be2bdcdd","tablet-marginTop--medium":"_47d2686b","tablet-marginTop--large":"_25e5af9d","tablet-marginTop--xlarge":"ee82f441","tablet-marginTop--xxlarge":"a6f9d404","desktop-marginTop-xsmall":"_4d8d9a36","desktop-marginTop-small":"e813cee7","desktop-marginTop-medium":"_56975b7d","desktop-marginTop-large":"_53b367f6","desktop-marginTop-xlarge":"d69e7311","desktop-marginTop-xxlarge":"_92f57c7e","desktop-marginTop--xsmall":"_96880d3e","desktop-marginTop--small":"dc3f3555","desktop-marginTop--medium":"_86dd06bb","desktop-marginTop--large":"c93ef12e","desktop-marginTop--xlarge":"bc8fd4a2","desktop-marginTop--xxlarge":"b12a9124","marginRight-xsmall":"_6016f4fb","marginRight-small":"b85e3dfa","marginRight-medium":"_297575f4","marginRight-large":"b401ac6c","marginRight-xlarge":"dc3ec387","marginRight-xxlarge":"_24694604","marginRight--xsmall":"_8e9bf2ee","marginRight--small":"ae9d1115","marginRight--medium":"_14e46fc3","marginRight--large":"_3370631b","marginRight--xlarge":"_3f0e9b50","marginRight--xxlarge":"bc13e010","tablet-marginRight-xsmall":"_6fa1aae3","tablet-marginRight-small":"_2976c5cb","tablet-marginRight-medium":"_38d94802","tablet-marginRight-large":"db9569b5","tablet-marginRight-xlarge":"_4a52f06d","tablet-marginRight-xxlarge":"_8a0f0410","tablet-marginRight--xsmall":"e7d40e9d","tablet-marginRight--small":"_680fde91","tablet-marginRight--medium":"_021010ca","tablet-marginRight--large":"_9e52c87c","tablet-marginRight--xlarge":"_4d602613","tablet-marginRight--xxlarge":"_21b1b65a","desktop-marginRight-xsmall":"_7321bc07","desktop-marginRight-small":"fa1721f4","desktop-marginRight-medium":"_3fd7b4b8","desktop-marginRight-large":"_4fdc2f74","desktop-marginRight-xlarge":"c0254761","desktop-marginRight-xxlarge":"_710a5f09","desktop-marginRight--xsmall":"e08bee7f","desktop-marginRight--small":"e5ab73d2","desktop-marginRight--medium":"_5e731477","desktop-marginRight--large":"_0f57a22e","desktop-marginRight--xlarge":"_25f26ed3","desktop-marginRight--xxlarge":"_11a3b4e0","marginBottom-xsmall":"_6a4f69f7","marginBottom-small":"db26b033","marginBottom-medium":"c7313022","marginBottom-large":"a5885889","marginBottom-xlarge":"_33dfbd8e","marginBottom-xxlarge":"_795ad2de","marginBottom--xsmall":"a329dbd3","marginBottom--small":"_85e739fb","marginBottom--medium":"_681f65ff","marginBottom--large":"caf50d8f","marginBottom--xlarge":"_1e084cbf","marginBottom--xxlarge":"_3dfb1c7e","tablet-marginBottom-xsmall":"ef4735be","tablet-marginBottom-small":"de55afba","tablet-marginBottom-medium":"_0e33ce88","tablet-marginBottom-large":"_8ca391fc","tablet-marginBottom-xlarge":"_3a609d23","tablet-marginBottom-xxlarge":"_3e1177e4","tablet-marginBottom--xsmall":"d384884d","tablet-marginBottom--small":"_75254cec","tablet-marginBottom--medium":"_5d9f127d","tablet-marginBottom--large":"_835f1089","tablet-marginBottom--xlarge":"dad52a72","tablet-marginBottom--xxlarge":"_8703a4bf","desktop-marginBottom-xsmall":"_90fd20e9","desktop-marginBottom-small":"f3769191","desktop-marginBottom-medium":"_156410f8","desktop-marginBottom-large":"_7fed74d0","desktop-marginBottom-xlarge":"_477dc10e","desktop-marginBottom-xxlarge":"_85c82d89","desktop-marginBottom--xsmall":"_4f09c1e0","desktop-marginBottom--small":"_9523e048","desktop-marginBottom--medium":"efe10240","desktop-marginBottom--large":"c43971e6","desktop-marginBottom--xlarge":"f9b4da15","desktop-marginBottom--xxlarge":"a10fdf70","marginLeft-xsmall":"f9be90b4","marginLeft-small":"f53218d5","marginLeft-medium":"c4a9b3ab","marginLeft-large":"_5755e2c3","marginLeft-xlarge":"_33fc9354","marginLeft-xxlarge":"_4749a3bf","marginLeft--xsmall":"c76cb3c7","marginLeft--small":"_96003c07","marginLeft--medium":"_09988d07","marginLeft--large":"b4a486f6","marginLeft--xlarge":"f396e75e","marginLeft--xxlarge":"_81d1f26d","tablet-marginLeft-xsmall":"_0a46e8f1","tablet-marginLeft-small":"_57c970af","tablet-marginLeft-medium":"_4b6099d3","tablet-marginLeft-large":"_378fcff5","tablet-marginLeft-xlarge":"f8785663","tablet-marginLeft-xxlarge":"_72f957ee","tablet-marginLeft--xsmall":"_2288c7e1","tablet-marginLeft--small":"b27c1c05","tablet-marginLeft--medium":"_702cbb13","tablet-marginLeft--large":"_1a2748b4","tablet-marginLeft--xlarge":"b8c043a5","tablet-marginLeft--xxlarge":"_8dc8ff63","desktop-marginLeft-xsmall":"c2af646d","desktop-marginLeft-small":"c03d07be","desktop-marginLeft-medium":"_915fb1d3","desktop-marginLeft-large":"_64214ee1","desktop-marginLeft-xlarge":"_7be4a22c","desktop-marginLeft-xxlarge":"_5ec0a401","desktop-marginLeft--xsmall":"ea29f1ee","desktop-marginLeft--small":"c26652c7","desktop-marginLeft--medium":"c24f6af9","desktop-marginLeft--large":"c2671f27","desktop-marginLeft--xlarge":"cc51a04e","desktop-marginLeft--xxlarge":"fd581f54"};
|
|
2
|
+
|
|
3
|
+
export default modules_131405ac;
|
|
4
|
+
//# sourceMappingURL=margin.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"margin.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
|
|
2
|
+
|
|
3
|
+
export default modules_b537a8ee;
|
|
4
|
+
//# sourceMappingURL=padding.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"padding.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import { forwardRef, createElement } from 'react';
|
|
3
|
+
import { BaseButton } from '../base-button/base-button.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A semantic button that also looks like a button, and provides all the necessary visual variants.
|
|
7
|
+
* It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
|
|
8
|
+
*
|
|
9
|
+
* 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
|
|
10
|
+
*
|
|
11
|
+
* @see ButtonLink
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
var Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
|
|
15
|
+
var variant = _ref.variant,
|
|
16
|
+
_ref$tone = _ref.tone,
|
|
17
|
+
tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
|
|
18
|
+
_ref$size = _ref.size,
|
|
19
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
20
|
+
_ref$type = _ref.type,
|
|
21
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
22
|
+
_ref$disabled = _ref.disabled,
|
|
23
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
24
|
+
exceptionallySetClassName = _ref.exceptionallySetClassName,
|
|
25
|
+
props = _objectWithoutPropertiesLoose(_ref, ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"]);
|
|
26
|
+
|
|
27
|
+
return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
|
|
28
|
+
as: "button",
|
|
29
|
+
ref: ref,
|
|
30
|
+
variant: variant,
|
|
31
|
+
tone: tone,
|
|
32
|
+
size: size,
|
|
33
|
+
type: type,
|
|
34
|
+
disabled: disabled,
|
|
35
|
+
exceptionallySetClassName: exceptionallySetClassName
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
export { Button };
|
|
40
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\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;;;;;;;;;IAQaA,MAAM,gBAAGC,UAAA,CAAiD,SAASD,MAAT,OAUnEE,GAVmE;MAE/DC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;MACXC,iCAAAA;MACGC;;AAIP,sBACIR,aAAA,CAACS,UAAD,oBACQD;AACJE,IAAAA,EAAE,EAAC;AACHT,IAAAA,GAAG,EAAEA;AACLC,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,yBAAyB,EAAEA;IAT/B,CADJ;AAaH,CAzBqB;;;;"}
|
|
@@ -1,26 +1,37 @@
|
|
|
1
1
|
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { createElement } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import styles from './button-link.module.css.js';
|
|
3
|
+
import { polymorphicComponent } from '../../utils/polymorphism.js';
|
|
4
|
+
import { BaseButton } from '../base-button/base-button.js';
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
/**
|
|
7
|
+
* A semantic link that looks like a button, exactly matching the `Button` component in all visual
|
|
8
|
+
* aspects.
|
|
9
|
+
*
|
|
10
|
+
*🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
|
|
11
|
+
*
|
|
12
|
+
* @see Button
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
|
|
16
|
+
var _ref$as = _ref.as,
|
|
17
|
+
as = _ref$as === void 0 ? 'a' : _ref$as,
|
|
10
18
|
variant = _ref.variant,
|
|
19
|
+
_ref$tone = _ref.tone,
|
|
20
|
+
tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
|
|
11
21
|
_ref$size = _ref.size,
|
|
12
|
-
size = _ref$size === void 0 ? '
|
|
22
|
+
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
23
|
+
exceptionallySetClassName = _ref.exceptionallySetClassName,
|
|
13
24
|
_ref$openInNewTab = _ref.openInNewTab,
|
|
14
25
|
openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
|
|
15
|
-
props = _objectWithoutPropertiesLoose(_ref, ["
|
|
26
|
+
props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"]);
|
|
16
27
|
|
|
17
|
-
return /*#__PURE__*/createElement(
|
|
18
|
-
|
|
19
|
-
display: "inlineFlex",
|
|
20
|
-
alignItems: "center",
|
|
21
|
-
justifyContent: "center",
|
|
22
|
-
className: [styles.container, 'reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null],
|
|
28
|
+
return /*#__PURE__*/createElement(BaseButton, Object.assign({}, props, {
|
|
29
|
+
as: as,
|
|
23
30
|
ref: ref,
|
|
31
|
+
variant: variant,
|
|
32
|
+
tone: tone,
|
|
33
|
+
size: size,
|
|
34
|
+
exceptionallySetClassName: exceptionallySetClassName,
|
|
24
35
|
target: openInNewTab ? '_blank' : undefined,
|
|
25
36
|
rel: openInNewTab ? 'noopener noreferrer' : undefined
|
|
26
37
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport {
|
|
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 *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\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;;;;;;;;;IAQaA,UAAU,gBAAGC,oBAAoB,CAAuB,SAASD,UAAT,OAUjEE,GAViE;qBAE7DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;MACPC,iCAAAA;+BACAC;MAAAA,8CAAe;MACZC;;AAIP,sBACIC,aAAA,CAACC,UAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;AACLE,IAAAA,OAAO,EAAEA;AACTC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,yBAAyB,EAAEA;AAC3BK,IAAAA,MAAM,EAAEJ,YAAY,GAAG,QAAH,GAAcK;AAClCC,IAAAA,GAAG,EAAEN,YAAY,GAAG,qBAAH,GAA2BK;IAThD,CADJ;AAaH,CAzB6C;;;;"}
|
|
@@ -1,49 +1,71 @@
|
|
|
1
1
|
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { useRef, useEffect, createElement } from 'react';
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
|
|
3
3
|
import { Box } from '../box/box.js';
|
|
4
|
-
import {
|
|
4
|
+
import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
|
|
5
|
+
import { Text } from '../text/text.js';
|
|
6
|
+
import { useForkRef } from 'reakit-utils';
|
|
5
7
|
import { CheckboxIcon } from './checkbox-icon.js';
|
|
6
8
|
import styles from './checkbox-field.module.css.js';
|
|
7
9
|
|
|
8
|
-
function CheckboxField(_ref) {
|
|
9
|
-
var _ref2;
|
|
10
|
+
var CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref) {
|
|
11
|
+
var _ref2, _props$checked, _props$checked2;
|
|
10
12
|
|
|
11
13
|
var label = _ref.label,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
disabled = _ref.disabled,
|
|
15
|
+
indeterminate = _ref.indeterminate,
|
|
16
|
+
defaultChecked = _ref.defaultChecked,
|
|
17
|
+
_onChange = _ref.onChange,
|
|
18
|
+
props = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "indeterminate", "defaultChecked", "onChange"]);
|
|
19
|
+
|
|
20
|
+
var isControlledComponent = typeof props.checked === 'boolean';
|
|
21
|
+
|
|
22
|
+
if (typeof indeterminate === 'boolean' && !isControlledComponent) {
|
|
23
|
+
// eslint-disable-next-line no-console
|
|
24
|
+
console.warn('Cannot use indeterminate on an uncontrolled checkbox');
|
|
25
|
+
indeterminate = undefined;
|
|
26
|
+
}
|
|
18
27
|
|
|
19
28
|
if (!label && !props['aria-label'] && !props['aria-labelledby']) {
|
|
20
29
|
// eslint-disable-next-line no-console
|
|
21
30
|
console.warn('A Checkbox needs a label');
|
|
22
31
|
}
|
|
23
32
|
|
|
24
|
-
var
|
|
33
|
+
var _React$useState = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
|
|
34
|
+
checkedState = _React$useState[0],
|
|
35
|
+
setChecked = _React$useState[1];
|
|
36
|
+
|
|
37
|
+
var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
|
|
38
|
+
var internalRef = useRef(null);
|
|
39
|
+
var combinedRef = useForkRef(internalRef, ref);
|
|
25
40
|
useEffect(function setIndeterminate() {
|
|
26
|
-
if (
|
|
27
|
-
|
|
41
|
+
if (internalRef.current && typeof indeterminate === 'boolean') {
|
|
42
|
+
internalRef.current.indeterminate = indeterminate;
|
|
28
43
|
}
|
|
29
44
|
}, [indeterminate]);
|
|
30
45
|
return /*#__PURE__*/createElement(Box, {
|
|
31
|
-
|
|
46
|
+
as: "label",
|
|
32
47
|
display: "flex",
|
|
33
48
|
alignItems: "center",
|
|
34
|
-
className: [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
ref: checkboxRef,
|
|
49
|
+
className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, 'focus-marker-enabled-within']
|
|
50
|
+
}, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
|
|
51
|
+
ref: combinedRef,
|
|
38
52
|
type: "checkbox",
|
|
39
|
-
checked:
|
|
53
|
+
checked: isChecked,
|
|
54
|
+
disabled: disabled,
|
|
55
|
+
onChange: function onChange(event) {
|
|
56
|
+
_onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
|
|
57
|
+
|
|
58
|
+
if (!event.defaultPrevented) {
|
|
59
|
+
setChecked(event.currentTarget.checked);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
40
62
|
}))), /*#__PURE__*/createElement(CheckboxIcon, {
|
|
41
63
|
"aria-hidden": true,
|
|
42
|
-
checked:
|
|
64
|
+
checked: isChecked,
|
|
43
65
|
indeterminate: indeterminate,
|
|
44
|
-
disabled:
|
|
45
|
-
}), label ? /*#__PURE__*/createElement(
|
|
46
|
-
}
|
|
66
|
+
disabled: disabled
|
|
67
|
+
}), label ? /*#__PURE__*/createElement(Text, null, label) : null);
|
|
68
|
+
});
|
|
47
69
|
|
|
48
70
|
export { CheckboxField };
|
|
49
71
|
//# sourceMappingURL=checkbox-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport {
|
|
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 'reakit-utils'\nimport { HiddenVisually } from '../hidden-visually'\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<JSX.IntrinsicElements['input'], 'type' | 'className'> & {\n label?: string\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, 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 [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 'focus-marker-enabled-within',\n ]}\n >\n <HiddenVisually>\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n />\n </HiddenVisually>\n <CheckboxIcon\n aria-hidden\n checked={isChecked}\n indeterminate={indeterminate}\n disabled={disabled}\n />\n {label ? <Text>{label}</Text> : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","HiddenVisually","type","event","defaultPrevented","currentTarget","CheckboxIcon","Text"],"mappings":";;;;;;;;;IAcMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;;;MACvEC,aAAAA;MAAOC,gBAAAA;MAAUC,qBAAAA;MAAeC,sBAAAA;MAAgBC,iBAAAA;MAAaC;;AAG/D,MAAMC,qBAAqB,GAAG,OAAOD,KAAK,CAACE,OAAb,KAAyB,SAAvD;;AACA,MAAI,OAAOL,aAAP,KAAyB,SAAzB,IAAsC,CAACI,qBAA3C,EAAkE;AAC9D;AACAE,IAAAA,OAAO,CAACC,IAAR,CAAa,sDAAb;AACAP,IAAAA,aAAa,GAAGQ,SAAhB;AACH;;AAED,MAAI,CAACV,KAAD,IAAU,CAACK,KAAK,CAAC,YAAD,CAAhB,IAAkC,CAACA,KAAK,CAAC,iBAAD,CAA5C,EAAiE;AAC7D;AACAG,IAAAA,OAAO,CAACC,IAAR,CAAa,0BAAb;AACH;;wBAEkCX,QAAA,4BAAeO,KAAK,CAACE,OAArB,2DAAgCJ,cAAhC,yCAAkD,KAAlD;MAA5BQ;MAAcC;;AACrB,MAAMC,SAAS,sBAAGR,KAAK,CAACE,OAAT,6DAAoBI,YAAnC;AAEA,MAAMG,WAAW,GAAGhB,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMiB,WAAW,GAAGC,UAAU,CAACF,WAAD,EAAcf,GAAd,CAA9B;AACAD,EAAAA,SAAA,CACI,SAASmB,gBAAT;AACI,QAAIH,WAAW,CAACI,OAAZ,IAAuB,OAAOhB,aAAP,KAAyB,SAApD,EAA+D;AAC3DY,MAAAA,WAAW,CAACI,OAAZ,CAAoBhB,aAApB,GAAoCA,aAApC;AACH;AACJ,GALL,EAMI,CAACA,aAAD,CANJ;AASA,sBACIJ,aAAA,CAACqB,GAAD;AACIC,IAAAA,EAAE,EAAC;AACHC,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPxB,QAAQ,GAAGuB,MAAM,CAACvB,QAAV,GAAqB,IAFtB,EAGPY,SAAS,GAAGW,MAAM,CAACjB,OAAV,GAAoB,IAHtB,EAIP,6BAJO;GAJf,eAWIT,aAAA,CAAC4B,cAAD,MAAA,eACI5B,aAAA,QAAA,oBACQO;AACJN,IAAAA,GAAG,EAAEgB;AACLY,IAAAA,IAAI,EAAC;AACLpB,IAAAA,OAAO,EAAEM;AACTZ,IAAAA,QAAQ,EAAEA;AACVG,IAAAA,QAAQ,EAAE,kBAACwB,KAAD;AACNxB,MAAAA,SAAQ,SAAR,IAAAA,SAAQ,WAAR,YAAAA,SAAQ,CAAGwB,KAAH,CAAR;;AACA,UAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;AACzBjB,QAAAA,UAAU,CAACgB,KAAK,CAACE,aAAN,CAAoBvB,OAArB,CAAV;AACH;AACJ;IAXL,CADJ,CAXJ,eA0BIT,aAAA,CAACiC,YAAD;;AAEIxB,IAAAA,OAAO,EAAEM;AACTX,IAAAA,aAAa,EAAEA;AACfD,IAAAA,QAAQ,EAAEA;GAJd,CA1BJ,EAgCKD,KAAK,gBAAGF,aAAA,CAACkC,IAAD,MAAA,EAAOhC,KAAP,CAAH,GAA0B,IAhCpC,CADJ;AAoCH,CAlEqB;;;;"}
|
|
@@ -1,45 +1,56 @@
|
|
|
1
1
|
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { createElement } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { polymorphicComponent } from '../../utils/polymorphism.js';
|
|
4
4
|
import { getClassNames, mapResponsiveProp } from '../responsive-props.js';
|
|
5
5
|
import { Box } from '../box/box.js';
|
|
6
6
|
import styles from './columns.module.css.js';
|
|
7
|
-
import styles$1 from '../stack/stack.module.css.js';
|
|
8
7
|
|
|
9
|
-
var Column = /*#__PURE__*/
|
|
8
|
+
var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
|
|
10
9
|
var _ref$width = _ref.width,
|
|
11
10
|
width = _ref$width === void 0 ? 'auto' : _ref$width,
|
|
12
11
|
children = _ref.children,
|
|
13
|
-
|
|
12
|
+
exceptionallySetClassName = _ref.exceptionallySetClassName,
|
|
13
|
+
props = _objectWithoutPropertiesLoose(_ref, ["width", "children", "exceptionallySetClassName"]);
|
|
14
14
|
|
|
15
|
-
return /*#__PURE__*/createElement(Box, Object.assign({
|
|
16
|
-
className: [styles.column, width !== 'content' ? getClassNames(styles, 'columnWidth', width.replace('/', '-')) : null],
|
|
15
|
+
return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
|
|
16
|
+
className: [exceptionallySetClassName, styles.column, width !== 'content' ? getClassNames(styles, 'columnWidth', width.replace('/', '-')) : null],
|
|
17
17
|
minWidth: 0,
|
|
18
18
|
width: width !== 'content' ? 'full' : undefined,
|
|
19
|
+
height: "full",
|
|
19
20
|
flexShrink: width === 'content' ? 0 : undefined,
|
|
20
21
|
ref: ref
|
|
21
|
-
}
|
|
22
|
+
}), children);
|
|
22
23
|
});
|
|
23
|
-
var Columns = /*#__PURE__*/
|
|
24
|
+
var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
|
|
24
25
|
var space = _ref2.space,
|
|
25
|
-
align = _ref2.align,
|
|
26
|
-
|
|
26
|
+
_ref2$align = _ref2.align,
|
|
27
|
+
align = _ref2$align === void 0 ? 'left' : _ref2$align,
|
|
28
|
+
_ref2$alignY = _ref2.alignY,
|
|
29
|
+
alignY = _ref2$alignY === void 0 ? 'top' : _ref2$alignY,
|
|
27
30
|
collapseBelow = _ref2.collapseBelow,
|
|
28
31
|
children = _ref2.children,
|
|
29
|
-
|
|
32
|
+
exceptionallySetClassName = _ref2.exceptionallySetClassName,
|
|
33
|
+
props = _objectWithoutPropertiesLoose(_ref2, ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"]);
|
|
30
34
|
|
|
31
|
-
return /*#__PURE__*/createElement(Box, Object.assign({
|
|
32
|
-
className: [
|
|
33
|
-
flexDirection: collapseBelow === 'desktop' ? ['column', 'column', 'row'] : collapseBelow === 'tablet' ? ['column', 'row'] : 'row',
|
|
35
|
+
return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
|
|
36
|
+
className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
|
|
34
37
|
display: "flex",
|
|
38
|
+
flexDirection: collapseBelow === 'desktop' ? {
|
|
39
|
+
mobile: 'column',
|
|
40
|
+
tablet: 'column',
|
|
41
|
+
desktop: 'row'
|
|
42
|
+
} : collapseBelow === 'tablet' ? {
|
|
43
|
+
mobile: 'column',
|
|
44
|
+
tablet: 'row'
|
|
45
|
+
} : 'row',
|
|
35
46
|
alignItems: mapResponsiveProp(alignY, function (alignY) {
|
|
36
|
-
return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' :
|
|
47
|
+
return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY;
|
|
37
48
|
}),
|
|
38
49
|
justifyContent: mapResponsiveProp(align, function (align) {
|
|
39
|
-
return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' :
|
|
50
|
+
return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align;
|
|
40
51
|
}),
|
|
41
52
|
ref: ref
|
|
42
|
-
}
|
|
53
|
+
}), children);
|
|
43
54
|
});
|
|
44
55
|
|
|
45
56
|
export { Column, Columns };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n | 'auto'\n | 'content'\n | '1/2'\n | '1/3'\n | '2/3'\n | '1/4'\n | '3/4'\n | '1/5'\n | '2/5'\n | '3/5'\n | '4/5'\n\ninterface ColumnProps {\n width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n { width = 'auto', children, exceptionallySetClassName, ...props },\n ref,\n) {\n return (\n <Box\n {...props}\n className={[\n exceptionallySetClassName,\n styles.column,\n width !== 'content'\n ? getClassNames(styles, 'columnWidth', width.replace('/', '-'))\n : null,\n ]}\n minWidth={0}\n width={width !== 'content' ? 'full' : undefined}\n height=\"full\"\n flexShrink={width === 'content' ? 0 : undefined}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n space?: ResponsiveProp<Space>\n align?: ResponsiveProp<ColumnsHorizontalAlignment>\n alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n {\n space,\n align = 'left',\n alignY = 'top',\n collapseBelow,\n children,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n return (\n <Box\n {...props}\n className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n display=\"flex\"\n flexDirection={\n collapseBelow === 'desktop'\n ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n : collapseBelow === 'tablet'\n ? { mobile: 'column', tablet: 'row' }\n : 'row'\n }\n alignItems={mapResponsiveProp(alignY, (alignY) =>\n alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n )}\n justifyContent={mapResponsiveProp(align, (align) =>\n align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n )}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\nexport type {\n ColumnProps,\n ColumnsProps,\n ColumnWidth,\n ColumnsCollapseBelow,\n ColumnsHorizontalAlignment,\n ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","ref","width","children","exceptionallySetClassName","props","React","Box","className","styles","column","getClassNames","replace","minWidth","undefined","height","flexShrink","Columns","space","align","alignY","collapseBelow","display","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;IA4BMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;wBAClDC;MAAAA,gCAAQ;MAAQC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAG1D,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJG,IAAAA,SAAS,EAAE,CACPJ,yBADO,EAEPK,MAAM,CAACC,MAFA,EAGPR,KAAK,KAAK,SAAV,GACMS,aAAa,CAACF,MAAD,EAAS,aAAT,EAAwBP,KAAK,CAACU,OAAN,CAAc,GAAd,EAAmB,GAAnB,CAAxB,CADnB,GAEM,IALC;AAOXC,IAAAA,QAAQ,EAAE;AACVX,IAAAA,KAAK,EAAEA,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BY;AACtCC,IAAAA,MAAM,EAAC;AACPC,IAAAA,UAAU,EAAEd,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0BY;AACtCb,IAAAA,GAAG,EAAEA;IAbT,EAeKE,QAfL,CADJ;AAmBH,CAvBkC;IAoC7Bc,OAAO,gBAAGjB,oBAAoB,CAAsB,SAASiB,OAAT,QAUtDhB,GAVsD;MAElDiB,cAAAA;0BACAC;MAAAA,iCAAQ;2BACRC;MAAAA,mCAAS;MACTC,sBAAAA;MACAlB,iBAAAA;MACAC,kCAAAA;MACGC;;AAIP,sBACIC,aAAA,CAACC,GAAD,oBACQF;AACJG,IAAAA,SAAS,EAAE,CAACJ,yBAAD,EAA4BO,aAAa,CAACF,MAAD,EAAS,OAAT,EAAkBS,KAAlB,CAAzC;AACXI,IAAAA,OAAO,EAAC;AACRC,IAAAA,aAAa,EACTF,aAAa,KAAK,SAAlB,GACM;AAAEG,MAAAA,MAAM,EAAE,QAAV;AAAoBC,MAAAA,MAAM,EAAE,QAA5B;AAAsCC,MAAAA,OAAO,EAAE;AAA/C,KADN,GAEML,aAAa,KAAK,QAAlB,GACA;AAAEG,MAAAA,MAAM,EAAE,QAAV;AAAoBC,MAAAA,MAAM,EAAE;AAA5B,KADA,GAEA;AAEVE,IAAAA,UAAU,EAAEC,iBAAiB,CAACR,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkCA,MADjC;AAAA,KAAT;AAG7BS,IAAAA,cAAc,EAAED,iBAAiB,CAACT,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgCA,KAD5B;AAAA,KAAR;AAGjClB,IAAAA,GAAG,EAAEA;IAjBT,EAmBKE,QAnBL,CADJ;AAuBH,CAnCmC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var modules_67f2d07a = {"space-xsmall":"
|
|
1
|
+
var modules_67f2d07a = {"space-xsmall":"_6f59c771","column":"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
|
|
2
2
|
|
|
3
3
|
export default modules_67f2d07a;
|
|
4
4
|
//# sourceMappingURL=columns.module.css.js.map
|
|
@@ -6,12 +6,12 @@ import styles from './divider.module.css.js';
|
|
|
6
6
|
|
|
7
7
|
function Divider(_ref) {
|
|
8
8
|
var _ref$weight = _ref.weight,
|
|
9
|
-
weight = _ref$weight === void 0 ? '
|
|
9
|
+
weight = _ref$weight === void 0 ? 'tertiary' : _ref$weight,
|
|
10
10
|
props = _objectWithoutPropertiesLoose(_ref, ["weight"]);
|
|
11
11
|
|
|
12
12
|
return /*#__PURE__*/createElement(Box, Object.assign({
|
|
13
|
-
|
|
14
|
-
className:
|
|
13
|
+
as: "hr",
|
|
14
|
+
className: getClassNames(styles, 'weight', weight)
|
|
15
15
|
}, props));
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sources":["../../../src/new-components/divider/divider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\n\nimport styles from './divider.module.css'\n\
|
|
1
|
+
{"version":3,"file":"divider.js","sources":["../../../src/new-components/divider/divider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport type { DividerWeight } from '../common-types'\n\nimport styles from './divider.module.css'\n\ninterface DividerProps {\n weight?: Exclude<DividerWeight, 'none'>\n}\n\nfunction Divider({ weight = 'tertiary', ...props }: DividerProps) {\n return <Box as=\"hr\" className={getClassNames(styles, 'weight', weight)} {...props} />\n}\n\nexport type { DividerProps, DividerWeight }\nexport { Divider }\n"],"names":["Divider","weight","props","React","Box","as","className","getClassNames","styles"],"mappings":";;;;;;AAWA,SAASA,OAAT;yBAAmBC;MAAAA,kCAAS;MAAeC;;AACvC,sBAAOC,aAAA,CAACC,GAAD;AAAKC,IAAAA,EAAE,EAAC;AAAKC,IAAAA,SAAS,EAAEC,aAAa,CAACC,MAAD,EAAS,QAAT,EAAmBP,MAAnB;KAAgCC,MAArE,CAAP;AACH;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var modules_c742c4d7 = {"
|
|
1
|
+
var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
|
|
2
2
|
|
|
3
3
|
export default modules_c742c4d7;
|
|
4
4
|
//# sourceMappingURL=divider.module.css.js.map
|
|
@@ -13,15 +13,21 @@ var Heading = /*#__PURE__*/forwardRef(function Heading(_ref, ref) {
|
|
|
13
13
|
tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
|
|
14
14
|
children = _ref.children,
|
|
15
15
|
lineClamp = _ref.lineClamp,
|
|
16
|
-
|
|
16
|
+
align = _ref.align,
|
|
17
|
+
exceptionallySetClassName = _ref.exceptionallySetClassName,
|
|
18
|
+
props = _objectWithoutPropertiesLoose(_ref, ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"]);
|
|
17
19
|
|
|
18
20
|
// In TypeScript v4.1, this would be properly recognized without needing the type assertion
|
|
19
21
|
// https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
|
|
20
22
|
var headingElementName = "h" + level;
|
|
21
23
|
var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
|
|
22
24
|
return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
|
|
23
|
-
className: [styles.heading, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, getClassNames(styles, 'size', size), lineClampMultipleLines ? styles.
|
|
24
|
-
|
|
25
|
+
className: [exceptionallySetClassName, styles.heading, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, getClassNames(styles, 'size', size), lineClampMultipleLines ? styles.lineClampMultipleLines : null, lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null],
|
|
26
|
+
textAlign: align,
|
|
27
|
+
// Prevents emojis from being cut-off
|
|
28
|
+
// See https://github.com/Doist/reactist/pull/528
|
|
29
|
+
paddingRight: lineClamp ? 'xsmall' : undefined,
|
|
30
|
+
as: headingElementName,
|
|
25
31
|
ref: ref
|
|
26
32
|
}), children);
|
|
27
33
|
});
|