@kaizen/components 0.0.0-canary-useContainerQueries-20251121043854 → 0.0.0-canary-useContainerQueries-20251125215952

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

@@ -1,334 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-/**
- * Tailwind CSS default container query breakpoints
- * 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
-};
-/**
- * Convert rem/px values to pixels for comparison
- */
-var parseBreakpointValue = function (value) {
-  if (value.endsWith('rem')) {
-    return parseFloat(value) * 16; // Assuming 1rem = 16px
-  }
-  if (value.endsWith('px')) {
-    return parseFloat(value);
-  }
-  return parseFloat(value);
-};
-/**
- * A React hook for responding to container size changes using Tailwind CSS container query breakpoints.
- *
- * This hook uses ResizeObserver to detect when a container element crosses breakpoint thresholds,
- * enabling component-level responsive behavior independent of viewport size.
- *
- * @param propQueries - Optional custom container size queries in the format { queryName: 'minWidth' }
- *                      Example: { large: '600px', extraLarge: '48rem' }
- *
- * @returns An object containing:
- *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
- *
- * @example
- * ```tsx
- * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
- *
- *   return (
- *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
- *     </div>
- *   )
- * }
- * ```
- *
- * @example With custom queries
- * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
- *   compact: '400px',
- *   spacious: '800px',
- * })
- * const { Compact, Spacious } = components
- *
- * return (
- *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
- *   </div>
- * )
- * ```
- */
-var useContainerQueries = function (propQueries) {
-  if (propQueries === void 0) {
-    propQueries = {};
-  }
-  // SSR support - return safe defaults when window is undefined
-  if (typeof window === 'undefined') {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      containerRef: function () {},
-      queries: {
-        isXs: false,
-        isSm: false,
-        isMd: false,
-        isLg: false,
-        isXl: false,
-        is2xl: false,
-        is3xl: false,
-        is4xl: false,
-        is5xl: false,
-        is6xl: false,
-        is7xl: true // Default to largest for SSR
-      },
-      components: {
-        'XsOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'SmOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'MdOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'LgOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        'XlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '2xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '3xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '4xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '5xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '6xlOnly': function () {
-          return React__default.default.createElement(React__default.default.Fragment, null);
-        },
-        '7xlOnly': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'XsOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'SmOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'MdOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'LgOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        },
-        'XlOrLarger': function (props) {
-          return React__default.default.createElement(React__default.default.Fragment, null, props.children);
-        }
-      }
-    };
-  }
-  // 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) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = parseBreakpointValue(value);
-      return acc;
-    }, {});
-  }, [propQueries]);
-  // State to track container width
-  var _a = React.useState(0),
-    containerWidth = _a[0],
-    setContainerWidth = _a[1];
-  // ResizeObserver ref
-  var resizeObserverRef = React.useRef(null);
-  // Callback ref for the container element
-  var containerRef = React.useCallback(function (node) {
-    // 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;
-          setContainerWidth(width_1);
-        }
-      });
-      resizeObserverRef.current.observe(node);
-      // Set initial width
-      var width = node.getBoundingClientRect().width;
-      setContainerWidth(width);
-    }
-  }, []);
-  // Cleanup on unmount
-  React.useEffect(function () {
-    return function () {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-      }
-    };
-  }, []);
-  // 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']
-    };
-  }, [containerWidth, breakpointsPx]);
-  // Calculate custom query matches
-  var customMatches = React.useMemo(function () {
-    return Object.entries(customQueriesPx).reduce(function (acc, _a) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = containerWidth >= value;
-      return acc;
-    }, {});
-  }, [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 a = _a[1];
-      var b = _b[1];
-      return a - b;
-    });
-    var currentIndex = sortedBreakpoints.findIndex(function (_a) {
-      var key = _a[0];
-      return key === breakpoint;
-    });
-    var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = breakpointsPx[breakpoint];
-    var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
-    return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth, breakpointsPx]);
-  // Create helper components for Tailwind breakpoints
-  var components = React.useMemo(function () {
-    return tslib.__assign({
-      'XsOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('xs') && props.children);
-      },
-      'SmOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('sm') && props.children);
-      },
-      'MdOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('md') && props.children);
-      },
-      'LgOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('lg') && props.children);
-      },
-      'XlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('xl') && props.children);
-      },
-      '2xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('2xl') && props.children);
-      },
-      '3xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('3xl') && props.children);
-      },
-      '4xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('4xl') && props.children);
-      },
-      '5xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('5xl') && props.children);
-      },
-      '6xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('6xl') && props.children);
-      },
-      '7xlOnly': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, isExactBreakpoint('7xl') && props.children);
-      },
-      'XsOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isXs && props.children);
-      },
-      'SmOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isSm && props.children);
-      },
-      'MdOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isMd && props.children);
-      },
-      'LgOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isLg && props.children);
-      },
-      'XlOrLarger': function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, breakpointMatches.isXl && props.children);
-      }
-    }, Object.keys(customQueriesPx).reduce(function (acc, key) {
-      var componentName = key.charAt(0).toUpperCase() + key.slice(1);
-      acc[componentName] = function (props) {
-        return React__default.default.createElement(React__default.default.Fragment, null, customMatches[key] && props.children);
-      };
-      return acc;
-    }, {}));
-  }, [breakpointMatches, customMatches, isExactBreakpoint, customQueriesPx]);
-  return {
-    containerRef: containerRef,
-    queries: tslib.__assign(tslib.__assign({}, breakpointMatches), customMatches),
-    components: components
-  };
-};
-exports.useContainerQueries = useContainerQueries;

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

