@kaizen/components 3.0.3 → 3.0.5

package/locales/kk-KZ.json

@@ -11,222 +11,222 @@
   },
   "date.validation.invalidDate" : {
     "description" : "Error message when the user enters an invalid date and we do not know their input value",
-    "message" : "Date is invalid"
+    "message" : "Күн жарамсыз"
   },
   "date.validation.invalidDateWithValue" : {
     "description" : "Error message when the user enters an invalid date and we know their input value",
-    "message" : "{inputValue} is an invalid date"
+    "message" : "{inputValue} — жарамсыз күн"
   },
   "date.validation.rangeEndBeforeRangeStart" : {
     "description" : "Error message when the user tries to select an end date earlier than the start date",
-    "message" : "Cannot be earlier than the selection in \"{startDateFieldLabel}\""
+    "message" : "«{startDateFieldLabel}» ішіндегі таңдаудан бұрын болмауы керек"
   },
   "date.validation.unavailableDate" : {
     "description" : "Error message when the user tries to select a date that is unavailable",
-    "message" : "{inputValue} is not available, try another date"
+    "message" : "{inputValue} қолжетімді емес, басқа күнді таңдап көріңіз"
   },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
-    "message" : "Input format"
+    "message" : "Енгізу форматы"
   },
   "datePicker.calendarLabelDescription" : {
     "description" : "Label for the search input",
-    "message" : "Select date from calendar for:"
+    "message" : "Күнтізбеден күнді таңдаңыз:"
   },
   "filterBar.addFiltersMenu.buttonLabel" : {
     "description" : "Menu button label to show additional available filter options",
-    "message" : "Add filters"
+    "message" : "Сүзгілерді қосу"
   },
   "filterBar.clearAllButton.ariaLabel" : {
     "description" : "Button aria-label to clear all values within the filter bar",
-    "message" : "Clear all filters"
+    "message" : "Барлық сүзгіні тазалау"
   },
   "filterBar.clearAllButton.label" : {
     "description" : "Button label to clear all values within the filter bar",
-    "message" : "Clear all"
+    "message" : "Барлығын тазалау"
   },
   "filterButton.removable.removeButtonLabel" : {
     "description" : "Button label to remove a single filter from the filter bar",
-    "message" : "Remove filter - {filterLabel}"
+    "message" : "Сүзгіні алып тастау — {filterLabel}"
   },
   "filterDatePickerDateInputField.dateInputLabelFallback" : {
     "description" : "Default label for date input field",
-    "message" : "Date"
+    "message" : "Күні"
   },
   "filterDateRangePicker.dateFrom" : {
     "description" : "Label for the 'Date from' field",
-    "message" : "Date from"
+    "message" : "Күні"
   },
   "filterDateRangePicker.dateTo" : {
     "description" : "Label for the 'date to' field",
-    "message" : "Date to"
+    "message" : "Күні"
   },
   "filterMultiSelectClearButton.label" : {
     "description" : "Clear button label for filter multi-select",
-    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+    "message" : "<VisuallyHidden>Таңдауларды</VisuallyHidden> тазалау"
   },
   "filterMultiSelectMultiSelectOption.available" : {
     "description" : "Number of filter items available",
-    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> қолжетімді</VisuallyHidden>"
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
-    "message" : "Filter options by search query"
+    "message" : "Іздеу сұрауы бойынша сүзгілеу нұсқалары"
   },
   "filterMultiSelectSearchInput.placeholder" : {
     "description" : "Placeholder for the search input",
-    "message" : "Search…"
+    "message" : "Ізделіп жатыр..."
   },
   "filterMultiSelectSelectAllButton.label" : {
     "description" : "Select all button in filter multi select",
-    "message" : "Select all"
+    "message" : "Барлығын таңдау"
   },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
