@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Button/IconButton/IconButton.module.scss

@@ -3,32 +3,30 @@
 @import '../utils/mixins';
 @import '../utils/variables';
 
-@layer kz-components {
-  %icon-button {
-    width: $button-height;
-    border-color: $border-borderless-border-color;
+%icon-button {
+  width: $button-height;
+  border-color: $border-borderless-border-color;
 
-    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
+  @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
 
-    & #{$className--content} {
-      justify-content: center;
-      width: 100%;
-      padding: 0;
-    }
+  & #{$className--content} {
+    justify-content: center;
+    width: 100%;
+    padding: 0;
+  }
 
-    &:not(.reversed) {
-      &.default {
-        background-color: transparent;
-        color: inherit;
+  &:not(.reversed) {
+    &.default {
+      background-color: transparent;
+      color: inherit;
 
-        @include enabled-pseudo-states-variant($background-color: $color-gray-200);
-      }
+      @include enabled-pseudo-states-variant($background-color: $color-gray-200);
     }
+  }
 
-    &.reversed {
-      border-color: $border-borderless-border-color;
+  &.reversed {
+    border-color: $border-borderless-border-color;
 
-      @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
-    }
+    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
   }
 }

package/src/ButtonGroup/ButtonGroup.module.css

@@ -1,50 +1,48 @@
-@layer kz-components {
-  .buttonGroup {
-    --focus-ring-offset: 1px;
-    --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+.buttonGroup {
+  --focus-ring-offset: 1px;
+  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
 
-    display: inline-flex;
-  }
+  display: inline-flex;
+}
 
-  .child {
-    border-radius: 0;
-  }
+.child {
+  border-radius: 0;
+}
 
-  .child:focus-visible::after {
-    border-radius: 0;
-  }
+.child:focus-visible::after {
+  border-radius: 0;
+}
 
-  .child:not(.firstChild) {
-    border-inline-start: 1px solid var(--color-blue-300);
-  }
+.child:not(.firstChild) {
+  border-inline-start: 1px solid var(--color-blue-300);
+}
 
-  .child:not(.firstChild, .lastChild) {
-    &:focus-visible {
-      &::after {
-        inset-inline: var(--focus-ring-offset-inner);
-      }
+.child:not(.firstChild, .lastChild) {
+  &:focus-visible {
+    &::after {
+      inset-inline: var(--focus-ring-offset-inner);
     }
   }
+}
 
-  .child.firstChild {
-    border-start-start-radius: var(--border-focus-ring-border-radius);
-    border-end-start-radius: var(--border-focus-ring-border-radius);
-  }
+.child.firstChild {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+}
 
-  .child.firstChild:focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius);
-    border-end-start-radius: var(--border-focus-ring-border-radius);
-    inset-inline-end: var(--focus-ring-offset-inner);
-  }
+.child.firstChild:focus-visible::after {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+  inset-inline-end: var(--focus-ring-offset-inner);
+}
 
-  .child.lastChild {
-    border-start-end-radius: var(--border-focus-ring-border-radius);
-    border-end-end-radius: var(--border-focus-ring-border-radius);
-  }
+.child.lastChild {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+}
 
-  .child.lastChild:focus-visible::after {
-    border-start-end-radius: var(--border-focus-ring-border-radius);
-    border-end-end-radius: var(--border-focus-ring-border-radius);
-    inset-inline-start: var(--focus-ring-offset-inner);
-  }
+.child.lastChild:focus-visible::after {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+  inset-inline-start: var(--focus-ring-offset-inner);
 }

package/src/ButtonGroup/ButtonGroup.module.scss

@@ -1,65 +1,63 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  $focus-ring-offset: 1px;
-  $focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
+$focus-ring-offset: 1px;
+$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
 
-  %firstChildBorders {
-    border-start-start-radius: $border-focus-ring-border-radius;
-    border-end-start-radius: $border-focus-ring-border-radius;
-  }
+%firstChildBorders {
+  border-start-start-radius: $border-focus-ring-border-radius;
+  border-end-start-radius: $border-focus-ring-border-radius;
+}
 
-  %lastChildBorders {
-    border-start-end-radius: $border-focus-ring-border-radius;
-    border-end-end-radius: $border-focus-ring-border-radius;
-  }
+%lastChildBorders {
+  border-start-end-radius: $border-focus-ring-border-radius;
+  border-end-end-radius: $border-focus-ring-border-radius;
+}
 
-  .buttonGroup {
-    display: inline-flex;
+.buttonGroup {
+  display: inline-flex;
 
-    .child {
-      border-radius: 0;
+  .child {
+    border-radius: 0;
 
-      &:focus-visible {
-        &::after {
-          border-radius: 0;
-        }
+    &:focus-visible {
+      &::after {
+        border-radius: 0;
       }
+    }
 
-      &:not(.firstChild) {
-        border-inline-start: 1px solid $color-blue-300;
-      }
+    &:not(.firstChild) {
+      border-inline-start: 1px solid $color-blue-300;
+    }
 
-      &:not(.firstChild, .lastChild) {
-        &:focus-visible {
-          &::after {
-            inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
-          }
+    &:not(.firstChild, .lastChild) {
+      &:focus-visible {
+        &::after {
+          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
         }
       }
+    }
 
-      &.firstChild {
-        @extend %firstChildBorders;
+    &.firstChild {
+      @extend %firstChildBorders;
 
-        &:focus-visible {
-          &::after {
-            @extend %firstChildBorders;
+      &:focus-visible {
+        &::after {
+          @extend %firstChildBorders;
 
-            inset-inline-end: $focus-ring-offset-inner;
-          }
+          inset-inline-end: $focus-ring-offset-inner;
         }
       }
+    }
 
-      &.lastChild {
-        @extend %lastChildBorders;
+    &.lastChild {
+      @extend %lastChildBorders;
 
-        &:focus-visible {
-          &::after {
-            @extend %lastChildBorders;
+      &:focus-visible {
+        &::after {
+          @extend %lastChildBorders;
 
-            inset-inline-start: $focus-ring-offset-inner;
-          }
+          inset-inline-start: $focus-ring-offset-inner;
         }
       }
     }

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -4,26 +4,24 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  .calendarPopover {
-    background-color: $color-white;
-    z-index: 1010;
-    box-shadow: $shadow-large-box-shadow;
-    border-radius: $border-borderless-border-radius;
-    padding: $spacing-12 $spacing-8;
-    box-sizing: border-box;
-    overflow: auto;
+.calendarPopover {
+  background-color: $color-white;
+  z-index: 1010;
+  box-shadow: $shadow-large-box-shadow;
+  border-radius: $border-borderless-border-radius;
+  padding: $spacing-12 $spacing-8;
+  box-sizing: border-box;
+  overflow: auto;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: $spacing-24;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-24;
   }
+}
 
-  // Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
-  // Margin 0 because default styling for [popover] is margin: auto to center it.
-  .calendarPopover[popover]:popover-open {
-    z-index: unset;
-    margin: 0;
-    inset: unset;
-  }
+// Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
+// Margin 0 because default styling for [popover] is margin: auto to center it.
+.calendarPopover[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
 }

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

@@ -1,68 +1,66 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $cell-border-radius: 3px;
+$cell-border-radius: 3px;
 
-  .month {
-    padding: 0 $spacing-sm;
+.month {
+  padding: 0 $spacing-sm;
 
-    &:nth-of-type(1) {
-      padding-inline-start: 0;
-    }
-
-    &:last-child {
-      padding-inline-end: 0;
-    }
+  &:first-child {
+    padding-inline-start: 0;
   }
 
-  .monthWithDivider {
-    position: relative;
-    padding: 0 $spacing-md;
-
-    &:not(:nth-of-type(1)) {
-      &::before {
-        position: absolute;
-        content: '';
-        inset: calc(-1 * #{$spacing-md}) 0;
-        border-inline-start: 1px solid $color-gray-300;
-      }
-    }
+  &:last-child {
+    padding-inline-end: 0;
+  }
+}
 
-    &:nth-of-type(1) {
-      padding-inline-start: 0;
-    }
+.monthWithDivider {
+  position: relative;
+  padding: 0 $spacing-md;
 
-    &:last-child {
-      padding-inline-end: 0;
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      content: '';
+      inset: calc(-1 * #{$spacing-md}) 0;
+      border-inline-start: 1px solid $color-gray-300;
     }
   }
 
-  .nav {
-    position: absolute;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    color: $color-purple-800;
-    top: -0.25rem;
+  &:first-child {
+    padding-inline-start: 0;
   }
 
-  .dayRangeStart,
-  .dayRangeEnd {
-    background-color: $color-blue-500;
-    color: $color-white;
+  &:last-child {
+    padding-inline-end: 0;
   }
+}
 
-  .dayRangeMiddle {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
+.nav {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  color: $color-purple-800;
 
-    & [class*='_button_'] {
-      color: $color-blue-500;
-    }
+  .captionEnd & {
+    flex-direction: row-reverse;
   }
 
-  .hidden {
-    background-color: transparent;
+  .captionStart.captionEnd & {
+    justify-content: space-between;
+    flex-direction: row;
   }
 }
+
+.dayRangeStart,
+.dayRangeEnd {
+  background-color: $color-blue-500;
+  color: $color-white;
+}
+
+.dayRangeMiddle {
+  background-color: $color-blue-100;
+  color: $color-blue-500;
+}

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
-import { DayPicker, type PropsBase, type PropsRange } from 'react-day-picker'
+import { DayPicker, type DayPickerRangeProps } from 'react-day-picker'
 import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
@@ -13,7 +13,7 @@ export type CalendarRangeProps = {
   id?: string
   onMount?: (calendarElement: CalendarRangeElement) => void
   hasDivider?: boolean
-} & OverrideClassName<Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode'>>
+} & OverrideClassName<Omit<DayPickerRangeProps, 'mode'>>
 
 export const CalendarRange = ({
   id,
@@ -36,15 +36,16 @@ export const CalendarRange = ({
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */
-  const classNames: PropsBase['classNames'] = {
+  const classNames = {
     ...baseCalendarClassNames,
     month: hasDivider ? styles.monthWithDivider : styles.month,
+    caption_end: styles.captionEnd,
+    caption_start: styles.captionStart,
     nav: styles.nav,
-    range_start: styles.dayRangeStart,
-    range_end: styles.dayRangeEnd,
-    range_middle: styles.dayRangeMiddle,
-    hidden: styles.hidden,
-  }
+    day_range_start: styles.dayRangeStart,
+    day_range_end: styles.dayRangeEnd,
+    day_range_middle: styles.dayRangeMiddle,
+  } satisfies DayPickerRangeProps['classNames']
   /* eslint-enable camelcase */
 
   return (
@@ -55,13 +56,8 @@ export const CalendarRange = ({
         defaultMonth={selectedMonth}
         classNames={classNames}
         components={{
-          Chevron: (props) => {
-            if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
-            }
-
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
-          },
+          IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
+          IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
         numberOfMonths={numberOfMonths}
         locale={locale}

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

@@ -89,8 +89,7 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
     const month = within(calendar).getByRole('grid', { name: monthName })
-    const day = within(month).getByRole('gridcell', { name: dayName })
-    return within(day).getByRole('button')
+    return within(month).getByRole('gridcell', { name: dayName })
   }
 
   const calendarsPseudoStates = [

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

@@ -1,16 +1,13 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .nav {
-    position: absolute;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    color: $color-purple-800;
-    top: -0.25rem;
-  }
+.nav {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  color: $color-purple-800;
+}
 
-  .navButtonNext {
-    inset-inline-end: 0;
-  }
+.navButtonNext {
+  inset-inline-end: 0;
 }

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
-import { DayPicker, type PropsBase, type PropsSingle } from 'react-day-picker'
+import { DayPicker, type DayPickerSingleProps } from 'react-day-picker'
 import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
@@ -12,7 +12,7 @@ export type CalendarSingleElement = HTMLDivElement
 export type CalendarSingleProps = {
   id?: string
   onMount?: (calendarElement: CalendarSingleElement) => void
-} & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>
+} & OverrideClassName<Omit<DayPickerSingleProps, 'mode'>>
 
 export const CalendarSingle = ({
   id,
@@ -34,11 +34,11 @@ export const CalendarSingle = ({
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */
-  const classNames: PropsBase['classNames'] = {
+  const classNames = {
     ...baseCalendarClassNames,
     nav: styles.nav,
     nav_button_next: styles.navButtonNext,
-  }
+  } satisfies DayPickerSingleProps['classNames']
   /* eslint-enable camelcase */
 
   return (
@@ -50,13 +50,8 @@ export const CalendarSingle = ({
         weekStartsOn={isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined}
         classNames={classNames}
         components={{
-          Chevron: (props) => {
-            if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
-            }
-
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
-          },
+          IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
+          IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
         locale={locale}
         {...restProps}

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

@@ -89,14 +89,9 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (
-    id: string,
-    role: string,
-    name: string | RegExp,
-  ): HTMLElement => {
+  const getElementWithinCalendar = (id: string, role: string, name: string): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    const day = within(calendar).getByRole(role, { name })
-    return role === 'button' ? day : within(day).getByRole('button')
+    return within(calendar).getByRole(role, { name })
   }
 
   const todayCalendarIds = [
@@ -123,7 +118,7 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
     {
       id: 'id--calendar-navigation',
       role: 'button',
-      name: /Go to the previous month/i,
+      name: 'Go to previous month',
     },
   ]
 

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

@@ -1,27 +1,24 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .nav {
-    position: absolute;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    color: $color-purple-800;
-    top: -0.25rem;
-  }
+.nav {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  color: $color-purple-800;
+}
 
-  .dayRangeStart,
-  .dayRangeEnd {
-    background-color: $color-blue-500;
-    color: $color-white;
-  }
+.navButtonNext {
+  inset-inline-end: 0;
+}
 
-  .dayRangeMiddle {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
+.dayRangeStart,
+.dayRangeEnd {
+  background-color: $color-blue-500;
+  color: $color-white;
+}
 
-    & [class*='_button_'] {
-      color: $color-blue-500;
-    }
-  }
+.dayRangeMiddle {
+  background-color: $color-blue-100;
+  color: $color-blue-500;
 }