@kaizen/components 1.73.12 → 1.74.0

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var focus = require('@react-aria/focus');
 var listbox = require('@react-aria/listbox');
 var utils = require('@react-aria/utils');
@@ -38,6 +39,7 @@ var MultiSelectOption = function (_a) {
     isFocusVisible = _f.isFocusVisible,
     focusProps = _f.focusProps;
   var countElementId = React.useId();
+  var formatNumber = i18nReactIntl.useIntl().formatNumber;
   return React__default.default.createElement("li", tslib.__assign({}, utils.mergeProps(optionProps, focusProps), {
     ref: ref,
     className: classnames__default.default(MultiSelectOption_module.option, classNameOverride, isSelected && MultiSelectOption_module.isSelected, isFocusVisible && MultiSelectOption_module.isFocusVisible, isDisabled && MultiSelectOption_module.isDisabled),
@@ -51,9 +53,22 @@ var MultiSelectOption = function (_a) {
   })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React__default.default.createElement("span", {
     id: countElementId,
     className: MultiSelectOption_module.badgeContainer
-  }, React__default.default.createElement(Badge.Badge, {
-    classNameOverride: MultiSelectOption_module.badge
-  }, item.value.count), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, " available")));
+  }, React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+    defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
+    id: "filterMultiSelectMultiSelectOption.available",
+    description: "Number of filter items available",
+    values: {
+      count: formatNumber(parseInt(item.value.count)),
+      Badge: function (children) {
+        return React__default.default.createElement(Badge.Badge, {
+          classNameOverride: MultiSelectOption_module.badge
+        }, children);
+      },
+      VisuallyHidden: function (children) {
+        return React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children);
+      }
+    }
+  })));
 };
 MultiSelectOption.displayName = 'FilterMultiSelect.Option';
 exports.MultiSelectOption = MultiSelectOption;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
 require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
@@ -31,7 +32,16 @@ var ClearButton = function () {
         }));
       }
     }
-  }, "Clear", React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, " selections"));
+  }, React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+    defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
+    id: "filterMultiSelectClearButton.label",
+    description: "Clear button label for filter multi-select",
+    values: {
+      VisuallyHidden: function (children) {
+        return React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children);
+      }
+    }
+  }));
 };
 ClearButton.displayName = 'FilterMultiSelect.ClearButton';
 exports.ClearButton = ClearButton;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 var SelectionProvider = require('../../../context/SelectionProvider/SelectionProvider.cjs');
@@ -20,6 +21,7 @@ var SelectAllButton = function () {
   var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function (key) {
     return !disabledOptions.includes(key);
   });
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   return React__default.default.createElement("button", {
     type: "button",
     className: classnames__default.default(SelectionControlButton_module.button, selectionState.selectionManager.isSelectAll && SelectionControlButton_module.isDisabled),
@@ -27,7 +29,11 @@ var SelectAllButton = function () {
     onClick: function () {
       return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(tslib.__spreadArray(tslib.__spreadArray([], selectedOptions, true), filteredOptions, true));
     }
-  }, "Select all");
+  }, formatMessage({
+    defaultMessage: 'Select all',
+    id: 'filterMultiSelectSelectAllButton.label',
+    description: 'Select all button in filter multi select'
+  }));
 };
 SelectAllButton.displayName = 'FilterMultiSelect.SelectAllButton';
 exports.SelectAllButton = SelectAllButton;

package/dist/cjs/TimeField/TimeField.cjs

