@kaizen/components 2.1.1 → 2.2.1

package/dist/styles.css

@@ -2081,6 +2081,9 @@
   .CalendarSingle-module_navButtonNext__-GrZx {
     inset-inline-end: 0;
   }
+  .CalendarSingle-module_chevronIcon__0PRnR {
+    pointer-events: none;
+  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -2133,6 +2136,9 @@
   .CalendarRange-module_hidden__D47kb {
     background-color: transparent;
   }
+  .CalendarRange-module_chevronIcon__ULJzd {
+    pointer-events: none;
+  }
 }
 @layer kz-components {
   @property --gradient-angle {
@@ -3529,6 +3535,9 @@
   .LegacyCalendarRange-module_dayRangeMiddle__M27gR [class*=_button_] {
     color: var(--color-blue-500, #0168b3);
   }
+  .LegacyCalendarRange-module_chevronIcon__Q6pOJ {
+    pointer-events: none;
+  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10237,6 +10246,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 +10266,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 +10287,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 +10302,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 +10445,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 +10620,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 +10663,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 +10778,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 +10808,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/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -4,8 +4,10 @@ export type CalendarSingleElement = HTMLDivElement;
 export type CalendarSingleProps = {
     id?: string;
     onMount?: (calendarElement: CalendarSingleElement) => void;
+    /** Exposes the react-day-picker component prop. Please be aware, consumers using this will have to guarentee functions as expected */
+    components?: PropsBase['components'];
 } & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>;
 export declare const CalendarSingle: {
-    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
+    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, components, ...restProps }: CalendarSingleProps): JSX.Element;
     displayName: string;
 };

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.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -65,4 +65,8 @@
   .hidden {
     background-color: transparent;
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -57,10 +57,24 @@ export const CalendarRange = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
         }}
         numberOfMonths={numberOfMonths}

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

@@ -13,4 +13,8 @@
   .navButtonNext {
     inset-inline-end: 0;
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -12,6 +12,8 @@ export type CalendarSingleElement = HTMLDivElement
 export type CalendarSingleProps = {
   id?: string
   onMount?: (calendarElement: CalendarSingleElement) => void
+  /** Exposes the react-day-picker component prop. Please be aware, consumers using this will have to guarentee functions as expected */
+  components?: PropsBase['components']
 } & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>
 
 export const CalendarSingle = ({
@@ -22,6 +24,7 @@ export const CalendarSingle = ({
   defaultMonth,
   weekStartsOn,
   locale = enAU,
+  components = {},
   ...restProps
 }: CalendarSingleProps): JSX.Element => {
   const calendarRef = useRef<CalendarSingleElement>(null)
@@ -52,11 +55,26 @@ export const CalendarSingle = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
+          ...components,
         }}
         locale={locale}
         {...restProps}

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

@@ -24,4 +24,8 @@
       color: $color-blue-500;
     }
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -60,10 +60,24 @@ export const LegacyCalendarRange = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
         }}
         locale={locale}

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'