feat(instant): Dismissible overlay error messages

Adds dismissible overlay to error messages on mobile

3 files changed, 6 insertions, 2 deletions

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5e7aaba37..bbf376694 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -8,7 +8,7 @@ export enum ScreenWidths {
     Lg = 64,
 }
 
-const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+export const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
     @media (max-width: ${screenWidth}em) {
         ${css.apply(css, args)};
     }
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 2653c38f7..1e9f55e00 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -35,7 +35,10 @@ export const theme: Theme = {
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
-export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 export const completelyTransparent = 'rga(0, 0, 0, 0)';
 
+export const generateOverlayBlack = (opacity = 0.6) => {
+    return `rgba(0, 0, 0, ${opacity})`;
+};
+
 export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index bd034182e..ba2d27a17 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -3,6 +3,7 @@ export const zIndex = {
     mainContainer: 20,
     dropdownItems: 30,
     panel: 40,
+    containerOverlay: 45,
     errorPopup: 50,
     overlayDefault: 100,
 };