@@ -84,7 +84,8 @@ var TimeFieldComponent = function (_a) {
     return React__default.default.createElement(TimeSegment.TimeSegment, {
       key: i,
       segment: segment,
-      state: state
+      state: state,
+      hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
     });
   }), React__default.default.createElement("div", {
     className: TimeField_module.focusRing

package/dist/cjs/TimeField/subcomponents/TimeSegment/TimeSegment.cjs

@@ -15,7 +15,9 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var TimeSegment = function (_a) {
   var segment = _a.segment,
-    state = _a.state;
+    state = _a.state,
+    _b = _a.hasPadding,
+    hasPadding = _b === void 0 ? true : _b;
   var ref = React__default.default.useRef(null);
   var segmentProps = datepicker.useDateSegment(segment, state, ref).segmentProps;
   // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
@@ -26,7 +28,7 @@ var TimeSegment = function (_a) {
     className: TimeSegment_module.timeSegmentWrapper
   }, "\u200B", React__default.default.createElement("span", tslib.__assign({}, segmentProps, {
     ref: ref,
-    className: classnames__default.default(TimeSegment_module.timeSegment, segment.type === 'literal' && TimeSegment_module.literal, segment.isPlaceholder && TimeSegment_module.placeholder, segment.type === 'dayPeriod' && TimeSegment_module.dayPeriod)
+    className: classnames__default.default(TimeSegment_module.timeSegment, segment.type === 'literal' && TimeSegment_module.literal, segment.isPlaceholder && TimeSegment_module.placeholder, segment.type === 'dayPeriod' && TimeSegment_module.dayPeriod, hasPadding && TimeSegment_module.hasPadding)
   }), generateSegmentDisplayText.generateSegmentDisplayText(segment)), "\u200B");
 };
 TimeSegment.displayName = 'TimeSegment';

package/dist/cjs/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.cjs

@@ -3,6 +3,7 @@
 var styles = {
   "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
   "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "hasPadding": "TimeSegment-module_hasPadding__9oYW3",
   "placeholder": "TimeSegment-module_placeholder__j1-gK",
   "literal": "TimeSegment-module_literal__mOkqz",
   "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React, { useId } from 'react';
+import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import { useFocusRing } from '@react-aria/focus';
 import { useOption } from '@react-aria/listbox';
 import { mergeProps } from '@react-aria/utils';
@@ -30,6 +31,7 @@ const MultiSelectOption = /*#__PURE__*/function () {
       isFocusVisible = _f.isFocusVisible,
       focusProps = _f.focusProps;
     var countElementId = useId();
+    var formatNumber = useIntl().formatNumber;
     return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps), {
       ref: ref,
       className: classnames(styles.option, classNameOverride, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.isDisabled),
@@ -43,9 +45,22 @@ const MultiSelectOption = /*#__PURE__*/function () {
     })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && (/*#__PURE__*/React.createElement("span", {
       id: countElementId,
       className: styles.badgeContainer
-    }, /*#__PURE__*/React.createElement(Badge, {
-      classNameOverride: styles.badge
-    }, item.value.count), /*#__PURE__*/React.createElement(VisuallyHidden, null, " available"))));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
+      id: "filterMultiSelectMultiSelectOption.available",
+      description: "Number of filter items available",
+      values: {
+        count: formatNumber(parseInt(item.value.count)),
+        Badge: function (children) {
+          return /*#__PURE__*/React.createElement(Badge, {
+            classNameOverride: styles.badge
+          }, children);
+        },
+        VisuallyHidden: function (children) {
+          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
+        }
+      }
+    }))));
   };
   MultiSelectOption.displayName = 'FilterMultiSelect.Option';
   return MultiSelectOption;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.mjs

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
 import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
@@ -23,7 +24,16 @@ const ClearButton = /*#__PURE__*/function () {
           }));
         }
       }
-    }, "Clear", /*#__PURE__*/React.createElement(VisuallyHidden, null, " selections"));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
+      id: "filterMultiSelectClearButton.label",
+      description: "Clear button label for filter multi-select",
+      values: {
+        VisuallyHidden: function (children) {
+          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
+        }
+      }
+    }));
   };
   ClearButton.displayName = 'FilterMultiSelect.ClearButton';
   return ClearButton;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.mjs

@@ -1,5 +1,6 @@
 import { __spreadArray } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../../context/SelectionProvider/SelectionProvider.mjs';
