@doist/reactist 24.2.0-beta → 25.0.0-beta.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/dist/reactist.cjs.development.js +336 -261
- 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/avatar/avatar.js.map +1 -1
- package/es/banner/banner.js.map +1 -1
- package/es/box/box.js +94 -19
- package/es/box/box.js.map +1 -1
- package/es/button/button.js +93 -18
- package/es/button/button.js.map +1 -1
- package/es/button/button.module.css.js +4 -0
- package/es/button/button.module.css.js.map +1 -0
- package/es/checkbox-field/checkbox-field.js.map +1 -1
- package/es/components/deprecated-dropdown/dropdown.js.map +1 -1
- package/es/components/deprecated-input/input.js +5 -1
- package/es/components/deprecated-input/input.js.map +1 -1
- package/es/heading/heading.js.map +1 -1
- package/es/index.js +2 -3
- package/es/index.js.map +1 -1
- package/es/loading/loading.js.map +1 -1
- package/es/menu/menu.js +56 -34
- package/es/menu/menu.js.map +1 -1
- package/es/modal/modal.js +18 -16
- package/es/modal/modal.js.map +1 -1
- package/es/password-field/password-field.js +2 -2
- package/es/password-field/password-field.js.map +1 -1
- package/es/prose/prose.js.map +1 -1
- package/es/select-field/select-field.js.map +1 -1
- package/es/switch-field/switch-field.js.map +1 -1
- package/es/tabs/tabs.js +26 -32
- package/es/tabs/tabs.js.map +1 -1
- package/es/text-area/text-area.js.map +1 -1
- package/es/text-field/text-field.js.map +1 -1
- package/es/toast/static-toast.js +2 -2
- package/es/toast/static-toast.js.map +1 -1
- package/es/tooltip/tooltip.js +13 -12
- package/es/tooltip/tooltip.js.map +1 -1
- package/es/utils/polymorphism.js +1 -1
- package/es/utils/polymorphism.js.map +1 -1
- package/lib/alert/alert.d.ts +1 -1
- package/lib/avatar/avatar.d.ts +4 -4
- package/lib/avatar/avatar.js.map +1 -1
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +2 -2
- package/lib/banner/banner.js.map +1 -1
- package/lib/base-field/base-field.d.ts +3 -3
- package/lib/box/box.d.ts +2 -1
- package/lib/box/box.js +1 -1
- package/lib/box/box.js.map +1 -1
- package/lib/button/button.d.ts +123 -11
- package/lib/button/button.js +1 -1
- package/lib/button/button.js.map +1 -1
- package/lib/button/button.module.css.js +2 -0
- package/lib/button/button.module.css.js.map +1 -0
- package/lib/checkbox-field/checkbox-field.d.ts +29 -17
- package/lib/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/checkbox-field/checkbox-icon.d.ts +1 -1
- package/lib/components/color-picker/color-picker.d.ts +2 -2
- package/lib/components/deprecated-dropdown/dropdown.d.ts +5 -5
- package/lib/components/deprecated-dropdown/dropdown.js.map +1 -1
- package/lib/components/deprecated-input/input.d.ts +6 -6
- package/lib/components/deprecated-input/input.js +1 -1
- package/lib/components/deprecated-input/input.js.map +1 -1
- package/lib/components/deprecated-select/select.d.ts +2 -2
- package/lib/components/icons/CloseIcon.svg.d.ts +2 -2
- package/lib/components/icons/ThinQuestionMarkIcon.svg.d.ts +2 -2
- package/lib/components/icons/ThreeDotsIcon.svg.d.ts +2 -2
- package/lib/components/keyboard-shortcut/keyboard-shortcut.d.ts +1 -1
- package/lib/components/progress-bar/progress-bar.d.ts +2 -2
- package/lib/components/time/time.d.ts +1 -1
- package/lib/divider/divider.d.ts +2 -2
- package/lib/heading/heading.d.ts +4 -12
- package/lib/heading/heading.js.map +1 -1
- package/lib/icons/alert-icon.d.ts +2 -2
- package/lib/icons/close-icon.d.ts +2 -2
- package/lib/icons/password-hidden-icon.d.ts +2 -2
- package/lib/icons/password-visible-icon.d.ts +2 -2
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -1
- package/lib/loading/loading.d.ts +6 -7
- package/lib/loading/loading.js.map +1 -1
- package/lib/menu/menu.d.ts +20 -20
- package/lib/menu/menu.js +1 -1
- package/lib/menu/menu.js.map +1 -1
- package/lib/modal/modal-stories-components.d.ts +9 -9
- package/lib/modal/modal.d.ts +24 -35
- package/lib/modal/modal.js +1 -1
- package/lib/modal/modal.js.map +1 -1
- package/lib/notice/notice.d.ts +1 -1
- package/lib/password-field/password-field.d.ts +3 -8
- package/lib/password-field/password-field.js +1 -1
- package/lib/password-field/password-field.js.map +1 -1
- package/lib/prose/prose.d.ts +4 -7
- package/lib/prose/prose.js.map +1 -1
- package/lib/select-field/select-field.d.ts +3 -7
- package/lib/select-field/select-field.js.map +1 -1
- package/lib/spinner/spinner.d.ts +2 -2
- package/lib/switch-field/switch-field.d.ts +12 -11
- package/lib/switch-field/switch-field.js.map +1 -1
- package/lib/tabs/tabs.d.ts +24 -16
- package/lib/tabs/tabs.js +1 -1
- package/lib/tabs/tabs.js.map +1 -1
- package/lib/text-area/text-area.d.ts +3 -8
- package/lib/text-area/text-area.js.map +1 -1
- package/lib/text-field/text-field.d.ts +5 -10
- package/lib/text-field/text-field.js.map +1 -1
- package/lib/toast/static-toast.js +1 -1
- package/lib/toast/static-toast.js.map +1 -1
- package/lib/toast/use-toasts.d.ts +1 -1
- package/lib/tooltip/tooltip.d.ts +4 -7
- package/lib/tooltip/tooltip.js +1 -1
- package/lib/tooltip/tooltip.js.map +1 -1
- package/lib/utils/common-types.d.ts +19 -0
- package/lib/utils/polymorphism.d.ts +5 -21
- package/lib/utils/polymorphism.js.map +1 -1
- package/lib/utils/test-helpers.d.ts +2 -2
- package/package.json +3 -3
- package/styles/alert.css +2 -2
- package/styles/{base-button.css → button.css} +2 -2
- package/styles/button.module.css.css +1 -0
- package/styles/modal.css +2 -2
- package/styles/password-field.css +2 -2
- package/styles/reactist.css +1 -1
- package/styles/static-toast.css +2 -2
- package/styles/use-toasts.css +2 -2
- package/es/base-button/base-button.js +0 -75
- package/es/base-button/base-button.js.map +0 -1
- package/es/base-button/base-button.module.css.js +0 -4
- package/es/base-button/base-button.module.css.js.map +0 -1
- package/es/button-link/button-link.js +0 -38
- package/es/button-link/button-link.js.map +0 -1
- package/lib/base-button/base-button.d.ts +0 -80
- package/lib/base-button/base-button.js +0 -2
- package/lib/base-button/base-button.js.map +0 -1
- package/lib/base-button/base-button.module.css.js +0 -2
- package/lib/base-button/base-button.module.css.js.map +0 -1
- package/lib/base-button/index.d.ts +0 -1
- package/lib/button-link/button-link-story-wrapper.d.ts +0 -7
- package/lib/button-link/button-link.d.ts +0 -13
- package/lib/button-link/button-link.js +0 -2
- package/lib/button-link/button-link.js.map +0 -1
- package/lib/button-link/button-link.test.d.ts +0 -1
- package/lib/button-link/index.d.ts +0 -1
- package/styles/base-button.module.css.css +0 -1
package/styles/static-toast.css
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
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
|
-
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
7
6
|
:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
|
|
8
|
-
|
|
7
|
+
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
8
|
+
:root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._3930afa0{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._90654824{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._3930afa0:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._3930afa0{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._3930afa0.c05d17c2{border-radius:1000px}._3930afa0._1e29d236{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._3930afa0._7246d092{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._3930afa0._2d084671{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._3930afa0:not(._2b0b9d95){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._3930afa0:focus-visible:not([aria-disabled=true]),._3930afa0:hover:not([aria-disabled=true]),._3930afa0[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._3930afa0._2b0b9d95{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._3930afa0:not(.abd5766f){min-width:68px}._3930afa0.abd5766f{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._3930afa0 ._380e7c73{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._3930afa0 ._20fe4105{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3930afa0>*{pointer-events:none}._7ea1378e{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._64ee8afd{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._650176bf{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.aa19cb97,._650176bf{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.aa19cb97{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7ea1378e._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._64ee8afd._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._64ee8afd._7a2d9a8c:hover{border-color:var(--reactist-btn-hover-tint)}._64ee8afd._7a2d9a8c._2b0b9d95{border-color:var(--reactist-btn-disabled-tint)}.aa19cb97._7a2d9a8c,._650176bf._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
|
|
9
9
|
._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
|
|
10
10
|
.a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
|
|
11
11
|
._616cc3f3{bottom:0;pointer-events:none;z-index:var(--reactist-stacking-order-toast)}._1b5f8e86{pointer-events:all;gap:var(--reactist-spacing-medium);box-shadow:var(--reactist-toast-box-shadow)}.ce2e3476{color:var(--reactist-content-primary)}@media (max-width:500px){._1b5f8e86{width:100%!important}}
|
package/styles/use-toasts.css
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
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
6
|
._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
|
|
7
|
-
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
8
7
|
:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
|
|
9
|
-
|
|
8
|
+
._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
|
|
9
|
+
:root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._3930afa0{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._90654824{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._3930afa0:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._3930afa0{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._3930afa0.c05d17c2{border-radius:1000px}._3930afa0._1e29d236{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._3930afa0._7246d092{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._3930afa0._2d084671{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._3930afa0:not(._2b0b9d95){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._3930afa0:focus-visible:not([aria-disabled=true]),._3930afa0:hover:not([aria-disabled=true]),._3930afa0[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._3930afa0._2b0b9d95{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._3930afa0:not(.abd5766f){min-width:68px}._3930afa0.abd5766f{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._3930afa0 ._380e7c73{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._3930afa0 ._20fe4105{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._3930afa0>*{pointer-events:none}._7ea1378e{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._64ee8afd{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._650176bf{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.aa19cb97,._650176bf{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.aa19cb97{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7ea1378e._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._64ee8afd._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._64ee8afd._7a2d9a8c:hover{border-color:var(--reactist-btn-hover-tint)}._64ee8afd._7a2d9a8c._2b0b9d95{border-color:var(--reactist-btn-disabled-tint)}.aa19cb97._7a2d9a8c,._650176bf._7a2d9a8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
|
|
10
10
|
.a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
|
|
11
11
|
._616cc3f3{bottom:0;pointer-events:none;z-index:var(--reactist-stacking-order-toast)}._1b5f8e86{pointer-events:all;gap:var(--reactist-spacing-medium);box-shadow:var(--reactist-toast-box-shadow)}.ce2e3476{color:var(--reactist-content-primary)}@media (max-width:500px){._1b5f8e86{width:100%!important}}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { createElement, Fragment } from 'react';
|
|
3
|
-
import { polymorphicComponent } from '../utils/polymorphism.js';
|
|
4
|
-
import { Box } from '../box/box.js';
|
|
5
|
-
import { Tooltip } from '../tooltip/tooltip.js';
|
|
6
|
-
import { Spinner } from '../spinner/spinner.js';
|
|
7
|
-
import styles from './base-button.module.css.js';
|
|
8
|
-
|
|
9
|
-
const _excluded = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
|
|
10
|
-
|
|
11
|
-
function preventDefault(event) {
|
|
12
|
-
event.preventDefault();
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* The component that powers `Button` and `ButtonLink`, where the button styling logic and some
|
|
16
|
-
* common functionality resides. This component is internal to Reactist.
|
|
17
|
-
*
|
|
18
|
-
* @see Button
|
|
19
|
-
* @see ButtonLink
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
|
|
24
|
-
let {
|
|
25
|
-
as = 'div',
|
|
26
|
-
variant,
|
|
27
|
-
tone = 'normal',
|
|
28
|
-
size = 'normal',
|
|
29
|
-
shape = 'normal',
|
|
30
|
-
disabled = false,
|
|
31
|
-
loading = false,
|
|
32
|
-
tooltip,
|
|
33
|
-
onClick,
|
|
34
|
-
exceptionallySetClassName,
|
|
35
|
-
children,
|
|
36
|
-
startIcon,
|
|
37
|
-
endIcon,
|
|
38
|
-
icon,
|
|
39
|
-
width = 'auto',
|
|
40
|
-
align = 'center'
|
|
41
|
-
} = _ref,
|
|
42
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
43
|
-
|
|
44
|
-
const isDisabled = loading || disabled;
|
|
45
|
-
const buttonElement = /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
46
|
-
as: as,
|
|
47
|
-
ref: ref,
|
|
48
|
-
"aria-disabled": isDisabled,
|
|
49
|
-
onClick: isDisabled ? preventDefault : onClick,
|
|
50
|
-
width: icon ? undefined : width,
|
|
51
|
-
className: [exceptionallySetClassName, styles.baseButton, styles["variant-" + variant], styles["tone-" + tone], styles["size-" + size], shape === 'rounded' ? styles['shape-rounded'] : null, icon ? styles.iconButton : null, disabled ? styles.disabled : null]
|
|
52
|
-
}), icon ? loading && /*#__PURE__*/createElement(Spinner, null) || icon : /*#__PURE__*/createElement(Fragment, null, startIcon ? /*#__PURE__*/createElement(Box, {
|
|
53
|
-
display: "flex",
|
|
54
|
-
className: styles.startIcon,
|
|
55
|
-
"aria-hidden": true
|
|
56
|
-
}, loading && !endIcon ? /*#__PURE__*/createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/createElement(Box, {
|
|
57
|
-
as: "span",
|
|
58
|
-
className: styles.label,
|
|
59
|
-
overflow: "hidden",
|
|
60
|
-
width: width === 'full' ? 'full' : undefined,
|
|
61
|
-
textAlign: width === 'auto' ? 'center' : align
|
|
62
|
-
}, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/createElement(Box, {
|
|
63
|
-
display: "flex",
|
|
64
|
-
className: styles.endIcon,
|
|
65
|
-
"aria-hidden": true
|
|
66
|
-
}, loading ? /*#__PURE__*/createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
|
|
67
|
-
|
|
68
|
-
const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip;
|
|
69
|
-
return tooltipContent ? /*#__PURE__*/createElement(Tooltip, {
|
|
70
|
-
content: tooltipContent
|
|
71
|
-
}, buttonElement) : buttonElement;
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
export { BaseButton };
|
|
75
|
-
//# sourceMappingURL=base-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.js","sources":["../../src/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,4 +0,0 @@
|
|
|
1
|
-
var modules_b9569bce = {"baseButton":"_8313bd46","label":"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888","disabled":"_43792df1","iconButton":"_8644eccb","startIcon":"a44d4350","endIcon":"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
|
|
2
|
-
|
|
3
|
-
export default modules_b9569bce;
|
|
4
|
-
//# sourceMappingURL=base-button.module.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { createElement } from 'react';
|
|
3
|
-
import { polymorphicComponent } from '../utils/polymorphism.js';
|
|
4
|
-
import { BaseButton } from '../base-button/base-button.js';
|
|
5
|
-
|
|
6
|
-
const _excluded = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
|
|
7
|
-
/**
|
|
8
|
-
* A semantic link that looks like a button, exactly matching the `Button` component in all visual
|
|
9
|
-
* aspects.
|
|
10
|
-
*
|
|
11
|
-
* @see Button
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
|
|
15
|
-
let {
|
|
16
|
-
as = 'a',
|
|
17
|
-
variant,
|
|
18
|
-
tone = 'normal',
|
|
19
|
-
size = 'normal',
|
|
20
|
-
exceptionallySetClassName,
|
|
21
|
-
openInNewTab = false
|
|
22
|
-
} = _ref,
|
|
23
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
|
-
|
|
25
|
-
return /*#__PURE__*/createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
26
|
-
as: as,
|
|
27
|
-
ref: ref,
|
|
28
|
-
variant: variant,
|
|
29
|
-
tone: tone,
|
|
30
|
-
size: size,
|
|
31
|
-
exceptionallySetClassName: exceptionallySetClassName,
|
|
32
|
-
target: openInNewTab ? '_blank' : undefined,
|
|
33
|
-
rel: openInNewTab ? 'noopener noreferrer' : undefined
|
|
34
|
-
}));
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
export { ButtonLink };
|
|
38
|
-
//# sourceMappingURL=button-link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-link.js","sources":["../../src/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 '../utils/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,80 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { TooltipProps } from '../tooltip';
|
|
3
|
-
declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
|
|
4
|
-
declare type ButtonTone = 'normal' | 'destructive';
|
|
5
|
-
declare type ButtonSize = 'small' | 'normal' | 'large';
|
|
6
|
-
declare type IconElement = React.ReactChild;
|
|
7
|
-
declare type CommonProps = {
|
|
8
|
-
/**
|
|
9
|
-
* The button's variant.
|
|
10
|
-
*/
|
|
11
|
-
variant: ButtonVariant;
|
|
12
|
-
/**
|
|
13
|
-
* The button's tone.
|
|
14
|
-
* @default 'normal'
|
|
15
|
-
*/
|
|
16
|
-
tone?: ButtonTone;
|
|
17
|
-
/**
|
|
18
|
-
* The button's size.
|
|
19
|
-
* @default 'normal'
|
|
20
|
-
*/
|
|
21
|
-
size?: ButtonSize;
|
|
22
|
-
/**
|
|
23
|
-
* Controls the shape of the button. Specifically, it allows to make it have slightly curved
|
|
24
|
-
* corners (the default) vs. having them fully curved to the point that they are as round as
|
|
25
|
-
* possible. In icon-only buttons this allows to have the button be circular.
|
|
26
|
-
* @default 'normal'
|
|
27
|
-
*/
|
|
28
|
-
shape?: 'normal' | 'rounded';
|
|
29
|
-
/**
|
|
30
|
-
* Whether the button is disabled or not.
|
|
31
|
-
* @default false
|
|
32
|
-
*/
|
|
33
|
-
disabled?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* Whether the button is busy/loading.
|
|
36
|
-
*
|
|
37
|
-
* A button in this state is functionally and semantically disabled. Visually is does not look
|
|
38
|
-
* dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
|
|
39
|
-
*
|
|
40
|
-
* @default false
|
|
41
|
-
*/
|
|
42
|
-
loading?: boolean;
|
|
43
|
-
/**
|
|
44
|
-
* A tooltip linked to the button element.
|
|
45
|
-
*/
|
|
46
|
-
tooltip?: TooltipProps['content'];
|
|
47
|
-
};
|
|
48
|
-
declare type AlignmentProps = {
|
|
49
|
-
width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';
|
|
50
|
-
align?: 'start' | 'center' | 'end';
|
|
51
|
-
};
|
|
52
|
-
declare type AutoWidthProps = {
|
|
53
|
-
width?: 'auto';
|
|
54
|
-
align?: never;
|
|
55
|
-
};
|
|
56
|
-
declare type IconButtonProps = {
|
|
57
|
-
icon: IconElement;
|
|
58
|
-
'aria-label': string;
|
|
59
|
-
children?: never;
|
|
60
|
-
startIcon?: never;
|
|
61
|
-
endIcon?: never;
|
|
62
|
-
width?: never;
|
|
63
|
-
align?: never;
|
|
64
|
-
};
|
|
65
|
-
declare type LabelledButtonProps = {
|
|
66
|
-
children: NonNullable<React.ReactNode>;
|
|
67
|
-
startIcon?: IconElement;
|
|
68
|
-
endIcon?: IconElement;
|
|
69
|
-
icon?: never;
|
|
70
|
-
} & (AutoWidthProps | AlignmentProps);
|
|
71
|
-
export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps);
|
|
72
|
-
/**
|
|
73
|
-
* The component that powers `Button` and `ButtonLink`, where the button styling logic and some
|
|
74
|
-
* common functionality resides. This component is internal to Reactist.
|
|
75
|
-
*
|
|
76
|
-
* @see Button
|
|
77
|
-
* @see ButtonLink
|
|
78
|
-
*/
|
|
79
|
-
export declare const BaseButton: import("../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
|
|
80
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../tooltip/tooltip.js"),o=require("../spinner/spinner.js"),i=require("./base-button.module.css.js");const r=["as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,d){let{as:u="div",variant:c,tone:p="normal",size:m="normal",shape:f="normal",disabled:b=!1,loading:h=!1,tooltip:x,onClick:v,exceptionallySetClassName:j,children:B,startIcon:E,endIcon:g,icon:q,width:y="auto",align:S="center"}=t,C=e.objectWithoutProperties(t,r);const I=h||b,N=l.createElement(n.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:u,ref:d,"aria-disabled":I,onClick:I?s:v,width:q?void 0:y,className:[j,i.default.baseButton,i.default["variant-"+c],i.default["tone-"+p],i.default["size-"+m],"rounded"===f?i.default["shape-rounded"]:null,q?i.default.iconButton:null,b?i.default.disabled:null]}),q?h&&l.createElement(o.Spinner,null)||q:l.createElement(l.Fragment,null,E?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},h&&!g?l.createElement(o.Spinner,null):E):null,B?l.createElement(n.Box,{as:"span",className:i.default.label,overflow:"hidden",width:"full"===y?"full":void 0,textAlign:"auto"===y?"center":S},B):null,g||h&&!E?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},h?l.createElement(o.Spinner,null):g):null)),w=q&&void 0===x?C["aria-label"]:x;return w?l.createElement(a.Tooltip,{content:w},N):N}));
|
|
2
|
-
//# sourceMappingURL=base-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.js","sources":["../../src/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","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":"6eAOA,SAASA,EAAeC,GACpBA,EAAMD,oCA4FgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,MAKIA,EAAQ,SALZC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,YAAVC,EAAsBmB,UAAO,iBAAmB,KAChDV,EAAOU,UAAOE,WAAa,KAC3BpB,EAAWkB,UAAOlB,SAAW,QAGhCQ,EACIP,GAAWa,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCL,IAAYM,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EACGS,gBAACC,OACGpB,GAAG,OACHsB,UAAWC,UAAOK,MAClBC,SAAS,SACTf,MAAiB,SAAVA,EAAmB,YAASO,EACnCS,UAAqB,SAAVhB,EAAmB,SAAWC,GAExCL,GAEL,KACHE,GAAYN,IAAYK,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCN,EAAUa,gBAACO,gBAAad,GAE7B,OAOdmB,EAAiBlB,QAAoBQ,IAAZd,EAAwBS,EAAM,cAAgBT,EAC7E,OAAOwB,EACHZ,gBAACa,WAAQC,QAASF,GAAiBb,GAEnCA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"_8313bd46",label:"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888",disabled:"_43792df1",iconButton:"_8644eccb",startIcon:"a44d4350",endIcon:"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
|
|
2
|
-
//# sourceMappingURL=base-button.module.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './base-button';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ButtonLinkProps } from './button-link';
|
|
3
|
-
declare function ButtonLinkStoryWrapper(props: ButtonLinkProps): JSX.Element;
|
|
4
|
-
declare namespace ButtonLinkStoryWrapper {
|
|
5
|
-
var displayName: string;
|
|
6
|
-
}
|
|
7
|
-
export { ButtonLinkStoryWrapper as ButtonLink };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { BaseButtonProps } from '../base-button';
|
|
3
|
-
import type { OpenInNewTab } from '../utils/common-types';
|
|
4
|
-
declare type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'aria-disabled' | 'target' | 'rel' | 'className'>;
|
|
5
|
-
export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab;
|
|
6
|
-
/**
|
|
7
|
-
* A semantic link that looks like a button, exactly matching the `Button` component in all visual
|
|
8
|
-
* aspects.
|
|
9
|
-
*
|
|
10
|
-
* @see Button
|
|
11
|
-
*/
|
|
12
|
-
export declare const ButtonLink: import("../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
|
|
13
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../utils/polymorphism.js"),o=require("../base-button/base-button.js");const a=["as","variant","tone","size","exceptionallySetClassName","openInNewTab"];exports.ButtonLink=r.polymorphicComponent((function(r,n){let{as:s="a",variant:i,tone:l="normal",size:p="normal",exceptionallySetClassName:u,openInNewTab:c=!1}=r,b=e.objectWithoutProperties(r,a);return t.createElement(o.BaseButton,e.objectSpread2(e.objectSpread2({},b),{},{as:s,ref:n,variant:i,tone:l,size:p,exceptionallySetClassName:u,target:c?"_blank":void 0,rel:c?"noopener noreferrer":void 0}))}));
|
|
2
|
-
//# sourceMappingURL=button-link.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-link.js","sources":["../../src/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 '../utils/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":["polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":"uUAmB0BA,wBAA2C,WAUjEC,OATAC,GACIA,EAAK,IADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,0BAKIA,EALJC,aAMIA,GAAe,KACZC,iCAIP,OACIC,gBAACC,gDACOF,OACJN,GAAIA,EACJD,IAAKA,EACLE,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,0BAA2BA,EAC3BK,OAAQJ,EAAe,cAAWK,EAClCC,IAAKN,EAAe,2BAAwBK"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './button-link';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._8313bd46{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._0051d171{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._8313bd46:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._8313bd46{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._8313bd46._8eb8f0fa{border-radius:1000px}._8313bd46._8b7f1a82{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._8313bd46._5e45d59f{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._8313bd46._95951888{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._8313bd46:not(._43792df1){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._8313bd46:focus-visible:not([aria-disabled=true]),._8313bd46:hover:not([aria-disabled=true]),._8313bd46[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._8313bd46._43792df1{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._8313bd46:not(._8644eccb){min-width:68px}._8313bd46._8644eccb{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._8313bd46 .a44d4350{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._8313bd46 ._073e1aa4{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._8313bd46>*{pointer-events:none}._7a4dbd5f{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._54d56775{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._907a61ca{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.f169a390,._907a61ca{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.f169a390{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7a4dbd5f.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._54d56775.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._54d56775.ccb3eb8c:hover{border-color:var(--reactist-btn-hover-tint)}._54d56775.ccb3eb8c._43792df1{border-color:var(--reactist-btn-disabled-tint)}.f169a390.ccb3eb8c,._907a61ca.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
|