mitre-form-component 2.2.5 → 2.2.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 (5) hide show
  1. package/dist/index.cjs +54 -45
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +54 -45
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -777,75 +777,84 @@ var fadeOut = keyframes`
777
777
  `;
778
778
  var typeStyles = {
779
779
  error: css4`
780
- background-color: ${theme.colors.red};
781
- border: 1px solid ${theme.colors.red};
782
- color: ${theme.colors.white};
780
+ background-color: ${theme.colors.red} !important;
781
+ border: 1px solid ${theme.colors.red} !important;
782
+ color: ${theme.colors.white} !important;
783
783
  svg {
784
- color: ${theme.colors.white};
784
+ color: ${theme.colors.white} !important;
785
785
  }
786
786
  `,
787
787
  warning: css4`
788
- background-color: ${theme.colors.yellow500};
789
- border: 1px solid ${theme.colors.yellow400};
790
- color: ${theme.colors.black};
788
+ background-color: ${theme.colors.yellow500} !important;
789
+ border: 1px solid ${theme.colors.yellow400} !important;
790
+ color: ${theme.colors.black} !important;
791
791
  svg {
792
- color: ${theme.colors.black};
792
+ color: ${theme.colors.black} !important;
793
793
  }
794
794
  `,
795
795
  info: css4`
796
- background-color: ${theme.colors.blue};
797
- border: 1px solid ${theme.colors.blue};
798
- color: ${theme.colors.white};
796
+ background-color: ${theme.colors.blue} !important;
797
+ border: 1px solid ${theme.colors.blue} !important;
798
+ color: ${theme.colors.white} !important;
799
799
  svg {
800
- color: ${theme.colors.white};
800
+ color: ${theme.colors.white} !important;
801
801
  }
802
802
  `,
803
803
  success: css4`
804
- background-color: ${theme.colors.green};
805
- border: 1px solid ${theme.colors.green2};
806
- color: ${theme.colors.white};
804
+ background-color: ${theme.colors.green} !important;
805
+ border: 1px solid ${theme.colors.green2} !important;
806
+ color: ${theme.colors.white} !important;
807
807
  svg {
808
- color: ${theme.colors.white};
808
+ color: ${theme.colors.white} !important;
809
809
  }
810
810
  `
811
811
  };
812
812
  var AlertContainer = styled5.div`
813
- position: fixed;
814
- width: 500px;
815
- top: 15px;
816
- right: 15px;
817
- padding: 1rem ${({ $dismissible }) => $dismissible ? "2.5rem" : "1rem"} 1rem
818
- 1rem;
819
- margin-bottom: 1rem;
820
- animation: ${({ $isClosing }) => $isClosing ? fadeOut : fadeIn} 0.3s
821
- ease-out;
822
- animation-fill-mode: forwards;
823
- align-items: center;
824
- gap: 0.5rem;
825
- box-shadow: ${theme.shadows.shadow500};
826
- border-radius: 0.5rem;
827
- font-size: 1rem;
828
- font-weight: 500;
813
+ && {
814
+ position: fixed !important;
815
+ width: 500px !important;
816
+ top: 15px !important;
817
+ right: 15px !important;
818
+ padding: 1rem ${({ $dismissible }) => $dismissible ? "2.5rem" : "1rem"} 1rem
819
+ 1rem !important;
820
+ margin: 0 0 1rem !important;
821
+ align-items: center !important;
822
+ gap: 0.5rem !important;
823
+ box-shadow: ${theme.shadows.shadow500} !important;
824
+ border-radius: 0.5rem !important;
825
+ font-size: 1rem !important;
826
+ font-weight: 500 !important;
827
+ box-sizing: border-box !important;
828
+ z-index: 9999 !important;
829
+ animation: ${({ $isClosing }) => $isClosing ? fadeOut : fadeIn} 0.3s
830
+ ease-out;
831
+ animation-fill-mode: forwards;
832
+ }
829
833
 
830
834
  ${({ $type }) => typeStyles[$type]}
831
835
  `;
832
836
  var DismissButton = styled5.button`
833
- position: absolute;
834
- background: transparent;
835
- right: 10px;
836
- border: none;
837
- cursor: pointer;
838
- color: inherit;
839
- opacity: 1;
840
- transition: opacity 0.2s;
837
+ && {
838
+ position: absolute !important;
839
+ background: transparent !important;
840
+ right: 10px !important;
841
+ border: none !important;
842
+ cursor: pointer !important;
843
+ color: inherit !important;
844
+ opacity: 1 !important;
845
+ padding: 0 !important;
846
+ margin: 0 !important;
847
+ box-sizing: border-box !important;
848
+ transition: opacity 0.2s;
849
+ }
841
850
 
842
- &:hover {
843
- opacity: 0.7;
851
+ &&:hover {
852
+ opacity: 0.7 !important;
844
853
  }
845
854
 
846
- svg {
847
- width: 1rem;
848
- height: 1rem;
855
+ && svg {
856
+ width: 1rem !important;
857
+ height: 1rem !important;
849
858
  }
850
859
  `;
851
860