plataforma-fundacao-componentes 2.26.4 → 2.26.6

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.
Files changed (36) hide show
  1. package/dist/assets/icons/Bell16Icon.d.ts +3 -0
  2. package/dist/assets/icons/BellIcon.d.ts +3 -0
  3. package/dist/assets/icons/PercentLoaderIcon.d.ts +5 -3
  4. package/dist/assets/icons/Settings16Icon.d.ts +3 -0
  5. package/dist/components/button/Button.d.ts +1 -2
  6. package/dist/components/checkbox/Checkbox.d.ts +3 -3
  7. package/dist/components/container/Container.d.ts +3 -3
  8. package/dist/components/dropdownMenu/DropdownMenu.d.ts +5 -10
  9. package/dist/components/floatingPanel/FloatingPanel.d.ts +17 -11
  10. package/dist/components/fullHeightContainer/FullHeightContainer.d.ts +2 -8
  11. package/dist/components/fullHeightContainer/FullHeightContainer.stories.d.ts +4 -4
  12. package/dist/components/iconButton/IconButton.d.ts +2 -10
  13. package/dist/components/input/Input.d.ts +1 -14
  14. package/dist/components/itemDropdownDownload/ItemDropdownDownload.d.ts +2 -8
  15. package/dist/components/notification/Notification.d.ts +5 -12
  16. package/dist/components/notification/Notification.stories.d.ts +7 -8
  17. package/dist/components/notificationPanel/NotificationPanel.d.ts +21 -0
  18. package/dist/components/notificationPanel/NotificationPanel.stories.d.ts +6 -0
  19. package/dist/components/tooltipElement/TooltipElement.d.ts +4 -2
  20. package/dist/components/typography/Typography.d.ts +1 -0
  21. package/dist/components/typography/Typography.stories.d.ts +1 -0
  22. package/dist/components/videoModal/VideoModal.d.ts +4 -4
  23. package/dist/hooks/useEvent/useEvent.d.ts +6 -0
  24. package/dist/hooks/useFloatingPanel/useFloatingPanel.d.ts +20 -0
  25. package/dist/hooks/useFloatingPanel/useFloatingPanel.stories.d.ts +8 -0
  26. package/dist/hooks/useSystemInfo/useSystemInfo.d.ts +6 -0
  27. package/dist/hooks/useSystemInfo/useSystemInfo.stories.d.ts +6 -0
  28. package/dist/index.css +237 -206
  29. package/dist/index.d.ts +11 -3
  30. package/dist/index.js +789 -672
  31. package/dist/index.js.map +1 -1
  32. package/dist/index.modern.js +786 -674
  33. package/dist/index.modern.js.map +1 -1
  34. package/dist/libraries/Notification.d.ts +1 -0
  35. package/dist/libraries/System.d.ts +19 -0
  36. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -871,18 +871,20 @@ h5 {
871
871
  display: inline-block; }
