@kaizen/components 2.1.1 → 2.2.1

package/dist/cjs/index.cjs

@@ -172,6 +172,7 @@ var ToggleSwitchField = require('./src/ToggleSwitch/ToggleSwitchField/ToggleSwit
 var Tooltip = require('./src/Tooltip/Tooltip.cjs');
 var TooltipTrigger = require('./src/Tooltip/TooltipTrigger.cjs');
 var useMediaQueries = require('./src/utils/useMediaQueries.cjs');
+var useContainerQueries = require('./src/utils/useContainerQueries.cjs');
 var hostedAssets = require('./src/utils/hostedAssets.cjs');
 var ReversedColors = require('./src/utils/ReversedColors/ReversedColors.cjs');
 var VisuallyHidden = require('./src/VisuallyHidden/VisuallyHidden.cjs');
@@ -573,6 +574,7 @@ exports.Tooltip = Tooltip.Tooltip;
 exports.TooltipTrigger = TooltipTrigger.TooltipTrigger;
 exports.subtractOnePixel = useMediaQueries.subtractOnePixel;
 exports.useMediaQueries = useMediaQueries.useMediaQueries;
+exports.useContainerQueries = useContainerQueries.useContainerQueries;
 exports.assetUrl = hostedAssets.assetUrl;
 exports.ReversedColors = ReversedColors.ReversedColors;
 exports.useReversedColors = ReversedColors.useReversedColors;

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/Calendar/CalendarRange/CalendarRange.cjs

@@ -60,13 +60,15 @@ var CalendarRange = function (_a) {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: CalendarRange_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: CalendarRange_module.chevronIcon
         });
       }
     },

package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.module.scss.cjs

@@ -7,6 +7,7 @@ var styles = {
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
-  "hidden": "CalendarRange-module_hidden__D47kb"
+  "hidden": "CalendarRange-module_hidden__D47kb",
+  "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
 };
 module.exports = styles;

package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.cjs

@@ -25,7 +25,9 @@ var CalendarSingle = function (_a) {
     weekStartsOn = _a.weekStartsOn,
     _b = _a.locale,
     locale$1 = _b === void 0 ? locale.enAU : _b,
-    restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
+    _c = _a.components,
+    components = _c === void 0 ? {} : _c,
+    restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {
     if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -48,22 +50,24 @@ var CalendarSingle = function (_a) {
     defaultMonth: selectedMonth,
     weekStartsOn: isValidWeekStartsOn.isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
     classNames: classNames,
-    components: {
+    components: tslib.__assign({
       Chevron: function (props) {
         if (props.orientation === 'left') {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: CalendarSingle_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: CalendarSingle_module.chevronIcon
         });
       }
-    },
+    }, components),
     locale: locale$1
   }, restProps)));
 };

package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.module.scss.cjs

@@ -2,6 +2,7 @@
 
 var styles = {
   "nav": "CalendarSingle-module_nav__wSVua",
-  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
+  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
+  "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
 };
 module.exports = styles;

package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs

@@ -52,13 +52,15 @@ var LegacyCalendarRange = function (_a) {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: LegacyCalendarRange_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: LegacyCalendarRange_module.chevronIcon
         });
       }
     },

package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.cjs

@@ -4,6 +4,7 @@ var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
-  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
+  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
+  "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
 };
 module.exports = styles;

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/TitleBlock/TitleBlock.module.scss.cjs

