goobs-frontend 0.9.32 → 0.9.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.32",
+  "version": "0.9.34",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -37,10 +37,10 @@
     "next": "15",
     "otplib": "^12",
     "react-qr-code": "^2",
-    "slate": "^0.115",
-    "slate-dom": "^0.114",
+    "slate": "^0.117",
+    "slate-dom": "^0.116",
     "slate-history": "^0.113",
-    "slate-react": "^0.114",
+    "slate-react": "^0.117",
     "storybook": "^9",
     "zod": "^3",
     "zod-formik-adapter": "^1"
@@ -55,7 +55,7 @@
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8",
     "@typescript-eslint/parser": "^8",
-    "chromatic": "^12",
+    "chromatic": "^13",
     "eslint": "^9",
     "eslint-config-next": "^15",
     "eslint-config-prettier": "^10",

package/src/components/Accordion/index.tsx

@@ -204,92 +204,92 @@ const StrictAccordion = React.forwardRef<HTMLDivElement, MuiAccordionProps>(
 StrictAccordion.displayName = 'StrictAccordion'
 
 // Styled components with direct media queries
-const StyledAccordion = styled(StrictAccordion)<{ sacredtheme?: boolean }>(
-  ({ sacredtheme }) => ({
-    '&.MuiAccordion-root': {
-      '&:before': {
-        display: 'none',
-      },
-      // Improved styling for stacked accordions
-      marginBottom: '8px',
-      borderRadius: '8px',
-      boxShadow: sacredtheme
-        ? '0 0 15px rgba(255, 215, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3)'
-        : '0px 1px 3px rgba(0, 0, 0, 0.1)',
-      transition: 'all 0.3s ease',
-      overflow: 'hidden',
-      position: 'relative',
-      backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
-      border: sacredtheme ? `1px solid ${alpha('#FFD700', 0.3)}` : 'none',
+const StyledAccordion = styled(StrictAccordion, {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{ sacredtheme?: boolean }>(({ sacredtheme }) => ({
+  '&.MuiAccordion-root': {
+    '&:before': {
+      display: 'none',
+    },
+    // Improved styling for stacked accordions
+    marginBottom: '8px',
+    borderRadius: '8px',
+    boxShadow: sacredtheme
+      ? '0 0 15px rgba(255, 215, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3)'
+      : '0px 1px 3px rgba(0, 0, 0, 0.1)',
+    transition: 'all 0.3s ease',
+    overflow: 'hidden',
+    position: 'relative',
+    backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
+    border: sacredtheme ? `1px solid ${alpha('#FFD700', 0.3)}` : 'none',
 
-      ...(sacredtheme && {
-        backgroundImage: `
+    ...(sacredtheme && {
+      backgroundImage: `
           linear-gradient(rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.02)),
           radial-gradient(circle at top left, rgba(255, 215, 0, 0.05) 0%, transparent 50%)
         `,
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: 0,
+        background:
+          'linear-gradient(135deg, transparent, rgba(255, 215, 0, 0.1), transparent)',
+        transition: 'opacity 0.3s ease',
+        pointerEvents: 'none',
+      },
+    }),
+
+    // Add subtle hover effect
+    '&:hover': {
+      boxShadow: sacredtheme
+        ? '0 0 25px rgba(255, 215, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.4)'
+        : '0px 3px 6px rgba(0, 0, 0, 0.15)',
+      transform: 'translateY(-1px)',
+      ...(sacredtheme && {
+        borderColor: alpha('#FFD700', 0.5),
         '&::before': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          opacity: 0,
-          background:
-            'linear-gradient(135deg, transparent, rgba(255, 215, 0, 0.1), transparent)',
-          transition: 'opacity 0.3s ease',
-          pointerEvents: 'none',
+          opacity: 1,
         },
       }),
+    },
 
-      // Add subtle hover effect
-      '&:hover': {
-        boxShadow: sacredtheme
-          ? '0 0 25px rgba(255, 215, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.4)'
-          : '0px 3px 6px rgba(0, 0, 0, 0.15)',
-        transform: 'translateY(-1px)',
-        ...(sacredtheme && {
-          borderColor: alpha('#FFD700', 0.5),
-          '&::before': {
-            opacity: 1,
-          },
-        }),
-      },
-
-      // Mobile styles
-      '@media (max-width: 600px)': {
-        borderRadius: '6px',
-        boxShadow: sacredtheme
-          ? '0 0 10px rgba(255, 215, 0, 0.2)'
-          : '0px 1px 3px rgba(0, 0, 0, 0.1)',
-      },
-
-      // Apply different styling to expanded accordion
-      '&.accordion-expanded': {
-        boxShadow: sacredtheme
-          ? '0 0 30px rgba(255, 215, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.5)'
-          : '0px 3px 8px rgba(0, 0, 0, 0.12)',
-        backgroundColor: sacredtheme ? '#0a0a0a' : '#fafafa',
-        ...(sacredtheme && {
-          borderColor: '#FFD700',
-          '&::before': {
-            opacity: 1,
-            animation: `${sacredShimmer} 3s ease-in-out infinite`,
-          },
-        }),
-      },
+    // Mobile styles
+    '@media (max-width: 600px)': {
+      borderRadius: '6px',
+      boxShadow: sacredtheme
+        ? '0 0 10px rgba(255, 215, 0, 0.2)'
+        : '0px 1px 3px rgba(0, 0, 0, 0.1)',
     },
-    '&.Mui-disabled': {
-      backgroundColor: sacredtheme ? alpha('#000000', 0.8) : '#f8f8f8',
-      opacity: sacredtheme ? 0.6 : 0.8,
-      // Override Material UI's disabled styles
-      pointerEvents: 'auto !important',
+
+    // Apply different styling to expanded accordion
+    '&.accordion-expanded': {
+      boxShadow: sacredtheme
+        ? '0 0 30px rgba(255, 215, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.5)'
+        : '0px 3px 8px rgba(0, 0, 0, 0.12)',
+      backgroundColor: sacredtheme ? '#0a0a0a' : '#fafafa',
       ...(sacredtheme && {
-        borderColor: alpha('#FFD700', 0.1),
+        borderColor: '#FFD700',
+        '&::before': {
+          opacity: 1,
+          animation: `${sacredShimmer} 3s ease-in-out infinite`,
+        },
       }),
     },
-  })
-)
+  },
+  '&.Mui-disabled': {
+    backgroundColor: sacredtheme ? alpha('#000000', 0.8) : '#f8f8f8',
+    opacity: sacredtheme ? 0.6 : 0.8,
+    // Override Material UI's disabled styles
+    pointerEvents: 'auto !important',
+    ...(sacredtheme && {
+      borderColor: alpha('#FFD700', 0.1),
+    }),
+  },
+}))
 
 // Wrapper for disabled summary to ensure it's testable
 const DisabledSummaryWrapper = styled('div')({
@@ -302,7 +302,9 @@ const DisabledSummaryWrapper = styled('div')({
   },
 })
 
-const StyledAccordionSummary = styled(MuiAccordionSummary)<{
+const StyledAccordionSummary = styled(MuiAccordionSummary, {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{
   sacredtheme?: boolean
 }>(({ sacredtheme }) => ({
   fontSize: '20px',
@@ -402,7 +404,9 @@ const StyledAccordionSummary = styled(MuiAccordionSummary)<{
   },
 }))
 
-const StyledAccordionDetails = styled(MuiAccordionDetails)<{
+const StyledAccordionDetails = styled(MuiAccordionDetails, {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{
   sacredtheme?: boolean
 }>(({ sacredtheme }) => ({
   padding: '16px',

package/src/components/Checkbox/index.tsx

@@ -95,138 +95,136 @@ export interface CheckboxProps {
 }
 
 // Create a styled version of MUI Checkbox with our custom styles
-const StyledCheckbox = styled(Checkbox)<{ sacredtheme?: boolean }>(
-  ({ sacredtheme }) => ({
-    padding: '8px',
-    position: 'relative',
-    '& .MuiSvgIcon-root': {
-      fontSize: '24px',
-    },
-
-    // Style for unchecked state
-    '&:not(.Mui-checked):not(.Mui-indeterminate):not(.Mui-disabled)': {
-      '& .MuiSvgIcon-root': {
-        color: 'transparent',
-        backgroundColor: sacredtheme
-          ? alpha('#000000', 0.8)
-          : palette.grey.light,
-        border: `2px solid ${sacredtheme ? alpha('#FFD700', 0.6) : palette.marine.main}`,
-        borderRadius: '3px',
-        transition: 'all 0.3s ease',
-        ...(sacredtheme && {
-          animation: `${sacredBorderGlow} 3s ease-in-out infinite`,
-        }),
-      },
-    },
+const StyledCheckbox = styled(Checkbox, {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{ sacredtheme?: boolean }>(({ sacredtheme }) => ({
+  padding: '8px',
+  position: 'relative',
+  '& .MuiSvgIcon-root': {
+    fontSize: '24px',
+  },
 
-    // Checked state
-    '&.Mui-checked .MuiSvgIcon-root': {
-      color: sacredtheme ? '#FFD700' : palette.marine.main,
-      backgroundColor: sacredtheme ? alpha('#000000', 0.9) : 'transparent',
-      border: sacredtheme ? `2px solid #FFD700` : 'none',
-      borderRadius: sacredtheme ? '3px' : '0',
+  // Style for unchecked state
+  '&:not(.Mui-checked):not(.Mui-indeterminate):not(.Mui-disabled)': {
+    '& .MuiSvgIcon-root': {
+      color: 'transparent',
+      backgroundColor: sacredtheme ? alpha('#000000', 0.8) : palette.grey.light,
+      border: `2px solid ${sacredtheme ? alpha('#FFD700', 0.6) : palette.marine.main}`,
+      borderRadius: '3px',
+      transition: 'all 0.3s ease',
       ...(sacredtheme && {
-        animation: `${sacredGlowPulse} 2s ease-in-out infinite`,
-        filter: 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))',
+        animation: `${sacredBorderGlow} 3s ease-in-out infinite`,
       }),
     },
+  },
 
-    // Checked animation
-    '&.Mui-checked': {
-      ...(sacredtheme && {
-        '& .MuiSvgIcon-root path': {
-          animation: `${sacredCheckAppear} 0.4s ease-out`,
-        },
-      }),
-    },
+  // Checked state
+  '&.Mui-checked .MuiSvgIcon-root': {
+    color: sacredtheme ? '#FFD700' : palette.marine.main,
+    backgroundColor: sacredtheme ? alpha('#000000', 0.9) : 'transparent',
+    border: sacredtheme ? `2px solid #FFD700` : 'none',
+    borderRadius: sacredtheme ? '3px' : '0',
+    ...(sacredtheme && {
+      animation: `${sacredGlowPulse} 2s ease-in-out infinite`,
+      filter: 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))',
+    }),
+  },
 
-    // Indeterminate state
-    '&.Mui-indeterminate .MuiSvgIcon-root': {
-      color: sacredtheme ? '#FFD700' : palette.marine.main,
-      backgroundColor: sacredtheme ? alpha('#000000', 0.9) : 'transparent',
-      border: sacredtheme ? `2px solid #FFD700` : 'none',
-      borderRadius: sacredtheme ? '3px' : '0',
-      ...(sacredtheme && {
-        animation: `${sacredGlowPulse} 1.5s ease-in-out infinite`,
-        filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.5))',
-      }),
-    },
+  // Checked animation
+  '&.Mui-checked': {
+    ...(sacredtheme && {
+      '& .MuiSvgIcon-root path': {
+        animation: `${sacredCheckAppear} 0.4s ease-out`,
+      },
+    }),
+  },
 
-    // Disabled state
-    '&.Mui-disabled .MuiSvgIcon-root': {
-      color: sacredtheme ? alpha('#FFD700', 0.2) : palette.grey.main,
-      backgroundColor: sacredtheme ? alpha('#000000', 0.6) : 'transparent',
-      border: `2px solid ${sacredtheme ? alpha('#FFD700', 0.2) : palette.grey.main}`,
-      borderRadius: '3px',
-    },
+  // Indeterminate state
+  '&.Mui-indeterminate .MuiSvgIcon-root': {
+    color: sacredtheme ? '#FFD700' : palette.marine.main,
+    backgroundColor: sacredtheme ? alpha('#000000', 0.9) : 'transparent',
+    border: sacredtheme ? `2px solid #FFD700` : 'none',
+    borderRadius: sacredtheme ? '3px' : '0',
+    ...(sacredtheme && {
+      animation: `${sacredGlowPulse} 1.5s ease-in-out infinite`,
+      filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.5))',
+    }),
+  },
 
-    // Hover state
-    '&:hover': {
-      backgroundColor: sacredtheme
-        ? alpha('#FFD700', 0.1)
-        : `${palette.marine.light}33`,
-      ...(sacredtheme && {
-        '& .MuiSvgIcon-root': {
-          borderColor: '#FFD700',
-          transform: 'scale(1.1)',
-        },
-      }),
-    },
+  // Disabled state
+  '&.Mui-disabled .MuiSvgIcon-root': {
+    color: sacredtheme ? alpha('#FFD700', 0.2) : palette.grey.main,
+    backgroundColor: sacredtheme ? alpha('#000000', 0.6) : 'transparent',
+    border: `2px solid ${sacredtheme ? alpha('#FFD700', 0.2) : palette.grey.main}`,
+    borderRadius: '3px',
+  },
 
-    // Sacred decorative elements
+  // Hover state
+  '&:hover': {
+    backgroundColor: sacredtheme
+      ? alpha('#FFD700', 0.1)
+      : `${palette.marine.light}33`,
     ...(sacredtheme && {
-      '&::before': {
-        content: `"${SACRED_GLYPHS[11]}"`,
-        position: 'absolute',
-        left: '-20px',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        color: alpha('#FFD700', 0.3),
-        fontSize: '12px',
-        animation: `${floatGlyph} 3s ease-in-out infinite`,
-      },
-      '&::after': {
-        content: `"${SACRED_GLYPHS[15]}"`,
-        position: 'absolute',
-        right: '-20px',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        color: alpha('#FFD700', 0.3),
-        fontSize: '12px',
-        animation: `${floatGlyph} 3s ease-in-out infinite 1.5s`,
+      '& .MuiSvgIcon-root': {
+        borderColor: '#FFD700',
+        transform: 'scale(1.1)',
       },
     }),
-  })
-)
+  },
+
+  // Sacred decorative elements
+  ...(sacredtheme && {
+    '&::before': {
+      content: `"${SACRED_GLYPHS[11]}"`,
+      position: 'absolute',
+      left: '-20px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      color: alpha('#FFD700', 0.3),
+      fontSize: '12px',
+      animation: `${floatGlyph} 3s ease-in-out infinite`,
+    },
+    '&::after': {
+      content: `"${SACRED_GLYPHS[15]}"`,
+      position: 'absolute',
+      right: '-20px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      color: alpha('#FFD700', 0.3),
+      fontSize: '12px',
+      animation: `${floatGlyph} 3s ease-in-out infinite 1.5s`,
+    },
+  }),
+}))
 
 // Sacred wrapper for additional effects
