@kaizen/components 2.2.0 → 2.2.2

package/codemods/utils/updateKaioImports.ts

@@ -130,8 +130,7 @@ export const updateKaioImports =
     if (!ts.isSourceFile(rootNode)) return rootNode
 
     if (!importsToRemove && !importsToAdd) return rootNode
-    if (importsToRemove && importsToRemove.size === 0 && importsToAdd && importsToAdd.size === 0)
-      return rootNode
+    if (importsToRemove?.size === 0 && importsToAdd?.size === 0) return rootNode
 
     const { factory } = context
 

package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.cjs

@@ -60,13 +60,15 @@ var CalendarRange = function (_a) {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: CalendarRange_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: CalendarRange_module.chevronIcon
         });
       }
     },

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

@@ -7,6 +7,7 @@ var styles = {
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
-  "hidden": "CalendarRange-module_hidden__D47kb"
+  "hidden": "CalendarRange-module_hidden__D47kb",
+  "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
 };
 module.exports = styles;

package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.cjs

@@ -25,7 +25,9 @@ var CalendarSingle = function (_a) {
     weekStartsOn = _a.weekStartsOn,
     _b = _a.locale,
     locale$1 = _b === void 0 ? locale.enAU : _b,
-    restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
+    _c = _a.components,
+    components = _c === void 0 ? {} : _c,
+    restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {
     if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -48,22 +50,24 @@ var CalendarSingle = function (_a) {
     defaultMonth: selectedMonth,
     weekStartsOn: isValidWeekStartsOn.isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
     classNames: classNames,
-    components: {
+    components: tslib.__assign({
       Chevron: function (props) {
         if (props.orientation === 'left') {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: CalendarSingle_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: CalendarSingle_module.chevronIcon
         });
       }
-    },
+    }, components),
     locale: locale$1
   }, restProps)));
 };

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

@@ -2,6 +2,7 @@
 
 var styles = {
   "nav": "CalendarSingle-module_nav__wSVua",
-  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
+  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
+  "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
 };
 module.exports = styles;

package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs

@@ -52,13 +52,15 @@ var LegacyCalendarRange = function (_a) {
           return React__default.default.createElement(Icon.Icon, {
             name: "arrow_back",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: LegacyCalendarRange_module.chevronIcon
           });
         }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
-          shouldMirrorInRTL: true
+          shouldMirrorInRTL: true,
+          className: LegacyCalendarRange_module.chevronIcon
         });
       }
     },

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

@@ -4,6 +4,7 @@ var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
-  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
+  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
+  "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
 };
 module.exports = styles;

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

@@ -19,7 +19,7 @@ var Toolbar = function (_a) {
     _b = _a.noGap,
     noGap = _b === void 0 ? false : _b,
     automationId = _a.automationId;
-  if (!items || items && items.length === 0) {
+  if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
     return React__default.default.createElement(React__default.default.Fragment, null);
   }
   return React__default.default.createElement("div", {

package/dist/esm/src/Calendar/CalendarRange/CalendarRange.mjs

@@ -53,13 +53,15 @@ const CalendarRange = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
       },

package/dist/esm/src/Calendar/CalendarRange/CalendarRange.module.scss.mjs

@@ -5,6 +5,7 @@ var styles = {
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
-  "hidden": "CalendarRange-module_hidden__D47kb"
+  "hidden": "CalendarRange-module_hidden__D47kb",
+  "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
 };
 export { styles as default };

package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -18,7 +18,9 @@ const CalendarSingle = /*#__PURE__*/function () {
       weekStartsOn = _a.weekStartsOn,
       _b = _a.locale,
       locale = _b === void 0 ? enAU : _b,
-      restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
+      _c = _a.components,
+      components = _c === void 0 ? {} : _c,
+      restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
     var calendarRef = useRef(null);
     useEffect(function () {
       if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -41,22 +43,24 @@ const CalendarSingle = /*#__PURE__*/function () {
       defaultMonth: selectedMonth,
       weekStartsOn: isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
       classNames: classNames,
-      components: {
+      components: __assign({
         Chevron: function (props) {
           if (props.orientation === 'left') {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
-      },
+      }, components),
       locale: locale
     }, restProps)));
   };

package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.module.scss.mjs

@@ -1,5 +1,6 @@
 var styles = {
   "nav": "CalendarSingle-module_nav__wSVua",
-  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
+  "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
+  "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
 };
 export { styles as default };

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs

@@ -45,13 +45,15 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(Icon, {
               name: "arrow_back",
               isPresentational: true,
-              shouldMirrorInRTL: true
+              shouldMirrorInRTL: true,
+              className: styles.chevronIcon
             });
           }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
-            shouldMirrorInRTL: true
+            shouldMirrorInRTL: true,
+            className: styles.chevronIcon
           });
         }
       },

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.mjs

@@ -2,6 +2,7 @@ var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
-  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
+  "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
+  "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
 };
 export { styles as default };

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

