chore: bump material version

apps/demo/CHANGELOG.md

@@ -1,5 +1,19 @@
 # index
 
+## 0.1.21
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
+## 0.1.20
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
 ## 0.1.19
 
 ### Patch Changes

apps/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "index",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {

packages/ui/CHANGELOG.md

@@ -1,5 +1,17 @@
 # material-web-react
 
+## 0.3.16
+
+### Patch Changes
+
+- use latest material version
+
+## 0.3.15
+
+### Patch Changes
+
+- add custom classname option to snackbar
+
 ## 0.3.14
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-web-components-react",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "author": "Grayhat Team",
   "type": "module",
   "keywords": [
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@material/web": "^2.0.0",
+    "@material/web": "^2.1.0",
     "autoprefixer": "^10.4.19",
     "lit": "^3.2.0",
     "react": "^18.2.0",

packages/ui/src/snackbar/index.tsx

@@ -29,6 +29,7 @@ export type SnackbarProps = {
   onAction?: () => void;
   onClose?: () => void;
   actionText?: string;
+  className?: string;
 };
 
 export const Snackbar = ({
@@ -39,6 +40,7 @@ export const Snackbar = ({
   onAction,
   onClose,
   actionText,
+  className,
 }: SnackbarProps) => {
   const [translateX, setTranslateX] = useState(0);
   const [isSwiped, setIsSwiped] = useState(false);
@@ -89,9 +91,10 @@ export const Snackbar = ({
             : "transform 0.02s linear, opacity 0.1s linear",
       }}
       className={twMerge(
-        "relative font-regular flex items-start gap-x-5 justify-evenly rounded-md bg-[#313033] py-4 pl-5 pr-3 text-[#F4EFF4] shadow-lg text-sm min-w-80 sm:min-w-96 max-w-96 w-screen transition-all",
+        "relative font-regular flex items-start gap-x-5 justify-evenly rounded-md !bg-[#313033] py-4 pl-5 pr-3 text-[#F4EFF4] shadow-lg text-sm min-w-80 sm:min-w-96 max-w-96 w-screen transition-all",
         useLongerAction ? "flex-col" : "flex-row",
-        isSwiped ? "opacity-0" : "opacity-100"
+        isSwiped ? "opacity-0" : "opacity-100",
+        className
       )}
     >
       {icon && <span className="text-white">{icon}</span>}