-    "message" : "Clear search"
+    "message" : "Іздеуді тазалау"
   },
   "kz.rte.bold" : {
     "description" : "Label for the \"Bold\" button in a text editor",
-    "message" : "Bold"
+    "message" : "Қалың"
   },
   "kz.rte.bullet_list" : {
     "description" : "Label for the \"Bullet list\" button in a text editor",
-    "message" : "Bullet list"
+    "message" : "Белгіленген тізім"
   },
   "kz.rte.decrease_indent" : {
     "description" : "Label for the \"Decrease indent\" button in a text editor",
-    "message" : "Decrease indent"
+    "message" : "Шегіністі азайту"
   },
   "kz.rte.increase_indent" : {
     "description" : "Label for the \"Increase indent\" button in a text editor",
-    "message" : "Increase indent"
+    "message" : "Шегіністі ұлғайту"
   },
   "kz.rte.italic" : {
     "description" : "Label for the \"Italic\" button in a text editor",
-    "message" : "Italic"
+    "message" : "Көлбеу"
   },
   "kz.rte.link" : {
     "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
-    "message" : "Link"
+    "message" : "Сілтеме"
   },
   "kz.rte.numbered_list" : {
     "description" : "Label for the \"Numbered list\" button in a text editor",
-    "message" : "Numbered list"
+    "message" : "Нөмірленген тізім"
   },
   "kz.rte.toolbar.aria_label" : {
     "description" : "Label for the text formatting toolbar in a Rich Text Editor",
-    "message" : "Text formatting"
+    "message" : "Мәтінді форматтау"
   },
   "kz.rte.underline" : {
     "description" : "Label for the \"Underline\" button in a text editor",
-    "message" : "Underline"
+    "message" : "Астын сызу"
   },
   "kzErrorPage" : {
     "description" : "Label for contact button",
-    "message" : "Contact support"
+    "message" : "Қолдау көрсету қызметіне хабарласу"
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Problem loading page right now. Try again or head home."
+    "message" : "Қазір бетті жүктеуге қатысты ақау бар. Әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Problem loading page"
+    "message" : "Бетті жүктеу кезінде ақау пайда болды"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home"
+    "message" : "Осы бетті көре алатыныңызды тексере алмаймыз. Қайтып оралып, әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.401.title" : {
     "description" : "Main title for page",
-    "message" : "You can't view this page"
+    "message" : "Бұл бетті көру мүмкін емес"
   },
   "kzErrorPage.403.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home"
+    "message" : "Осы бетті көру үшін рұқсатыңыз жоқ сияқты. Қайтып оралып, әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.403.title" : {
     "description" : "Main title for page",
-    "message" : "You can't view this page"
+    "message" : "Бұл бетті көру мүмкін емес"
   },
   "kzErrorPage.404.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home"
+    "message" : "Кешіріңіз, бірақ сіз іздеп жатқан бетті таба алмадық. Қайтып оралып, әрекетті қайталап көріңіз немесе Басты бетке өтіңіз."
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Page not found"
+    "message" : "Бет табылмады"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
+    "message" : "Жүйемізде ақау бар, сондықтан бұл бетті көрсету мүмкін емес. Қайтып оралып, әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.413.title" : {
     "description" : "Main title of page",
-    "message" : "Something's gone wrong on our side"
+    "message" : "Біз жақтан бірдеңе дұрыс болмады"
   },
   "kzErrorPage.422.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry but your change couldn't be made. Go back and try again, or head to Home"
+    "message" : "Өзгеріс жасау мүмкін болмайды. Қайтып оралып, әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Change couldn't be made"
+    "message" : "Өзгертуді енгізу мүмкін болмады"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
+    "message" : "Жүйемізде ақау бар, сондықтан бұл бетті көрсету мүмкін емес. Қайтып оралып, әрекетті қайталап көріңіз немесе «Басты бет» бөліміне өтіңіз."
   },
   "kzErrorPage.500.title" : {
     "description" : "Main title of page",
-    "message" : "Something's gone wrong on our side"
+    "message" : "Біз жақтан бірдеңе дұрыс болмады"
   },
   "kzErrorPage.502.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry about this. The best thing to do is go back and try again."
+    "message" : "Осы үшін кешірім сұраймыз. Қайта оралып, әрекетті қайталап көруді ұсынамыз."
   },
   "kzErrorPage.502.title" : {
     "description" : "Main title of page",
-    "message" : "You can't view this page"
+    "message" : "Бұл бетті көру мүмкін емес"
   },
   "kzErrorPage.503.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry about this. The best thing to do is go back and try again."
+    "message" : "Кешірім сұраймыз. Қайта оралып, әрекетті қайталап көруді ұсынамыз."
   },
   "kzErrorPage.503.title" : {
     "description" : "Main title of page",
-    "message" : "You can't view this page"
+    "message" : "Бұл бетті көру мүмкін емес"
   },
   "kzErrorPage.504.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Sorry about this. The best thing to do is go back and try again."
+    "message" : "Кешірім сұраймыз. Қайта оралып, әрекетті қайталап көруді ұсынамыз."
   },
   "kzErrorPage.504.title" : {
     "description" : "Main title of page",
-    "message" : "You can't view this page"
+    "message" : "Бұл бетті көру мүмкін емес"
   },
   "kzErrorPage.errorCode" : {
-    "message" : "Error code {code}"
+    "message" : "Қате коды: {code}"
   },
   "kzErrorPage.goToHome" : {
     "description" : "Home button label",
-    "message" : "Go to Home"
+    "message" : "Басты бетке оралу"
   },
   "kzGenericTile.infoButtonLabel" : {
     "description" : "Prompts user to interact with button to reveal more information",
-    "message" : "View more information:"
+    "message" : "Қосымша ақпаратты қарау:"
   },
   "kzGenericTile.infoButtonReturnLabel" : {
     "description" : "Prompts user to interact with button to hide information",
-    "message" : "Hide information:"
+    "message" : "Ақпаратты жасыру:"
   },
   "kzTitleBlock.combinedOverflowMenuLabel" : {
     "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
-    "message" : "Open combined secondary and overflow menu"
+    "message" : "Біріктірілген қосалқы және қосымша мәзірді ашу"
   },
   "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
     "description" : "Label for the dropdown menu which displays the default action item",
