@kaizen/components 0.0.0-canary-useContainerQueries-20251121043854 → 0.0.0-canary-useContainerQuery-20251123222018

package/dist/cjs/src/Button/Button.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
 var PendingContent = require('./subcomponents/PendingContent/PendingContent.cjs');

package/dist/cjs/src/LinkButton/LinkButton.cjs

@@ -11,6 +11,7 @@ require('../Loading/LoadingParagraph/LoadingParagraph.cjs');
 require('../Loading/LoadingSpinner/LoadingSpinner.cjs');
 require('../VisuallyHidden/VisuallyHidden.cjs');
 var ButtonContent = require('../Button/subcomponents/ButtonContent/ButtonContent.cjs');
+require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
 var Button_module = require('../Button/Button.module.css.cjs');

package/dist/cjs/src/Pagination/Pagination.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
+require('use-debounce');
 require('../utils/ReversedColors/ReversedColors.cjs');
 var DirectionalLink = require('./subcomponents/DirectionalLink/DirectionalLink.cjs');
 var PaginationLink = require('./subcomponents/PaginationLink/PaginationLink.cjs');

package/dist/cjs/src/Tooltip/OverlayArrow.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
 var OverlayArrow_module = require('./OverlayArrow.module.scss.cjs');

package/dist/cjs/src/Tooltip/Tooltip.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
+require('use-debounce');
 var ReversedColors = require('../utils/ReversedColors/ReversedColors.cjs');
 var mergeClassNames = require('../utils/mergeClassNames.cjs');
 var OverlayArrow = require('./OverlayArrow.cjs');

package/dist/cjs/src/utils/useContainerQueries.cjs

