@kaizen/components 0.0.0-canary-debug-kaizen-provider-final-20250107212529 → 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-test-20250129223936

package/src/Content/Content.module.scss

@@ -8,5 +8,6 @@
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
     margin: 0 $content-margin-width-on-medium-and-small;
+    width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small});
   }
 }

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css

@@ -0,0 +1,3 @@
+.filterContents {
+  padding: var(--spacing-24);
+}

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterContents.module.scss'
+import styles from './FilterContents.module.css'
 
 export type FilterContentsProps = {
   children: React.ReactNode

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css

@@ -0,0 +1,7 @@
+.filterPopover {
+  background-color: var(--color-white);
+  z-index: 1010;
+  box-shadow: var(--shadow-large-box-shadow);
+  border-radius: var(--border-borderless-border-radius);
+  display: inline-flex;
+}

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.tsx

@@ -3,7 +3,7 @@ import { type Options } from '@popperjs/core'
 import classnames from 'classnames'
 import { usePopper } from 'react-popper'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FilterPopover.module.scss'
+import styles from './FilterPopover.module.css'
 
 export type FilterPopoverProps = {
   children: React.ReactNode

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Button } from '~components/Button'
 import { useFilterBarContext } from '../../context/FilterBarContext'
-import styles from './ClearAllButton.module.scss'
+import styles from './ClearAllButton.module.css'
 
 export const ClearAllButton = (): JSX.Element => {
   const { formatMessage } = useIntl()

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -4,7 +4,7 @@ import * as FilterDRPStories from './FilterDateRangePicker.stories'
 
 <Meta of={FilterDRPStories} />
 
-# Filter
+# FilterDateRangePicker
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterDateRangePicker"

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -4,7 +4,7 @@ import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
 <Meta of={FilterMultiSelectStories} />
 
-# Filter Bar
+# FilterMultiSelect
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"

package/src/Filter/FilterSelect/FilterSelect.module.css

@@ -0,0 +1,8 @@
+/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+.filterContents.filterContents {
+  box-sizing: border-box;
+  min-width: 12.25rem; /* 196px */
+  max-width: 25rem; /* 400px */
+  overflow: auto;
+  padding: unset; /* Padding is added by <SelectPopoverContents> */
+}

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -17,7 +17,7 @@ import { getDisabledKeysFromItems } from '~components/__rc__/Select/utils/getDis
 import { transformSelectItemToCollectionElement } from '~components/__rc__/Select/utils/transformSelectItemToCollectionElement'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type SelectItem, type SelectOption } from './types'
-import styles from './FilterSelect.module.scss'
+import styles from './FilterSelect.module.css'
 
 type OmittedAriaSelectProps =
   | 'label'

package/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { renderTriggerControls } from '~components/Filter/_docs/controls/renderTriggerControls'
+import { Well } from '~components/Well'
 import { FilterButton } from '../../FilterButton'
 import { FilterSelect } from '../FilterSelect'
 import { type SelectOption } from '../types'
@@ -100,3 +101,44 @@ export const AdditionalProperties: Story = {
   },
   name: 'Additional option properties',
 }
+
+/**
+ * Extend the option type to have additional properties to use for rendering.
+ */
+export const FilterSelectBelowPageContent: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return (
+      <div>
+        <Well color="gray" style={{ height: '1500px' }}>
+          Page content above the FilterSelect
+        </Well>
+        <FilterSelect
+          label="Label"
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          renderTrigger={(triggerProps) => <FilterButton {...triggerProps} />}
+          items={groupedMockItems}
+        >
+          {({ items }): JSX.Element[] =>
+            items.map((item) => {
+              if (item.type === 'item') {
+                return (
+                  <FilterSelect.Option
+                    key={item.key}
+                    item={{
+                      ...item,
+                    }}
+                  />
+                )
+              }
+              return <FilterSelect.ItemDefaultRender key={item.key} item={item} />
+            })
+          }
+        </FilterSelect>
+      </div>
+    )
+  },
+  name: 'FilterSelect below page content',
+}

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx

@@ -3,15 +3,18 @@ import { useToastNotificationContext } from '../context/ToastNotificationContext
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
 import styles from './ToastNotificationsList.module.scss'
 