-    "message" : "Open default action overflow menu"
+    "message" : "Әдепкі әрекеттің қосымша мәзірін ашу"
   },
   "kzTitleBlock.hamburgerMenuLabel" : {
     "description" : "Label for the dropdown menu which displays navigation items",
@@ -234,26 +234,26 @@
   },
   "kzTitleBlock.overflowMenuAriaLabel" : {
     "description" : "Aria Label for the dropdown menu which displays additional action items",
-    "message" : "Opens overflow menu"
+    "message" : "Қосымша мәзірді ашады"
   },
   "kzTitleBlock.overflowMenuLabel" : {
     "description" : "Label for the dropdown menu which displays additional action items",
-    "message" : "Menu"
+    "message" : "Мәзір"
   },
   "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
     "description" : "Label for the dropdown menu which displays additional actions",
-    "message" : "Open secondary and overflow menu"
+    "message" : "Қосымша және артық мәзірді ашыңыз"
   },
   "select.clearButtonAlt" : {
     "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
-    "message" : "Clear selection: {field}"
+    "message" : "Таңдауды тазалау: {field}"
   },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
-    "message" : "Show suggestions for {field}"
+    "message" : "{field} үшін ұсыныстарды көрсету"
   },
   "singleSelect.clearButtonAlt_v2" : {
     "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
-    "message" : "Clear selection: {field}"
+    "message" : "Таңдауды тазалау: {field}"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -112,13 +112,13 @@
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.11.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.6",
+    "prosemirror-view": "^1.41.7",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.7",
-    "react-focus-on": "^3.10.1",
+    "react-focus-on": "^3.10.2",
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
@@ -130,8 +130,8 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.0.0",
-    "@cultureamp/package-bundler": "^2.4.4",
+    "@cultureamp/i18n-react-intl": "^4.1.0",
+    "@cultureamp/package-bundler": "^4.0.1",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -140,6 +140,7 @@
     "@types/uuid": "^11.0.0",
     "autoprefixer": "^10.4.27",
     "concat-cli": "^4.0.0",
+    "cssnano": "^7.1.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",

package/src/Filter/Filter/Filter.tsx

@@ -56,6 +56,7 @@ export const Filter = ({
       })}
       {isRefLoaded && isOpen && (
         <FocusOn
+          preventScrollOnFocus
           scrollLock={false}
           onClickOutside={(): void => setIsOpen(false)}
           onEscapeKey={(): void => setIsOpen(false)}

package/src/Focusable/Focusable.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, type HTMLAttributes, type ReactNode } from 'react'
 import classnames from 'classnames'
 import { useFocusable, type FocusableOptions } from 'react-aria'
-import styles from './Focusable.module.scss'
+import styles from './Focusable.module.css'
 
 export type FocusableProps = {
   children: ReactNode

package/src/Menu/Menu.module.css

@@ -1,14 +1,13 @@
 @layer kz-components {
   .menu {
-    background-color: var(--color-white);
     color: var(--color-purple-800);
     width: 248px;
+    flex: 1 1 auto;
+    min-height: 0;
     max-height: 22rem;
     overflow: auto;
     padding-block: var(--spacing-6);
     outline: none;
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--shadow-large-box-shadow);
   }
 
   .menu :global(.react-aria-Header) {

package/src/Menu/MenuPopover.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .menuPopover {
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-large-box-shadow);
+    background-color: var(--color-white);
+  }
+}

package/src/Menu/MenuPopover.tsx

@@ -1,5 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Popover, type PopoverProps } from 'react-aria-components'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import styles from './MenuPopover.module.css'
 
 export type MenuPopoverProps = PopoverProps
 
@@ -7,6 +9,8 @@ export type MenuPopoverProps = PopoverProps
  * Overlay element for holding a <Menu>
  */
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
-  (props, ref): JSX.Element => <Popover ref={ref} {...props} />,
+  ({ className, ...props }, ref): JSX.Element => (
+    <Popover ref={ref} className={mergeClassNames(styles.menuPopover, className)} {...props} />
+  ),
 )
 MenuPopover.displayName = 'MenuPopover'

package/src/SearchField/SearchField.module.css

@@ -0,0 +1,6 @@
+@layer kz-components {
+  .label {
+    display: block;
+    margin-bottom: var(--spacing-xs);
+  }
+}

package/src/SearchField/SearchField.tsx