@@ -1,326 +0,0 @@
-import { __assign } from 'tslib';
-import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-
-/**
- * Tailwind CSS default container query breakpoints
- * 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
-};
-/**
- * Convert rem/px values to pixels for comparison
- */
-var parseBreakpointValue = function (value) {
-  if (value.endsWith('rem')) {
-    return parseFloat(value) * 16; // Assuming 1rem = 16px
-  }
-  if (value.endsWith('px')) {
-    return parseFloat(value);
-  }
-  return parseFloat(value);
-};
-/**
- * A React hook for responding to container size changes using Tailwind CSS container query breakpoints.
- *
- * This hook uses ResizeObserver to detect when a container element crosses breakpoint thresholds,
- * enabling component-level responsive behavior independent of viewport size.
- *
- * @param propQueries - Optional custom container size queries in the format { queryName: 'minWidth' }
- *                      Example: { large: '600px', extraLarge: '48rem' }
- *
- * @returns An object containing:
- *   - containerRef: A ref to attach to your container element
- *   - queries: Boolean flags for each breakpoint (isXs, isSm, isMd, etc.) and custom queries
- *   - components: React components for conditional rendering (XsOnly, SmOrLarger, etc.)
- *
- * @example
- * ```tsx
- * const MyComponent = () => {
- *   const { containerRef, queries, components } = useContainerQueries()
- *   const { MdOrLarger } = components
- *
- *   return (
- *     <div ref={containerRef}>
- *       {queries.isSm && <p>Small container</p>}
- *       <MdOrLarger>
- *         <p>Medium or larger container</p>
- *       </MdOrLarger>
- *     </div>
- *   )
- * }
- * ```
- *
- * @example With custom queries
- * ```tsx
- * const { containerRef, queries, components } = useContainerQueries({
- *   compact: '400px',
- *   spacious: '800px',
- * })
- * const { Compact, Spacious } = components
- *
- * return (
- *   <div ref={containerRef}>
- *     <Compact><p>Compact view</p></Compact>
- *     <Spacious><p>Spacious view</p></Spacious>
- *   </div>
- * )
- * ```
- */
-var useContainerQueries = function (propQueries) {
-  if (propQueries === void 0) {
-    propQueries = {};
-  }
-  // SSR support - return safe defaults when window is undefined
-  if (typeof window === 'undefined') {
-    return {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      containerRef: function () {},
-      queries: {
-        isXs: false,
-        isSm: false,
-        isMd: false,
-        isLg: false,
-        isXl: false,
-        is2xl: false,
-        is3xl: false,
-        is4xl: false,
-        is5xl: false,
-        is6xl: false,
-        is7xl: true // Default to largest for SSR
-      },
-      components: {
-        'XsOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'SmOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'MdOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'LgOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        'XlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '2xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '3xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '4xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '5xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '6xlOnly': function () {
-          return /*#__PURE__*/React.createElement(React.Fragment, null);
-        },
-        '7xlOnly': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'XsOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'SmOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'MdOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'LgOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        },
-        'XlOrLarger': function (props) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-        }
-      }
-    };
-  }
-  // 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) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = parseBreakpointValue(value);
-      return acc;
-    }, {});
-  }, [propQueries]);
-  // State to track container width
-  var _a = useState(0),
-    containerWidth = _a[0],
-    setContainerWidth = _a[1];
-  // ResizeObserver ref
-  var resizeObserverRef = useRef(null);
-  // Callback ref for the container element
-  var containerRef = useCallback(function (node) {
-    // 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;
-          setContainerWidth(width_1);
-        }
-      });
-      resizeObserverRef.current.observe(node);
-      // Set initial width
-      var width = node.getBoundingClientRect().width;
-      setContainerWidth(width);
-    }
-  }, []);
-  // Cleanup on unmount
-  useEffect(function () {
-    return function () {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-      }
-    };
-  }, []);
-  // 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']
-    };
-  }, [containerWidth, breakpointsPx]);
-  // Calculate custom query matches
-  var customMatches = useMemo(function () {
-    return Object.entries(customQueriesPx).reduce(function (acc, _a) {
-      var key = _a[0],
-        value = _a[1];
-      acc[key] = containerWidth >= value;
-      return acc;
-    }, {});
-  }, [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 a = _a[1];
-      var b = _b[1];
-      return a - b;
-    });
-    var currentIndex = sortedBreakpoints.findIndex(function (_a) {
-      var key = _a[0];
-      return key === breakpoint;
-    });
-    var nextBreakpoint = sortedBreakpoints[currentIndex + 1];
-    var minWidth = breakpointsPx[breakpoint];
-    var maxWidth = nextBreakpoint ? nextBreakpoint[1] : Infinity;
-    return containerWidth >= minWidth && containerWidth < maxWidth;
-  }, [containerWidth, breakpointsPx]);
-  // Create helper components for Tailwind breakpoints
-  var components = useMemo(function () {
-    return __assign({
-      'XsOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('xs') && props.children);
-      },
-      'SmOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('sm') && props.children);
-      },
-      'MdOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('md') && props.children);
-      },
-      'LgOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('lg') && props.children);
-      },
-      'XlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('xl') && props.children);
-      },
-      '2xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('2xl') && props.children);
-      },
-      '3xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('3xl') && props.children);
-      },
-      '4xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('4xl') && props.children);
-      },
-      '5xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('5xl') && props.children);
-      },
-      '6xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('6xl') && props.children);
-      },
-      '7xlOnly': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, isExactBreakpoint('7xl') && props.children);
-      },
-      'XsOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isXs && props.children);
-      },
-      'SmOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isSm && props.children);
-      },
-      'MdOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isMd && props.children);
-      },
-      'LgOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isLg && props.children);
-      },
-      'XlOrLarger': function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, breakpointMatches.isXl && props.children);
-      }
-    }, Object.keys(customQueriesPx).reduce(function (acc, key) {
-      var componentName = key.charAt(0).toUpperCase() + key.slice(1);
-      acc[componentName] = function (props) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, customMatches[key] && props.children);
-      };
-      return acc;
-    }, {}));
-  }, [breakpointMatches, customMatches, isExactBreakpoint, customQueriesPx]);
-  return {
-    containerRef: containerRef,
-    queries: __assign(__assign({}, breakpointMatches), customMatches),
-    components: components
-  };
-};
-export { useContainerQueries };