@@ -2,39 +2,30 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var useDebounce = require('use-debounce');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-
+var DEFAULT_DEBOUNCE_MS = 500;
 /**
- * Tailwind CSS default container query breakpoints
+ * Tailwind CSS default container query breakpoints in pixels
  * These match the default values from @tailwindcss/container-queries plugin
  */
 var DEFAULT_BREAKPOINTS = {
-  'xs': '20rem',
-  // 320px
-  'sm': '24rem',
-  // 384px
-  'md': '28rem',
-  // 448px
-  'lg': '32rem',
-  // 512px
-  'xl': '36rem',
-  // 576px
-  '2xl': '42rem',
-  // 672px
-  '3xl': '48rem',
-  // 768px
-  '4xl': '56rem',
-  // 896px
-  '5xl': '64rem',
-  // 1024px
-  '6xl': '72rem',
-  // 1152px
-  '7xl': '80rem' // 1280px
+  'xs': 320,
+  'sm': 384,
+  'md': 448,
+  'lg': 512,
+  'xl': 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280
 };
 /**
  * Convert rem/px values to pixels for comparison
@@ -169,15 +160,6 @@ var useContainerQueries = function (propQueries) {
       }
     };
   }
-  // Parse all breakpoints to pixel values for comparison
-  var breakpointsPx = React.useMemo(function () {
-    return Object.entries(DEFAULT_BREAKPOINTS).reduce(function (acc, _a) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = parseBreakpointValue(value);
-      return acc;
-    }, {});
-  }, []);
   // Parse custom queries
   var customQueriesPx = React.useMemo(function () {
     return Object.entries(propQueries).reduce(function (acc, _a) {
@@ -193,6 +175,10 @@ var useContainerQueries = function (propQueries) {
     setContainerWidth = _a[1];
   // ResizeObserver ref
   var resizeObserverRef = React.useRef(null);
+  // Debounced width update
+  var debouncedSetContainerWidth = useDebounce.useDebouncedCallback(function (width) {
+    setContainerWidth(width);
+  }, DEFAULT_DEBOUNCE_MS);
   // Callback ref for the container element
   var containerRef = React.useCallback(function (node) {
     // Cleanup previous observer
@@ -208,15 +194,15 @@ var useContainerQueries = function (propQueries) {
           var entry = entries_1[_i];
           // Use borderBoxSize for more accurate measurements
           var width_1 = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.inlineSize) !== null && _c !== void 0 ? _c : entry.contentRect.width;
-          setContainerWidth(width_1);
+          debouncedSetContainerWidth(width_1);
         }
       });
       resizeObserverRef.current.observe(node);
-      // Set initial width
+      // Set initial width immediately (no debounce for initial render)
       var width = node.getBoundingClientRect().width;
       setContainerWidth(width);
     }
-  }, []);
+  }, [debouncedSetContainerWidth]);
   // Cleanup on unmount
   React.useEffect(function () {
     return function () {
@@ -228,19 +214,19 @@ var useContainerQueries = function (propQueries) {
   // Calculate breakpoint matches based on container width
   var breakpointMatches = React.useMemo(function () {
     return {
-      isXs: containerWidth >= breakpointsPx.xs,
-      isSm: containerWidth >= breakpointsPx.sm,
-      isMd: containerWidth >= breakpointsPx.md,
-      isLg: containerWidth >= breakpointsPx.lg,
-      isXl: containerWidth >= breakpointsPx.xl,
-      is2xl: containerWidth >= breakpointsPx['2xl'],
-      is3xl: containerWidth >= breakpointsPx['3xl'],
-      is4xl: containerWidth >= breakpointsPx['4xl'],
-      is5xl: containerWidth >= breakpointsPx['5xl'],
-      is6xl: containerWidth >= breakpointsPx['6xl'],
-      is7xl: containerWidth >= breakpointsPx['7xl']
+      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
     };
-  }, [containerWidth, breakpointsPx]);
+  }, [containerWidth]);
   // Calculate custom query matches
   var customMatches = React.useMemo(function () {
     return Object.entries(customQueriesPx).reduce(function (acc, _a) {
@@ -252,7 +238,7 @@ var useContainerQueries = function (propQueries) {
   }, [containerWidth, customQueriesPx]);
   // Helper function to check if container is at exact breakpoint (not larger)
   var isExactBreakpoint = React.useCallback(function (breakpoint) {
-    var sortedBreakpoints = Object.entries(breakpointsPx).sort(function (_a, _b) {
+    var sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(function (_a, _b) {
       var a = _a[1];
       var b = _b[1];
       return a - b;
@@ -262,10 +248,10 @@ var useContainerQueries = function (propQueries) {
       return key === breakpoint;
     });
     var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = breakpointsPx[breakpoint];
+    var minWidth = DEFAULT_BREAKPOINTS[breakpoint];
     var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
     return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth, breakpointsPx]);
+  }, [containerWidth]);
   // Create helper components for Tailwind breakpoints
   var components = React.useMemo(function () {
     return tslib.__assign({

package/dist/esm/src/Button/Button.mjs

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { Button as Button$1 } from 'react-aria-components';
+import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import { PendingContent } from './subcomponents/PendingContent/PendingContent.mjs';

package/dist/esm/src/LinkButton/LinkButton.mjs

@@ -9,6 +9,7 @@ import '../Loading/LoadingParagraph/LoadingParagraph.mjs';
 import '../Loading/LoadingSpinner/LoadingSpinner.mjs';
 import '../VisuallyHidden/VisuallyHidden.mjs';
 import { ButtonContent } from '../Button/subcomponents/ButtonContent/ButtonContent.mjs';
+import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import buttonStyles from '../Button/Button.module.css.mjs';

package/dist/esm/src/Pagination/Pagination.mjs

@@ -2,6 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
+import 'use-debounce';
 import '../utils/ReversedColors/ReversedColors.mjs';
 import { DirectionalLink } from './subcomponents/DirectionalLink/DirectionalLink.mjs';
 import { PaginationLink } from './subcomponents/PaginationLink/PaginationLink.mjs';

package/dist/esm/src/Tooltip/OverlayArrow.mjs

@@ -1,6 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { OverlayArrow as OverlayArrow$1 } from 'react-aria-components';
+import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import styles from './OverlayArrow.module.scss.mjs';

package/dist/esm/src/Tooltip/Tooltip.mjs

@@ -3,6 +3,7 @@ import React, { forwardRef, useContext, useState, useLayoutEffect } from 'react'
 import { useContextProps, TooltipContext, TooltipTriggerStateContext, Tooltip as Tooltip$1 } from 'react-aria-components';
 export { TooltipContext } from 'react-aria-components';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import { OverlayArrow } from './OverlayArrow.mjs';

package/dist/esm/src/utils/useContainerQueries.mjs

@@ -1,32 +1,23 @@
 import { __assign } from 'tslib';
 import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-
+import { useDebouncedCallback } from 'use-debounce';
+var DEFAULT_DEBOUNCE_MS = 500;
 /**
- * Tailwind CSS default container query breakpoints
+ * Tailwind CSS default container query breakpoints in pixels
  * These match the default values from @tailwindcss/container-queries plugin
  */
 var DEFAULT_BREAKPOINTS = {
-  'xs': '20rem',
-  // 320px
-  'sm': '24rem',
-  // 384px
-  'md': '28rem',
-  // 448px
-  'lg': '32rem',
-  // 512px
-  'xl': '36rem',
-  // 576px
-  '2xl': '42rem',
-  // 672px
-  '3xl': '48rem',
-  // 768px
-  '4xl': '56rem',
-  // 896px
-  '5xl': '64rem',
-  // 1024px
-  '6xl': '72rem',
-  // 1152px
-  '7xl': '80rem' // 1280px
+  'xs': 320,
+  'sm': 384,
+  'md': 448,
+  'lg': 512,
+  'xl': 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280
 };
 /**
  * Convert rem/px values to pixels for comparison
@@ -161,15 +152,6 @@ var useContainerQueries = function (propQueries) {
       }
     };
   }
-  // Parse all breakpoints to pixel values for comparison
-  var breakpointsPx = useMemo(function () {
-    return Object.entries(DEFAULT_BREAKPOINTS).reduce(function (acc, _a) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = parseBreakpointValue(value);
-      return acc;
-    }, {});
-  }, []);
   // Parse custom queries
   var customQueriesPx = useMemo(function () {
     return Object.entries(propQueries).reduce(function (acc, _a) {
@@ -185,6 +167,10 @@ var useContainerQueries = function (propQueries) {
     setContainerWidth = _a[1];
   // ResizeObserver ref
   var resizeObserverRef = useRef(null);
+  // Debounced width update
+  var debouncedSetContainerWidth = useDebouncedCallback(function (width) {
+    setContainerWidth(width);
+  }, DEFAULT_DEBOUNCE_MS);
   // Callback ref for the container element
   var containerRef = useCallback(function (node) {
     // Cleanup previous observer
@@ -200,15 +186,15 @@ var useContainerQueries = function (propQueries) {
           var entry = entries_1[_i];
           // Use borderBoxSize for more accurate measurements
           var width_1 = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.inlineSize) !== null && _c !== void 0 ? _c : entry.contentRect.width;
-          setContainerWidth(width_1);
+          debouncedSetContainerWidth(width_1);
         }
       });
       resizeObserverRef.current.observe(node);
-      // Set initial width
+      // Set initial width immediately (no debounce for initial render)
       var width = node.getBoundingClientRect().width;
       setContainerWidth(width);
     }
-  }, []);
+  }, [debouncedSetContainerWidth]);
   // Cleanup on unmount
   useEffect(function () {
     return function () {
@@ -220,19 +206,19 @@ var useContainerQueries = function (propQueries) {
   // Calculate breakpoint matches based on container width
   var breakpointMatches = useMemo(function () {
     return {
-      isXs: containerWidth >= breakpointsPx.xs,
-      isSm: containerWidth >= breakpointsPx.sm,
-      isMd: containerWidth >= breakpointsPx.md,
-      isLg: containerWidth >= breakpointsPx.lg,
-      isXl: containerWidth >= breakpointsPx.xl,
-      is2xl: containerWidth >= breakpointsPx['2xl'],
-      is3xl: containerWidth >= breakpointsPx['3xl'],
-      is4xl: containerWidth >= breakpointsPx['4xl'],
-      is5xl: containerWidth >= breakpointsPx['5xl'],
-      is6xl: containerWidth >= breakpointsPx['6xl'],
-      is7xl: containerWidth >= breakpointsPx['7xl']
+      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
     };
-  }, [containerWidth, breakpointsPx]);
+  }, [containerWidth]);
   // Calculate custom query matches
   var customMatches = useMemo(function () {
     return Object.entries(customQueriesPx).reduce(function (acc, _a) {
@@ -244,7 +230,7 @@ var useContainerQueries = function (propQueries) {
   }, [containerWidth, customQueriesPx]);
   // Helper function to check if container is at exact breakpoint (not larger)
   var isExactBreakpoint = useCallback(function (breakpoint) {
-    var sortedBreakpoints = Object.entries(breakpointsPx).sort(function (_a, _b) {
+    var sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(function (_a, _b) {
       var a = _a[1];
       var b = _b[1];
       return a - b;
@@ -254,10 +240,10 @@ var useContainerQueries = function (propQueries) {
       return key === breakpoint;
     });
     var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = breakpointsPx[breakpoint];
+    var minWidth = DEFAULT_BREAKPOINTS[breakpoint];
     var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
     return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth, breakpointsPx]);
+  }, [containerWidth]);
   // Create helper components for Tailwind breakpoints
   var components = useMemo(function () {
     return __assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-useContainerQueries-20251121043854",
+  "version": "0.0.0-canary-useContainerQuery-20251123222018",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/utils/useContainerQueries.spec.tsx

@@ -135,6 +135,8 @@ describe('useContainerQueries()', () => {
     // Trigger resize to 400px (sm breakpoint is 384px)
     await act(async () => {
       resizeObserverInstance?.trigger(400)
+      // Wait for debounce (500ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 550))
     })
 
     expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
@@ -145,6 +147,8 @@ describe('useContainerQueries()', () => {
     // Trigger resize to 500px (md breakpoint is 448px)
     await act(async () => {
       resizeObserverInstance?.trigger(500)
+      // Wait for debounce (500ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 550))
     })
 
     expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
@@ -179,6 +183,8 @@ describe('useContainerQueries()', () => {
     // Trigger resize to 450px (compact is 400px)
     await act(async () => {
       resizeObserverInstance?.trigger(450)
+      // Wait for debounce (500ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 550))
     })
 
     expect(screen.queryByRole('button', { name: /Compact query boolean/i })).toBeInTheDocument()

package/src/utils/useContainerQueries.tsx

@@ -1,25 +1,28 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useDebouncedCallback } from 'use-debounce'
 
 type Props = Record<string, string>
 type GenericChildrenType = { children?: ReactNode }
 
+const DEFAULT_DEBOUNCE_MS = 500
+
 /**
- * Tailwind CSS default container query breakpoints
+ * Tailwind CSS default container query breakpoints in pixels
  * These match the default values from @tailwindcss/container-queries plugin
  */
 const DEFAULT_BREAKPOINTS = {
-  'xs': '20rem', // 320px
-  'sm': '24rem', // 384px
-  'md': '28rem', // 448px
-  'lg': '32rem', // 512px
-  'xl': '36rem', // 576px
-  '2xl': '42rem', // 672px
-  '3xl': '48rem', // 768px
-  '4xl': '56rem', // 896px
-  '5xl': '64rem', // 1024px
-  '6xl': '72rem', // 1152px
-  '7xl': '80rem', // 1280px
+  'xs': 320,
+  'sm': 384,
+  'md': 448,
+  'lg': 512,
+  'xl': 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280,
 } as const
 
 /**
@@ -167,19 +170,6 @@ export const useContainerQueries = (
     }
   }
 
-  // Parse all breakpoints to pixel values for comparison
-  const breakpointsPx = useMemo(
-    () =>
-      Object.entries(DEFAULT_BREAKPOINTS).reduce(
-        (acc, [key, value]) => {
-          acc[key] = parseBreakpointValue(value)
-          return acc
-        },
-        {} as Record<string, number>,
-      ),
-    [],
-  )
-
   // Parse custom queries
   const customQueriesPx = useMemo(
     () =>
@@ -199,31 +189,39 @@ export const useContainerQueries = (
   // ResizeObserver ref
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
+  // Debounced width update
+  const debouncedSetContainerWidth = useDebouncedCallback((width: number) => {
+    setContainerWidth(width)
+  }, DEFAULT_DEBOUNCE_MS)
+
   // Callback ref for the container element
-  const containerRef = useCallback((node: HTMLElement | null) => {
-    // Cleanup previous observer
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect()
-      resizeObserverRef.current = null
-    }
+  const containerRef = useCallback(
+    (node: HTMLElement | null) => {
+      // Cleanup previous observer
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+        resizeObserverRef.current = null
+      }
 
-    if (node) {
-      // Create new ResizeObserver
-      resizeObserverRef.current = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          // Use borderBoxSize for more accurate measurements
-          const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width
-          setContainerWidth(width)
-        }
-      })
+      if (node) {
+        // Create new ResizeObserver
+        resizeObserverRef.current = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            // Use borderBoxSize for more accurate measurements
+            const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width
+            debouncedSetContainerWidth(width)
+          }
+        })
 
-      resizeObserverRef.current.observe(node)
+        resizeObserverRef.current.observe(node)
 
-      // Set initial width
-      const width = node.getBoundingClientRect().width
-      setContainerWidth(width)
-    }
-  }, [])
+        // Set initial width immediately (no debounce for initial render)
+        const width = node.getBoundingClientRect().width
+        setContainerWidth(width)
+      }
+    },
+    [debouncedSetContainerWidth],
+  )
 
   // Cleanup on unmount
   useEffect(
@@ -238,19 +236,19 @@ export const useContainerQueries = (
   // Calculate breakpoint matches based on container width
   const breakpointMatches = useMemo(
     () => ({
-      isXs: containerWidth >= breakpointsPx.xs,
-      isSm: containerWidth >= breakpointsPx.sm,
-      isMd: containerWidth >= breakpointsPx.md,
-      isLg: containerWidth >= breakpointsPx.lg,
-      isXl: containerWidth >= breakpointsPx.xl,
-      is2xl: containerWidth >= breakpointsPx['2xl'],
-      is3xl: containerWidth >= breakpointsPx['3xl'],
-      is4xl: containerWidth >= breakpointsPx['4xl'],
-      is5xl: containerWidth >= breakpointsPx['5xl'],
-      is6xl: containerWidth >= breakpointsPx['6xl'],
-      is7xl: containerWidth >= breakpointsPx['7xl'],
+      isXs: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSm: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMd: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLg: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXl: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xl: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xl: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xl: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xl: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xl: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xl: containerWidth >= DEFAULT_BREAKPOINTS['7xl'],
     }),
-    [containerWidth, breakpointsPx],
+    [containerWidth],
   )
 
   // Calculate custom query matches
@@ -268,17 +266,17 @@ export const useContainerQueries = (
 
   // Helper function to check if container is at exact breakpoint (not larger)
   const isExactBreakpoint = useCallback(
-    (breakpoint: keyof typeof breakpointsPx): boolean => {
-      const sortedBreakpoints = Object.entries(breakpointsPx).sort(([, a], [, b]) => a - b)
+    (breakpoint: keyof typeof DEFAULT_BREAKPOINTS): boolean => {
+      const sortedBreakpoints = Object.entries(DEFAULT_BREAKPOINTS).sort(([, a], [, b]) => a - b)
       const currentIndex = sortedBreakpoints.findIndex(([key]) => key === breakpoint)
       const nextBreakpoint = sortedBreakpoints[currentIndex + 1]
 
-      const minWidth = breakpointsPx[breakpoint]
+      const minWidth = DEFAULT_BREAKPOINTS[breakpoint]
       const maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity
 
       return containerWidth >= minWidth && containerWidth < maxWidth
     },
-    [containerWidth, breakpointsPx],
+    [containerWidth],
   )
 
   // Create helper components for Tailwind breakpoints