@@ -2,6 +2,7 @@
 
 var styles = {
   "titleBlock": "TitleBlock-module_titleBlock__7jxn3",
+  "lightVariant": "TitleBlock-module_lightVariant__1EeLV",
   "educationVariant": "TitleBlock-module_educationVariant__YvpWa",
   "adminVariant": "TitleBlock-module_adminVariant__s95nS",
   "titleRow": "TitleBlock-module_titleRow__Ifqiu",

package/dist/cjs/src/TitleBlock/utils.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var isMenuGroupNotButton = function (value) {
   return 'menuItems' in value;
 };
-var NON_REVERSED_VARIANTS = ['education', 'admin'];
+var NON_REVERSED_VARIANTS = ['light', 'education', 'admin'];
 var isReversed = function (variant) {
   // The default variant (no variant prop) is reversed (dark background)
   if (variant === undefined) return true;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+var React = require('react');
+var useDebounce = require('use-debounce');
+var DEFAULT_DEBOUNCE_MS = 1000;
+/**
+ * Tailwind CSS default container query breakpoints in pixels
+ * These match the default ranges from Tailwind CSS documentation
+ * https://tailwindcss.com/docs/responsive-design#container-size-reference
+ */
+var DEFAULT_BREAKPOINTS = {
+  '3xs': 256,
+  '2xs': 288,
+  'xs': 320,
+  'sm': 384,
+  'md': 448,
+  'lg': 512,
+  'xl': 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280
+};
+var useContainerQueries = function () {
+  var isClient = typeof window !== 'undefined';
+  var _a = React.useState(0),
+    containerWidth = _a[0],
+    setContainerWidth = _a[1];
+  var resizeObserverRef = React.useRef(null);
+  var debouncedSetContainerWidth = useDebounce.useDebouncedCallback(function (width) {
+    setContainerWidth(width);
+  }, DEFAULT_DEBOUNCE_MS);
+  var containerRef = React.useCallback(function (node) {
+    // Skip if SSR
+    if (!isClient) return;
+    // Cleanup previous observer
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+    if (node) {
+      // Create new ResizeObserver
+      resizeObserverRef.current = new ResizeObserver(function (entries) {
+        var _a, _b, _c;
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+          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;
+          debouncedSetContainerWidth(width_1);
+        }
+      });
+      resizeObserverRef.current.observe(node);
+      // Set initial width immediately (no debounce for initial render)
+      var width = node.getBoundingClientRect().width;
+      setContainerWidth(width);
+    }
+  }, [debouncedSetContainerWidth, isClient]);
+  React.useEffect(function () {
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, []);
+  var queries = React.useMemo(function () {
+    return {
+      is3xsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xs'],
+      is2xsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xs'],
+      isXsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSmOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMdOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLgOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
+    };
+  }, [containerWidth]);
+  return {
+    containerRef: containerRef,
+    queries: queries
+  };
+};
+exports.useContainerQueries = useContainerQueries;

package/dist/esm/index.mjs

@@ -177,6 +177,7 @@ export { ToggleSwitchField } from './src/ToggleSwitch/ToggleSwitchField/ToggleSw
 export { Tooltip } from './src/Tooltip/Tooltip.mjs';
 export { TooltipTrigger } from './src/Tooltip/TooltipTrigger.mjs';
 export { subtractOnePixel, useMediaQueries } from './src/utils/useMediaQueries.mjs';
+export { useContainerQueries } from './src/utils/useContainerQueries.mjs';
 export { assetUrl } from './src/utils/hostedAssets.mjs';
 export { ReversedColors, useReversedColors } from './src/utils/ReversedColors/ReversedColors.mjs';
 export { VisuallyHidden } from './src/VisuallyHidden/VisuallyHidden.mjs';

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/Calendar/CalendarRange/CalendarRange.mjs

@@ -53,13 +53,15 @@ const CalendarRange = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
       },

package/dist/esm/src/Calendar/CalendarRange/CalendarRange.module.scss.mjs

@@ -5,6 +5,7 @@ var styles = {
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
-  "hidden": "CalendarRange-module_hidden__D47kb"
+  "hidden": "CalendarRange-module_hidden__D47kb",
+  "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
 };
 export { styles as default };

package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -18,7 +18,9 @@ const CalendarSingle = /*#__PURE__*/function () {
       weekStartsOn = _a.weekStartsOn,
       _b = _a.locale,
       locale = _b === void 0 ? enAU : _b,
-      restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
+      _c = _a.components,
+      components = _c === void 0 ? {} : _c,
+      restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
     var calendarRef = useRef(null);
     useEffect(function () {
       if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -41,22 +43,24 @@ const CalendarSingle = /*#__PURE__*/function () {
       defaultMonth: selectedMonth,
       weekStartsOn: isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
       classNames: classNames,
-      components: {
+      components: __assign({
         Chevron: function (props) {
           if (props.orientation === 'left') {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
-      },
+      }, components),
       locale: locale
     }, restProps)));
   };

package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.module.scss.mjs

@@ -1,5 +1,6 @@
 var styles = {
   "nav": "CalendarSingle-module_nav__wSVua",
-  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
+  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
+  "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
 };
 export { styles as default };

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs

@@ -45,13 +45,15 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
       },

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.mjs

@@ -2,6 +2,7 @@ var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
-  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
+  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
+  "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
 };
 export { styles as default };

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/TitleBlock/TitleBlock.module.scss.mjs

