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

package/src/Content/Content.module.scss

@@ -3,10 +3,10 @@
 
 .content {
   max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
+  padding: 0 $layout-content-side-margin;
   width: 100%;
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
+    padding: 0 $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/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

@@ -100,3 +100,48 @@ export const AdditionalProperties: Story = {
   },
   name: 'Additional option properties',
 }
+
+/**
+ * Extend the option type to have additional properties to use for rendering.
+ */
+export const TestPageWithFilterSelect: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return (
+      <div>
+        <div style={{ color: 'coral', display: 'block', height: '1500px' }}>Content</div>
+        <FilterSelect<SelectOption & { isFruit: boolean }>
+          {...args}
+          label="Custom"
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          items={[
+            { label: 'Bubblegum', value: 'bubblegum', isFruit: false },
+            { label: 'Strawberry', value: 'strawberry', isFruit: true },
+            { label: 'Chocolate', value: 'chocolate', isFruit: false },
+            { label: 'Apple', value: 'apple', isFruit: true },
+            { label: 'Lemon', value: 'lemon', isFruit: true },
+          ]}
+        >
+          {({ items }): JSX.Element[] =>
+            items.map((item) =>
+              item.type === 'item' ? (
+                <FilterSelect.Option
+                  key={item.key}
+                  item={{
+                    ...item,
+                    rendered: item.value?.isFruit ? `${item.rendered} (Fruit)` : item.rendered,
+                  }}
+                />
+              ) : (
+                <FilterSelect.ItemDefaultRender key={item.key} item={item} />
+              ),
+            )
+          }
+        </FilterSelect>
+      </div>
+    )
+  },
+  name: 'Additional option properties',
+}

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/hooks/useHasStableYPosition.ts

@@ -0,0 +1,31 @@
+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 useHasStableYPosition = (ref: React.RefObject<HTMLElement>): boolean => {
+  const [isStable, setIsStable] = 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) {
+          setIsStable(true)
+        } else {
+          setLastYPosition(y)
+        }
+      }
+    }
+
+    const intervalId = setInterval(checkPosition, 1)
+
+    return () => clearInterval(intervalId)
+  }, [ref, lastYPosition])
+
+  return isStable
+}

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

@@ -2,9 +2,9 @@ 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 { useHasStableYPosition } from '../../hooks/useHasStableYPosition'
 import { type SelectItem, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'
 
@@ -47,9 +47,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 hasStableYPosition = useHasStableYPosition(ref)
   const { listBoxProps } = useListBox(
     {
       ...menuProps,
@@ -62,23 +62,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
+   * This uses the hasStableYPosition to determine if the position is stable within the window
    */
   useEffect(() => {
-    if (isClientReady) {
+    if (hasStableYPosition) {
       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])
+  }, [hasStableYPosition])
 
   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 };

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

@@ -1,12 +0,0 @@
-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"
-};
-export { styles as default };

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

@@ -1,27 +0,0 @@
-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"
-};
-export { styles as default };

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

@@ -1,7 +0,0 @@
-var styles = {
-  "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
-  "child": "ButtonGroup-module_child__K6AP-",
-  "firstChild": "ButtonGroup-module_firstChild__uEn1j",
-  "lastChild": "ButtonGroup-module_lastChild__Vicsx"
-};
-export { styles as default };

package/dist/esm/Filter/Filter/subcomponents/FilterContents/FilterContents.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterContents": "FilterContents-module_filterContents__tQWu8"
-};
-export { styles as default };

package/dist/esm/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterPopover": "FilterPopover-module_filterPopover__eVkH6"
-};
-export { styles as default };

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
-  "hidden": "ClearAllButton-module_hidden__-L2eA"
-};
-export { styles as default };

package/dist/esm/Filter/FilterSelect/FilterSelect.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "filterContents": "FilterSelect-module_filterContents__p7Kgc"
-};
-export { styles as default };

package/dist/esm/__utilities__/useIsClientReady/useIsClientReady.mjs

@@ -1,18 +0,0 @@
-import { useState, useEffect } from '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 = useState(false),
-    isClientReady = _a[0],
-    setIsClientReady = _a[1];
-  useEffect(function () {
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      setIsClientReady(true);
-    }
-  }, []);
-  return isClientReady;
-};
-export { useIsClientReady };