@@ -1,7 +1,7 @@
 import React, { useId } from 'react'
 import { InputSearch, type InputSearchProps } from '~components/Input/InputSearch'
 import { Label } from '~components/Label'
-import styles from './SearchField.module.scss'
+import styles from './SearchField.module.css'
 
 export type SearchFieldProps = Omit<InputSearchProps, 'id'> & {
   id?: string

package/src/Slider/Slider.module.css

@@ -0,0 +1,44 @@
+@layer kz-components {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .labelWrapper {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .label {
+    margin-bottom: var(--spacing-4);
+  }
+
+  @media (width >= 768px) {
+    .labelInline {
+      &.wrapper {
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .labelWrapper {
+        flex: 1;
+      }
+
+      .inputWrapper {
+        flex-basis: 50%;
+      }
+    }
+  }
+
+  .descriptionDisabled {
+    opacity: 0.3;
+  }
+
+  .readOnlyMessage {
+    text-align: center;
+    font-family: var(--typography-paragraph-small-font-family);
+    font-size: var(--typography-paragraph-small-font-size);
+    font-weight: var(--typography-paragraph-bold-font-weight);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

package/src/Slider/Slider.tsx

@@ -4,7 +4,7 @@ import { FieldGroup } from '~components/FieldGroup'
 import { InputRange, type InputRangeProps } from '~components/Input/InputRange'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
-import styles from './Slider.module.scss'
+import styles from './Slider.module.css'
 
 export type SliderFieldProps = {
   id?: string

package/src/TimeField/TimeField.module.css

@@ -0,0 +1,68 @@
+@layer kz-components {
+  :root {
+    --input-height: 48px;
+  }
+
+  .wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    color: var(--color-purple-800);
+  }
+
+  .label {
+    display: block;
+    margin-bottom: var(--spacing-6);
+  }
+
+  .input {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--color-white);
+    background-clip: padding-box;
+    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
+    border-radius: var(--border-solid-border-radius);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    padding: 0 var(--spacing-sm);
+    height: var(--input-height);
+    width: 100%;
+    box-sizing: border-box;
+
+    &:hover,
+    &:focus-within {
+      border-color: var(--color-gray-600);
+      background-color: var(--color-gray-200);
+    }
+  }
+
+  .input:focus-within .focusRing {
+    --focus-ring-offset: 3px;
+
+    position: absolute;
+    background: transparent;
+    border-radius: var(--border-focus-ring-border-radius);
+    border-width: var(--border-focus-ring-border-width);
+    border-style: var(--border-focus-ring-border-style);
+    border-color: var(--color-blue-500);
+    inset: calc(-1 * var(--focus-ring-offset));
+    pointer-events: none;
+  }
+
+  .isDisabled {
+    pointer-events: none;
+    background-color: transparent;
+    border-color: var(--color-gray-500);
+    opacity: 0.3;
+  }
+
+  .error {
+    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-red-500);
+  }
+}

package/src/TimeField/TimeField.tsx

@@ -9,7 +9,7 @@ import { Label } from '~components/Label'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { TimeSegment } from './subcomponents/TimeSegment'
 import { type StatusType, type TimeValue, type ValueType } from './types'
-import styles from './TimeField.module.scss'
+import styles from './TimeField.module.css'
 
 type OmittedTimeFieldProps = 'errorMessage' | 'value' | 'onChange' | 'label' | 'hideTimeZone'
 

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

@@ -0,0 +1,49 @@
+@layer kz-components {
+  /*
+  Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+  This (in combination with the invisible character ​) creates boundaries
+  for the element.
+  https://stackoverflow.com/a/34445203
+  */
+  .timeSegmentWrapper {
+    white-space: nowrap;
+  }
+
+  .timeSegment {
+    display: block;
+    text-align: end;
+    background-color: var(--color-gray-300);
+    border-radius: 3px;
+    color: var(--color-purple-800);
+
+    &:hover {
+      background-color: var(--color-white);
+    }
+
+    &:focus-visible {
+      color: var(--color-white);
+      background: var(--color-blue-500);
+      outline: none;
+    }
+  }
+
+  .hasPadding {
+    padding: 0 4px;
+  }
+
+  .placeholder {
+    color: rgb(var(--color-purple-800-rgb), 0.7);
+  }
+
+  .literal {
+    background: none;
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  .dayPeriod {
+    margin-right: 4px;
+  }
+}

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

@@ -3,7 +3,7 @@ import { useDateSegment } from '@react-aria/datepicker'
 import { type DateFieldState, type DateSegment } from '@react-stately/datepicker'
 import classnames from 'classnames'
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText'
-import styles from './TimeSegment.module.scss'
+import styles from './TimeSegment.module.css'
 
 export type TimeSegmentProps = {
   segment: DateSegment

package/dist/cjs/src/Focusable/Focusable.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__zd-5E"
-};
-module.exports = styles;