+const toastNotificationListId = 'toast-notifications-list'
+
 export const ToastNotificationsList = (): JSX.Element => {
   const { notifications, removeToastNotification } = useToastNotificationContext()
   const [toastContainer, setToastContainer] = useState<Element | null>(null)
 
   useEffect(() => {
-    let container = document.querySelector('[data-testid="toast-notifications-list"]')
+    // this is to ensure that the container is created only once. Regardless of how many KaizenProvider is set up, they will also reuse the same container.
+    let container = document.querySelector(`[id="${toastNotificationListId}"]`)
     if (!container) {
       container = document.createElement('div')
-      container.setAttribute('data-testid', 'toast-notifications-list')
+      container.setAttribute('id', toastNotificationListId)
       container.setAttribute('role', 'status')
       container.className = styles.toastNotificationsList
       document.body.appendChild(container)

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

@@ -4,6 +4,8 @@
 
 .grid {
   list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
   display: grid;
   // the more we shave off the width here,
   // the less the tiles will grow when they lose one from the row

package/src/__rc__/Icon/_docs/Icon--migration-guide.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
+
+<Meta title="Components/Icon/Icon (Future)/Migration Guide" />
+
+# Icon Migration Guide
+
+This is a short guide to assist in migration from the old to new Icon component.
+
+## Codemod
+
+To assist in migration we have created the `upgradeiconv1` codemod. This will loop through the given directory and update all instances of Icon to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#upgradeiconv1) on how to run this within your repository.
+
+For more information on the changes to the API, we recommend referring the <LinkTo pageId="components-icon-icon-future-api-specification--docs">API Specification</LinkTo>.
+
+## Changes to Icon exportNames
+
+The following table outlines the changes to the Icons names and whether the new `isFilled` prop is required. This can be used if you are manually migrating components.
+
+Where `N/A` is shown, this indicates that an equivalent icon does not exist or has been made redundant by the new API, ie:
+
+- `ActionOffIcon` is not needed as the new `ActionOnIcon` (`flash_on`) can be used with the `isFilled` to handle the toggled states.
+- `ActionOffIconActionOffWhiteIcon` is not needed as the API allows for color to be set via `className` or inherited via it's parent element.
+
+You will need to discuss alternative with your design team or reach out in the #help_design_system channel if an equivalent icon does not exist.
+
+<Story of={IconStories.IconTableComparison} />

package/src/__rc__/Icon/_docs/Icon.docs.stories.tsx

@@ -15,6 +15,7 @@ import { ToggleSwitchField } from '~components/ToggleSwitch'
 import { Button } from '~components/__rc__/Button'
 import { Tag } from '~components/__rc__/Tag'
 import { StickerSheet } from '~storybook/components/StickerSheet'
+import { iconMap } from '../../../../codemods/upgradeIconV1/getNewIconPropsFromOldIconName'
 import { iconDefaultSet } from '../constants'
 import { Icon } from '../index'
 import imgInterfaceDont from './assets/interface-dont.png'
@@ -476,3 +477,40 @@ export const TooltipDont: Story = {
     />
   ),
 }
+
+export const IconTableComparison: Story = {
+  render: () => {
+    return (
+      <TableContainer>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderRowCell width={4 / 12} labelText="Old name" />
+            <TableHeaderRowCell width={4 / 12} labelText="New name" />
+            <TableHeaderRowCell width={4 / 12} labelText="isFilled" />
+          </TableRow>
+        </TableHeader>
+        {Array.from(iconMap).map(([key, value]) => (
+          <TableCard key={key}>
+            <TableRow>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {key}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.name ?? 'N/A'}
+                </Text>
+              </TableRowCell>
+              <TableRowCell width={4 / 12}>
+                <Text tag="div" variant="body">
+                  {value?.isFilled ? 'true' : value?.name ? 'false' : 'N/A'}
+                </Text>
+              </TableRowCell>
+            </TableRow>
+          </TableCard>
+        ))}
+      </TableContainer>
+    )
+  },
+}

package/src/__rc__/Menu/MenuItem.tsx

@@ -26,16 +26,14 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
         textValue={determinedTextValue}
         {...props}
       >
-        <>
-          {typeof children === 'string' && icon ? (
-            <div className={styles.flexWrapper}>
-              <span className={styles.iconWrapper}>{icon}</span>
-              {children}
-            </div>
-          ) : (
-            <>{children}</>
-          )}
-        </>
+        {typeof children === 'string' && icon ? (
+          <div className={styles.flexWrapper}>
+            <span className={styles.iconWrapper}>{icon}</span>
+            {children}
+          </div>
+        ) : (
+          children
+        )}
       </RACMenuItem>
     )
   },

package/src/__rc__/Select/Select.spec.tsx

@@ -188,14 +188,24 @@ describe('<Select />', () => {
           })
         })
         it('is closed when hits the escape key', async () => {
-          const { getByRole } = render(<SelectWrapper defaultOpen />)
-          const menu = getByRole('listbox')
+          const { getByRole, queryByRole } = render(<SelectWrapper />)
+          const trigger = getByRole('combobox', {
+            name: 'Mock Label',
+          })
+          await user.tab()
+          await waitFor(() => {
+            expect(trigger).toHaveFocus()
+          })
+          await user.keyboard('{Enter}')
+
           await waitFor(() => {
-            expect(menu).toBeVisible()
+            expect(queryByRole('listbox')).toBeVisible()
           })
+
           await user.keyboard('{Escape}')
+
           await waitFor(() => {
-            expect(menu).not.toBeInTheDocument()
+            expect(queryByRole('listbox')).toBe(null)
           })
         })
       })

