@kaizen/components 2.4.0 → 3.0.0

package/locales/ms.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Buka menu sekunder dan limpahan"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Kosongkan pilihan: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Tunjukkan cadangan untuk {field}"

package/locales/nb.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Åpne sekundær- og mer-menyen"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Fjern valg: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Vis forslag for {field}"

package/locales/nl.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Open het secundaire en overloopmenu"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Selectie wissen: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Suggesties voor {field} weergeven"

package/locales/pl.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Otwórz menu drugorzędne i nadmiarowe"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Wyczyść zaznaczenie: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Pokaż sugestie dla {field}"

package/locales/pt-BR.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Abre o menu secundário e de conteúdo adicional"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Limpar seleção: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Mostrar sugestões para {field}"

package/locales/pt.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Abre o menu secundário e de conteúdo adicional"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Limpar seleção: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Mostrar sugestões para {field}"

package/locales/ro.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Deschideți meniul secundar și meniul extins"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Ștergeți selecția: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Afișați sugestii pentru {field}"

package/locales/ru.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Открыть дополнительное и раскрывающееся меню"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Очистить выбор: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Показать предложения для {field}"

package/locales/si-LK.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "ද්විතියික සහ පිටාර මෙනුව විවෘත කරන්න"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "තේරීම ඉවත් කරන්න: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "{field} සඳහා යෝජනා පෙන්වන්න"

package/locales/sk.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Otvoriť sekundárnu a rozšírenú ponuku"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Zrušiť výber: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Zobraziť návrhy pre {field}"

package/locales/sr.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Otvori sekundarni i meni sa dodatnim radnjama"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Obriši izbor: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Prikaži predloge za {field}"

package/locales/sv.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Öppna sekundär meny och överflödesmeny"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Rensa val: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Visa förslag för {field}"

package/locales/th.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "เปิดเมนูรองและโอเวอร์โฟลว์"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "ล้างรายการที่เลือก: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "แสดงคำแนะนำสำหรับ {field}"

package/locales/tl.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Buksan ang sekundaryong menu at overflow menu"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "I-clear ang napili: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Ipakita ang mga mungkahi para sa {field}"

package/locales/tr.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "İkincil ve taşma menüsünü açın"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Seçimi temizle: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "{field} için önerileri göster"

package/locales/uk.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Відкрити додаткове меню та меню переповнення"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Скасувати виділення: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Показати пропозиції для {field}"

package/locales/vi.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "Mở menu phụ và menu tùy chọn"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Xóa lựa chọn: {field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Hiển thị gợi ý cho {field}"

package/locales/zh-TW.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "開啟副選單和溢出選單"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "清除選擇：{field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "顯示對 {field} 的建議"

package/locales/zh.json

@@ -244,6 +244,10 @@
     "description" : "Label for the dropdown menu which displays additional actions",
     "message" : "打开二级菜单和溢出菜单"
   },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "清除选择：{field}"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "显示{field}的建议"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -122,7 +122,6 @@
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
-    "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.6",
     "uuid": "^13.0.0"
   },

package/src/Button/Button.tsx

@@ -22,11 +22,6 @@ export type ButtonUIProps = {
   iconPosition?: 'start' | 'end'
   /** Controls if the button inherits width from its parent. @default "false" */
   isFullWidth?: boolean
-  /**
-   * Controls the reversed style of Button
-   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-next-api-specification--docs#variants}
-   */
-  isReversed?: boolean
 }
 
 export type ButtonProps = ButtonUIProps &
