@kaizen/components 0.0.0-canary-04-titleblock-logic-20251211225600 → 0.0.0-canary-guidance-block-codemod-20251212045145

package/dist/styles.css

@@ -10017,34 +10017,200 @@
     margin-inline-end: 0;
     margin-inline-start: calc(1.5rem / 2);
   }
-  .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
-    display: none;
-    margin-inline-end: 0;
-  }
-  @container (max-width: 511px) {
+  @container (max-width: calc(768px - 1px)) {
     .MainActions-module_mainActionsContainer__pk-78 {
-      padding-top: 12px;
-      justify-content: flex-start;
-      padding-left: 1.25rem;
-    }
-    @media (max-width: 511px) {
-      .MainActions-module_mainActionsContainer__pk-78 {
-        padding-top: 0;
-        padding-left: 2.5rem;
-      }
+      display: none;
     }
-    @media (max-width: 415px) {
-      .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;
-      }
+  }
+}
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/* 16px */
+/* 16px */
+/* 16px */
+/*
+  Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
+  as this is what consumers would have expected when pulling them in a the time.
+*/
+/* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
+/** THIS IS AN AUTOGENERATED FILE **/
+@layer kz-components {
+  /* stylelint-disable no-descending-specificity */
+  .MobileActions-module_mobileActionsContainer__XoepA {
+    display: none;
+    z-index: 1030;
+    flex-direction: column;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-start-start-radius: var(--border-solid-border-radius, 7px);
+    border-start-end-radius: var(--border-solid-border-radius, 7px);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow: hidden;
+    transform: translateY(calc(100% - 60px));
+    transition: 0.4s ease;
+    animation: MobileActions-module_slide-up__xezn3 1s ease;
+  }
+  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 {
+    transform: translateY(0%);
+  }
+  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 .MobileActions-module_mobileActionsMenuContainer__x--Eb {
+    visibility: visible;
+  }
+  @container (max-width: calc(768px - 1px)) {
+    .MobileActions-module_mobileActionsContainer__XoepA {
+      display: flex;
     }
   }
+  .MobileActions-module_mobileActionsTopRow__RXNFZ {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+  }
+  .MobileActions-module_mobileActionsTopRow__RXNFZ.MobileActions-module_mobileActionsTopRowSingleButton__5EjiI {
+    justify-content: center;
+  }
+  .MobileActions-module_mobileActionsMenuContainer__x--Eb {
+    visibility: hidden;
+    width: 100%;
+    background: var(--color-white, #ffffff);
+    padding: var(--spacing-xs, 0.375rem) 0;
+    transition: visibility 0.4s;
+  }
+  .MobileActions-module_drawerHandleIcon__q9ewm {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-inline-end: calc(1.5rem / 2);
+    margin-inline-start: 0;
+  }
+  .MobileActions-module_drawerHandleLabelText__MwJTA + .MobileActions-module_drawerHandleIcon__q9ewm {
+    margin-inline-end: 0;
+    margin-inline-start: calc(1.5rem / 2);
+  }
+  .MobileActions-module_mobileActionsPrimaryLabel__8yfuH {
+    text-align: left;
+    text-decoration: none;
+    color: var(--color-white, #ffffff);
+    font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
+    font-weight: var(--typography-button-primary-font-weight, 500);
+    font-size: var(--typography-button-primary-font-size, 1.125rem);
+    line-height: var(--typography-button-primary-line-height, 1.5rem);
+    letter-spacing: var(--typography-button-primary-letter-spacing, normal);
+    padding-inline-end: 0;
+    padding-inline-start: 1.125rem;
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU {
+    display: flex;
+    position: relative;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    border: 0;
+    box-sizing: border-box;
+    color: var(--color-white, #ffffff);
+    background-color: var(--color-blue-500, #0168b3);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus {
+    background-color: var(--color-blue-600, #004970);
+    outline: none;
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible {
+    height: 52px;
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible::after,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible::after {
+    content: "";
+    position: absolute;
+    background: transparent;
+    border-width: 2px;
+    border-style: var(--border-focus-ring-border-style, solid);
+    border-color: var(--color-blue-500, #0168b3);
+    inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2));
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:hover,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:hover {
+    text-decoration: none;
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child {
+    flex-basis: 100%;
+    border-start-start-radius: var(--border-solid-border-radius, 7px);
+    border-start-end-radius: var(--border-solid-border-radius, 7px);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible {
+    flex-basis: calc(100% - 8px);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible::after,
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible::after {
+    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
+    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child) {
+    flex: 0 0 calc(100% - 3.75rem);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible {
+    flex-basis: calc(100% - 3.75rem - 8px);
+    margin-left: 4px;
+    border-start-start-radius: var(--border-solid-border-radius, 7px);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible + .MobileActions-module_mobileActionsExpandButton__XuHNU {
+    border-color: var(--color-white, #ffffff);
+  }
+  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible::after {
+    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
+  }
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child) {
+    flex: 0 0 3.75rem;
+    border-left: 2px solid var(--color-blue-200, #bde2f5);
+    justify-content: center;
+  }
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible {
+    border-color: var(--color-white, #ffffff);
+    flex-basis: calc(3.75rem - 8px);
+    margin-right: 4px;
+    border-start-end-radius: var(--border-solid-border-radius, 7px);
+  }
+  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible::after {
+    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
+  }
+  .MobileActions-module_mobileActionsChevronSquare__SPIsI {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    position: absolute;
+    inset-inline-end: 20px;
+    inset-inline-start: auto;
+  }
+  /* stylelint-enable no-descending-specificity */
+}
+@keyframes MobileActions-module_slide-up__xezn3 {
+  0% {
+    transform: translateY(100%);
+  }
+  50% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(calc(100% - 60px));
+  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10100,9 +10266,11 @@
   }
   .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;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     max-width: 1392px;
@@ -10120,11 +10288,6 @@
   .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_titleRowInnerContent__NhTHV {
     position: relative;
     display: flex;
@@ -10132,7 +10295,7 @@
     align-items: center;
     min-height: 5.25rem;
     justify-content: space-between;
-    border-bottom: 0.083rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    border-bottom: 0.1875rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
     border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
@@ -10145,11 +10308,6 @@
       border-bottom: none;
     }
   }
-  @container (max-width: 511px) {
-    .TitleBlock-module_titleRowInnerContent__NhTHV {
-      flex-wrap: wrap;
-    }
-  }
   .TitleBlock-module_title__c5JWR {
     display: flex;
     align-items: center;
@@ -10232,10 +10390,10 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .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;
+      font-size: var(--typography-heading-4-font-size, 1.125rem);
+      line-height: var(--typography-heading-4-line-height, 1.5rem);
+      letter-spacing: var(--typography-heading-4-letter-spacing, normal);
+      padding: 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
@@ -10267,7 +10425,7 @@
     margin-inline-end: var(--spacing-xs, 0.375rem);
     margin-inline-start: 0;
   }
-  @media (max-width: 511px) {
+  @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_hamburger__qe4R0 {
       display: flex;
       align-items: center;
@@ -10370,13 +10528,9 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
+    margin-top: -0.1875rem;
     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;
@@ -10457,7 +10611,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.667rem;
+      top: 3.5625rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
@@ -10510,17 +10664,10 @@
   .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);
   }
-  .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
-    display: none;
-  }
   @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryButtonContainer__xFL9X,
-    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowMenu__gvmgW {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l {
       display: none;
     }
-    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
-      display: flex;
-    }
   }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
@@ -10558,16 +10705,6 @@
     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));
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_breadcrumb__lVNKz {
-      display: none;
-    }
-    @media only screen and (hover: none) {
-      .TitleBlock-module_breadcrumb__lVNKz {
-        display: flex;
-      }
-    }
-  }
   @media only screen {
     @container (max-width: 1644px) {
       .TitleBlock-module_breadcrumb__lVNKz {
@@ -10579,6 +10716,11 @@
       }
     }
   }
+  @container (max-width: calc(1080px - 1px)) {
+    .TitleBlock-module_breadcrumb__lVNKz {
+      display: none;
+    }
+  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;
@@ -10672,26 +10814,8 @@
     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 */
 }
-.TitleBlock-module_staticIcon__5jeBS {
-  display: none;
-  width: 20px;
-  height: 20px;
-}
-@container (max-width: calc(1080px - 1px)) {
-  @media (min-width: 512px) {
-    .TitleBlock-module_staticIcon__5jeBS {
-      display: flex;
-    }
-  }
-}
-
 @keyframes TitleBlock-module_slide-fade__o5TnP {
   0% {
     display: none;

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

@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 export declare const TitleBlock: {
-    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
+    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, autoHideMobileActionsMenu, }: TitleBlockProps): JSX.Element;
     displayName: string;
 };

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

@@ -1,14 +1,13 @@
-import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
+import { type DefaultActionProps, type PrimaryActionProps, type TitleBlockMenuItemProps } from '../types';
 type MainActionsProps = {
     primaryAction?: PrimaryActionProps;
     defaultAction?: DefaultActionProps;
     reversed?: boolean;
-    secondaryActions?: SecondaryActionsProps;
-    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
+    overflowMenuItems?: TitleBlockMenuItemProps[];
     showOverflowMenu?: boolean;
 };
 export declare const MainActions: {
-    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, reversed, }: MainActionsProps): JSX.Element;
+    ({ primaryAction, defaultAction, reversed, overflowMenuItems, showOverflowMenu, }: MainActionsProps): JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -0,0 +1,14 @@
+import type { ButtonProps } from "../../Button";
+import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
+export type MobileActionsProps = {
+    primaryAction?: PrimaryActionProps;
+    defaultAction?: DefaultActionProps;
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
+    drawerHandleLabelIconPosition?: ButtonProps['iconPosition'];
+    autoHide?: boolean;
+};
+export declare const MobileActions: {
+    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, drawerHandleLabelIconPosition, autoHide, }: MobileActionsProps): JSX.Element;
+    displayName: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-04-titleblock-logic-20251211225600",
+  "version": "0.0.0-canary-guidance-block-codemod-20251212045145",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -14,7 +14,7 @@
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.083rem;
+  $title-block-separator-height: 0.1875rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -57,10 +57,12 @@
 
   .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
   }
 
   %titleBlockInner {
@@ -82,10 +84,6 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
-
-    @include title-block-xsmall {
-      padding-bottom: 12px;
-    }
   }
 
   .rowBelowSeparatorInner {
@@ -114,10 +112,6 @@
     @include title-block-medium-and-small {
       border-bottom: none;
     }
-
-    @include title-block-xsmall {
-      flex-wrap: wrap;
-    }
   }
 
   .title {
@@ -208,10 +202,10 @@
     }
 
     @include title-block-medium-and-small {
-      font-size: $typography-heading-3-font-size;
-      line-height: $typography-heading-3-line-height;
-      letter-spacing: $typography-heading-3-letter-spacing;
-      padding: 8px 0;
+      font-size: $typography-heading-4-font-size;
+      line-height: $typography-heading-4-line-height;
+      letter-spacing: $typography-heading-4-letter-spacing;
+      padding: 0;
     }
   }
 
@@ -247,7 +241,7 @@
 
     @include ca-margin($end: $spacing-xs);
 
-    @media (max-width: 511px) {
+    @include title-block-medium-and-small {
       display: flex;
       align-items: center;
     }
@@ -357,11 +351,8 @@
   .rowBelowSeparatorInnerContent {
     display: flex;
     width: 100%;
+    margin-top: -$title-block-separator-height;
     justify-content: space-between;
-
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
   }
 
   .titleAndAdjacent {
@@ -527,19 +518,8 @@
       color: $color-blue-500;
     }
 
-    .secondaryOverflowCombinedMenu {
-      display: none;
-    }
-
     @include title-block-medium-and-small {
-      .secondaryButtonContainer,
-      .secondaryOverflowMenu {
-        display: none;
-      }
-
-      .secondaryOverflowCombinedMenu {
-        display: flex;
-      }
+      display: none;
     }
   }
 
@@ -581,15 +561,6 @@
       }
     }
 
-    @include title-block-medium-and-small {
-      display: none;
-
-      // Note: This media query is necessary to override the above on tablets and handheld devices
-      @media only screen and (hover: none) {
-        display: flex;
-      }
-    }
-
     @media only screen {
       @container (max-width: #{$breadcrumb-breakpoint-width}) {
         position: relative;
@@ -599,6 +570,10 @@
         @include ca-position($start: 0);
       }
     }
+
+    @include title-block-medium-and-small {
+      display: none;
+    }
   }
 
   @mixin visually-hidden {
@@ -721,26 +696,10 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
   /* stylelint-enable no-descending-specificity */
 }
 
-.staticIcon {
-  display: none;
-  width: 20px;
-  height: 20px;
-
-  @include title-block-medium-and-small {
-    @media (min-width: 512px) {
-      display: flex;
-    }
-  }
-}
-
 @keyframes slide-fade {
   0% {
     display: none;