@@ -12,6 +13,7 @@ const SelectAllButton = /*#__PURE__*/function () {
     var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function (key) {
       return !disabledOptions.includes(key);
     });
+    var formatMessage = useIntl().formatMessage;
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: classnames(styles.button, selectionState.selectionManager.isSelectAll && styles.isDisabled),
@@ -19,7 +21,11 @@ const SelectAllButton = /*#__PURE__*/function () {
       onClick: function () {
         return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(__spreadArray(__spreadArray([], selectedOptions, true), filteredOptions, true));
       }
-    }, "Select all");
+    }, formatMessage({
+      defaultMessage: 'Select all',
+      id: 'filterMultiSelectSelectAllButton.label',
+      description: 'Select all button in filter multi select'
+    }));
   };
   SelectAllButton.displayName = 'FilterMultiSelect.SelectAllButton';
   return SelectAllButton;

package/dist/esm/TimeField/TimeField.mjs

@@ -79,7 +79,8 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       return /*#__PURE__*/React.createElement(TimeSegment, {
         key: i,
         segment: segment,
-        state: state
+        state: state,
+        hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
       });
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.focusRing

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -7,7 +7,9 @@ import styles from './TimeSegment.module.scss.mjs';
 const TimeSegment = /*#__PURE__*/function () {
   const TimeSegment = function (_a) {
     var segment = _a.segment,
-      state = _a.state;
+      state = _a.state,
+      _b = _a.hasPadding,
+      hasPadding = _b === void 0 ? true : _b;
     var ref = React.useRef(null);
     var segmentProps = useDateSegment(segment, state, ref).segmentProps;
     // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
@@ -18,7 +20,7 @@ const TimeSegment = /*#__PURE__*/function () {
       className: styles.timeSegmentWrapper
     }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
       ref: ref,
-      className: classnames(styles.timeSegment, segment.type === 'literal' && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === 'dayPeriod' && styles.dayPeriod)
+      className: classnames(styles.timeSegment, segment.type === 'literal' && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === 'dayPeriod' && styles.dayPeriod, hasPadding && styles.hasPadding)
     }), generateSegmentDisplayText(segment)), "\u200B");
   };
   TimeSegment.displayName = 'TimeSegment';

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.mjs