@@ -51,13 +46,11 @@ export const Button = forwardRef(
       isPending,
       hasHiddenPendingLabel: propsHasHiddenPendingLabel = false,
       pendingLabel,
-      isReversed,
       ...restProps
     }: ButtonProps,
     ref: React.ForwardedRef<HTMLButtonElement>,
   ) => {
-    const shouldUseReverse = useReversedColors()
-    const isReversedVariant = isReversed ?? shouldUseReverse
+    const isReversedVariant = useReversedColors()
     const pendingProps: PendingButtonProps = isPending
       ? {
           isPending,

package/src/Button/_docs/Button--api-specification.mdx

@@ -34,7 +34,6 @@ The following example and table showcases the essential props that enable the co
     'className',
     'size',
     'variant',
-    'isReversed',
     'onPress',
     'icon',
     'iconPosition',

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -4,6 +4,7 @@ import { DayPicker, type PropsBase, type PropsRange } from 'react-day-picker'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
+import { type DeprecatedReactDayPickerProps } from '../types'
 import { isInvalidDate } from '../utils'
 import styles from './CalendarRange.module.scss'
 
@@ -13,7 +14,9 @@ export type CalendarRangeProps = {
   id?: string
   onMount?: (calendarElement: CalendarRangeElement) => void
   hasDivider?: boolean
-} & OverrideClassName<Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode'>>
+} & OverrideClassName<
+  Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode' | DeprecatedReactDayPickerProps>
+>
 
 export const CalendarRange = ({
   id,

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -4,6 +4,7 @@ import { DayPicker, type PropsBase, type PropsSingle } from 'react-day-picker'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
+import { type DeprecatedReactDayPickerProps } from '../types'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'
 import styles from './CalendarSingle.module.scss'
 
@@ -14,7 +15,9 @@ export type CalendarSingleProps = {
   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'>>
+} & OverrideClassName<
+  Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode' | DeprecatedReactDayPickerProps>
+>
 
 export const CalendarSingle = ({
   id,

package/src/Calendar/types.ts

@@ -5,6 +5,24 @@ export type { DateInterval, DateRange }
 
 export type DisabledDays = DayPickerProps['disabled']
 
+export type DeprecatedReactDayPickerProps =
+  | 'fromDate'
+  | 'fromMonth'
+  | 'fromYear'
+  | 'toDate'
+  | 'toMonth'
+  | 'toYear'
+  | 'initialFocus'
+  | 'onDayKeyUp'
+  | 'onDayKeyPress'
+  | 'onDayPointerEnter'
+  | 'onDayPointerLeave'
+  | 'onDayTouchCancel'
+  | 'onDayTouchEnd'
+  | 'onDayTouchMove'
+  | 'onDayTouchStart'
+  | 'onWeekNumberClick'
+
 export type DisabledDayMatchers = {
   /**
    * Accepts an array of singluar dates and disables them.

package/src/GuidanceBlock/GuidanceBlock.module.css

@@ -18,9 +18,6 @@
     box-shadow: var(--shadow-small-box-shadow);
     position: relative;
     top: -1px;
-    transition:
-      opacity var(--animation-duration-slow) ease,
-      margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
     color: var(--color-purple-800);
 
     @media (width >= 1024px) {
@@ -130,11 +127,6 @@
     }
   }
 
-  .hidden {
-    opacity: 0;
-    margin-bottom: 0;
-  }
-
   .headingWrapper {
     margin-bottom: var(--spacing-24);
   }

package/src/GuidanceBlock/GuidanceBlock.spec.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
-import { cleanup, render, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { cleanup, render } from '@testing-library/react'
 import { vi } from 'vitest'
 import { Informative } from '~components/Illustration'
 import { GuidanceBlock } from './GuidanceBlock'
-const user = userEvent.setup()
 
 window.matchMedia = vi.fn().mockImplementation(() => ({
   matches: false,
@@ -17,29 +15,6 @@ window.matchMedia = vi.fn().mockImplementation(() => ({
 describe('GuidanceBlock', () => {
   afterEach(cleanup)
 
-  it('calls the action function when action button is clicked', async () => {
-    const onAction = vi.fn()
-    const { container } = render(
-      <GuidanceBlock
-        illustration={<Informative alt="" />}
-        text={{
-          title: 'This is the call to action title',
-          description:
-            'Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.',
-        }}
-        actions={{
-          primary: { label: 'Action!', onClick: onAction },
-        }}
-      />,
-    )
-    const actionButton = container.querySelector('button')
-    if (actionButton) await user.click(actionButton)
-
-    await waitFor(() => {
-      expect(onAction).toHaveBeenCalledTimes(1)
-    })
-  })
-
   it('has a default title tag of h3', () => {
     const { getByRole } = render(
       <GuidanceBlock

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -1,36 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 import classNames from 'classnames'
-import { Button as V1Button, type ButtonProps as V1ButtonProps } from '~components/ButtonV1'
 import { Heading, type HeadingProps } from '~components/Heading'
-import { Icon } from '~components/Icon'
 import { type SceneProps, type SpotProps } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Tooltip, type TooltipProps } from '~components/TooltipV1'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { type VariantType } from './types'
 import styles from './GuidanceBlock.module.css'
 
-export type ActionProps = V1ButtonProps & {
-  'tooltip'?: TooltipProps
-  'aria-label'?: string
-  'aria-labelledby'?: string
-  'aria-describedby'?: string
-}
-
 type LayoutType = 'default' | 'inline' | 'stacked'
 
 type IllustrationType = 'spot' | 'scene'
 
 type TextAlignment = 'center' | 'left'
 
-type GuidanceBlockActions = {
-  primary: ActionProps
-  secondary?: ActionProps
-  dismiss?: {
-    onClick: () => void
-  }
-}
-
 type BaseGuidanceBlockProps = {
   layout?: LayoutType
   illustration: React.ReactElement<SpotProps | SceneProps>
@@ -39,15 +21,9 @@ type BaseGuidanceBlockProps = {
    */
   illustrationType?: IllustrationType
   smallScreenTextAlignment?: TextAlignment
-  /** @deprecated use the `actionsSlot` prop with Button/next instead */
-  actions?: GuidanceBlockActions
   /** A slot for the primary and secondary action. It is recommended to use the {@link https://cultureamp.design/?path=/docs/components-button-button-next-api-specification--docs | Button} or {@link https://cultureamp.design/?path=/docs/components-linkbutton-usage-guidelines--docs | LinkButton} wrapped in fragment. */
   actionsSlot?: React.ReactNode
-  /** @deprecated this is no longer a used feature and is only the deprecated `actions` prop, ie: {secondary: { label: "Dismiss action" }}` */
-  secondaryDismiss?: boolean
   variant?: VariantType
-  /**  @deprecated use the `actionsSlot` and pass the icon into the JSX elements */
-  withActionButtonArrow?: boolean
   noMaxWidth?: boolean
 }
 
@@ -65,19 +41,6 @@ type GuidanceBlockPropsWithContent = {
 
 export type GuidanceBlockProps = GuidanceBlockWithText | GuidanceBlockPropsWithContent
 
-export type GuidanceBlockState = {
-  hidden: boolean
-  removed: boolean
-}
-
-type WithTooltipProps = {
-  children: React.ReactNode
-  tooltipProps?: TooltipProps
-}
-
-const WithTooltip = ({ tooltipProps, children }: WithTooltipProps): JSX.Element =>
-  tooltipProps ? <Tooltip {...tooltipProps}>{children}</Tooltip> : <>{children}</>
-
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
@@ -85,63 +48,26 @@ const WithTooltip = ({ tooltipProps, children }: WithTooltipProps): JSX.Element
 export const GuidanceBlock = ({
   layout = 'default',
   variant = 'default',
-  withActionButtonArrow = true,
   noMaxWidth = false,
   illustrationType = 'spot',
   smallScreenTextAlignment = 'center',
-  actions,
   illustration,
-  secondaryDismiss,
   actionsSlot,
   ...restProps
 }: GuidanceBlockProps): JSX.Element => {
-  const [hidden, setHidden] = useState<boolean>(false)
-  const [removed, setRemoved] = useState<boolean>(false)
   const { queries } = useMediaQueries()
 
-  const containerRef = React.createRef<HTMLDivElement>()
-
-  const handleDismissBanner = (): void => {
-    setHidden(true)
-    actions?.dismiss?.onClick()
-  }
-
-  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {
-    // Be careful: this assumes the final CSS property to be animated is "margin-top".
-    if (hidden && e.propertyName === 'margin-top') {
-      setRemoved(true)
-    }
-  }
-
-  const marginTop = (): string => {
-    if (hidden && containerRef.current) {
-      return -containerRef.current.clientHeight + 'px'
-    }
-
-    return '0'
-  }
-
-  if (removed) {
-    return <></>
-  }
-
   return (
     <div
       className={classNames(
         styles.banner,
         variant && styles[variant],
         layout && styles[layout],
-        hidden && styles.hidden,
         queries.isSmall && styles.centerContent,
         noMaxWidth && styles.noMaxWidth,
         illustrationType === 'scene' && styles.hasSceneIllustration,
         smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment,
       )}
-      style={{
-        marginTop: marginTop(),
-      }}
-      ref={containerRef}
-      onTransitionEnd={onTransitionEnd}
     >
       <div className={styles.illustrationWrapper}>
         <div className={styles.illustration}>
@@ -166,43 +92,7 @@ export const GuidanceBlock = ({
             </>
           )}
         </div>
-        {actions?.primary || actionsSlot ? (
-          <div className={styles.buttonContainer}>
-            {actions?.primary && (
-              <>
-                <WithTooltip tooltipProps={actions.primary.tooltip}>
-                  <V1Button
-                    icon={
-                      withActionButtonArrow ? (
-                        <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
-                      ) : undefined
-                    }
-                    iconPosition="end"
-                    {...actions.primary}
-                    fullWidth={queries.isSmall}
-                  />
-                </WithTooltip>
-                {actions?.secondary && (
-                  <WithTooltip tooltipProps={actions.secondary.tooltip}>
-                    <div className={styles.secondaryAction}>
-                      <V1Button
-                        secondary
-                        {...actions.secondary}
-                        onClick={
-                          secondaryDismiss
-                            ? (): void => handleDismissBanner()
-                            : actions?.secondary?.onClick
-                        }
-                        fullWidth={queries.isSmall}
-                      />
-                    </div>
-                  </WithTooltip>
-                )}
-              </>
-            )}
-            {!actions && actionsSlot && actionsSlot}
-          </div>
-        ) : null}
+        {actionsSlot && <div className={styles.buttonContainer}>{actionsSlot}</div>}
       </div>
     </div>
   )