@kaizen/components 2.1.1 → 2.2.0

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/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/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 };

package/dist/styles.css

@@ -10237,6 +10237,9 @@
     justify-content: center;
     flex-direction: column;
   }
+  .TitleBlock-module_titleBlock__7jxn3.TitleBlock-module_lightVariant__1EeLV {
+    background-color: var(--color-white, #ffffff);
+  }
   .TitleBlock-module_titleBlock__7jxn3.TitleBlock-module_educationVariant__YvpWa {
     background-color: var(--color-blue-100, #e6f6ff);
   }
@@ -10254,6 +10257,10 @@
     width: 100%;
     justify-content: center;
   }
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
+    background-color: var(--color-white, #ffffff);
+    margin-bottom: 3px;
+  }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
     margin-bottom: 3px;
@@ -10271,6 +10278,9 @@
       margin: 0 12px;
     }
   }
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
+    border-bottom: 1px solid var(--color-gray-300, #eaeaec);
+  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     position: relative;
     display: flex;
@@ -10283,7 +10293,7 @@
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
   }
-  .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_collapseNavigationArea__x9hzQ .TitleBlock-module_titleRowInnerContent__NhTHV {
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_collapseNavigationArea__x9hzQ .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: transparent;
   }
   @container (max-width: calc(1080px - 1px)) {
@@ -10426,6 +10436,9 @@
     max-width: 230px;
     margin-inline: var(--spacing-12) 0;
   }
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_subtitle__AI9tj {
+    color: var(--color-purple-800, #2f2438);
+  }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_subtitle__AI9tj {
     color: var(--color-purple-800, #2f2438);
   }
@@ -10598,6 +10611,11 @@
       z-index: 1;
     }
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
+      background: linear-gradient(0deg, var(--color-gray-100, #f9f9f9), rgba(var(--color-gray-100-rgb, 249, 249, 249), 0));
+    }
+  }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       background: linear-gradient(0deg, var(--color-gray-100, #f9f9f9), rgba(var(--color-gray-100-rgb, 249, 249, 249), 0));
@@ -10636,7 +10654,7 @@
     margin-inline-end: 0;
     margin-inline-start: 2.25rem;
   }
-  .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);
   }
   @container (max-width: calc(1080px - 1px)) {
@@ -10751,9 +10769,11 @@
   .TitleBlock-module_breadcrumbText__vDi0k {
     color: var(--color-white, #ffffff);
   }
-  .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz,
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_breadcrumb__lVNKz, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz,
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_breadcrumb__lVNKz:hover,
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover,
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover,
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_breadcrumbText__vDi0k,
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumbText__vDi0k,
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumbText__vDi0k {
     color: var(--color-purple-800, #2f2438);
@@ -10779,12 +10799,12 @@
     color: var(--color-white, #ffffff);
     background-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
-  .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_circle__68z-T {
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_circle__68z-T {
     color: var(--color-blue-500, #0168b3);
     border-color: var(--color-blue-300, #73c0e8);
     border-width: 3px;
   }
-  .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
+  .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_circle__68z-T, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_circle__68z-T {
     border-color: var(--color-blue-500, #0168b3);
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);

package/dist/types/TitleBlock/types.d.ts

@@ -117,7 +117,7 @@ export type TitleBlockDistributiveOmit<T, K extends keyof any> = T extends any ?
 export type TitleBlockAvatarProps = Omit<GenericAvatarProps, 'size'> | Omit<CompanyAvatarProps, 'size'>;
 export type DefaultActionProps = TitleBlockButtonProps | TitleBlockCustomButtonProps;
 export type SectionTitleRenderProps = Pick<TitleBlockProps, 'sectionTitle' | 'sectionTitleAutomationId' | 'sectionTitleDescription' | 'sectionTitleDescriptionAutomationId'>;
-export type TitleBlockVariant = 'admin' | 'education';
+export type TitleBlockVariant = 'light' | 'admin' | 'education';
 export type NavigationTabs = React.ReactElement<NavigationTabProps>[];
 export type TextDirection = 'ltr' | 'rtl';
 export type SurveyStatus = {

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useMediaQueries';
+export * from './useContainerQueries';
 export * from './hostedAssets';
 export * from './ReversedColors';

package/dist/types/utils/useContainerQueries.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+type ContainerQueries = {
+    is3xsOrLarger: boolean;
+    is2xsOrLarger: boolean;
+    isXsOrLarger: boolean;
+    isSmOrLarger: boolean;
+    isMdOrLarger: boolean;
+    isLgOrLarger: boolean;
+    isXlOrLarger: boolean;
+    is2xlOrLarger: boolean;
+    is3xlOrLarger: boolean;
+    is4xlOrLarger: boolean;
+    is5xlOrLarger: boolean;
+    is6xlOrLarger: boolean;
+    is7xlOrLarger: boolean;
+};
+export declare const useContainerQueries: () => {
+    containerRef: React.RefCallback<HTMLElement>;
+    queries: ContainerQueries;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -31,6 +31,10 @@
     justify-content: center;
     flex-direction: column;
 
+    &.lightVariant {
+      background-color: $dt-color-background-color-light;
+    }
+
     &.educationVariant {
       background-color: $dt-color-background-color-eduction;
     }
@@ -51,6 +55,11 @@
     justify-content: center;
   }
 
+  .lightVariant .titleRow {
+    background-color: $color-white;
+    margin-bottom: 3px; // needed to correctly position the active tab label :after element
+  }
+
   .adminVariant .titleRow {
     background-color: $color-white;
     margin-bottom: 3px; // needed to correctly position the active tab label :after element
@@ -73,6 +82,10 @@
     @extend %titleBlockInner;
   }
 
+  .lightVariant .titleRowInner {
+    border-bottom: 1px solid $color-gray-300;
+  }
+
   .rowBelowSeparatorInner {
     @extend %titleBlockInner;
   }
@@ -90,6 +103,7 @@
       border-bottom-color: rgba($color-purple-700-rgb, 0.2);
     }
 
+    .lightVariant &,
     .adminVariant &,
     .collapseNavigationArea & {
       border-bottom-color: transparent;
@@ -245,6 +259,10 @@
     max-width: 230px;
     margin-inline: var(--spacing-12) 0;
 
+    .lightVariant & {
+      color: $color-purple-800;
+    }
+
     .adminVariant & {
       color: $color-purple-800;
     }
@@ -438,6 +456,12 @@
       z-index: 1;
     }
 
+    .lightVariant & {
+      @include title-block-small {
+        background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
+      }
+    }
+
     .adminVariant & {
       @include title-block-small {
         background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
@@ -488,6 +512,7 @@
     // To be removed eventually – the Dropdown does not
     // currently set its own color, and we want it
     // to be Cluny like the default secondary buttons
+    .lightVariant &,
     .educationVariant &,
     .adminVariant & {
       color: $color-blue-500;
@@ -621,6 +646,7 @@
   .breadcrumbText {
     color: $color-white;
 
+    .lightVariant &,
     .educationVariant &,
     .adminVariant & {
       color: $color-purple-800;
@@ -654,6 +680,7 @@
       background-color: rgba($color-white-rgb, 0.1);
     }
 
+    .lightVariant &,
     .educationVariant &,
     .adminVariant & {
       color: $color-blue-500;
@@ -661,6 +688,8 @@
       border-width: $border-width;
     }
 
+    .lightVariant .breadcrumb:hover &,
+    .lightVariant .breadcrumb:focus &,
     .educationVariant .breadcrumb:hover &,
     .educationVariant .breadcrumb:focus &,
     .adminVariant .breadcrumb:hover &,

package/src/TitleBlock/_docs/TitleBlock--usage-guidelines.mdx

@@ -35,6 +35,10 @@ A consistent pattern to allow users to navigate and complete tasks easily.
 
 <Canvas of={TitleBlockStories.HasLongTitle} />
 
+### Light Variant
+
+<Canvas of={TitleBlockStories.LightVariant} />
+
 ### Admin Variant
 
 <Canvas of={TitleBlockStories.AdminVariant} />

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -146,6 +146,47 @@ export const HasLongTitle: Story = {
   args: { title: 'A long title with over thirty characters' },
 }
 
+export const LightVariant: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+    viewport: {
+      viewports: {
+        default: {
+          name: 'Above or equal to 1366',
+          styles: { width: '1366px', height: '800px' },
+          type: 'desktop',
+        },
+        under1366: {
+          name: 'Under 1366',
+          styles: { width: '1365px', height: '800px' },
+          type: 'desktop',
+        },
+      },
+      defaultViewport: 'default',
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366],
+    },
+  },
+  args: {
+    variant: 'light',
+    title: 'Light TitleBlock',
+    navigationTabs: [
+      <NavigationTab key="1" variant="light" text="Label" href="#" active />,
+      <NavigationTab key="2" variant="light" text="Label" href="#" />,
+      <NavigationTab key="3" variant="light" text="Label" href="#" />,
+      <NavigationTab key="4" variant="light" text="Label" href="#" />,
+      <NavigationTab key="5" variant="light" text="Label" href="#" />,
+      <NavigationTab key="6" variant="light" text="Label" href="#" />,
+    ],
+  },
+}
+
 export const AdminVariant: Story = {
   parameters: {
     viewport: {
@@ -216,6 +257,73 @@ export const EducationVariant: Story = {
   },
 }
 
+export const StickerSheetVariants: Story = {
+  name: 'Sticker Sheet (Variants)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock
+          title="Default Variant"
+          subtitle="This is the default purple variant with white text"
+          breadcrumb={{
+            path: '#',
+            text: 'Back to home',
+          }}
+          navigationTabs={[
+            <NavigationTab key="1" text="Overview" href="#" active />,
+            <NavigationTab key="2" text="Settings" href="#" />,
+          ]}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Purple background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          subtitle="This is the education variant with purple background"
+          breadcrumb={{
+            path: '#',
+            text: 'Back to courses',
+          }}
+          navigationTabs={[
+            <NavigationTab key="1" text="Lessons" href="#" active />,
+            <NavigationTab key="2" text="Assignments" href="#" />,
+          ]}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock
+          variant="admin"
+          title="Admin Variant"
+          subtitle="This is the admin variant with white background"
+          breadcrumb={{
+            path: '#',
+            text: 'Back to dashboard',
+          }}
+          navigationTabs={[
+            <NavigationTab key="1" text="Users" href="#" active />,
+            <NavigationTab key="2" text="Settings" href="#" />,
+          ]}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock
+          variant="light"
+          title="Light Variant"
+          subtitle="This is the light variant with clean white background"
+          breadcrumb={{
+            path: '#',
+            text: 'Back to overview',
+          }}
+          navigationTabs={[
+            <NavigationTab key="1" text="Details" href="#" active />,
+            <NavigationTab key="2" text="Analytics" href="#" />,
+          ]}
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
+
 export const StickerSheetBreadcrumbs: Story = {
   name: 'Sticker Sheet (Breadcrumb)',
   parameters: {

package/src/TitleBlock/_variables.scss

@@ -3,6 +3,7 @@
 $dt-color-background-color-admin: $color-gray-100;
 $dt-color-background-color-eduction: $color-blue-100;
 $dt-color-background-color-default: $color-purple-600;
+$dt-color-background-color-light: $color-white;
 $dt-color-background-gradient: linear-gradient(
   0deg,
   $color-purple-600,

package/src/TitleBlock/types.ts

@@ -157,7 +157,7 @@ export type SectionTitleRenderProps = Pick<
   | 'sectionTitleDescriptionAutomationId'
 >
 
-export type TitleBlockVariant = 'admin' | 'education' // the default is wisteria bg (AKA "reporting")
+export type TitleBlockVariant = 'light' | 'admin' | 'education' // the default is wisteria bg (AKA "reporting")
 
 export type NavigationTabs = React.ReactElement<NavigationTabProps>[]
 

package/src/TitleBlock/utils.ts

@@ -11,7 +11,7 @@ export const isMenuGroupNotButton = (
   value: (TitleBlockButtonProps | TitleBlockCustomButtonProps) | TitleBlockMenuGroup,
 ): value is TitleBlockMenuGroup => 'menuItems' in value
 
-export const NON_REVERSED_VARIANTS = ['education', 'admin']
+export const NON_REVERSED_VARIANTS = ['light', 'education', 'admin']
 
 export const isReversed = (variant: TitleBlockVariant | undefined): boolean => {
   // The default variant (no variant prop) is reversed (dark background)

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 // Not all utils are exported because most are intended for internal use only
 export * from './useMediaQueries'
+export * from './useContainerQueries'
 export * from './hostedAssets'
 export * from './ReversedColors'

package/src/utils/useContainerQueries.spec.tsx

@@ -0,0 +1,209 @@
+import React from 'react'
+import { act, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useContainerQueries } from './useContainerQueries'
+
+const ExampleComponent = (): JSX.Element => {
+  const { containerRef, queries } = useContainerQueries()
+
+  return (
+    <div ref={containerRef} data-testid="container">
+      {queries.isSmOrLarger && <button type="button">Small query boolean</button>}
+      {queries.isMdOrLarger && <button type="button">Medium or larger query</button>}
+    </div>
+  )
+}
+
+// Mock ResizeObserver
+class ResizeObserverMock {
+  callback: ResizeObserverCallback
+  elements: Set<Element>
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+    this.elements = new Set()
+  }
+
+  observe(target: Element): void {
+    this.elements.add(target)
+  }
+
+  unobserve(target: Element): void {
+    this.elements.delete(target)
+  }
+
+  disconnect(): void {
+    this.elements.clear()
+  }
+
+  // Helper method to trigger resize
+  trigger(width: number): void {
+    const entries: ResizeObserverEntry[] = Array.from(this.elements).map((element) => ({
+      target: element,
+      contentRect: {
+        width,
+        height: 100,
+        top: 0,
+        left: 0,
+        bottom: 100,
+        right: width,
+        x: 0,
+        y: 0,
+      } as DOMRectReadOnly,
+      borderBoxSize: [
+        {
+          inlineSize: width,
+          blockSize: 100,
+        },
+      ],
+      contentBoxSize: [
+        {
+          inlineSize: width,
+          blockSize: 100,
+        },
+      ],
+      devicePixelContentBoxSize: [
+        {
+          inlineSize: width,
+          blockSize: 100,
+        },
+      ],
+    })) as ResizeObserverEntry[]
+
+    this.callback(entries, this as unknown as ResizeObserver)
+  }
+}
+
+let resizeObserverInstance: ResizeObserverMock | null = null
+
+// Store original values to restore after each test
+const originalResizeObserver = global.ResizeObserver
+const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect
+
+const setupResizeObserver = (): ResizeObserverMock => {
+  const mockObserver = vi.fn((callback: ResizeObserverCallback) => {
+    resizeObserverInstance = new ResizeObserverMock(callback)
+    return resizeObserverInstance
+  })
+
+  global.ResizeObserver = mockObserver as unknown as typeof ResizeObserver
+
+  return resizeObserverInstance!
+}
+
+describe('useContainerQueries()', () => {
+  beforeEach(() => {
+    resizeObserverInstance = null
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    // Restore original global/prototype properties
+    global.ResizeObserver = originalResizeObserver
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect
+  })
+
+  it('shows and hides content based on Tailwind container breakpoints', async () => {
+    setupResizeObserver()
+
+    // Mock getBoundingClientRect to return a small width initially
+    const mockGetBoundingClientRect = vi.fn(() => ({
+      width: 300,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 300,
+      x: 0,
+      y: 0,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      toJSON: () => {},
+    }))
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect
+
+    render(<ExampleComponent />)
+
+    // Initially at 300px, should not show sm (384px) or md (448px) content
+    expect(screen.queryByRole('button', { name: /Small query boolean/i })).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /Medium or larger query/i }),
+    ).not.toBeInTheDocument()
+
+    // Trigger resize to 400px (sm breakpoint is 384px)
+    await act(async () => {
+      resizeObserverInstance?.trigger(400)
+      // Wait for debounce (1000ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 1100))
+    })
+
+    expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /Medium or larger query/i }),
+    ).not.toBeInTheDocument()
+
+    // Trigger resize to 500px (md breakpoint is 448px)
+    await act(async () => {
+      resizeObserverInstance?.trigger(500)
+      // Wait for debounce (1000ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 1100))
+    })
+
+    expect(screen.queryByRole('button', { name: /Small query boolean/i })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Medium or larger query/i })).toBeInTheDocument()
+  })
+
+  it('returns SSR-safe defaults when window is undefined', () => {
+    // This test verifies the SSR code path exists
+    // In actual SSR environment, the hook returns safe defaults
+    expect(useContainerQueries).toBeDefined()
+  })
+
+  it('cleans up ResizeObserver on unmount', () => {
+    setupResizeObserver()
+
+    const mockGetBoundingClientRect = vi.fn(() => ({
+      width: 500,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 500,
+      x: 0,
+      y: 0,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      toJSON: () => {},
+    }))
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect
+
+    const { unmount } = render(<ExampleComponent />)
+
+    const disconnectSpy = vi.spyOn(resizeObserverInstance!, 'disconnect')
+
+    unmount()
+
+    expect(disconnectSpy).toHaveBeenCalled()
+  })
+
+  it('observes the container element', () => {
+    setupResizeObserver()
+
+    const mockGetBoundingClientRect = vi.fn(() => ({
+      width: 500,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 500,
+      x: 0,
+      y: 0,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      toJSON: () => {},
+    }))
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect
+
+    render(<ExampleComponent />)
+
+    // Verify that the ResizeObserver is observing the container
+    expect(resizeObserverInstance?.elements.size).toBe(1)
+  })
+})

package/src/utils/useContainerQueries.tsx

@@ -0,0 +1,121 @@
+import type React from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useDebouncedCallback } from 'use-debounce'
+
+const 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
+ */
+const 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,
+} as const
+
+type ContainerQueries = {
+  is3xsOrLarger: boolean
+  is2xsOrLarger: boolean
+  isXsOrLarger: boolean
+  isSmOrLarger: boolean
+  isMdOrLarger: boolean
+  isLgOrLarger: boolean
+  isXlOrLarger: boolean
+  is2xlOrLarger: boolean
+  is3xlOrLarger: boolean
+  is4xlOrLarger: boolean
+  is5xlOrLarger: boolean
+  is6xlOrLarger: boolean
+  is7xlOrLarger: boolean
+}
+
+export const useContainerQueries = (): {
+  containerRef: React.RefCallback<HTMLElement>
+  queries: ContainerQueries
+} => {
+  const isClient = typeof window !== 'undefined'
+
+  const [containerWidth, setContainerWidth] = useState<number>(0)
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null)
+
+  const debouncedSetContainerWidth = useDebouncedCallback((width: number) => {
+    setContainerWidth(width)
+  }, DEFAULT_DEBOUNCE_MS)
+
+  const containerRef = useCallback(
+    (node: HTMLElement | null) => {
+      // 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((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)
+
+        // Set initial width immediately (no debounce for initial render)
+        const width = node.getBoundingClientRect().width
+        setContainerWidth(width)
+      }
+    },
+    [debouncedSetContainerWidth, isClient],
+  )
+
+  useEffect(
+    () => () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect()
+      }
+    },
+    [],
+  )
+
+  const queries = useMemo(
+    () => ({
+      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,
+    queries,
+  }
+}