872
872
  .component-notification-outer .component-notification {
873
873
  position: absolute;
874
- min-width: 18px;
875
- min-height: 18px;
874
+ min-width: 16px;
875
+ min-height: 16px;
876
876
  display: flex;
877
877
  align-items: center;
878
878
  justify-content: center;
879
879
  border-radius: 200px;
880
- font-size: 13px; }
881
- @media screen and (max-width: 767.98px) {
882
- .component-notification-outer .component-notification {
883
- font-size: 10px;
884
- min-width: 16px;
885
- min-height: 16px; } }
880
+ font-size: 10px;
881
+ font-family: "Nunito", sans-serif;
882
+ padding: 0 4px; }
883
+ .component-notification-outer [data-bordered='true'] {
884
+ border: 1px solid #fefefe; }
885
+ .component-notification-outer .component-notification-primary {
886
+ background-color: #3fa110;
887
+ color: #fefefe; }
886
888
  .component-notification-outer .component-notification-primary {
887
889
  background-color: #3fa110;
888
890
  color: #fefefe; }
@@ -895,6 +897,9 @@ h5 {
895
897
  .component-notification-outer .component-notification-error {
896
898
  background-color: #e60000;
897
899
  color: #fefefe; }
900
+ .component-notification-outer .component-notification-error-light {
901
+ background-color: #e60050;
902
+ color: #fefefe; }
898
903
  .component-notification-outer .component-notification-default {
899
904
  background-color: #323c32;
900
905
  color: #fefefe; }
@@ -2521,10 +2526,12 @@ h5 {
2521
2526
  height: 100%;
2522
2527
  max-height: 100%;
2523
2528
  overflow-y: auto;
2524
- overflow-y: overlay;
2525
2529
  display: flex;
2526
2530
  align-items: flex-start;
2527
- justify-content: center; }
2531
+ justify-content: center;
2532
+ scrollbar-gutter: stable both-edges; }
2533
+ .component-container.mobile {
2534
+ overflow-y: visible; }
2528
2535
  .component-container .component-container-insider {
2529
2536
  position: relative;
2530
2537
  padding-right: 12px;
@@ -3109,37 +3116,12 @@ max-width 100% 540px 720px 960px 1140px
3109
3116
  warningLight: #ffeb98;
3110
3117
  warningDark: #765f00; }
3111
3118
 
3112
- .component-dropdown-menu {
3113
- display: block; }
3114
-
3115
- .component-dropdown-menu-panel {
3116
- padding: 8px 0;
3119
+ .floating-panel {
3117
3120
  z-index: 987;
3118
- background-color: #fefefe;
3119
- position: fixed;
3120
- border-radius: 8px;
3121
- box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
3122
3121
  overflow: auto;
3123
- overflow: overlay;
3124
- max-height: calc(49% - 46px); }
3125
-
3126
- .component-dropdown-menu-panel-fade-enter {
3127
- opacity: 0;
3128
- transform: translateY(10px); }
3129
-
3130
- .component-dropdown-menu-panel-fade-enter-active {
3131
- transition: transform 0.3s ease, opacity 0.3s ease;
3132
- opacity: 1;
3133
- transform: translateY(0); }
3134
-
3135
- .component-dropdown-menu-panel-fade-exit {
3136
- opacity: 1;
3137
- transform: translateY(0); }
3138
-
3139
- .component-dropdown-menu-panel-fade-exit-active {
3140
- transition: transform 0.3s ease, opacity 0.3s ease;
3141
- opacity: 0;
3142
- transform: translateY(10px); }
3122
+ border-radius: 4px;
3123
+ background-color: #fefefe;
3124
+ box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
3143
3125
 
3144
3126
  :export {
3145
3127
  widthXs: 575.98px;
@@ -3168,42 +3150,11 @@ max-width 100% 540px 720px 960px 1140px
3168
3150
  warningLight: #ffeb98;
3169
3151
  warningDark: #765f00; }
3170
3152
 
3171
- .floating-panel-wrapper {
3172
- position: absolute;
3173
- width: 100%;
3174
- bottom: 0;
3175
- left: 0;
3176
- background-color: #ffffff; }
3177
- .floating-panel-wrapper .floating-panel {
3178
- position: fixed;
3179
- z-index: 987;
3180
- background-color: #fefefe;
3181
- -webkit-user-select: none;
3182
- -moz-user-select: none;
3183
- user-select: none;
3184
- overflow: hidden; }
3185
- .floating-panel-wrapper .floating-panel.only-top {
3186
- border-radius: 8px 8px 0 0; }
3187
- .floating-panel-wrapper .floating-panel.only-bottom {
3188
- border-radius: 0 0 8px 8px; }
3189
- .floating-panel-wrapper .floating-panel.all {
3190
- border-radius: 8px; }
3191
- .floating-panel-wrapper .floating-panel.shadow {
3192
- box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
3193
- .floating-panel-wrapper .floating-panel-enter {
3194
- transform: translateY(10px);
3195
- opacity: 0; }
3196
- .floating-panel-wrapper .floating-panel-enter-active {
3197
- transition: transform 0.3s ease, opacity 0.3s ease;
3198
- opacity: 1;
3199
- transform: translateY(0); }
3200
- .floating-panel-wrapper .floating-panel-exit {
3201
- opacity: 1;
3202
- transform: translateY(0); }
3203
- .floating-panel-wrapper .floating-panel-exit-active {
3204
- transition: transform 0.3s ease, opacity 0.3s ease;
3205
- transform: translateY(10px);
3206
- opacity: 0; }
3153
+ .component-dropdown-menu-panel {
3154
+ padding: 8px 0;
3155
+ width: auto; }
3156
+ .component-dropdown-menu-panel.no-padding {
3157
+ padding: 0; }
3207
3158
 
3208
3159
  :export {
3209
3160
  widthXs: 575.98px;
@@ -3991,25 +3942,30 @@ max-width 100% 540px 720px 960px 1140px
3991
3942
  warningDark: #765f00; }
3992
3943
 
3993
3944
  .full-height-container {
3994
- position: fixed;
3995
- height: 100%;
3996
- width: 100%;
3945
+ position: relative;
3946
+ box-sizing: border-box;
3947
+ height: 100dvh;
3948
+ width: 100vw;
3997
3949
  top: 0;
3998
3950
  left: 0;
3999
3951
  display: flex;
4000
3952
  flex-flow: column; }
4001
3953
  .full-height-container .full-height-container-row-header {
4002
- flex: 0 1 auto;
4003
- z-index: +2; }
3954
+ z-index: +2;
3955
+ position: fixed;
3956
+ top: 0;
3957
+ left: 0;
3958
+ z-index: +2;
3959
+ width: 100%; }
4004
3960
  .full-height-container .full-height-container-row-content {
4005
3961
  z-index: +1;
4006
3962
  display: flex;
4007
3963
  flex-flow: column;
4008
3964
  flex: 1 1 auto;
4009
- overflow-y: auto;
4010
- overflow-y: overlay;
4011
- position: relative;
4012
- padding: 0; }
3965
+ padding: 0;
3966
+ overflow: auto; }
3967
+ .full-height-container .full-height-container-row-content.mobile {
3968
+ overflow: visible; }
4013
3969
  .full-height-container .full-height-container-row-content.vertical-padding {
4014
3970
  padding-top: 12px;
4015
3971
  padding-bottom: 12px; }
@@ -4017,8 +3973,11 @@ max-width 100% 540px 720px 960px 1140px
4017
3973
  padding-left: 12px;
4018
3974
  padding-right: 12px; }
4019
3975
  .full-height-container .full-height-container-row-footer {
4020
- flex: 0 1 auto;
4021
- z-index: +2; }
3976
+ position: fixed;
3977
+ bottom: 0;
3978
+ left: 0;
3979
+ z-index: +2;
3980
+ width: 100%; }
4022
3981
 
4023
3982
  :export {
4024
3983
  widthXs: 575.98px;
@@ -4682,106 +4641,87 @@ header.component-header {
4682
4641
  warningLight: #ffeb98;
4683
4642
  warningDark: #765f00; }
4684
4643
 
4685
- .component-item-dropdown-download-outer {
4686
- position: relative;
4687
- width: 100%; }
4688
- .component-item-dropdown-download-outer .component-item-dropdown-download {
4689
- background-color: #fefefe;
4690
- height: 44px;
4691
- border-radius: 8px;
4644
+ .component-item-dropdown-download {
4645
+ background-color: #fefefe;
4646
+ height: 44px;
4647
+ border-radius: 4px;
4648
+ display: flex;
4649
+ align-items: center;
4650
+ justify-content: space-between;
4651
+ padding: 8px 16px;
4652
+ width: 100%;
4653
+ cursor: pointer;
4654
+ outline: none;
4655
+ border: none; }
4656
+ .component-item-dropdown-download .component-item-dropdown-download-label {
4657
+ -webkit-user-select: none;
4658
+ -moz-user-select: none;
4659
+ user-select: none;
4660
+ font-size: 16px;
4661
+ font-weight: 600;
4662
+ color: #323c32;
4663
+ max-width: calc(100% - 30px);
4664
+ overflow: hidden;
4665
+ text-overflow: ellipsis;
4666
+ text-align: left; }
4667
+ .component-item-dropdown-download .component-item-dropdown-download-arrow {
4692
4668
  display: flex;
4693
4669
  align-items: center;
4694
- justify-content: space-between;
4695
- padding: 8px 16px;
4670
+ justify-content: center;
4671
+ color: #3fa110;
4672
+ transition: 0.3s ease;
4673
+ padding: 4px 0 0 0;
4674
+ background-color: rgba(0, 0, 0, 0); }
4675
+ .component-item-dropdown-download .component-item-dropdown-download-arrow.up {
4676
+ transform: rotateZ(180deg); }
4677
+
4678
+ .component-item-dropdown-download-panel {
4679
+ width: 100%;
4680
+ padding: 0;
4681
+ z-index: 987; }
4682
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item {
4683
+ -webkit-appearance: none;
4684
+ -moz-appearance: none;
4685
+ appearance: none;
4696
4686
  width: 100%;
4687
+ display: flex;
4688
+ align-items: center;
4689
+ justify-content: space-between;
4690
+ -webkit-user-select: none;
4691
+ -moz-user-select: none;
4692
+ user-select: none;
4693
+ transition: background-color 0.3s ease;
4697
4694
  cursor: pointer;
4695
+ padding: 4px 14px;
4696
+ border: none;
4698
4697
  outline: none;
4699
- border: none; }
4700
- .component-item-dropdown-download-outer .component-item-dropdown-download .component-item-dropdown-download-label {
4701
- -webkit-user-select: none;
4702
- -moz-user-select: none;
4703
- user-select: none;
4704
- font-size: 16px;
4705
- font-weight: 600;
4706
- color: #323c32;
4707
- max-width: calc(100% - 30px);
4708
- overflow: hidden;
4709
- text-overflow: ellipsis;
4710
- text-align: left; }
4711
- .component-item-dropdown-download-outer .component-item-dropdown-download .component-item-dropdown-download-arrow {
4698
+ background-color: #fefefe; }
4699
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item:hover, .component-item-dropdown-download-panel .component-item-dropdown-download-item:focus {
4700
+ background-color: #f8f9f7; }
4701
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-item-label {
4702
+ transform: scale(1);
4712
4703
  display: flex;
4713
4704
  align-items: center;
4714
- justify-content: center;
4705
+ justify-content: flex-start;
4706
+ transition: transform 0.3s ease;
4707
+ font-size: 16px;
4708
+ padding-bottom: 2px;
4709
+ text-align: left;
4710
+ transform-origin: right center;
4711
+ color: #323c32; }
4712
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-download-icon {
4713
+ transition: transform 0.3s ease;
4715
4714
  color: #3fa110;
4716
- transition: 0.3s ease;
4717
- padding: 4px 0 0 0;
4718
- background-color: rgba(0, 0, 0, 0); }
4719
- .component-item-dropdown-download-outer .component-item-dropdown-download .component-item-dropdown-download-arrow.up {
4720
- transform: rotateZ(180deg); }
4721
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel {
4722
- width: 100%;
4723
- box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
4724
- border-radius: 8px;
4725
- padding: 8px 0;
4726
- margin-top: 6px;
4727
- background-color: #fefefe;
4728
- position: absolute;
4729
- z-index: 987; }
4730
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item {
4731
- -webkit-appearance: none;
4732
- width: 100%;
4733
4715
  display: flex;
4734
4716
  align-items: center;
4735
- justify-content: space-between;
4736
- -webkit-user-select: none;
4737
- -moz-user-select: none;
4738
- user-select: none;
4739
- transition: background-color 0.3s ease;
4740
- cursor: pointer;
4741
- padding: 4px 14px;
4742
- border: none;
4743
- outline: none;
4744
- background-color: #fefefe; }
4745
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item:hover, .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item:focus {
4746
- background-color: #f8f9f7; }
4747
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-item-label {
4748
- transform: scale(1);
4749
- display: flex;
4750
- align-items: center;
4751
- justify-content: flex-start;
4752
- transition: transform 0.3s ease;
4753
- font-size: 16px;
4754
- padding-bottom: 2px;
4755
- text-align: left;
4756
- transform-origin: right center;
4757
- color: #323c32; }
4758
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-download-icon {
4759
- transition: transform 0.3s ease;
4760
- color: #3fa110;
4761
- display: flex;
4762
- align-items: center;
4763
- justify-content: center;
4764
- transform-origin: left center; }
4765
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-download-icon svg {
4766
- width: 24px;
4767
- height: 24px; }
4768
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item:active .component-item-dropdown-download-download-icon,
4769
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel .component-item-dropdown-download-item:active .component-item-dropdown-download-item-label {
4770
- transform: scale(0.9); }
4771
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel.panel-fade-enter {
4772
- transform: translateY(10px);
4773
- opacity: 0; }
4774
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel.panel-fade-enter-active {
4775
- transition: transform 0.3s ease, opacity 0.3s ease;
4776
- opacity: 1;
4777
- transform: translateY(0); }
4778
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel.panel-fade-exit {
4779
- opacity: 1;
4780
- transform: translateY(0); }
4781
- .component-item-dropdown-download-outer .component-item-dropdown-download-panel.panel-fade-exit-active {
4782
- transition: transform 0.3s ease, opacity 0.3s ease;
4783
- transform: translateY(10px);
4784
- opacity: 0; }
4717
+ justify-content: center;
4718
+ transform-origin: left center; }
4719
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item .component-item-dropdown-download-download-icon svg {
4720
+ width: 24px;
4721
+ height: 24px; }
4722
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item:active .component-item-dropdown-download-download-icon,
4723
+ .component-item-dropdown-download-panel .component-item-dropdown-download-item:active .component-item-dropdown-download-item-label {
4724
+ transform: scale(0.9); }
4785
4725
 
4786
4726
  :export {
4787
4727
  widthXs: 575.98px;
@@ -6187,11 +6127,7 @@ h5 {
6187
6127
  transform: rotateZ(180deg); }
6188
6128
 
6189
6129
  .component-select-panel {
6190
- z-index: 987;
6191
6130
  background-color: #fefefe;
6192
- position: fixed;
6193
- box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
6194
- border-radius: 0 0 8px 8px;
6195
6131
  -webkit-user-select: none;
6196
6132
  -moz-user-select: none;
6197
6133
  user-select: none; }
@@ -6268,9 +6204,9 @@ h5 {
6268
6204
  .component-select-panel .component-select-panel-footer .component-select-footer-button {
6269
6205
  max-width: 50%;
6270
6206
  font-weight: 700;
6271
- font-size: 16px;
6207
+ font-size: 14px;
6272
6208
  color: #3fa110;
6273
- padding: 0 8px 4px; }
6209
+ padding: 4px 8px; }
6274
6210
  .component-select-panel .component-select-panel-footer .component-select-footer-button > div {
6275
6211
  text-overflow: ellipsis;
6276
6212
  overflow: hidden; }
@@ -6288,20 +6224,6 @@ h5 {
6288
6224
  display: flex;
6289
6225
  align-items: center;
6290
6226
  justify-content: flex-start; }
6291
- .component-select-panel.panel-fade-enter {
6292
- transform: translateY(10px);
6293
- opacity: 0; }
6294
- .component-select-panel.panel-fade-enter-active {
6295
- transition: transform 0.3s ease, opacity 0.3s ease;
6296
- opacity: 1;
6297
- transform: translateY(0); }
6298
- .component-select-panel.panel-fade-exit {
6299
- opacity: 1;
6300
- transform: translateY(0); }
6301
- .component-select-panel.panel-fade-exit-active {
6302
- transition: transform 0.3s ease, opacity 0.3s ease;
6303
- transform: translateY(10px);
6304
- opacity: 0; }
6305
6227
 
6306
6228
  :export {
6307
6229
  widthXs: 575.98px;
@@ -8693,6 +8615,113 @@ nav.component-tabs {
8693
8615
  width: 20px;
8694
8616
  height: 20px; }
8695
8617
 
8618
+ :export {
8619
+ white: #fefefe;
8620
+ darkenWhite: #efefef;
8621
+ black: #121212;
8622
+ transparent: rgba(0, 0, 0, 0);
8623
+ primary: #3fa110;
8624
+ primaryDark: #33820d;
8625
+ primaryLight: #d7e6c8;
8626
+ secondaryDarker: #323c32;
8627
+ secondaryDark: #5a645a;
8628
+ blueDarker: #2b517b;
8629
+ secondary: #828a82;
8630
+ secondaryLight: #cdd3cd;
8631
+ secondaryLighter: #f8f9f7;
8632
+ danger: #e60000;
8633
+ dangerLight: #ffb4b4;
8634
+ dangerDark: #ab4745;
8635
+ warning: #ffcd00;
8636
+ warningLight: #ffeb98;
8637
+ warningDark: #765f00; }
8638
+
8639
+ :export {
8640
+ widthXs: 575.98px;
8641
+ widthSm: 767.98px;
8642
+ widthMd: 991.98px;
8643
+ widthLg: 1199.98px; }
8644
+
8645
+ .component-notification-panel {
8646
+ overflow: hidden;
8647
+ z-index: 987;
8648
+ background-color: #fefefe;
8649
+ border-radius: 8px;
8650
+ box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
8651
+ max-width: calc(100vw - 10px); }
8652
+ .component-notification-panel-header {
8653
+ -webkit-user-select: none;
8654
+ -moz-user-select: none;
8655
+ user-select: none;
8656
+ display: flex;
8657
+ align-items: center;
8658
+ background-color: #fafafa;
8659
+ border-bottom: 1px solid #cdd3cd;
8660
+ padding: 16px;
8661
+ gap: 8px; }
8662
+ .component-notification-panel-header svg {
8663
+ font-size: 1rem; }
8664
+ .component-notification-panel-header-icon {
8665
+ color: #3fa110; }
8666
+ .component-notification-panel-header-title {
8667
+ flex: 1 1 auto;
8668
+ line-height: 24px;
8669
+ font-size: 16px;
8670
+ font-family: "Exo 2", sans-serif;
8671
+ font-weight: 300; }
8672
+ .component-notification-panel-body {
8673
+ overflow: auto; }
8674
+ .component-notification-panel-body .component-notification-panel-noti {
8675
+ display: flex;
8676
+ align-items: center;
8677
+ padding: 16px;
8678
+ cursor: pointer;
8679
+ -webkit-user-select: none;
8680
+ -moz-user-select: none;
8681
+ user-select: none;
8682
+ gap: 8px; }
8683
+ .component-notification-panel-body .component-notification-panel-noti:not(:only-child):not(:last-child) {
8684
+ border-bottom: 1px solid #cdd3cd; }
8685
+ .component-notification-panel-body .component-notification-panel-noti-head {
8686
+ display: flex;
8687
+ align-items: center;
8688
+ gap: 10px; }
8689
+ .component-notification-panel-body .component-notification-panel-noti-alert {
8690
+ display: block;
8691
+ background-color: #e60050;
8692
+ width: 8px;
8693
+ height: 8px;
8694
+ border-radius: 20px; }
8695
+ .component-notification-panel-body .component-notification-panel-noti-title {
8696
+ font-family: "Nunito", sans-serif;
8697
+ font-size: 16px;
8698
+ font-weight: 700;
8699
+ line-height: 24px;
8700
+ text-align: left;
8701
+ color: #3fa110; }
8702
+ .component-notification-panel-body .component-notification-panel-noti-text {
8703
+ margin-top: 4px;
8704
+ max-width: 300px;
8705
+ color: #323c32;
8706
+ font-family: "Nunito", sans-serif;
8707
+ font-size: 14px;
8708
+ font-weight: 400;
8709
+ line-height: 18px;
8710
+ text-align: left; }
8711
+ .component-notification-panel-body .component-notification-panel-noti-date {
8712
+ font-family: "Nunito", sans-serif;
8713
+ font-size: 10px;
8714
+ font-weight: 700;
8715
+ line-height: 24px;
8716
+ text-align: left;
8717
+ color: #5a645a; }
8718
+ .component-notification-panel-body .component-notification-panel-noti-right svg {
8719
+ color: #3fa110; }
8720
+ .component-notification-panel-footer {
8721
+ padding: 16px;
8722
+ background-color: #fafafa;
8723
+ border-top: 1px solid #cdd3cd; }
8724
+
8696
8725
  :export {
8697
8726
  widthXs: 575.98px;
8698
8727
  widthSm: 767.98px;
@@ -8810,7 +8839,7 @@ nav.component-tabs {
8810
8839
  widthMd: 991.98px;
8811
8840
  widthLg: 1199.98px; }
8812
8841
 
8813
- .tooltip {
8842
+ .tooltip-element-tooltip {
8814
8843
  z-index: 989;
8815
8844
  display: flex;
8816
8845
  align-items: center;
@@ -8824,10 +8853,12 @@ nav.component-tabs {
8824
8853
  font-size: 16px;
8825
8854
  line-height: 24px;
8826
8855
  border-radius: 8px; }
8827
- .tooltip .label {
8828
- max-width: 300px; }
8856
+ .tooltip-element-tooltip .tooltip-element-label {
8857
+ max-width: 300px;
8858
+ font-family: "Nunito", sans-serif;
8859
+ color: #fefefe; }
8829
8860
 
8830
- .reference {
8861
+ .tooltip-element-reference {
8831
8862
  display: flex;
8832
8863
  align-items: center;
8833
8864
  width: -moz-fit-content;
@@ -8860,21 +8891,21 @@ nav.component-tabs {
8860
8891
  widthMd: 991.98px;
8861
8892
  widthLg: 1199.98px; }
8862
8893
 
8863
- .tp {
8894
+ .typography-tp {
8864
8895
  margin: 0;
8865
8896
  padding: 0;
8866
8897
  font-weight: 300;
8867
8898
  display: block;
8868
8899
  text-align: start; }
8869
- .tp.focus {
8900
+ .typography-tp.typography-focus {
8870
8901
  font-weight: 500; }
8871
- .tp.primary {
8902
+ .typography-tp.primary {
8872
8903
  color: #3fa110; }
8873
- .tp.primary-dark {
8904
+ .typography-tp.primary-dark {
8874
8905
  color: #33820d; }
8875
- .tp.secondary {
8906
+ .typography-tp.secondary {
8876
8907
  color: #fefefe; }
8877
- .tp.default {
8908
+ .typography-tp.default {
8878
8909
  color: #323c32; }
8879
8910
 
8880
8911
  .caption.tp {
package/dist/index.d.ts CHANGED
@@ -170,8 +170,11 @@ import Tooltip from './components/tooltip/Tooltip';
170
170
  import TooltipManager from './components/tooltipManager/TooltipManager';
171
171
  import TopLoader from './components/topLoader/TopLoader';
172
172
  import VideoModal from './components/videoModal/VideoModal';
173
+ import Bell16Icon from './assets/icons/Bell16Icon';
174
+ import BellIcon from './assets/icons/BellIcon';
173
175
  import { MiniInformationIcon } from './assets/icons/MiniInformationIcon';
174
176
  import { PhonePlusIcon } from './assets/icons/PhonePlusIcon';
177
+ import { Settings16Icon } from './assets/icons/Settings16Icon';
175
178
  import Calendar from './components/calendar/Calendar';
176
179
  import CalendarEvent from './components/calendarEvent/CalendarEvent';
177
180
  import Chip from './components/chip/Chip';
@@ -179,6 +182,7 @@ import FloatingPanel from './components/floatingPanel/FloatingPanel';
179
182
  import FormattedText from './components/formattedText/FormattedText';
180
183
  import HourEvents from './components/hourEvents/HourEvents';
181
184
  import InlineMonthPicker from './components/inlineMonthPicker/InlineMonthPicker';
185
+ import NotificationPanel from './components/notificationPanel/NotificationPanel';
182
186
  import QRCode from './components/qrcode/QRCode';
183
187
  import ScrollArrowOverflow from './components/scrollArrowOverflow/ScrollArrowOverflow';
184
188
  import { LeftControlWithLabel } from './components/table/components/leftControlWithLabel/LeftControlWithLabel';
@@ -190,6 +194,8 @@ import useCarouselBehaviour from './hooks/useCarouselBehaviour/useCarouselBehavi
190
194
  import useControlledTimer from './hooks/useControlledTimer/useControlledTimer';
191
195
  import useDraggableContainer from './hooks/useDraggableContainer/useDraggableContainer';
192
196
  import useDropOpened from './hooks/useDropOpened/useDropOpened';
197
+ import useEvent from './hooks/useEvent/useEvent';
198
+ import useFloatingPanel from './hooks/useFloatingPanel/useFloatingPanel';
193
199
  import useHTMLShare from './hooks/useHTMLShare/useHTMLShare';
194
200
  import useModalManager from './hooks/useModalManager/useModalManager';
195
201
  import useOutsideClick from './hooks/useOutsideClick/useOutsideClick';
@@ -199,6 +205,7 @@ import usePublicMenuList from './hooks/usePublicMenuList/usePublicMenuList';
199
205
  import useScreenSize from './hooks/useScreenSize/useScreenSize';
200
206
  import useScrollTo from './hooks/useScrollTo/useScrollTo';
201
207
  import useStorageState from './hooks/useStorageState/useStorageState';
208
+ import useSystemInfo from './hooks/useSystemInfo/useSystemInfo';
202
209
  import useTimeElapsed from './hooks/useTimeElapsed/useTimeElapsed';
203
210
  import useToastManager from './hooks/useToastManager/useToastManager';
204
211
  import useValidatedState from './hooks/useValidatedState/useValidatedState';
@@ -220,6 +227,7 @@ export * from './libraries/Pautas';
220
227
  export * from './libraries/RadioButtonTheme';
221
228
  export * from './libraries/ScreenSizes';
222
229
  export * from './libraries/SicrediLogoThemes';
230
+ export * from './libraries/System';
223
231
  export * from './libraries/Toast';
224
232
  export * from './libraries/Tooltips';
225
233
  export * from './models/menus';
@@ -228,10 +236,10 @@ export { Accordion, ActionCard, ActionsColumn, AnimatedLink, Banner, BigBlockBut
228
236
  /**
229
237
  * @deprecated Use LeftControlWithLabel instead
230
238
  */
231
- LeftControlWithLabel as LeftCheckboxWithLabel, LeftControlWithLabel, Menu, MenuItem, Modal, ModalManager, MoneyByMonth, MoneyMonthLineChart, Notification, PageSubTitle, PageTitle, Pagination, Paginator, PreviaVideo, QRCode, RadioButton, Row, ScrollArrowOverflow, Search, Select, Switch, Table, TableActions, TableFileNameAndAction, TableWithOverflow, Tabs, TextEditor, Title, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, TypedTable, VideoModal, VideoPlayer, };
232
- export { useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useHTMLShare, useModalManager, useOutsideClick, usePagination, useProgressiveCount, usePublicMenuList, useScreenSize, useScrollTo, useStorageState, useTimeElapsed, useToastManager, useValidatedState, };
239
+ LeftControlWithLabel as LeftCheckboxWithLabel, LeftControlWithLabel, Menu, MenuItem, Modal, ModalManager, MoneyByMonth, MoneyMonthLineChart, Notification, NotificationPanel, PageSubTitle, PageTitle, Pagination, Paginator, PreviaVideo, QRCode, RadioButton, Row, ScrollArrowOverflow, Search, Select, Switch, Table, TableActions, TableFileNameAndAction, TableWithOverflow, Tabs, TextEditor, Title, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, TypedTable, VideoModal, VideoPlayer, };
240
+ export { useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useEvent, useFloatingPanel, useHTMLShare, useModalManager, useOutsideClick, usePagination, useProgressiveCount, usePublicMenuList, useScreenSize, useScrollTo, useStorageState, useSystemInfo, useTimeElapsed, useToastManager, useValidatedState, };
233
241
  export { ATMIcon, AconteceuIcon, AddAssemblyIcon,
234
242
  /**
235
243
  * @deprecated Use AddIcon instead
236
244
  */
237
- AddIcon as AddCircleIcon, AddIcon, AgencyIcon, AlertIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowLeftIcon, ArrowRightIcon, AssembleiasIcon, BackOfficeIcon, BarChartIcon, BeeIcon, BigPlayIcon, BoldIcon, CalendarCheckIcon, CalendarIcon, CardsIcon, CataventoVerde, CheckCircleIcon, CheckIcon, ChequeIcon, ChevronArrowDownIcon, ChevronArrowLeftIcon, ChevronArrowRightIcon, Chip, CircleArrowLeft, CircleArrowRight, ClockIcon, CloseIcon, CloudDownloadIcon, CloudUploadIcon, ComitesIcon, ComunidadeIcon, CopyIcon, CreditIcon, CrescerIcon, CrescerLogo, DevicePlusIcon, DownloadIcon, DraggableIcon, EditIcon, EvidenciasIcon, ExclamationIcon, ExitIconArrowLeft, ExitIconArrowRight, EyeIcon, FilePlusIcon, FilesIcon, FilterIcon, FontColorIcon, FontIcon, FormacaoIcon, FundacaoLogo, FundoSocialIcon, GlobeIcon, GraduationIcon, HamburgerIcon, HandUpIcon, HomeIcon, InformationIcon, InvestimentIcon, ItalicIcon, LinkIcon, LinksUteisIcon, ListDotIcon, ListIcon, LoaderIcon, LocalIcon, LockIcon, MessageIcon, MiniInformationIcon, MoneyFileIcon, NavigatorWithMouse, NotebookIcon, OptionsIcon, ParticipantesIcon, PaymentIcon, PercentLoaderIcon, PhonePlusIcon, PieChartIcon, PlayIcon, PrintIcon, QRCodeIcon, QRCodeWhatsapp, RedoIcon, RefreshIcon, SearchIcon, SettingsIcon, SicrediLogo, SquaresIcon, SustentabilidadeIcon, ThreeDotsLoader, ThumbsUpIcon, TimesCircleIcon, TooltipElement, TransferenciaIcon, TrashIcon, TrianguloInferior, TwoFileIcon, Typography, UnderlineIcon, UndoIcon, UserIcon, WebsiteIcon, };
245
+ AddIcon as AddCircleIcon, AddIcon, AgencyIcon, AlertIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowLeftIcon, ArrowRightIcon, AssembleiasIcon, BackOfficeIcon, BarChartIcon, BeeIcon, Bell16Icon, BellIcon, BigPlayIcon, BoldIcon, CalendarCheckIcon, CalendarIcon, CardsIcon, CataventoVerde, CheckCircleIcon, CheckIcon, ChequeIcon, ChevronArrowDownIcon, ChevronArrowLeftIcon, ChevronArrowRightIcon, Chip, CircleArrowLeft, CircleArrowRight, ClockIcon, CloseIcon, CloudDownloadIcon, CloudUploadIcon, ComitesIcon, ComunidadeIcon, CopyIcon, CreditIcon, CrescerIcon, CrescerLogo, DevicePlusIcon, DownloadIcon, DraggableIcon, EditIcon, EvidenciasIcon, ExclamationIcon, ExitIconArrowLeft, ExitIconArrowRight, EyeIcon, FilePlusIcon, FilesIcon, FilterIcon, FontColorIcon, FontIcon, FormacaoIcon, FundacaoLogo, FundoSocialIcon, GlobeIcon, GraduationIcon, HamburgerIcon, HandUpIcon, HomeIcon, InformationIcon, InvestimentIcon, ItalicIcon, LinkIcon, LinksUteisIcon, ListDotIcon, ListIcon, LoaderIcon, LocalIcon, LockIcon, MessageIcon, MiniInformationIcon, MoneyFileIcon, NavigatorWithMouse, NotebookIcon, OptionsIcon, ParticipantesIcon, PaymentIcon, PercentLoaderIcon, PhonePlusIcon, PieChartIcon, PlayIcon, PrintIcon, QRCodeIcon, QRCodeWhatsapp, RedoIcon, RefreshIcon, SearchIcon, Settings16Icon, SettingsIcon, SicrediLogo, SquaresIcon, SustentabilidadeIcon, ThreeDotsLoader, ThumbsUpIcon, TimesCircleIcon, TooltipElement, TransferenciaIcon, TrashIcon, TrianguloInferior, TwoFileIcon, Typography, UnderlineIcon, UndoIcon, UserIcon, WebsiteIcon, };