-const SacredCheckboxWrapper = styled('div')<{ sacredtheme?: boolean }>(
-  ({ sacredtheme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    ...(sacredtheme && {
-      '&::before': {
-        content: '""',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '40px',
-        height: '40px',
-        borderRadius: '50%',
-        background: `radial-gradient(circle, ${alpha('#FFD700', 0.1)} 0%, transparent 70%)`,
-        opacity: 0,
-        transition: 'opacity 0.3s ease',
-        pointerEvents: 'none',
-      },
-      '&:hover::before': {
-        opacity: 1,
-      },
-    }),
-  })
-)
+const SacredCheckboxWrapper = styled('div', {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{ sacredtheme?: boolean }>(({ sacredtheme }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  ...(sacredtheme && {
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '40px',
+      height: '40px',
+      borderRadius: '50%',
+      background: `radial-gradient(circle, ${alpha('#FFD700', 0.1)} 0%, transparent 70%)`,
+      opacity: 0,
+      transition: 'opacity 0.3s ease',
+      pointerEvents: 'none',
+    },
+    '&:hover::before': {
+      opacity: 1,
+    },
+  }),
+}))
 
 function CustomCheckbox({
   onClick,

package/src/components/ConfirmationCodeInput/index.tsx

@@ -136,43 +136,43 @@ export interface ConfirmationCodeInputsProps {
 }
 
 // Custom styled input for verification code digits
-const CodeInput = styled('input')<{ sacredtheme?: boolean }>(
-  ({ sacredtheme }) => ({
-    width: '48px',
-    height: '56px',
-    padding: '0',
-    textAlign: 'center',
-    fontSize: '20px',
-    fontWeight: sacredtheme ? 'bold' : 'normal',
-    color: sacredtheme ? '#FFD700' : 'black',
-    backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
-    border: sacredtheme
-      ? `2px solid ${alpha('#FFD700', 0.5)}`
-      : '1px solid black',
-    borderRadius: '4px',
-    outline: 'none',
-    position: 'relative',
-    transition: 'all 0.3s ease',
+const CodeInput = styled('input', {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{ sacredtheme?: boolean }>(({ sacredtheme }) => ({
+  width: '48px',
+  height: '56px',
+  padding: '0',
+  textAlign: 'center',
+  fontSize: '20px',
+  fontWeight: sacredtheme ? 'bold' : 'normal',
+  color: sacredtheme ? '#FFD700' : 'black',
+  backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
+  border: sacredtheme
+    ? `2px solid ${alpha('#FFD700', 0.5)}`
+    : '1px solid black',
+  borderRadius: '4px',
+  outline: 'none',
+  position: 'relative',
+  transition: 'all 0.3s ease',
+  ...(sacredtheme && {
+    fontFamily: 'monospace',
+    letterSpacing: '2px',
+    textShadow: '0 0 8px rgba(255, 215, 0, 0.6)',
+    animation: `${sacredInputGlow} 4s ease-in-out infinite`,
+  }),
+  '&:focus': {
+    borderColor: sacredtheme ? '#FFD700' : 'black',
+    borderWidth: '2px',
     ...(sacredtheme && {
-      fontFamily: 'monospace',
-      letterSpacing: '2px',
-      textShadow: '0 0 8px rgba(255, 215, 0, 0.6)',
-      animation: `${sacredInputGlow} 4s ease-in-out infinite`,
+      boxShadow:
+        '0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3)',
+      transform: 'scale(1.05)',
     }),
-    '&:focus': {
-      borderColor: sacredtheme ? '#FFD700' : 'black',
-      borderWidth: '2px',
-      ...(sacredtheme && {
-        boxShadow:
-          '0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3)',
-        transform: 'scale(1.05)',
-      }),
-    },
-    '&::placeholder': {
-      color: sacredtheme ? alpha('#FFD700', 0.3) : undefined,
-    },
-  })
-)
+  },
+  '&::placeholder': {
+    color: sacredtheme ? alpha('#FFD700', 0.3) : undefined,
+  },
+}))
 
 const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,