@citygross/components_v2 0.0.46 → 0.0.47

package/dist/components/SideModal/SideModal.css.ts.vanilla.css

@@ -94,13 +94,18 @@
   opacity: 0;
   transition: all 300ms ease-out;
 }
-.SideModal_sideModalOverLayer_open_true__1scj0sn35 {
+.SideModal_sideModalOverLayer_animate_in__1scj0sn35 {
   opacity: 1;
   z-index: 5;
 }
-.SideModal_sideModalOverLayer_open_false__1scj0sn36 {
+.SideModal_sideModalOverLayer_animate_out__1scj0sn36 {
   animation: SideModal_outOverlay__1scj0sn4 300ms ease-out forwards;
 }
+@media screen and (max-width: 480px) {
+  .SideModal_sideModal__1scj0sn7 {
+    max-width: 80%;
+  }
+}
 @media screen and (min-width: 576px) {
   .SideModal_sideModal__1scj0sn7 {
     max-height: unset;

package/dist/components/SideModal/SideModal.css.vanilla.js

@@ -3,6 +3,6 @@ import './SideModal.css.ts.vanilla.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var sideModal = createRuntimeFn({ defaultClassName: "SideModal_sideModal__1scj0sn7", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21d", secondary: "color_backgroundColor_secondary__13rr0b21e", brandYellow: "color_backgroundColor_brandYellow__13rr0b21f", brandBlue: "color_backgroundColor_brandBlue__13rr0b21g", brandPurple: "color_backgroundColor_brandPurple__13rr0b21h", brandPrio: "color_backgroundColor_brandPrio__13rr0b21i", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21j", yellowLight: "color_backgroundColor_yellowLight__13rr0b21k", blueLight: "color_backgroundColor_blueLight__13rr0b21l", blueLighter: "color_backgroundColor_blueLighter__13rr0b21m", blueMedium: "color_backgroundColor_blueMedium__13rr0b21n", greenLight: "color_backgroundColor_greenLight__13rr0b21o", greenMedium: "color_backgroundColor_greenMedium__13rr0b21p", redLight: "color_backgroundColor_redLight__13rr0b21q", recipeVego: "color_backgroundColor_recipeVego__13rr0b21r", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21s", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21t", myPrioGoldDark: "color_backgroundColor_myPrioGoldDark__13rr0b21u", myPrioGoldLight: "color_backgroundColor_myPrioGoldLight__13rr0b21v", link: "color_backgroundColor_link__13rr0b21w", white: "color_backgroundColor_white__13rr0b21x", black: "color_backgroundColor_black__13rr0b21y", lightest: "color_backgroundColor_lightest__13rr0b21z", lighter: "color_backgroundColor_lighter__13rr0b220", light: "color_backgroundColor_light__13rr0b221", medium: "color_backgroundColor_medium__13rr0b222", mediumDark: "color_backgroundColor_mediumDark__13rr0b223", dark: "color_backgroundColor_dark__13rr0b224", darker: "color_backgroundColor_darker__13rr0b225", darkest: "color_backgroundColor_darkest__13rr0b226", buttonGray: "color_backgroundColor_buttonGray__13rr0b227", disabledGray: "color_backgroundColor_disabledGray__13rr0b228", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b229", placeholder: "color_backgroundColor_placeholder__13rr0b22a", border: "color_backgroundColor_border__13rr0b22b", boxShadow: "color_backgroundColor_boxShadow__13rr0b22c", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b22d", alertRed: "color_backgroundColor_alertRed__13rr0b22e", alertBlue: "color_backgroundColor_alertBlue__13rr0b22f", alertGreen: "color_backgroundColor_alertGreen__13rr0b22g", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22h", transparent: "color_backgroundColor_transparent__13rr0b22i", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22j", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22k", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22l", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22m", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22n", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22o", none: "color_backgroundColor_none__13rr0b22p" }, slideVariants: { left: "SideModal_slideVariants_left__1scj0sn5", right: "SideModal_slideVariants_right__1scj0sn6" }, slideIn: { leftIn: "SideModal_sideModal_slideIn_leftIn__1scj0sn1n", rightIn: "SideModal_sideModal_slideIn_rightIn__1scj0sn1o", leftOut: "SideModal_sideModal_slideIn_leftOut__1scj0sn1p", rightOut: "SideModal_sideModal_slideIn_rightOut__1scj0sn1q" } }, defaultVariants: {}, compoundVariants: [] });
-var sideModalOverLayer = createRuntimeFn({ defaultClassName: "SideModal_sideModalOverLayer__1scj0sn1r", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21d", secondary: "color_backgroundColor_secondary__13rr0b21e", brandYellow: "color_backgroundColor_brandYellow__13rr0b21f", brandBlue: "color_backgroundColor_brandBlue__13rr0b21g", brandPurple: "color_backgroundColor_brandPurple__13rr0b21h", brandPrio: "color_backgroundColor_brandPrio__13rr0b21i", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21j", yellowLight: "color_backgroundColor_yellowLight__13rr0b21k", blueLight: "color_backgroundColor_blueLight__13rr0b21l", blueLighter: "color_backgroundColor_blueLighter__13rr0b21m", blueMedium: "color_backgroundColor_blueMedium__13rr0b21n", greenLight: "color_backgroundColor_greenLight__13rr0b21o", greenMedium: "color_backgroundColor_greenMedium__13rr0b21p", redLight: "color_backgroundColor_redLight__13rr0b21q", recipeVego: "color_backgroundColor_recipeVego__13rr0b21r", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21s", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21t", myPrioGoldDark: "color_backgroundColor_myPrioGoldDark__13rr0b21u", myPrioGoldLight: "color_backgroundColor_myPrioGoldLight__13rr0b21v", link: "color_backgroundColor_link__13rr0b21w", white: "color_backgroundColor_white__13rr0b21x", black: "color_backgroundColor_black__13rr0b21y", lightest: "color_backgroundColor_lightest__13rr0b21z", lighter: "color_backgroundColor_lighter__13rr0b220", light: "color_backgroundColor_light__13rr0b221", medium: "color_backgroundColor_medium__13rr0b222", mediumDark: "color_backgroundColor_mediumDark__13rr0b223", dark: "color_backgroundColor_dark__13rr0b224", darker: "color_backgroundColor_darker__13rr0b225", darkest: "color_backgroundColor_darkest__13rr0b226", buttonGray: "color_backgroundColor_buttonGray__13rr0b227", disabledGray: "color_backgroundColor_disabledGray__13rr0b228", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b229", placeholder: "color_backgroundColor_placeholder__13rr0b22a", border: "color_backgroundColor_border__13rr0b22b", boxShadow: "color_backgroundColor_boxShadow__13rr0b22c", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b22d", alertRed: "color_backgroundColor_alertRed__13rr0b22e", alertBlue: "color_backgroundColor_alertBlue__13rr0b22f", alertGreen: "color_backgroundColor_alertGreen__13rr0b22g", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22h", transparent: "color_backgroundColor_transparent__13rr0b22i", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22j", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22k", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22l", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22m", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22n", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22o", none: "color_backgroundColor_none__13rr0b22p" }, open: { true: "SideModal_sideModalOverLayer_open_true__1scj0sn35", false: "SideModal_sideModalOverLayer_open_false__1scj0sn36" } }, defaultVariants: {}, compoundVariants: [] });
+var sideModalOverLayer = createRuntimeFn({ defaultClassName: "SideModal_sideModalOverLayer__1scj0sn1r", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21d", secondary: "color_backgroundColor_secondary__13rr0b21e", brandYellow: "color_backgroundColor_brandYellow__13rr0b21f", brandBlue: "color_backgroundColor_brandBlue__13rr0b21g", brandPurple: "color_backgroundColor_brandPurple__13rr0b21h", brandPrio: "color_backgroundColor_brandPrio__13rr0b21i", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21j", yellowLight: "color_backgroundColor_yellowLight__13rr0b21k", blueLight: "color_backgroundColor_blueLight__13rr0b21l", blueLighter: "color_backgroundColor_blueLighter__13rr0b21m", blueMedium: "color_backgroundColor_blueMedium__13rr0b21n", greenLight: "color_backgroundColor_greenLight__13rr0b21o", greenMedium: "color_backgroundColor_greenMedium__13rr0b21p", redLight: "color_backgroundColor_redLight__13rr0b21q", recipeVego: "color_backgroundColor_recipeVego__13rr0b21r", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21s", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21t", myPrioGoldDark: "color_backgroundColor_myPrioGoldDark__13rr0b21u", myPrioGoldLight: "color_backgroundColor_myPrioGoldLight__13rr0b21v", link: "color_backgroundColor_link__13rr0b21w", white: "color_backgroundColor_white__13rr0b21x", black: "color_backgroundColor_black__13rr0b21y", lightest: "color_backgroundColor_lightest__13rr0b21z", lighter: "color_backgroundColor_lighter__13rr0b220", light: "color_backgroundColor_light__13rr0b221", medium: "color_backgroundColor_medium__13rr0b222", mediumDark: "color_backgroundColor_mediumDark__13rr0b223", dark: "color_backgroundColor_dark__13rr0b224", darker: "color_backgroundColor_darker__13rr0b225", darkest: "color_backgroundColor_darkest__13rr0b226", buttonGray: "color_backgroundColor_buttonGray__13rr0b227", disabledGray: "color_backgroundColor_disabledGray__13rr0b228", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b229", placeholder: "color_backgroundColor_placeholder__13rr0b22a", border: "color_backgroundColor_border__13rr0b22b", boxShadow: "color_backgroundColor_boxShadow__13rr0b22c", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b22d", alertRed: "color_backgroundColor_alertRed__13rr0b22e", alertBlue: "color_backgroundColor_alertBlue__13rr0b22f", alertGreen: "color_backgroundColor_alertGreen__13rr0b22g", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22h", transparent: "color_backgroundColor_transparent__13rr0b22i", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22j", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22k", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22l", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22m", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22n", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22o", none: "color_backgroundColor_none__13rr0b22p" }, animate: { "in": "SideModal_sideModalOverLayer_animate_in__1scj0sn35", out: "SideModal_sideModalOverLayer_animate_out__1scj0sn36" } }, defaultVariants: {}, compoundVariants: [] });
 
 export { sideModal, sideModalOverLayer };

package/dist/components/SideModal/SideModal.d.ts

@@ -2,18 +2,15 @@ import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
 declare type TSideModal = {
-    onBackdropClick: () => void;
+    animate?: 'in' | 'out';
+    backgroundColor?: TPaletteKeys;
     children?: React.ReactNode;
-    width?: string;
-    background?: TPaletteKeys;
-    isVisible?: boolean;
-    querySelector?: string;
-    slideFrom?: 'left' | 'right';
+    onBackdropClick: () => void;
     overlayBackground?: TPaletteKeys;
-    maxWidth?: string;
-    maxHeight?: string;
-    fullViewportHeight?: boolean;
+    querySelector?: string;
+    slideFrom?: 'left' | 'right' | null;
+    width?: string;
 };
-declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: TSideModal) => React.ReactPortal;
+declare const SideModal: ({ animate, backgroundColor, children, onBackdropClick, overlayBackground, querySelector, slideFrom, width }: TSideModal) => React.ReactPortal;
 
 export { SideModal, TSideModal };

package/dist/components/SideModal/SideModal.js

@@ -3,15 +3,14 @@ import { createPortal } from 'react-dom';
 import { sideModalOverLayer, sideModal } from './SideModal.css.vanilla.js';
 
 const SideModal = ({
+  animate,
+  backgroundColor = "white",
+  children,
   onBackdropClick,
-  background = "white",
   overlayBackground = "darkOverlay",
-  width = "375px",
-  isVisible,
-  slideFrom,
   querySelector = "#root",
-  maxWidth,
-  children
+  slideFrom,
+  width = "375px"
 }) => {
   const ref = useRef(null);
   const domSafe = typeof document !== "undefined";
@@ -21,7 +20,7 @@ const SideModal = ({
       {
         className: sideModalOverLayer({
           backgroundColor: overlayBackground,
-          open: isVisible
+          animate
         }),
         ref,
         onMouseDown: (e) => {
@@ -34,11 +33,11 @@ const SideModal = ({
         "div",
         {
           className: sideModal({
-            backgroundColor: background,
+            backgroundColor,
             slideVariants: slideFrom,
-            slideIn: slideFrom === "left" ? isVisible ? "leftIn" : "leftOut" : isVisible ? "rightIn" : "rightOut"
+            slideIn: slideFrom === "left" ? animate === "in" ? "leftIn" : "leftOut" : animate === "in" ? "rightIn" : "rightOut"
           }),
-          style: { maxWidth, width }
+          style: { width }
         },
         children
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -79,5 +79,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "e02ff06ca633d6bb46d576518170b8fe64e09f69"
+  "gitHead": "33efba573b6bbe8f8a6b5d626b0a18d7e8f3bb22"
 }