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

package/dist/cjs/__rc__/Button/subcomponents/ButtonContent/ButtonContent.cjs

@@ -18,10 +18,10 @@ var ButtonContent = function (_a) {
   var children = _a.children,
     hasHiddenLabel = _a.hasHiddenLabel,
     _b = _a.size,
-    size = _b === void 0 ? 'medium' : _b,
+    size = _b === undefined ? 'medium' : _b,
     icon = _a.icon,
     _c = _a.iconPosition,
-    iconPosition = _c === void 0 ? 'start' : _c,
+    iconPosition = _c === undefined ? 'start' : _c,
     className = _a.className,
     restProps = tslib.__rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
   return React__default.default.createElement("span", tslib.__assign({

package/dist/cjs/__rc__/Button/subcomponents/PendingContent/PendingContent.cjs

@@ -21,9 +21,9 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var PendingContent = function (_a) {
   var pendingLabel = _a.pendingLabel,
     _b = _a.hasHiddenPendingLabel,
-    hasHiddenPendingLabel = _b === void 0 ? false : _b,
+    hasHiddenPendingLabel = _b === undefined ? false : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'medium' : _c;
+    size = _c === undefined ? 'medium' : _c;
   return React__default.default.createElement("span", {
     className: classnames__default.default(PendingContent_module.pendingContent, PendingContent_module[size])
   }, hasHiddenPendingLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, pendingLabel) : React__default.default.createElement("span", null, pendingLabel), React__default.default.createElement(LoadingSpinner.LoadingSpinner, {

package/dist/cjs/__rc__/Menu/MenuItem.cjs

@@ -21,16 +21,16 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     children = _a.children,
     textValue = _a.textValue,
     props = tslib.__rest(_a, ["className", "icon", "children", "textValue"]);
-  var determinedTextValue = textValue !== null && textValue !== void 0 ? textValue : typeof children === 'string' ? children : undefined;
+  var determinedTextValue = textValue !== null && textValue !== undefined ? textValue : typeof children === 'string' ? children : undefined;
   return React__default.default.createElement(reactAriaComponents.MenuItem, tslib.__assign({
     ref: ref,
     className: mergeClassNames.mergeClassNames(MenuItem_module.item, className),
     textValue: determinedTextValue
-  }, props), React__default.default.createElement(React__default.default.Fragment, null, typeof children === 'string' && icon ? React__default.default.createElement("div", {
+  }, props), typeof children === 'string' && icon ? React__default.default.createElement("div", {
     className: MenuItem_module.flexWrapper
   }, React__default.default.createElement("span", {
     className: MenuItem_module.iconWrapper
-  }, icon), children) : React__default.default.createElement(React__default.default.Fragment, null, children)));
+  }, icon), children) : children);
 });
 MenuItem.displayName = 'MenuItem';
 exports.MenuItem = MenuItem;

package/dist/cjs/__rc__/Select/Select.cjs

@@ -50,14 +50,14 @@ var Select = function (_a) {
     selectedKey = _a.selectedKey,
     description = _a.description,
     _c = _a.placeholder,
-    placeholder = _c === void 0 ? '' : _c,
+    placeholder = _c === undefined ? '' : _c,
     isDisabled = _a.isDisabled,
     portalContainerId = _a.portalContainerId,
     restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
-  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+  var id = propsId !== null && propsId !== undefined ? propsId : fallbackId;
   var descriptionId = "".concat(id, "--description");
   var popoverId = "".concat(id, "--popover");
   var disabledKeys = getDisabledKeysFromItems.getDisabledKeysFromItems(items);
@@ -65,7 +65,7 @@ var Select = function (_a) {
     label: label,
     items: items,
     children: transformSelectItemToCollectionElement.transformSelectItemToCollectionElement,
-    disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
+    disabledKeys: disabledValues !== null && disabledValues !== undefined ? disabledValues : disabledKeys,
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
     placeholder: placeholder,
@@ -86,13 +86,13 @@ var Select = function (_a) {
   // Issue: https://github.com/adobe/react-spectrum/issues/4091
   var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
   var triggerProps = tslib.__assign(tslib.__assign({}, reactAriaTriggerProps), {
-    'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
+    'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === undefined ? undefined : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
   });
   var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
   var selectToggleProps = tslib.__assign(tslib.__assign({}, buttonProps), {
     label: label,
     labelProps: labelProps,
-    value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+    value: (_b = state === null || state === undefined ? undefined : state.selectedItem) === null || _b === undefined ? undefined : _b.rendered,
     valueProps: valueProps,
     isOpen: state.isOpen,
     placeholder: placeholder,

package/dist/cjs/__rc__/Select/hooks/useHasCalculatedListboxPosition.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('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.
+ */
+var useHasCalculatedListboxPosition = function (ref) {
+  var _a = React.useState(false),
+    hasStablePosition = _a[0],
+    setHasStablePosition = _a[1];
+  var _b = React.useState(null),
+    lastYPosition = _b[0],
+    setLastYPosition = _b[1];
+  React.useEffect(function () {
+    var checkPosition = function () {
+      if (ref.current) {
+        var y = ref.current.getBoundingClientRect().y;
+        if (lastYPosition === null) {
+          setLastYPosition(y);
+        } else if (y === lastYPosition && y >= 0) {
+          setHasStablePosition(true);
+        } else {
+          setLastYPosition(y);
+        }
+      }
+    };
+    var intervalId = setInterval(function () {
+      if (hasStablePosition) {
+        clearInterval(intervalId);
+        return;
+      }
+      checkPosition();
+    }, 1);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [ref, lastYPosition, hasStablePosition]);
+  return hasStablePosition;
+};
+exports.useHasCalculatedListboxPosition = useHasCalculatedListboxPosition;

package/dist/cjs/__rc__/Select/subcomponents/ListBox/ListBox.cjs

@@ -4,8 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
-var useIsClientReady = require('../../../../__utilities__/useIsClientReady/useIsClientReady.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
+var useHasCalculatedListboxPosition = require('../../hooks/useHasCalculatedListboxPosition.cjs');
 var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -15,17 +15,30 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-/** 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 */
+var getOptionOrSectionKey = function (optionKey, state) {
+  var _a, _b;
+  if (!optionKey) return null;
+  var option = state.collection.getItem(optionKey);
+  var optionType = option === null || option === undefined ? undefined : option.type;
+  if (optionType === 'section') {
+    var sectionOptions = (_a = option === null || option === undefined ? undefined : option.value) === null || _a === undefined ? undefined : _a.options;
+    return sectionOptions ? (_b = Array.from(sectionOptions)[0]) === null || _b === undefined ? undefined : _b.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"
  */
 var getOptionKeyFromCollection = function (state) {
   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
  */
@@ -43,32 +56,31 @@ var ListBox = function (_a) {
     menuProps = _a.menuProps,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["children", "menuProps", "classNameOverride"]);
-  var isClientReady = useIsClientReady.useIsClientReady();
   var state = SelectContext.useSelectContext().state;
   var ref = React.useRef(null);
+  var hasCalculatedListboxPosition = useHasCalculatedListboxPosition.useHasCalculatedListboxPosition(ref);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
     disallowEmptySelection: true,
     // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
     autoFocus: false
   }), state, ref).listBoxProps;
   /**
-   * 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.
    */
   React.useEffect(function () {
     var _a;
-    if (isClientReady) {
+    if (hasCalculatedListboxPosition) {
       var optionKey = getOptionKeyFromCollection(state);
       var focusToElement = safeQuerySelector("[data-key='".concat(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.
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = ref.current) === null || _a === undefined ? undefined : _a.focus();
       }
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isClientReady]);
+  }, [hasCalculatedListboxPosition]);
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,
     className: classnames__default.default(ListBox_module.listBox, classNameOverride)

package/dist/cjs/__rc__/Select/subcomponents/Option/Option.cjs

@@ -40,7 +40,7 @@ var Option = function (_a) {
           return state.setSelectedKey(item.key);
         }, 250);
       } else {
-        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
+        onPointerUp === null || onPointerUp === undefined ? undefined : onPointerUp(e);
       }
     }
   }), {

package/dist/cjs/__rc__/Select/subcomponents/SelectToggle/SelectToggle.cjs

@@ -20,7 +20,7 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     valueProps = _a.valueProps,
     isOpen = _a.isOpen,
     _b = _a.placeholder,
-    placeholder = _b === void 0 ? 'Select' : _b,
+    placeholder = _b === undefined ? 'Select' : _b,
     status = _a.status,
     isDisabled = _a.isDisabled,
     isReversed = _a.isReversed,
@@ -39,7 +39,7 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     className: classnames__default.default(SelectToggle_module.selectToggle, (value === null || value === undefined) && SelectToggle_module.placeholder, status === 'error' && SelectToggle_module.error, status === 'caution' && SelectToggle_module.caution, isDisabled && SelectToggle_module.disabled, isReversed && SelectToggle_module.reversed, classNameOverride)
   }), React__default.default.createElement("span", tslib.__assign({}, valueProps, {
     className: SelectToggle_module.value
-  }), value !== null && value !== void 0 ? value : placeholder), React__default.default.createElement(Icon.Icon, {
+  }), value !== null && value !== undefined ? value : placeholder), React__default.default.createElement(Icon.Icon, {
     name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
     isPresentational: true,
     className: SelectToggle_module.icon

package/dist/cjs/__rc__/Tabs/subcomponents/Tab/Tab.cjs

@@ -27,14 +27,11 @@ var Tab = function (props) {
   }, restProps);
   return React__default.default.createElement(reactAriaComponents.Tab, tslib.__assign({
     "data-kz-tab": true
-  }, tabProps), function (_a) {
-    var isSelected = _a.isSelected,
-      isFocusVisible = _a.isFocusVisible,
-      isHovered = _a.isHovered;
-    return React__default.default.createElement(React__default.default.Fragment, null, children, badge && React__default.default.createElement("span", {
+  }, tabProps), function (TabRenderProps) {
+    return React__default.default.createElement(React__default.default.Fragment, null, typeof children === 'function' ? children(TabRenderProps) : children, badge && React__default.default.createElement("span", {
       className: Tab_module.badge
     }, React__default.default.createElement(Badge.Badge, {
-      variant: isSelected || isFocusVisible || isHovered ? 'active' : 'default'
+      variant: TabRenderProps.isSelected || TabRenderProps.isFocusVisible || TabRenderProps.isHovered ? 'active' : 'default'
     }, badge)));
   });
 };

package/dist/cjs/__rc__/Tabs/subcomponents/TabList/TabList.cjs

@@ -22,7 +22,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var TabList = function (props) {
   var ariaLabel = props["aria-label"],
     _a = props.noPadding,
-    noPadding = _a === void 0 ? false : _a,
+    noPadding = _a === undefined ? false : _a,
     children = props.children,
     className = props.className,
     testId = props["data-testid"],
@@ -45,7 +45,7 @@ var TabList = function (props) {
     containerElement = _f[0],
     setContainerElement = _f[1];
   var tabListContext = React.useContext(reactAriaComponents.TabListStateContext);
-  var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  var selectedKey = tabListContext === null || tabListContext === undefined ? undefined : tabListContext.selectedKey;
   React.useEffect(function () {
     if (!isDocumentReady) {
       setIsDocumentReady(true);
@@ -59,7 +59,7 @@ var TabList = function (props) {
     if (!isDocumentReady) {
       return;
     }
-    var tabs = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll('[data-kz-tab]');
+    var tabs = containerElement === null || containerElement === undefined ? undefined : containerElement.querySelectorAll('[data-kz-tab]');
     if (!tabs) {
       return;
     }
@@ -96,7 +96,7 @@ var TabList = function (props) {
       return;
     }
     // Scroll selected tab into view
-    (_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+    (_a = containerElement === null || containerElement === undefined ? undefined : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === undefined ? undefined : _a.scrollIntoView({
       block: 'nearest',
       inline: 'center'
     });

package/dist/cjs/__rc__/Tag/Tag/Tag.cjs

@@ -16,7 +16,7 @@ var Tag = function (_a) {
     classNameOverride = _a.classNameOverride,
     icon = _a.icon,
     _b = _a.color,
-    color = _b === void 0 ? 'gray' : _b,
+    color = _b === undefined ? 'gray' : _b,
     restProps = tslib.__rest(_a, ["children", "classNameOverride", "icon", "color"]);
   return React__default.default.createElement("span", tslib.__assign({
     className: classnames__default.default(Tag_module.tag, Tag_module[color], classNameOverride)

package/dist/cjs/__rc__/Tooltip/Tooltip.cjs

@@ -33,7 +33,7 @@ var Tooltip = React.forwardRef(function (_a, ref) {
     setShouldInlineHiddenContent = _b[1];
   React.useLayoutEffect(function () {
     var _a;
-    setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-inline-hidden-content')));
+    setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === undefined ? undefined : triggerRef.current) === null || _a === undefined ? undefined : _a.getAttribute('data-inline-hidden-content')));
   }, [triggerRef]);
   return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(reactAriaComponents.Tooltip, tslib.__assign({
     ref: ref,

package/dist/cjs/__utilities__/ReversedColors/v3/ReversedColors.cjs

@@ -14,7 +14,7 @@ var useReversedColors = function () {
 var ReversedColors = function (_a) {
   var children = _a.children,
     _b = _a.isReversed,
-    isReversed = _b === void 0 ? true : _b;
+    isReversed = _b === undefined ? true : _b;
   return React__default.default.createElement(ReversedColorsContext.Provider, {
     value: isReversed
   }, children);

package/dist/cjs/__utilities__/isRTL/isRTL.cjs

@@ -6,6 +6,6 @@
  */
 var isRTL = function (element) {
   var _a;
-  return !!((_a = element.closest('[dir]')) === null || _a === void 0 ? void 0 : _a.matches('[dir="rtl"]'));
+  return !!((_a = element.closest('[dir]')) === null || _a === undefined ? undefined : _a.matches('[dir="rtl"]'));
 };
 exports.isRTL = isRTL;

package/dist/cjs/utils/mergeClassNames.cjs

@@ -22,10 +22,10 @@ var mergeClassNames = function () {
     return typeof className === 'function';
   });
   // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
-  if (!containsFunction) return classnames__default.default.apply(void 0, classNames);
+  if (!containsFunction) return classnames__default.default.apply(undefined, classNames);
   // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
   return function (state) {
-    return classnames__default.default.apply(void 0, classNames.map(function (className) {
+    return classnames__default.default.apply(undefined, classNames.map(function (className) {
       return typeof className === 'function' ? className(state) : className;
     }));
   };

package/dist/cjs/utils/useMediaQueries.cjs

@@ -12,7 +12,7 @@ var subtractOnePixel = function (breakpoint) {
   return "".concat(parseInt(breakpoint, 10) - 1, "px");
 };
 var useMediaQueries = function (propQueries) {
-  if (propQueries === void 0) {
+  if (propQueries === undefined) {
     propQueries = {};
   }
   if (typeof window === 'undefined') {

package/dist/cjs/utils/useResizeObserver.cjs

@@ -22,7 +22,7 @@ var defaultCallback = function (entry) {
  * @deprecated use native `ResizeObserver` DOM API instead
  */
 var useResizeObserver = function (resolveEntry) {
-  if (resolveEntry === void 0) {
+  if (resolveEntry === undefined) {
     resolveEntry = defaultCallback;
   }
   var destroyResizeObserverRef = React.useRef(undefined);

package/dist/esm/Avatar/Avatar.mjs

@@ -3,9 +3,9 @@ import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { Textfit } from 'react-textfit';
 import { Icon } from '../__rc__/Icon/Icon.mjs';
-import styles from './Avatar.module.scss.mjs';
+import styles from './Avatar.module.css.mjs';
 var getInitials = function (fullName, max2Characters) {
-  if (max2Characters === void 0) {
+  if (max2Characters === undefined) {
     max2Characters = false;
   }
   return fullName == null ? '' : fullName.split(/\s/).reduce(function (acc, name) {
@@ -36,18 +36,18 @@ var FallbackIcon = function (_a) {
   });
 };
 var renderInitials = function (fullName, alt, size, disableInitials) {
-  if (fullName === void 0) {
+  if (fullName === undefined) {
     fullName = '';
   }
-  if (disableInitials === void 0) {
+  if (disableInitials === undefined) {
     disableInitials = false;
   }
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== 'small';
   var renderFallback = disableInitials || initials === '';
-  return renderFallback ? ( /*#__PURE__*/React.createElement(FallbackIcon, {
+  return renderFallback ? (/*#__PURE__*/React.createElement(FallbackIcon, {
     alt: alt
-  })) : ( /*#__PURE__*/React.createElement("abbr", {
+  })) : (/*#__PURE__*/React.createElement("abbr", {
     className: classnames(styles.initials, isLongName && styles.longName),
     title: alt
   }, isLongName ? (
@@ -65,16 +65,16 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
 var Avatar = function (_a) {
   var fullName = _a.fullName,
     _b = _a.size,
-    size = _b === void 0 ? 'medium' : _b,
+    size = _b === undefined ? 'medium' : _b,
     avatarSrc = _a.avatarSrc,
     _c = _a.disableInitials,
-    disableInitials = _c === void 0 ? false : _c,
+    disableInitials = _c === undefined ? false : _c,
     _d = _a.isCompany,
-    isCompany = _d === void 0 ? false : _d,
+    isCompany = _d === undefined ? false : _d,
     _e = _a.isCurrentUser,
-    isCurrentUser = _e === void 0 ? true : _e,
+    isCurrentUser = _e === undefined ? true : _e,
     _f = _a.alt,
-    alt = _f === void 0 ? fullName !== null && fullName !== void 0 ? fullName : '' : _f,
+    alt = _f === undefined ? fullName !== null && fullName !== undefined ? fullName : '' : _f,
     classNameOverride = _a.classNameOverride,
     restProps = __rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "alt", "classNameOverride"]);
   var _g = useState(avatarSrc ? 'loading' : 'none'),
@@ -94,16 +94,16 @@ var Avatar = function (_a) {
   // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184
   useEffect(function () {
     var _a;
-    if ((_a = image === null || image === void 0 ? void 0 : image.current) === null || _a === void 0 ? void 0 : _a.complete) onImageSuccess();
+    if ((_a = image === null || image === undefined ? undefined : image.current) === null || _a === undefined ? undefined : _a.complete) onImageSuccess();
   }, [image]);
   var isNoneOrError = avatarState === 'none' || avatarState === 'error';
   var isPersonal = isNoneOrError && isCurrentUser;
   var isOtherUser = isNoneOrError && !isCurrentUser;
   return /*#__PURE__*/React.createElement("span", __assign({
-    className: classnames(styles.wrapper, styles[size], classNameOverride, isCompany && styles.company, isPersonal && styles.personal, isOtherUser && styles.otherUser, (avatarState === 'loading' || avatarState === 'error') && styles.loading)
-  }, restProps), avatarState !== 'none' && ( /*#__PURE__*/React.createElement("img", {
+    className: classnames(styles.wrapper, styles[size], classNameOverride, isCompany && styles.company, isPersonal && styles.personal, isOtherUser && styles.otherUser)
+  }, restProps), avatarState !== 'none' && (/*#__PURE__*/React.createElement("img", {
     ref: image,
-    className: classnames(styles.avatarImage, isCompany && styles.companyAvatarImage),
+    className: classnames(styles.avatarImage, isCompany && styles.companyAvatarImage, (avatarState === 'loading' || avatarState === 'error') && styles.loading),
     src: avatarSrc,
     onError: onImageFailure,
     onLoad: onImageSuccess,

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

@@ -0,0 +1,18 @@
+var styles = {
+  "wrapper": "Avatar-module_wrapper__elyMq",
+  "small": "Avatar-module_small__xytAy",
+  "medium": "Avatar-module_medium__gDEnT",
+  "large": "Avatar-module_large__bexrc",
+  "xlarge": "Avatar-module_xlarge__ifASs",
+  "xxlarge": "Avatar-module_xxlarge__g7bx6",
+  "personal": "Avatar-module_personal__bq8mM",
+  "otherUser": "Avatar-module_otherUser__U2h5P",
+  "company": "Avatar-module_company__YVflF",
+  "avatarImage": "Avatar-module_avatarImage__pHTCF",
+  "loading": "Avatar-module_loading__2i5YE",
+  "companyAvatarImage": "Avatar-module_companyAvatarImage__aGdNm",
+  "fallbackIcon": "Avatar-module_fallbackIcon__RUoRR",
+  "initials": "Avatar-module_initials__85roP",
+  "longName": "Avatar-module_longName__02zNk"
+};
+export { styles as default };

package/dist/esm/AvatarGroup/AvatarGroup.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
-import styles from './AvatarGroup.module.scss.mjs';
+import styles from './AvatarGroup.module.css.mjs';
 var renderCounter = function (remainingAvatars) {
   if (remainingAvatars <= 0) return;
   return /*#__PURE__*/React.createElement("li", {
@@ -14,14 +14,14 @@ var renderCounter = function (remainingAvatars) {
   }, "+".concat(remainingAvatars)));
 };
 var renderAvatars = function (avatars, maxVisible, size) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
-    return index < maxVisible && ( /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, avatars === null || avatars === undefined ? undefined : avatars.map(function (avatarProps, index) {
+    return index < maxVisible && (/*#__PURE__*/React.createElement("li", {
       key: "avatar-".concat(index),
       className: styles.AvatarGroupItem
     }, /*#__PURE__*/React.createElement(Avatar, __assign({}, avatarProps, {
       size: size
     }))));
-  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
+  }), renderCounter((avatars === null || avatars === undefined ? undefined : avatars.length) - maxVisible));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
@@ -29,9 +29,9 @@ var renderAvatars = function (avatars, maxVisible, size) {
  */
 var AvatarGroup = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'medium' : _b,
+    size = _b === undefined ? 'medium' : _b,
     _c = _a.maxVisible,
-    maxVisible = _c === void 0 ? 2 : _c,
+    maxVisible = _c === undefined ? 2 : _c,
     avatars = _a.avatars,
     classNameOverride = _a.classNameOverride,
     restProps = __rest(_a, ["size", "maxVisible", "avatars", "classNameOverride"]);

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

@@ -0,0 +1,9 @@
+var styles = {
+  "AvatarGroup": "AvatarGroup-module_AvatarGroup__xftR5",
+  "AvatarCounter": "AvatarGroup-module_AvatarCounter__0DCSW",
+  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__s8miW",
+  "small": "AvatarGroup-module_small__zX0AT",
+  "medium": "AvatarGroup-module_medium__0Vlk8",
+  "large": "AvatarGroup-module_large__c1ZHO"
+};
+export { styles as default };

package/dist/esm/Badge/Badge.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { useState, useLayoutEffect } from 'react';
 import classnames from 'classnames';
-import styles from './Badge.module.scss.mjs';
+import styles from './Badge.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |
@@ -11,11 +11,11 @@ const Badge = /*#__PURE__*/function () {
   const Badge = function (_a) {
     var children = _a.children,
       _b = _a.variant,
-      variant = _b === void 0 ? 'default' : _b,
+      variant = _b === undefined ? 'default' : _b,
       _c = _a.reversed,
-      reversed = _c === void 0 ? false : _c,
+      reversed = _c === undefined ? false : _c,
       _d = _a.size,
-      size = _d === void 0 ? 'small' : _d,
+      size = _d === undefined ? 'small' : _d,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "variant", "reversed", "size", "classNameOverride"]);
     return /*#__PURE__*/React.createElement("span", __assign({

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

@@ -0,0 +1,11 @@
+var styles = {
+  "badge": "Badge-module_badge__ojFmb",
+  "reversed": "Badge-module_reversed__C5Glu",
+  "active": "Badge-module_active__18-He",
+  "dark": "Badge-module_dark__SjUFf",
+  "large": "Badge-module_large__K10-T",
+  "dot": "Badge-module_dot__NIjOQ",
+  "animation": "Badge-module_animation__hYW2H",
+  "animationOn": "Badge-module_animationOn__6Seca"
+};
+export { styles as default };

package/dist/esm/Brand/Brand.mjs

@@ -3,14 +3,14 @@ import React from 'react';
 import classnames from 'classnames';
 import { assetUrl } from '../utils/hostedAssets.mjs';
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence/BrandCollectiveIntelligence.mjs';
-import styles from './Brand.module.scss.mjs';
+import styles from './Brand.module.css.mjs';
 var isSVG = function (variant, restProps) {
   return variant === 'collective-intelligence';
 };
 const Brand = /*#__PURE__*/function () {
   const Brand = function (_a) {
     var _b = _a.reversed,
-      reversed = _b === void 0 ? false : _b,
+      reversed = _b === undefined ? false : _b,
       variant = _a.variant,
       restProps = __rest(_a, ["reversed", "variant"]);
     if (isSVG(variant)) {

package/dist/esm/Brand/{Brand.module.scss.mjs → Brand.module.css.mjs}

@@ -1,4 +1,4 @@
 var styles = {
-  "img": "Brand-module_img__uWvra"
+  "img": "Brand-module_img__-kq3F"
 };
 export { styles as default };