@kaizen/components 2.3.1 → 2.3.3

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

@@ -284,7 +284,7 @@ var TitleBlock = function (_a) {
     sectionTitleAutomationId: sectionTitleAutomationId,
     sectionTitleDescription: sectionTitleDescription,
     sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
+  }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && React__default.default.createElement(SecondaryActions.SecondaryActions, {
     secondaryActions: secondaryActions,
     secondaryOverflowMenuItems: secondaryOverflowMenuItems,
     reversed: utils.isReversed(variant)

package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs

@@ -25,9 +25,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

package/dist/cjs/src/TitleBlock/subcomponents/Toolbar.module.scss.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var styles = {
-  "toolbar": "Toolbar-module_toolbar__8T-NB",
-  "toolbarItem": "Toolbar-module_toolbarItem__-l3QZ",
-  "noGap": "Toolbar-module_noGap__X-W59"
+  "toolbar": "Toolbar-module_toolbar__8T-NB"
 };
 module.exports = styles;

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

@@ -276,7 +276,7 @@ const TitleBlock = /*#__PURE__*/function () {
       sectionTitleAutomationId: sectionTitleAutomationId,
       sectionTitleDescription: sectionTitleDescription,
       sectionTitleDescriptionAutomationId: sectionTitleDescriptionAutomationId
-    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
+    }) : defaultRenderSectionTitle(sectionTitle, sectionTitleDescription, variant, sectionTitleAutomationId, sectionTitleDescriptionAutomationId)))), !sectionTitle && !sectionTitleDescription && !renderSectionTitle && renderNavigationTabs(navigationTabs, collapseNavigationArea, title), (secondaryActions !== null && secondaryActions !== void 0 ? secondaryActions : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(SecondaryActions, {
       secondaryActions: secondaryActions,
       secondaryOverflowMenuItems: secondaryOverflowMenuItems,
       reversed: isReversed(variant)

package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs

@@ -23,9 +23,9 @@ var styles = {
   "subtitle": "TitleBlock-module_subtitle__AI9tj",
   "subtitleText": "TitleBlock-module_subtitleText__gpXET",
   "sectionTitleContainer": "TitleBlock-module_sectionTitleContainer__LrDPV",
+  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleInner": "TitleBlock-module_sectionTitleInner__nJfOP",
   "sectionTitleOverride": "TitleBlock-module_sectionTitleOverride__XcD8g",
-  "sectionTitle": "TitleBlock-module_sectionTitle__b8daw",
   "sectionTitleDescription": "TitleBlock-module_sectionTitleDescription__wuVwm",
   "dark": "TitleBlock-module_dark__KJexf",
   "rowBelowSeparatorInnerContent": "TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w",

package/dist/esm/src/TitleBlock/subcomponents/Toolbar.module.scss.mjs

@@ -1,6 +1,4 @@
 var styles = {
-  "toolbar": "Toolbar-module_toolbar__8T-NB",
-  "toolbarItem": "Toolbar-module_toolbarItem__-l3QZ",
-  "noGap": "Toolbar-module_noGap__X-W59"
+  "toolbar": "Toolbar-module_toolbar__8T-NB"
 };
 export { styles as default };

package/dist/styles.css

@@ -9240,7 +9240,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);
@@ -9954,43 +9954,7 @@
   .Toolbar-module_toolbar__8T-NB {
     display: flex;
     align-items: center;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ {
-    margin: 0 calc(1.5rem / 4);
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ {
-      margin: 0 calc(1.5rem / 8);
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ.Toolbar-module_noGap__X-W59 {
-    margin: 0;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type {
-    margin-inline-end: calc(1.5rem / 4);
-    margin-inline-start: 0;
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type {
-      margin-inline-end: calc(1.5rem / 8);
-      margin-inline-start: 0;
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:first-of-type.Toolbar-module_noGap__X-W59 {
-    margin: 0;
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type {
-    margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 4);
-  }
-  @container (max-width: 1023px) {
-    .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type {
-      margin-inline-end: 0;
-      margin-inline-start: calc(1.5rem / 8);
-    }
-  }
-  .Toolbar-module_toolbar__8T-NB .Toolbar-module_toolbarItem__-l3QZ:last-of-type.Toolbar-module_noGap__X-W59 {
-    margin: 0;
+    gap: inherit;
   }
 }
 /* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
@@ -10011,39 +9975,29 @@
 @layer kz-components {
   .MainActions-module_mainActionsContainer__pk-78 {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
+    align-self: flex-start;
     flex-shrink: 0;
-    margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
+    gap: 4px;
+  }
+  @container (max-width: 576px) {
+    .MainActions-module_mainActionsContainer__pk-78 {
+      justify-content: flex-start;
+      margin-inline-start: 48px;
+    }
   }
   .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
     display: none;
-    margin-inline-end: 0;
   }
-  @container (max-width: 511px) {
+  @media (max-width: 360px) {
     .MainActions-module_mainActionsContainer__pk-78 {
-      padding-top: 12px;
-      justify-content: flex-start;
-      padding-left: 1.25rem;
+      gap: 0;
     }
-    @media (max-width: 511px) {
-      .MainActions-module_mainActionsContainer__pk-78 {
-        padding-top: 0;
-        padding-left: 3.375rem;
-      }
+    .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
+      display: none;
     }
-    @media (max-width: 360px) {
-      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
-        display: none;
-        margin-inline-end: 0;
-      }
-      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
-        display: flex;
-        margin-inline-end: 3px;
-        margin-left: -0.5rem;
-      }
+    .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+      display: flex;
+      margin-inline-end: 8px;
     }
   }
 }
@@ -10094,6 +10048,7 @@
     }
   }
   .TitleBlock-module_titleRow__Ifqiu {
+    box-sizing: border-box;
     display: flex;
     width: 100%;
     justify-content: center;
@@ -10103,11 +10058,6 @@
     width: 100%;
     justify-content: center;
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparator__H4E63 {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
     margin-bottom: 0.063rem;
@@ -10117,37 +10067,40 @@
     margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
+    box-sizing: border-box;
     max-width: 1392px;
-    margin: 0 72px;
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
+    padding: 0 20px 0 0;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
-      margin: 0 12px;
+      padding: 0;
+      margin-inline: 24px;
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
-  @container (max-width: 511px) {
-    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
-      padding-bottom: 12px;
-    }
+  .TitleBlock-module_rowBelowSeparatorInner__3gNec {
+    padding: 0 4px 0 12px;
   }
-  @container (max-width: calc(768px - 1px)) {
+  @media (min-width: 1080px) {
     .TitleBlock-module_rowBelowSeparatorInner__3gNec {
-      height: 3.75rem;
+      padding: 0;
+      margin-inline: 24px;
     }
   }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    min-height: 5.25rem;
+    gap: 12px;
+    padding-block: 20px 19px;
     justify-content: space-between;
     border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
@@ -10162,15 +10115,21 @@
       border-bottom: none;
     }
   }
-  @container (max-width: 511px) {
+  @container (max-width: 576px) {
     .TitleBlock-module_titleRowInnerContent__NhTHV {
       flex-wrap: wrap;
+      gap: 4px;
     }
   }
   .TitleBlock-module_title__c5JWR {
-    display: flex;
     align-items: center;
     min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
   }
   @container (max-width: 1365px) {
     .TitleBlock-module_title__c5JWR {
@@ -10185,7 +10144,7 @@
   }
   @container (max-width: 1365px) {
     .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleAndSubtitle__-kLSn {
-      transform: translateY(-0.3833em);
+      transform: translateY(-12px);
     }
   }
   .TitleBlock-module_titleAndSubtitleInner__TX8xw {
@@ -10229,34 +10188,65 @@
     }
   }
   .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-    padding: 4px 0;
+    font-size: var(--typography-heading-3-font-size, 1.375rem);
+    line-height: var(--typography-heading-3-line-height, 1.875rem);
+    letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+    margin: 8px 0;
   }
-  @container (max-width: 1365px) {
+  .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+    margin-bottom: 0;
+  }
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        font-size: var(--typography-heading-2-font-size, 1.75rem);
+        line-height: var(--typography-heading-2-line-height, 2.25rem);
+        letter-spacing: var(--typography-heading-2-letter-spacing, normal);
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
     .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
       font-size: var(--typography-heading-2-font-size, 1.75rem);
       line-height: var(--typography-heading-2-line-height, 2.25rem);
       letter-spacing: var(--typography-heading-2-letter-spacing, normal);
-      padding: 2px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
-  @container (max-width: 1365px) {
-    .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-      font-size: var(--typography-heading-3-font-size, 1.375rem);
-      line-height: var(--typography-heading-3-line-height, 1.875rem);
-      letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-      padding: 2px 0;
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        font-size: var(--typography-heading-3-font-size, 1.375rem);
+        line-height: var(--typography-heading-3-line-height, 1.875rem);
+        letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+        margin: 2px 0;
+      }
+      .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+        margin-bottom: 0;
+      }
     }
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+  @container (min-width: 1080px) and (max-width: 1365px) {
+    .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
       font-size: var(--typography-heading-3-font-size, 1.375rem);
       line-height: var(--typography-heading-3-line-height, 1.875rem);
       letter-spacing: var(--typography-heading-3-letter-spacing, normal);
-      padding: 8px 0;
+      margin: 2px 0;
+    }
+    .TitleBlock-module_hasSubtitle__DQWKd .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
+      margin-bottom: 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
     display: none;
+    align-self: self-start;
     box-sizing: border-box;
     overflow: hidden;
     height: 3rem;
@@ -10267,11 +10257,6 @@
   .TitleBlock-module_avatar__mEjJ8 > * {
     max-width: 100%;
   }
-  @container (min-width: 1080px) {
-    .TitleBlock-module_avatar__mEjJ8 {
-      display: block;
-    }
-  }
   .TitleBlock-module_avatar__mEjJ8.TitleBlock-module_withBorder__D8Mz2 {
     border: 3px solid var(--color-white, #ffffff);
     border-radius: 50%;
@@ -10279,14 +10264,25 @@
   .TitleBlock-module_hasLongTitle__L-6FV .TitleBlock-module_avatar__mEjJ8 {
     display: none;
   }
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_avatar__mEjJ8 {
+        display: block;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_avatar__mEjJ8 {
+      display: block;
+    }
+  }
   .TitleBlock-module_hamburger__qe4R0 {
-    display: none;
-    margin-inline-end: var(--spacing-xs, 0.375rem);
-    margin-inline-start: 0;
+    display: flex;
+    align-self: self-start;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) {
     .TitleBlock-module_hamburger__qe4R0 {
-      display: flex;
+      display: none;
     }
   }
   .TitleBlock-module_subtitle__AI9tj {
@@ -10332,15 +10328,31 @@
   .TitleBlock-module_sectionTitleContainer__LrDPV {
     display: flex;
     align-items: center;
-    padding: calc(1.5rem * 3 / 4) 0;
+    padding-block: 9px;
+    padding-inline-end: 8px;
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleContainer__LrDPV {
+      padding-block: 17px;
+    }
+  }
+  .TitleBlock-module_sectionTitle__b8daw {
+    display: block;
   }
   .TitleBlock-module_sectionTitleInner__nJfOP {
     display: flex;
     flex-direction: column;
+    row-gap: 4px;
+  }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_sectionTitleInner__nJfOP {
+      flex-direction: row;
+      align-items: center;
+      column-gap: 12px;
+    }
   }
   .TitleBlock-module_sectionTitleOverride__XcD8g.TitleBlock-module_sectionTitleOverride__XcD8g {
     white-space: nowrap;
-    margin-inline: 0 var(--spacing-24);
     font-family: var(--typography-heading-2-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
     font-weight: var(--typography-heading-2-font-weight, 600);
     font-size: var(--typography-heading-2-font-size, 1.75rem);
@@ -10365,9 +10377,6 @@
       letter-spacing: var(--typography-heading-4-letter-spacing, normal);
     }
   }
-  .TitleBlock-module_sectionTitle__b8daw {
-    display: block;
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm {
     color: var(--color-white, #ffffff);
     max-width: 780px;
@@ -10377,9 +10386,6 @@
     line-height: var(--typography-paragraph-small-line-height, 1.125rem);
     letter-spacing: var(--typography-paragraph-small-letter-spacing, normal);
   }
-  .TitleBlock-module_sectionTitle__b8daw + .TitleBlock-module_sectionTitleDescription__wuVwm {
-    margin-top: var(--spacing-6);
-  }
   .TitleBlock-module_sectionTitleDescription__wuVwm.TitleBlock-module_dark__KJexf {
     color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
   }
@@ -10389,11 +10395,6 @@
     margin-top: -0.063rem;
     justify-content: space-between;
   }
-  @container (max-width: calc(768px - 1px)) {
-    .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
-      height: 3.75rem;
-    }
-  }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
     display: flex;
     min-width: 0;
@@ -10408,13 +10409,20 @@
     opacity: 0%;
   }
   .TitleBlock-module_tag__GDzmQ {
-    display: flex;
+    display: none;
     align-items: center;
     margin-inline: var(--spacing-12) 0;
   }
-  @container (max-width: calc(1080px - 1px)) {
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
+      .TitleBlock-module_tag__GDzmQ {
+        display: flex;
+      }
+    }
+  }
+  @container (min-width: 1080px) {
     .TitleBlock-module_tag__GDzmQ {
-      display: none;
+      display: flex;
     }
   }
   .TitleBlock-module_tag__GDzmQ + .TitleBlock-module_pageSwitcherSelectNextToTitle__KZ0Uc {
@@ -10520,11 +10528,6 @@
   }
   .TitleBlock-module_secondaryActionsContainer__-4q0l {
     display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: calc(1.5rem / 2) 0;
-    margin-inline-end: 0;
-    margin-inline-start: 2.25rem;
   }
   .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);
@@ -10551,7 +10554,6 @@
     padding: 0;
     border: none;
     cursor: pointer;
-    display: flex;
     position: absolute;
     align-items: center;
     top: 50%;
@@ -10559,7 +10561,8 @@
     text-decoration: none;
     inset-inline-end: auto;
     inset-inline-start: calc(-48px - 1.5rem);
-    align-self: normal;
+    align-self: self-start;
+    display: none;
   }
   .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82 {
     text-decoration: underline;
@@ -10577,9 +10580,10 @@
     border-style: var(--border-focus-ring-border-style, solid);
     inset: calc(-2 * var(--border-focus-ring-border-width, 2px) - var(--border-focus-ring-border-width, 2px));
   }
-  @media only screen {
-    @container (max-width: 1644px) {
+  @media (min-width: 1080px) and (max-width: 1095px) {
+    @container (min-width: 1065px) {
       .TitleBlock-module_breadcrumb__lVNKz {
+        display: flex;
         position: relative;
         transform: translateY(0);
         margin-inline: 0 var(--spacing-12);
@@ -10588,6 +10592,16 @@
       }
     }
   }
+  @container (min-width: 1080px) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: flex;
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;
@@ -10681,11 +10695,6 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_circle__68z-T {
-      display: none;
-    }
-  }
   /* stylelint-enable no-descending-specificity */
 }
 @keyframes TitleBlock-module_slide-fade__o5TnP {

package/package.json

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

package/src/Tabs/subcomponents/Tab/Tab.module.css

@@ -6,7 +6,7 @@
     border-bottom: 0;
     border-top-left-radius: var(--border-borderless-border-radius);
     border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
+    background: transparent;
     white-space: nowrap;
     text-decoration: none;
     padding: var(--spacing-md) var(--spacing-md);