@kaizen/components 1.39.1 → 1.40.0

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { within } from "@storybook/testing-library"
+import { within } from "@storybook/test"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -109,9 +109,13 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    role: string,
+    name: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    return within(calendar).getByRole(role, { name })
   }
 
   const todayCalendarIds = [
@@ -121,44 +125,33 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   ]
 
   todayCalendarIds.forEach(id => {
-    getElementWithinCalendar(id, "1st May (Sunday)").classList.add(
-      styles.dayToday
-    )
+    getElementWithinCalendar(id, "gridcell", "1").classList.add(styles.dayToday)
   })
 
-  const calendarsHover = [
-    { id: "id--calendar--hover", buttonDescription: "5th September (Sunday)" },
+  const calendarsPseudoStates = [
+    {
+      id: "id--calendar",
+      role: "gridcell",
+      name: "5",
+    },
     {
-      id: "id--calendar-selected--hover",
-      buttonDescription: "5th September (Sunday)",
+      id: "id--calendar-selected",
+      role: "gridcell",
+      name: "5",
     },
     {
-      id: "id--calendar-navigation--hover",
-      buttonDescription: "Go to previous month",
+      id: "id--calendar-navigation",
+      role: "button",
+      name: "Go to previous month",
     },
   ]
 
-  calendarsHover.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, role, name }) => {
+    getElementWithinCalendar(`${id}--hover`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-  })
-
-  const calendarsFocus = [
-    { id: "id--calendar--focus", buttonDescription: "5th September (Sunday)" },
-    {
-      id: "id--calendar-selected--focus",
-      buttonDescription: "5th September (Sunday)",
-    },
-    {
-      id: "id--calendar-navigation--focus",
-      buttonDescription: "Go to previous month",
-    },
-  ]
-
-  calendarsFocus.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DayPicker,
   DateRange,

package/src/Calendar/utils/formatDateAsNumeral.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { isInvalidDate } from "./isInvalidDate"
 

package/src/Calendar/utils/formatDateAsText.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { DisabledDays } from "../types"
 import { isDisabledDate } from "./isDisabledDate"

package/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx

@@ -1,15 +1,14 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { CalendarSingle } from "../CalendarSingle"
 import { isSelectingDayInCalendar } from "./isSelectingDayInCalendar"
 
 describe("isSelectingDayInCalendar", () => {
   it("returns true when target is a Calendar day", () => {
     render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
-    const calendarDayElement = screen.getByRole("button", {
-      name: "1st February (Tuesday)",
-    })
-    expect(isSelectingDayInCalendar(calendarDayElement)).toBe(true)
+    const targetMonth = screen.getByRole("grid", { name: "February 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(isSelectingDayInCalendar(targetDay)).toBe(true)
   })
 
   it("returns false when target is not a Calendar day", () => {

package/src/Calendar/utils/parseDateAsTextOrNumeral.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { parseDateFromNumeralFormatValue } from "./parseDateFromNumeralFormatValue"
 import { parseDateFromTextFormatValue } from "./parseDateFromTextFormatValue"
 

package/src/Calendar/utils/parseDateFromNumeralFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromNumeralFormatValue = (

package/src/Calendar/utils/parseDateFromTextFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromTextFormatValue = (

package/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
 import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
@@ -8,9 +8,9 @@ import { setFocusInCalendar } from "./setFocusInCalendar"
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
-    onDayClick={jest.fn<void, [Date]>()}
+    onDayClick={jest.fn()}
     locale={enUS}
-    onMount={(calendarElement): void =>
+    onMount={calendarElement =>
       setFocusInCalendar(calendarElement, props.selected)
     }
     {...props}
@@ -18,38 +18,43 @@ const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
 )
 
 const today = new Date()
-const todayFormatted = format(today, "do MMMM (eeee)") // e.g 6th June (Monday)
+const todayMonth = format(today, "MMMM yyyy") // e.g "June 2023"
+const todayDay = today.getDate().toString() // e.g "6"
 
 describe("setFocusInCalendar", () => {
   it("should focus on today when no date is selected", () => {
     render(<CalendarWrapper />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the selected day", () => {
     render(<CalendarWrapper selected={new Date("2022-08-15")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "15th August (Monday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "August 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "15" })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on today when selected date is invalid", () => {
     render(<CalendarWrapper selected={new Date("potato")} />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the first of the month when there is no selected day nor in the current month", () => {
     render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "1st May (Sunday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(targetDay).toHaveFocus()
   })
 })

package/src/Card/_docs/Card.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CardStories from "./Card.stories"
 
 <Meta of={CardStories} />
@@ -11,11 +11,7 @@ import * as CardStories from "./Card.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Card } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Card" />
 
 ## Overview
 

package/src/Checkbox/Checkbox/_docs/Checkbox.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as CheckboxStories from "./Checkbox.stories"
 
@@ -12,11 +12,7 @@ import * as CheckboxStories from "./Checkbox.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Checkbox } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Checkbox" />
 
 ## Overview
 

package/src/Checkbox/CheckboxField/_docs/CheckboxField.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CheckboxFieldStories from "./CheckboxField.stories"
 
 <Meta of={CheckboxFieldStories} />
@@ -13,11 +13,7 @@ import * as CheckboxFieldStories from "./CheckboxField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { CheckboxField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="CheckboxField" />
 
 ## Overview
 

package/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.mdx

@@ -1,16 +1,11 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CheckboxGroupStories from "./CheckboxGroup.stories"
 
 <Meta of={CheckboxGroupStories} />
 
 # CheckboxGroup
 
-{/*
-  * @todo:
-  * - Adjust Github link (if needed)
-  * - Add Figma and Design Guidelines (Confluence) link
-  */}
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/CheckboxGroup"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=6%3A4586&t=P1w10jr2cpPuaayw-1"
@@ -18,11 +13,7 @@ import * as CheckboxGroupStories from "./CheckboxGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { CheckboxGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="CheckboxGroup" />
 
 ## Overview
 

package/src/Collapsible/Collapsible/_docs/Collapsible.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CollapsibleStories from "./Collapsible.stories"
 
 <Meta of={CollapsibleStories} />
@@ -13,11 +13,7 @@ import * as CollapsibleStories from "./Collapsible.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Collapsible } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Collapsible" />
 
 ## Overview
 

package/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as CollapsibleGroupStories from "./CollapsibleGroup.stories"
 
 <Meta of={CollapsibleGroupStories} />
@@ -13,11 +13,7 @@ import * as CollapsibleGroupStories from "./CollapsibleGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { CollapsibleGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="CollapsibleGroup" />
 
 ## Overview
 

package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as ExpertAdviceCollapsibleStories from "./ExpertAdviceCollapsible.stories"
 
 <Meta of={ExpertAdviceCollapsibleStories} />
@@ -13,11 +13,7 @@ import * as ExpertAdviceCollapsibleStories from "./ExpertAdviceCollapsible.stori
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { ExpertAdviceCollapsible } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="ExpertAdviceCollapsible" />
 
 ## Overview
 

package/src/Container/_docs/Container.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as ContainerStories from "./Container.stories"
 
@@ -13,11 +13,7 @@ import * as ContainerStories from "./Container.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Container } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Container" />
 
 ## Overview
 

package/src/Content/_docs/Content.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as ContentStories from "./Content.stories"
 
@@ -13,11 +13,7 @@ import * as ContentStories from "./Content.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Content } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Content" />
 
 ## Overview
 

package/src/DateInput/DateInputDescription/DateInputDescription.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import type { Locale } from "date-fns"
 import { LabelledMessage } from "~components/LabelledMessage"
 import { formatDescriptionInputFormat } from "./utils/formatDescriptionInputFormat"
 import styles from "./DateInputDescription.module.scss"

package/src/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.ts

@@ -1,2 +1,4 @@
+import type { Locale } from "date-fns"
+
 export const formatDescriptionInputFormat = (locale: Locale): string =>
   locale.formatLong?.date({ width: "short" }).toLowerCase()

package/src/DatePicker/DatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { DatePicker } from "./DatePicker"
 import { ValidationResponse } from "./types"
@@ -166,9 +166,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
       const input = screen.getByLabelText("Input label")
@@ -193,9 +192,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -233,9 +231,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -278,9 +275,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -418,9 +414,9 @@ describe("<DatePicker /> - Validation", () => {
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
       await waitFor(() => {
         expect(onValidate).toBeCalledTimes(1)

package/src/DatePicker/_docs/DatePicker.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DatePickerStories from "./DatePicker.stories"
 
 <Meta of={DatePickerStories} />
@@ -13,11 +13,7 @@ import * as DatePickerStories from "./DatePicker.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { DatePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="DatePicker" />
 
 ## Overview
 

package/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -1,5 +1,6 @@
 import React, { useId } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import { enAU } from "date-fns/locale"
 import {
   DateInputDescription,

package/src/DatePicker/utils/getLocale.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { enAU, enUS } from "date-fns/locale"
 import { StringSuggestions } from "~types/StringSuggestions"
 

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DateRangePickerStories from "./DateRangePicker.stories"
 
 <Meta of={DateRangePickerStories} />
@@ -13,11 +13,7 @@ import * as DateRangePickerStories from "./DateRangePicker.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { DateRangePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="DateRangePicker" />
 
 ## Overview
 

package/src/Divider/_docs/Divider.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DividerStories from "./Divider.stories"
 
 <Meta of={DividerStories} />
@@ -13,11 +13,7 @@ import * as DividerStories from "./Divider.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Divider } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Divider" />
 
 ## Overview
 

package/src/EmptyState/_docs/EmptyState.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as EmptyStateStories from "./EmptyState.stories"
 
 <Meta of={EmptyStateStories} />
@@ -13,11 +13,7 @@ import * as EmptyStateStories from "./EmptyState.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { EmptyState } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="EmptyState" />
 
 ## Overview
 

package/src/ErrorPage/hooks/useErrorMessages.ts

@@ -24,13 +24,13 @@ export const useErrorMessages = (
     400: {
       title: formatMessage({
         id: "kzErrorPage.400.title",
-        defaultMessage: "Your request has slipped into the void",
+        defaultMessage: "Problem loading page",
         description: "Heading for page",
       }),
       message: formatMessage({
         id: "kzErrorPage.400.message",
         defaultMessage:
-          "Sorry but your request couldn’t be completed. Go back and try again, or head to Home",
+          "Problem loading page right now. Try again or head home.",
         description: "Call to action instructions for the user",
       }),
     },
@@ -63,7 +63,7 @@ export const useErrorMessages = (
     404: {
       title: formatMessage({
         id: "kzErrorPage.404.title",
-        defaultMessage: "Missing pages are one of life's mysteries",
+        defaultMessage: "Page not found",
         description: "Main title of page",
       }),
       message: formatMessage({
@@ -89,7 +89,7 @@ export const useErrorMessages = (
     422: {
       title: formatMessage({
         id: "kzErrorPage.422.title",
-        defaultMessage: "Change never comes easy",
+        defaultMessage: "Change couldn't be made",
         description: "Main title of page",
       }),
       message: formatMessage({