@@ -1,5 +1,6 @@
 var styles = {
   "titleBlock": "TitleBlock-module_titleBlock__7jxn3",
+  "lightVariant": "TitleBlock-module_lightVariant__1EeLV",
   "educationVariant": "TitleBlock-module_educationVariant__YvpWa",
   "adminVariant": "TitleBlock-module_adminVariant__s95nS",
   "titleRow": "TitleBlock-module_titleRow__Ifqiu",

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

@@ -2,7 +2,7 @@ import { __spreadArray, __assign } from 'tslib';
 var isMenuGroupNotButton = function (value) {
   return 'menuItems' in value;
 };
-var NON_REVERSED_VARIANTS = ['education', 'admin'];
+var NON_REVERSED_VARIANTS = ['light', 'education', 'admin'];
 var isReversed = function (variant) {
   // The default variant (no variant prop) is reversed (dark background)
   if (variant === undefined) return true;

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

@@ -0,0 +1,87 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+var DEFAULT_DEBOUNCE_MS = 1000;
+/**
+ * Tailwind CSS default container query breakpoints in pixels
+ * These match the default ranges from Tailwind CSS documentation
+ * https://tailwindcss.com/docs/responsive-design#container-size-reference
+ */
+var DEFAULT_BREAKPOINTS = {
+  '3xs': 256,
+  '2xs': 288,
+  'xs': 320,
+  'sm': 384,
+  'md': 448,
+  'lg': 512,
+  'xl': 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280
+};
+var useContainerQueries = function () {
+  var isClient = typeof window !== 'undefined';
+  var _a = useState(0),
+    containerWidth = _a[0],
+    setContainerWidth = _a[1];
+  var resizeObserverRef = useRef(null);
+  var debouncedSetContainerWidth = useDebouncedCallback(function (width) {
+    setContainerWidth(width);
+  }, DEFAULT_DEBOUNCE_MS);
+  var containerRef = useCallback(function (node) {
+    // Skip if SSR
+    if (!isClient) return;
+    // Cleanup previous observer
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+    if (node) {
+      // Create new ResizeObserver
+      resizeObserverRef.current = new ResizeObserver(function (entries) {
+        var _a, _b, _c;
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+          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;
+          debouncedSetContainerWidth(width_1);
+        }
+      });
+      resizeObserverRef.current.observe(node);
+      // Set initial width immediately (no debounce for initial render)
+      var width = node.getBoundingClientRect().width;
+      setContainerWidth(width);
+    }
+  }, [debouncedSetContainerWidth, isClient]);
+  useEffect(function () {
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, []);
+  var queries = useMemo(function () {
+    return {
+      is3xsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xs'],
+      is2xsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xs'],
+      isXsOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xs,
+      isSmOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.sm,
+      isMdOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.md,
+      isLgOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.lg,
+      isXlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS.xl,
+      is2xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['2xl'],
+      is3xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['3xl'],
+      is4xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['4xl'],
+      is5xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['5xl'],
+      is6xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['6xl'],
+      is7xlOrLarger: containerWidth >= DEFAULT_BREAKPOINTS['7xl']
+    };
+  }, [containerWidth]);
+  return {
+    containerRef: containerRef,
+    queries: queries
+  };
+};
+export { useContainerQueries };