package/src/__rc__/Select/hooks/useHasCalculatedListboxPosition.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
+ * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
+ * This now polls to check if the element's position is stable by comparing the first and last position.
+ */
+export const useHasCalculatedListboxPosition = (ref: React.RefObject<HTMLElement>): boolean => {
+  const [hasStablePosition, setHasStablePosition] = useState(false)
+  const [lastYPosition, setLastYPosition] = useState<number | null>(null)
+
+  useEffect(() => {
+    const checkPosition = (): void => {
+      if (ref.current) {
+        const { y } = ref.current.getBoundingClientRect()
+        if (lastYPosition === null) {
+          setLastYPosition(y)
+        } else if (y === lastYPosition && y >= 0) {
+          setHasStablePosition(true)
+        } else {
+          setLastYPosition(y)
+        }
+      }
+    }
+
+    const intervalId = setInterval(() => {
+      if (hasStablePosition) {
+        clearInterval(intervalId)
+        return
+      }
+      checkPosition()
+    }, 1)
+
+    return () => clearInterval(intervalId)
+  }, [ref, lastYPosition, hasStablePosition])
+
+  return hasStablePosition
+}

package/src/__rc__/Select/subcomponents/ListBox/ListBox.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useRef, type HTMLAttributes, type Key, type ReactNode
 import { useListBox, type AriaListBoxOptions } from '@react-aria/listbox'
 import { type SelectState } from '@react-stately/select'
 import classnames from 'classnames'
-import { useIsClientReady } from '~components/__utilities__/useIsClientReady'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { type SelectItem, type SelectOption } from '../../types'
+import { useHasCalculatedListboxPosition } from '../../hooks/useHasCalculatedListboxPosition'
+import { type SelectItem, type SelectItemNode, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'
 
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<
@@ -16,17 +16,38 @@ export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<
   menuProps: AriaListBoxOptions<SelectItem<Option>>
 }
 