@@ -11,7 +11,7 @@ const Toolbar = /*#__PURE__*/function () {
       _b = _a.noGap,
       noGap = _b === void 0 ? false : _b,
       automationId = _a.automationId;
-    if (!items || items && items.length === 0) {
+    if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     return /*#__PURE__*/React.createElement("div", {

package/dist/styles.css

@@ -12,7 +12,7 @@
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
-    word-wrap: normal;
+    overflow-wrap: normal;
     direction: ltr;
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
@@ -559,8 +559,7 @@
 }
 @layer kz-components {
   .VisuallyHidden-module_srOnly__tTjOK {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -2081,6 +2080,9 @@
   .CalendarSingle-module_navButtonNext__-GrZx {
     inset-inline-end: 0;
   }
+  .CalendarSingle-module_chevronIcon__0PRnR {
+    pointer-events: none;
+  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -2133,6 +2135,9 @@
   .CalendarRange-module_hidden__D47kb {
     background-color: transparent;
   }
+  .CalendarRange-module_chevronIcon__ULJzd {
+    pointer-events: none;
+  }
 }
 @layer kz-components {
   @property --gradient-angle {
@@ -3529,6 +3534,9 @@
   .LegacyCalendarRange-module_dayRangeMiddle__M27gR [class*=_button_] {
     color: var(--color-blue-500, #0168b3);
   }
+  .LegacyCalendarRange-module_chevronIcon__Q6pOJ {
+    pointer-events: none;
+  }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3723,8 +3731,7 @@
     }
   }
   .Base-module_visuallyHidden__bykhu:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     position: absolute;
     width: 1px;
     height: 1px;
@@ -3782,7 +3789,7 @@
       );
     grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
-    grid-column-gap: var(--spacing-32);
+    column-gap: var(--spacing-32);
   }
 
   .EmptyState-module_illustrationContainer__2Ch-u {
@@ -3815,8 +3822,8 @@
     .EmptyState-module_content__dggps {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
-      grid-column-gap: unset;
-      grid-row-gap: var(--spacing-24);
+      column-gap: unset;
+      row-gap: var(--spacing-24);
       padding: var(--spacing-24);
     }
 
@@ -5188,7 +5195,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: rect(0 0 0 0);
     border: 0;
   }
 }
@@ -8258,7 +8265,7 @@
     border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid) var(--color-gray-500, #878792);
     background: var(--color-white, #ffffff);
     border-radius: var(--border-solid-border-radius, 7px);
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     /* stylelint-enable no-descending-specificity */
   }
   .RichTextEditor-module_editorWrapper__5q3mG:hover, .RichTextEditor-module_editorWrapper__5q3mG:focus-within {
@@ -9731,7 +9738,7 @@
     margin-block: 0;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
-    grid-gap: var(--spacing-md, 1.5rem);
+    gap: var(--spacing-md, 1.5rem);
   }
   @media (max-width: 767px) {
     .TileGrid-module_grid__1WCNc {
@@ -10715,8 +10722,7 @@
     }
   }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -10741,7 +10747,6 @@
     }
   }
   .TitleBlock-module_breadcrumbTextLink__ngx82:hover, .TitleBlock-module_breadcrumbTextLink__ngx82:focus, .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
-    clip: initial;
     clip-path: initial;
     height: initial;
     overflow: initial;

package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -4,8 +4,10 @@ export type CalendarSingleElement = HTMLDivElement;
 export type CalendarSingleProps = {
     id?: string;
     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'>>;
 export declare const CalendarSingle: {
-    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
+    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, components, ...restProps }: CalendarSingleProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -77,8 +77,8 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.5",
-    "@headlessui/react": "^2.2.7",
+    "@floating-ui/react-dom": "^2.1.6",
+    "@headlessui/react": "^2.2.9",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
@@ -103,16 +103,16 @@
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.7.1",
-    "prosemirror-history": "^1.4.1",
-    "prosemirror-inputrules": "^1.5.0",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.2",
+    "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.10.4",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.10.5",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.40.1",
+    "prosemirror-view": "^1.41.3",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -123,23 +123,23 @@
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.5",
-    "uuid": "^11.1.0"
+    "use-debounce": "^10.0.6",
+    "uuid": "^13.0.0"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.12.2",
-    "@cultureamp/package-bundler": "^2.3.2",
+    "@cultureamp/i18n-react-intl": "^2.15.0",
+    "@cultureamp/package-bundler": "^2.4.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
-    "@types/uuid": "^10.0.0",
-    "autoprefixer": "^10.4.21",
+    "@types/uuid": "^11.0.0",
+    "autoprefixer": "^10.4.22",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
@@ -148,20 +148,20 @@
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.2.4",
+    "postcss-preset-env": "^10.4.0",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.2.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "query-string": "^9.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.11",
-    "rollup": "^4.46.2",
+    "react-intl": "^7.1.14",
+    "rollup": "^4.53.3",
     "sass": "1.79.6",
-    "serialize-query-params": "^2.0.2",
-    "svgo": "^3.3.2",
+    "serialize-query-params": "^2.0.4",
+    "svgo": "^4.0.0",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.3",
+    "tsx": "^4.20.6",
     "@kaizen/design-tokens": "11.0.0"
   },
   "devDependenciesComments": {

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

@@ -65,4 +65,8 @@
   .hidden {
     background-color: transparent;
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -57,10 +57,24 @@ export const CalendarRange = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
         }}
         numberOfMonths={numberOfMonths}

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

@@ -13,4 +13,8 @@
   .navButtonNext {
     inset-inline-end: 0;
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -12,6 +12,8 @@ export type CalendarSingleElement = HTMLDivElement
 export type CalendarSingleProps = {
   id?: string
   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'>>
 
 export const CalendarSingle = ({
@@ -22,6 +24,7 @@ export const CalendarSingle = ({
   defaultMonth,
   weekStartsOn,
   locale = enAU,
+  components = {},
   ...restProps
 }: CalendarSingleProps): JSX.Element => {
   const calendarRef = useRef<CalendarSingleElement>(null)
@@ -52,11 +55,26 @@ export const CalendarSingle = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
+          ...components,
         }}
         locale={locale}
         {...restProps}

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

@@ -24,4 +24,8 @@
       color: $color-blue-500;
     }
   }
+
+  .chevronIcon {
+    pointer-events: none;
+  }
 }

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -60,10 +60,24 @@ export const LegacyCalendarRange = ({
         components={{
           Chevron: (props) => {
             if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+              return (
+                <Icon
+                  name="arrow_back"
+                  isPresentational
+                  shouldMirrorInRTL
+                  className={styles.chevronIcon}
+                />
+              )
             }
 
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+            return (
+              <Icon
+                name="arrow_forward"
+                isPresentational
+                shouldMirrorInRTL
+                className={styles.chevronIcon}
+              />
+            )
           },
         }}
         locale={locale}

package/src/EmptyState/EmptyState.module.css

@@ -46,7 +46,7 @@
       );
     grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
-    grid-column-gap: var(--spacing-32);
+    column-gap: var(--spacing-32);
   }
 
   .illustrationContainer {
@@ -79,8 +79,8 @@
     .content {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
-      grid-column-gap: unset;
-      grid-row-gap: var(--spacing-24);
+      column-gap: unset;
+      row-gap: var(--spacing-24);
       padding: var(--spacing-24);
     }
 

package/src/Icon/Icon.module.css

@@ -11,7 +11,7 @@
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
-    word-wrap: normal;
+    overflow-wrap: normal;
     direction: ltr;
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;

package/src/IconV1/_docs/icon.module.scss

@@ -5,7 +5,7 @@
     display: grid;
     grid-template-columns: repeat(6, 150px);
     grid-template-rows: min-content;
-    grid-gap: var(--spacing-8);
+    gap: var(--spacing-8);
     margin: 0;
     padding: 0;
     list-style: none;

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -114,8 +114,7 @@
   // keyboard focus. Otherwise, a sighted keyboard user would have to try and
   // figure out where their visible focus indicator had gone to.
   .visuallyHidden:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     position: absolute;
     width: 1px;
     height: 1px;

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -360,7 +360,7 @@ $notification-slide-right: transform 300ms ease-out;
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: rect(0 0 0 0);
     border: 0;
   }
 }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -61,7 +61,7 @@
     border: $border-solid-border-width $border-solid-border-style $color-gray-500;
     background: $color-white;
     border-radius: $border-solid-border-radius;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     &:hover,
     &:focus-within {

package/src/Select/Select.tsx

@@ -120,8 +120,7 @@ export const Select = React.forwardRef<any, SelectProps>(
 Select.displayName = 'Select'
 
 interface AsyncProps
-  extends ReactAsyncSelectProps<any, boolean, any>,
-    ReactSelectProps<any, boolean, any> {}
+  extends ReactAsyncSelectProps<any, boolean, any>, ReactSelectProps<any, boolean, any> {}
 
 export const AsyncSelect = React.forwardRef(
   ({ className: propsClassName, placeholder, ...props }: AsyncProps, ref: React.Ref<any>) => (

package/src/Tile/TileGrid/TileGrid.module.scss

@@ -11,7 +11,7 @@
     // the more we shave off the width here,
     // the less the tiles will grow when they lose one from the row
     grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-    grid-gap: $spacing-md;
+    gap: $spacing-md;
 
     @include ca-media-mobile {
       grid-template-columns: repeat(2, minmax(226px, $tileHeight));

package/src/TitleBlock/TitleBlock.module.scss

@@ -577,8 +577,7 @@
   }
 
   @mixin visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -587,7 +586,6 @@
   }
 
   @mixin visually-hidden-reset {
-    clip: initial;
     clip-path: initial;
     height: initial;
     overflow: initial;

package/src/TitleBlock/subcomponents/Toolbar.tsx

@@ -18,7 +18,7 @@ type ToolbarProps = {
 }
 
 export const Toolbar = ({ items, noGap = false, automationId }: ToolbarProps): JSX.Element => {
-  if (!items || (items && items.length === 0)) {
+  if (!items || items?.length === 0) {
     return <></>
   }
   return (

package/src/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,7 +1,6 @@
 @layer kz-components {
   .srOnly {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;