@@ -1,6 +1,7 @@
 var styles = {
   "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
   "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "hasPadding": "TimeSegment-module_hasPadding__9oYW3",
   "placeholder": "TimeSegment-module_placeholder__j1-gK",
   "literal": "TimeSegment-module_literal__mOkqz",
   "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"

package/dist/styles.css

@@ -10408,7 +10408,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .TimeSegment-module_timeSegment__eXb0c {
   display: block;
-  padding: 0 4px;
   text-align: end;
   background-color: var(--color-gray-300, #eaeaec);
   border-radius: 3px;
@@ -10423,6 +10422,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline: none;
 }
 
+.TimeSegment-module_hasPadding__9oYW3 {
+  padding: 0 4px;
+}
+
 .TimeSegment-module_placeholder__j1-gK {
   color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
 }

package/dist/types/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type OverrideClassName } from "../types/OverrideClassName";
-type BadgeCommonProps = {
-    children?: string;
+type BadgeCommonProps = PropsWithChildren<{
     /**
      * The "dark" variant is no longer in the UI kit
      */
@@ -14,7 +13,7 @@ type BadgeCommonProps = {
      * Supports "small" and "large" sizes - defaults to "small"
      */
     size?: 'small' | 'large';
-} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
+}> & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
 type DotProps = Omit<BadgeCommonProps, 'variant'> & {
     children?: never;
     variant: 'dot';

package/dist/types/TimeField/subcomponents/TimeSegment/TimeSegment.d.ts

@@ -2,8 +2,9 @@ import { type DateFieldState, type DateSegment } from '@react-stately/datepicker
 export type TimeSegmentProps = {
     segment: DateSegment;
     state: DateFieldState;
+    hasPadding?: boolean;
 };
 export declare const TimeSegment: {
-    ({ segment, state }: TimeSegmentProps): JSX.Element;
+    ({ segment, state, hasPadding, }: TimeSegmentProps): JSX.Element;
     displayName: string;
 };

package/locales/en.json

@@ -62,6 +62,14 @@
     "description": "Label for the 'date to' field",
     "message": "Date to"
   },
+  "filterMultiSelectClearButton.label": {
+    "description": "Clear button label for filter multi-select",
+    "message": "Clear<VisuallyHidden> selections</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available": {
+    "description": "Number of filter items available",
+    "message": "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label": {
     "description": "Label for the search input",
     "message": "Filter options by search query"
@@ -70,6 +78,10 @@
     "description": "Placeholder for the search input",
     "message": "Search…"
   },
+  "filterMultiSelectSelectAllButton.label": {
+    "description": "Select all button in filter multi select",
+    "message": "Select all"
+  },
   "inputSearch.clear": {
     "description": "Label for the clear search button",
     "message": "Clear search"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.12",
+  "version": "1.74.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Badge/Badge.tsx

@@ -1,10 +1,14 @@
-import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
+import React, {
+  useLayoutEffect,
+  useState,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Badge.module.css'
 
-type BadgeCommonProps = {
-  children?: string
+type BadgeCommonProps = PropsWithChildren<{
   /**
    * The "dark" variant is no longer in the UI kit
    */
@@ -17,7 +21,8 @@ type BadgeCommonProps = {
    * Supports "small" and "large" sizes - defaults to "small"
    */
   size?: 'small' | 'large'
-} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>
+}> &
+  OverrideClassName<HTMLAttributes<HTMLSpanElement>>
 
 type DotProps = Omit<BadgeCommonProps, 'variant'> & {
   children?: never

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -82,20 +82,20 @@ describe('<MultiSelectOptionWrapper /> - Visual content', () => {
         <MultiSelectOptionWrapper
           item={{
             ...itemMock,
-            value: { ...itemMock.value, count: 'count-mock' },
+            value: { ...itemMock.value, count: '14' },
           }}
         />,
       )
     })
 
     it('shows the count in the badge', () => {
-      const badge = screen.getByText('count-mock')
+      const badge = screen.getByText('14')
       expect(badge).toBeInTheDocument()
     })
 
     it('has aria-description to describe the count are available for this option', () => {
       const option = screen.getByLabelText('label-mock')
-      expect(option).toHaveAccessibleDescription('count-mock available')
+      expect(option).toHaveAccessibleDescription('14 available')
     })
   })
 })

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from 'react'
+import { FormattedMessage, useIntl } from '@cultureamp/i18n-react-intl'
 import { useFocusRing } from '@react-aria/focus'
 import { useOption } from '@react-aria/listbox'
 import { mergeProps } from '@react-aria/utils'
@@ -28,6 +29,7 @@ export const MultiSelectOption = ({
   // focus ring for accessibility
   const { isFocusVisible, focusProps } = useFocusRing()
   const countElementId = useId()
+  const { formatNumber } = useIntl()
 
   return (
     <li
@@ -50,8 +52,20 @@ export const MultiSelectOption = ({
       {item.rendered}
       {item.value?.count && (
         <span id={countElementId} className={styles.badgeContainer}>
-          <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>
-          <VisuallyHidden> available</VisuallyHidden>
+          <FormattedMessage
+            defaultMessage="<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+            id="filterMultiSelectMultiSelectOption.available"
+            description="Number of filter items available"
+            values={{
+              count: formatNumber(parseInt(item.value.count)),
+              Badge: (children: React.ReactNode) => (
+                <Badge classNameOverride={styles.badge}>{children}</Badge>
+              ),
+              VisuallyHidden: (children: React.ReactNode) => (
+                <VisuallyHidden>{children}</VisuallyHidden>
+              ),
+            }}
+          />
         </span>
       )}
     </li>

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormattedMessage } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { VisuallyHidden } from '~components/VisuallyHidden'
 import { useSelectionContext } from '../../../context'
@@ -28,7 +29,16 @@ export const ClearButton = (): JSX.Element => {
         // TODO: add announcement here to inform selection cleared
       }
     >
-      Clear<VisuallyHidden> selections</VisuallyHidden>
+      <FormattedMessage
+        defaultMessage="Clear<VisuallyHidden> selections</VisuallyHidden>"
+        id="filterMultiSelectClearButton.label"
+        description="Clear button label for filter multi-select"
+        values={{
+          VisuallyHidden: (children: React.ReactNode) => (
+            <VisuallyHidden>{children}</VisuallyHidden>
+          ),
+        }}
+      />
     </button>
   )
 }

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { useSelectionContext } from '../../../context'
 import styles from '../SelectionControlButton.module.scss'
@@ -11,6 +12,8 @@ export const SelectAllButton = (): JSX.Element => {
     (key) => !disabledOptions.includes(key),
   )
 
+  const { formatMessage } = useIntl()
+
   return (
     <button
       type="button"
@@ -26,7 +29,11 @@ export const SelectAllButton = (): JSX.Element => {
         // TODO: add announcement here to inform all selected
       }
     >
-      Select all
+      {formatMessage({
+        defaultMessage: 'Select all',
+        id: 'filterMultiSelectSelectAllButton.label',
+        description: 'Select all button in filter multi select',
+      })}
     </button>
   )
 }

package/src/TimeField/TimeField.tsx

@@ -108,9 +108,17 @@ const TimeFieldComponent = ({
             state.validationState === 'invalid' && styles.error,
           )}
         >
-          {state.segments.map((segment, i) => (
-            <TimeSegment key={i} segment={segment} state={state} />
-          ))}
+          {state.segments.map((segment, i) => {
+            return (
+              <TimeSegment
+                key={i}
+                segment={segment}
+                state={state}
+                hasPadding={![8294, 8297].includes(segment.text.charCodeAt(0))}
+                // ^react-aria includes these characters to ensure correct RTL behaviour, but we want to avoid these adding random spacing
+              />
+            )
+          })}
           <div className={styles.focusRing} />
         </div>
       </div>

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss

@@ -10,7 +10,6 @@
 
 .timeSegment {
   display: block;
-  padding: 0 4px;
   text-align: end;
   background-color: $color-gray-300;
   border-radius: 3px;
@@ -27,6 +26,10 @@
   }
 }
 
+.hasPadding {
+  padding: 0 4px;
+}
+
 .placeholder {
   color: rgba($color-purple-800-rgb, 0.7);
 }

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.tsx

@@ -8,9 +8,14 @@ import styles from './TimeSegment.module.scss'
 export type TimeSegmentProps = {
   segment: DateSegment
   state: DateFieldState
+  hasPadding?: boolean
 }
 
-export const TimeSegment = ({ segment, state }: TimeSegmentProps): JSX.Element => {
+export const TimeSegment = ({
+  segment,
+  state,
+  hasPadding = true,
+}: TimeSegmentProps): JSX.Element => {
   const ref = React.useRef<HTMLDivElement>(null)
   const { segmentProps } = useDateSegment(segment, state, ref)
 
@@ -29,6 +34,7 @@ export const TimeSegment = ({ segment, state }: TimeSegmentProps): JSX.Element =
           segment.type === 'literal' && styles.literal,
           segment.isPlaceholder && styles.placeholder,
           segment.type === 'dayPeriod' && styles.dayPeriod,
+          hasPadding && styles.hasPadding,
         )}
       >
         {generateSegmentDisplayText(segment)}

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -62,8 +62,11 @@ export const OnButton: Story = {
 
     await step('Escape closes', async () => {
       await userEvent.tab() // focus
+      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
       await userEvent.keyboard('{Escape}')
-      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull(), {
+        timeout: 5000,
+      })
       await userEvent.tab() // unfocus
     })
   },