-/** A util to retrieve the key of the correct focusable items based of the focus strategy
+/** determines is the first or last key passed in is a section. If not it will return the key, otherwise will return the first option key of that section */
+const getOptionOrSectionKey = (
+  optionKey: SelectOption['value'] | null,
+  state: SelectState<SelectItem<any>>,
+): Key | null => {
+  if (!optionKey) return null
+
+  const option = state.collection.getItem(optionKey) as SelectItemNode | null
+  const optionType = option?.type
+
+  if (optionType === 'section') {
+    const sectionOptions = option?.value?.options
+
+    return sectionOptions ? Array.from(sectionOptions)[0]?.value : null
+  }
+  return optionKey
+}
+
+/** A util to retrieve the key of the correct focusable option based of the focus strategy
  * This is used to determine which element from the collection to focus to on open base on the keyboard event
  * ie: UpArrow will set the focusStrategy to "last"
  */
 const getOptionKeyFromCollection = (state: SelectState<SelectItem<any>>): Key | null => {
   if (state.selectedItem) {
     return state.selectedItem.key
-  } else if (state.focusStrategy === 'last') {
-    return state.collection.getLastKey()
   }
-  return state.collection.getFirstKey()
+
+  if (state.focusStrategy === 'last') {
+    return getOptionOrSectionKey(state.collection.getLastKey(), state)
+  }
+
+  return getOptionOrSectionKey(state.collection.getFirstKey(), state)
 }
 
 /** This makes the use of query selector less brittle in instances where a failed selector is passed in
@@ -47,9 +68,9 @@ export const ListBox = <Option extends SelectOption>({
   classNameOverride,
   ...restProps
 }: SingleListBoxProps<Option>): JSX.Element => {
-  const isClientReady = useIsClientReady()
   const { state } = useSelectContext<Option>()
   const ref = useRef<HTMLUListElement>(null)
+  const hasCalculatedListboxPosition = useHasCalculatedListboxPosition(ref)
   const { listBoxProps } = useListBox(
     {
       ...menuProps,
@@ -62,23 +83,22 @@ export const ListBox = <Option extends SelectOption>({
   )
 
   /**
-   * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
+   * When the Listbox is opened the initial position starts above the window, which can cause the out of the box behaviour in react-aria's listbox to jump a user to the top of the page.
    */
   useEffect(() => {
-    if (isClientReady) {
+    if (hasCalculatedListboxPosition) {
       const optionKey = getOptionKeyFromCollection(state)
       const focusToElement = safeQuerySelector(`[data-key='${optionKey}']`)
 
       if (focusToElement) {
         focusToElement.focus()
       } else {
-        // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
         ref.current?.focus()
       }
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isClientReady])
+  }, [hasCalculatedListboxPosition])
 
   return (
     <ul

package/src/__rc__/Tabs/subcomponents/Tab/Tab.tsx

@@ -29,12 +29,20 @@ export const Tab = (props: TabProps): JSX.Element => {
 
   return (
     <RACTab data-kz-tab {...tabProps}>
-      {({ isSelected, isFocusVisible, isHovered }) => (
+      {(TabRenderProps) => (
         <>
-          {children}
+          {typeof children === 'function' ? children(TabRenderProps) : children}
           {badge && (
             <span className={styles.badge}>
-              <Badge variant={isSelected || isFocusVisible || isHovered ? 'active' : 'default'}>
+              <Badge
+                variant={
+                  TabRenderProps.isSelected ||
+                  TabRenderProps.isFocusVisible ||
+                  TabRenderProps.isHovered
+                    ? 'active'
+                    : 'default'
+                }
+              >
                 {badge}
               </Badge>
             </span>

package/dist/cjs/Avatar/Avatar.module.scss.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-module.exports = styles;

package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy"
-};
-module.exports = styles;

package/dist/cjs/Badge/Badge.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "badge": "Badge-module_badge__CRtsW",
-  "large": "Badge-module_large__0QOpY",
-  "default": "Badge-module_default__k4Kcf",
-  "active": "Badge-module_active__-e-i2",
-  "reversed": "Badge-module_reversed__OgQLB",
-  "dark": "Badge-module_dark__RH34a",
-  "dot": "Badge-module_dot__BOKL1",
-  "animation": "Badge-module_animation__NTy6C",
-  "animationOn": "Badge-module_animationOn__nWK38"
-};
-module.exports = styles;

package/dist/cjs/BrandMoment/BrandMoment.module.scss.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-var styles = {
-  "body": "BrandMoment-module_body__J4lls",
-  "positive": "BrandMoment-module_positive__78wqJ",
-  "negative": "BrandMoment-module_negative__atXal",
-  "informative": "BrandMoment-module_informative__Qvwcd",
-  "success": "BrandMoment-module_success__v503M",
-  "warning": "BrandMoment-module_warning__dWih8",
-  "container": "BrandMoment-module_container__4ORHI",
-  "header": "BrandMoment-module_header__EAP5Q",
-  "main": "BrandMoment-module_main__cdWko",
-  "mainInner": "BrandMoment-module_mainInner__xsFA6",
-  "left": "BrandMoment-module_left__ZHJiM",
-  "leftInner": "BrandMoment-module_leftInner__TY5DY",
-  "right": "BrandMoment-module_right__B-PR2",
-  "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
-  "subtitle": "BrandMoment-module_subtitle__z9PL8",
-  "title": "BrandMoment-module_title__GrdAR",
-  "textBody": "BrandMoment-module_textBody__W6LvQ",
-  "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
-  "actions": "BrandMoment-module_actions__Z3NrK",
-  "footer": "BrandMoment-module_footer__vSeX1",
-  "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
-  "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
-  "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
-  "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
-};
-module.exports = styles;

package/dist/cjs/ButtonGroup/ButtonGroup.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
-  "child": "ButtonGroup-module_child__K6AP-",
-  "firstChild": "ButtonGroup-module_firstChild__uEn1j",
-  "lastChild": "ButtonGroup-module_lastChild__Vicsx"
-};
-module.exports = styles;

package/dist/cjs/Filter/Filter/subcomponents/FilterContents/FilterContents.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterContents": "FilterContents-module_filterContents__tQWu8"
-};
-module.exports = styles;

package/dist/cjs/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterPopover": "FilterPopover-module_filterPopover__eVkH6"
-};
-module.exports = styles;

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
-  "hidden": "ClearAllButton-module_hidden__-L2eA"
-};
-module.exports = styles;

package/dist/cjs/Filter/FilterSelect/FilterSelect.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterContents": "FilterSelect-module_filterContents__p7Kgc"
-};
-module.exports = styles;

package/dist/cjs/__utilities__/useIsClientReady/useIsClientReady.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-/**
- * A hook that returns a truthy value indicating if the code can be run on client side.
- * This is a useful hook for determining if the `document` or `window` objects are available.
- */
-var useIsClientReady = function () {
-  var _a = React.useState(false),
-    isClientReady = _a[0],
-    setIsClientReady = _a[1];
-  React.useEffect(function () {
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      setIsClientReady(true);
-    }
-  }, []);
-  return isClientReady;
-};
-exports.useIsClientReady = useIsClientReady;

package/dist/esm/Avatar/Avatar.module.scss.mjs

@@ -1,18 +0,0 @@
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-export { styles as default };

package/dist/esm/AvatarGroup/AvatarGroup.module.scss.mjs

@@ -1,9 +0,0 @@
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy"
-};
-export { styles as default };