@rabex-kit/rabex-ui 0.1.54 → 0.1.56

package/dist/Theme/getDesignTokens.d.ts

@@ -4,5 +4,16 @@ export declare type themeTypes = {
     direction?: Direction;
     deviceType?: 'mobile' | 'desktop';
 };
+declare module '@mui/material/styles' {
+    interface BreakpointOverrides {
+        xs: true;
+        sm: true;
+        md: true;
+        lg: true;
+        xl: true;
+        xxl: true;
+        xxxl: true;
+    }
+}
 declare const getDesignTokens: ({ deviceType, mode, direction }: themeTypes) => ThemeOptions;
 export default getDesignTokens;

package/dist/hooks/useResponsive.d.ts

@@ -5,5 +5,7 @@ export default function useResponsive(): {
         md?: any;
         lg?: any;
         xl?: any;
+        xxl?: any;
+        xxxl?: any;
     }) => any;
 };

package/dist/rabex-ui.cjs.development.js

@@ -652,6 +652,12 @@ function useResponsive() {
   var isXL = useMediaQuery(function (theme) {
     return "(min-width:" + theme.breakpoints.values.xl + "px)";
   });
+  var isXXL = useMediaQuery(function (theme) {
+    return "(min-width:" + theme.breakpoints.values.xxl + "px)";
+  });
+  var isXXXL = useMediaQuery(function (theme) {
+    return "(min-width:" + theme.breakpoints.values.xxxl + "px)";
+  });
   function matches(props) {
     var result = _handleDefaultValue(props);
     if (_hasValue(props.xs) && isXS) result = props.xs;
@@ -659,6 +665,8 @@ function useResponsive() {
     if (_hasValue(props.md) && isMD) result = props.md;
     if (_hasValue(props.lg) && isLG) result = props.lg;
     if (_hasValue(props.xl) && isXL) result = props.xl;
+    if (_hasValue(props.xxl) && isXXL) result = props.xxl;
+    if (_hasValue(props.xxxl) && isXXXL) result = props.xxxl;
     return result;
   }
   return {
@@ -4909,7 +4917,18 @@ var getDesignTokens = function getDesignTokens(_ref) {
       MuiLoadingButton: RabexLoadingButton.components
     }),
     palette: _extends({}, mode === 'light' ? createPalette(RabexLightPalette) : createPalette(RabexDarkPalette)),
-    typography: RabexTypography.typography
+    typography: RabexTypography.typography,
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1200,
+        xl: 1440,
+        xxl: 1536,
+        xxxl: 1920
+      }
+    }
   };
 };