@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-2-20250709041326

package/dist/cjs/alpha.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+var SingleSelect = require('./src/__alpha__/SingleSelect/SingleSelect.cjs');
+exports.SingleSelect = SingleSelect.SingleSelect;

package/dist/cjs/src/Button/Button/Button.cjs

@@ -11,6 +11,11 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
  */

package/dist/cjs/src/Button/IconButton/IconButton.cjs

@@ -11,6 +11,11 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
  */

package/dist/cjs/src/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -22,6 +22,9 @@ var SelectedItemIcon = function () {
   });
 };
 /**
+ * @deprecated This component will be renamed to LikertScale in v2.
+ * Start importing as LikertScale instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */

package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs

@@ -5,6 +5,7 @@ var ReactDOM = require('react-dom');
 var react = require('@headlessui/react');
 var classnames = require('classnames');
 var FocusLock = require('react-focus-lock');
+var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
 var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
 var GenericModal_module = require('./GenericModal.module.scss.cjs');
@@ -31,6 +32,7 @@ var GenericModal = function (_a) {
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
   var labelledByID = React.useId();
   var describedByID = React.useId();
+  var isClientReady = useIsClientReady.useIsClientReady();
   var _c = React.useState(null),
     scrollLayer = _c[0],
     setScrollLayer = _c[1];
@@ -52,6 +54,7 @@ var GenericModal = function (_a) {
     }
   };
   var focusOnAccessibleLabel = function () {
+    if (!isClientReady) return;
     // Check if focus already exists within the modal
     if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
       return;
@@ -60,6 +63,7 @@ var GenericModal = function (_a) {
     labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
   };
   var a11yWarn = function () {
+    if (!isClientReady) return;
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -68,6 +72,7 @@ var GenericModal = function (_a) {
   };
   var preventBodyScroll = function () {
     var _a;
+    if (!isClientReady) return;
     var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
     var scrollStyles = [GenericModal_module.unscrollable];
     if (hasScrollbar) {
@@ -90,11 +95,12 @@ var GenericModal = function (_a) {
   }, [onEscapeKeyup]);
   var onBeforeEnterHandler = function () {
     preventBodyScroll();
-    if (onEscapeKeyup) {
+    if (onEscapeKeyup && isClientReady) {
       document.addEventListener('keyup', escapeKeyHandler);
     }
   };
   var cleanUpAfterClose = function () {
+    if (!isClientReady) return;
     document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
     if (onEscapeKeyup) {
       document.removeEventListener('keyup', escapeKeyHandler);
@@ -112,6 +118,10 @@ var GenericModal = function (_a) {
     cleanUpAfterClose();
     propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
   };
+  // Don't render portal during SSR
+  if (!isClientReady) {
+    return React__default.default.createElement(React__default.default.Fragment, null);
+  }
   return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
     appear: true,
     show: isOpen,

package/dist/cjs/src/Skirt/Skirt.cjs

@@ -17,6 +17,9 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var spacing = 24;
 var maxHeight = 222;
 var fallbackPercentage = 0.8;
+/**
+ * @deprecated This component will be removed in v2. Please remove any usages.
+ */
 var Skirt = function (_a) {
   var children = _a.children,
     _b = _a.variant,

package/dist/cjs/src/Skirt/subcomponents/SkirtCard/SkirtCard.cjs

@@ -12,6 +12,10 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * @deprecated This component will be removed in v2. Use a regular Card component instead.
+ */
 var SkirtCard = function (props) {
   var classNameOverride = props.classNameOverride,
     restProps = tslib.__rest(props, ["classNameOverride"]);

package/dist/cjs/src/SplitButton/SplitButton.cjs

@@ -16,6 +16,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 /**
+ * @deprecated This component will be removed in v2. Use a Button and Menu component instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896196/Split+Button Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-splitbutton--docs Storybook}
  */

package/dist/cjs/src/TitleBlockZen/TitleBlockZen.cjs

@@ -168,6 +168,9 @@ var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
   }))));
 };
 /**
+ * @deprecated This component will be renamed to TitleBlock in v2.
+ * Start importing as TitleBlock instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-titleblock--docs Storybook}
  */

package/dist/cjs/src/__alpha__/SingleSelect/SingleSelect.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var List = require('./subcomponents/List/List.cjs');
+var ListSection = require('./subcomponents/ListSection/ListSection.cjs');
+var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
+var Trigger = require('./subcomponents/Trigger/Trigger.cjs');
+var SingleSelect_module = require('./SingleSelect.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var SingleSelect = function (_a) {
+  var classNameOverride = _a.classNameOverride,
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["classNameOverride", "children"]);
+  return React__default.default.createElement(reactAriaComponents.Select, tslib.__assign({
+    className: classNameOverride,
+    placeholder: ""
+  }, restProps), React__default.default.createElement(Trigger.Trigger, null), React__default.default.createElement(reactAriaComponents.Popover, {
+    className: SingleSelect_module.popover
+  }, children));
+};
+SingleSelect.displayName = 'SingleSelect';
+SingleSelect.List = List.List;
+SingleSelect.ListItem = ListItem.ListItem;
+SingleSelect.ListSection = ListSection.ListSection;
+exports.SingleSelect = SingleSelect;

package/dist/cjs/src/__alpha__/SingleSelect/SingleSelect.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "popover": "SingleSelect-module_popover__ZjL9n"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/List/List.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var List_module = require('./List.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var List = function (_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  return React__default.default.createElement(reactAriaComponents.ListBox, tslib.__assign({
+    className: classnames__default.default(List_module.list, className)
+  }, props), children);
+};
+List.displayName = 'SingleSelect.List';
+exports.List = List;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/List/List.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "list": "List-module_list__bbFPn"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var ListItem_module = require('./ListItem.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var ListItem = function (_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  return React__default.default.createElement(reactAriaComponents.ListBoxItem, tslib.__assign({
+    className: classnames__default.default(ListItem_module.listItem, className)
+  }, props), children);
+};
+ListItem.displayName = 'SingleSelect.ListItem';
+exports.ListItem = ListItem;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "listItem": "ListItem-module_listItem__xGr6A"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var ListSection_module = require('./ListSection.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var ListSection = function (_a) {
+  var name = _a.name,
+    className = _a.className,
+    children = _a.children,
+    props = tslib.__rest(_a, ["name", "className", "children"]);
+  return React__default.default.createElement(reactAriaComponents.ListBoxSection, tslib.__assign({}, props), React__default.default.createElement(reactAriaComponents.Header, {
+    className: classnames__default.default(ListSection_module.listSectionHeader, className)
+  }, name), children);
+};
+ListSection.displayName = 'SingleSelect.ListSection';
+exports.ListSection = ListSection;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "listSectionHeader": "ListSection-module_listSectionHeader__bptHg"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var Icon = require('../../../../__next__/Icon/Icon.cjs');
+var Trigger_module = require('./Trigger.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Trigger = function () {
+  return React__default.default.createElement(reactAriaComponents.Button, {
+    className: Trigger_module.button
+  }, React__default.default.createElement(reactAriaComponents.SelectValue, null), React__default.default.createElement(Icon.Icon, {
+    name: "keyboard_arrow_down",
+    isPresentational: true
+  }));
+};
+exports.Trigger = Trigger;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "button": "Trigger-module_button__giSqA"
+};
+module.exports = styles;

package/dist/cjs/src/__next__/Select/Select.cjs

@@ -54,9 +54,9 @@ var Select = function (_a) {
     _d = _a.placeholder,
     placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
-    portalContainerId = _a.portalContainerId,
     onSelectionChange = _a.onSelectionChange,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
+    portalContainerId = _a.portalContainerId,
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -136,7 +136,8 @@ var Select = function (_a) {
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
-    menuProps: menuProps
+    menuProps: menuProps,
+    popoverRef: refs.floating
   }, children)))), validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, {
     id: validationId,
     message: validationMessage,

package/dist/cjs/src/__next__/Select/subcomponents/Overlay/Overlay.cjs

@@ -14,7 +14,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Overlay = function (_a) {
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+    popoverRef = _a.popoverRef,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride", "popoverRef"]);
   var state = SelectContext.useSelectContext().state;
   // Handle events that should cause the menu to close,
   // e.g. blur, clicking outside, or pressing the escape key.
@@ -23,13 +24,12 @@ var Overlay = function (_a) {
     isDismissable: true,
     isOpen: state.isOpen,
     onClose: state.close
-  }, overlayRef).overlayProps;
+  }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
   // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return React__default.default.createElement("div", tslib.__assign({
-    ref: overlayRef,
     className: classNameOverride
   }, overlayProps, restProps), React__default.default.createElement(focus.FocusScope, {
     autoFocus: false,

package/dist/cjs/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.cjs

@@ -14,7 +14,8 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var SelectPopoverContents = function (_a) {
   var children = _a.children,
-    menuProps = _a.menuProps;
+    menuProps = _a.menuProps,
+    popoverRef = _a.popoverRef;
   var state = SelectContext.useSelectContext().state;
   // The collection structure is set by useSelectState's `children`
   // which we have used a util to ensure the following structure
@@ -23,7 +24,9 @@ var SelectPopoverContents = function (_a) {
   var itemNodes = Array.from(state.collection);
   return React__default.default.createElement("div", {
     className: SelectPopoverContents_module.selectPopoverContents
-  }, React__default.default.createElement(Overlay.Overlay, null, React__default.default.createElement(ListBox.ListBox, {
+  }, React__default.default.createElement(Overlay.Overlay, {
+    popoverRef: popoverRef
+  }, React__default.default.createElement(ListBox.ListBox, {
     menuProps: menuProps
   }, children ? children({
     items: itemNodes

package/dist/cjs/src/__next__/Tabs/subcomponents/TabList/TabList.cjs

@@ -70,7 +70,7 @@ var TabList = function (props) {
       }
       setLeftArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
@@ -81,7 +81,7 @@ var TabList = function (props) {
       }
       setRightArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
@@ -89,7 +89,7 @@ var TabList = function (props) {
       firstTabObserver.disconnect();
       lastTabObserver.disconnect();
     };
-  }, [isDocumentReady, containerElement, isRTL$1]);
+  }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
   React.useEffect(function () {
     var _a;
     if (!isDocumentReady) {

package/dist/esm/alpha.mjs

@@ -0,0 +1 @@
+export { SingleSelect } from './src/__alpha__/SingleSelect/SingleSelect.mjs';

package/dist/esm/src/Button/Button/Button.mjs

@@ -3,6 +3,11 @@ import React, { forwardRef } from 'react';
 import { GenericButton } from '../GenericButton/GenericButton.mjs';
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
  */

package/dist/esm/src/Button/IconButton/IconButton.mjs

@@ -3,6 +3,11 @@ import React, { forwardRef } from 'react';
 import { GenericButton } from '../GenericButton/GenericButton.mjs';
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
  */

package/dist/esm/src/LikertScaleLegacy/LikertScaleLegacy.mjs

@@ -13,6 +13,9 @@ var SelectedItemIcon = function () {
   });
 };
 /**
+ * @deprecated This component will be renamed to LikertScale in v2.
+ * Start importing as LikertScale instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */

package/dist/esm/src/Modal/GenericModal/GenericModal.mjs

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
 import FocusLock from 'react-focus-lock';
+import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
 import styles from './GenericModal.module.scss.mjs';
@@ -22,6 +23,7 @@ const GenericModal = /*#__PURE__*/function () {
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var labelledByID = useId();
     var describedByID = useId();
+    var isClientReady = useIsClientReady();
     var _c = useState(null),
       scrollLayer = _c[0],
       setScrollLayer = _c[1];
@@ -43,6 +45,7 @@ const GenericModal = /*#__PURE__*/function () {
       }
     };
     var focusOnAccessibleLabel = function () {
+      if (!isClientReady) return;
       // Check if focus already exists within the modal
       if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
         return;
@@ -51,6 +54,7 @@ const GenericModal = /*#__PURE__*/function () {
       labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
     };
     var a11yWarn = function () {
+      if (!isClientReady) return;
       // Ensure that consumers have provided an element that labels the modal
       // to meet ARIA accessibility guidelines.
       if (!document.getElementById(labelledByID)) {
@@ -59,6 +63,7 @@ const GenericModal = /*#__PURE__*/function () {
     };
     var preventBodyScroll = function () {
       var _a;
+      if (!isClientReady) return;
       var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
       var scrollStyles = [styles.unscrollable];
       if (hasScrollbar) {
@@ -81,11 +86,12 @@ const GenericModal = /*#__PURE__*/function () {
     }, [onEscapeKeyup]);
     var onBeforeEnterHandler = function () {
       preventBodyScroll();
-      if (onEscapeKeyup) {
+      if (onEscapeKeyup && isClientReady) {
         document.addEventListener('keyup', escapeKeyHandler);
       }
     };
     var cleanUpAfterClose = function () {
+      if (!isClientReady) return;
       document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
       if (onEscapeKeyup) {
         document.removeEventListener('keyup', escapeKeyHandler);
@@ -103,6 +109,10 @@ const GenericModal = /*#__PURE__*/function () {
       cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
+    // Don't render portal during SSR
+    if (!isClientReady) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,

package/dist/esm/src/Skirt/Skirt.mjs

@@ -8,6 +8,9 @@ import styles from './Skirt.module.scss.mjs';
 var spacing = 24;
 var maxHeight = 222;
 var fallbackPercentage = 0.8;
+/**
+ * @deprecated This component will be removed in v2. Please remove any usages.
+ */
 const Skirt = /*#__PURE__*/function () {
   const Skirt = function (_a) {
     var children = _a.children,

package/dist/esm/src/Skirt/subcomponents/SkirtCard/SkirtCard.mjs

@@ -3,6 +3,10 @@ import React from 'react';
 import classnames from 'classnames';
 import { Card } from '../../../Card/Card.mjs';
 import styles from './SkirtCard.module.scss.mjs';
+
+/**
+ * @deprecated This component will be removed in v2. Use a regular Card component instead.
+ */
 const SkirtCard = /*#__PURE__*/function () {
   const SkirtCard = function (props) {
     var classNameOverride = props.classNameOverride,

package/dist/esm/src/SplitButton/SplitButton.mjs

@@ -7,6 +7,8 @@ import { DropdownButton } from './subcomponents/DropdownButton/DropdownButton.mj
 import styles from './SplitButton.module.scss.mjs';
 
 /**
+ * @deprecated This component will be removed in v2. Use a Button and Menu component instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896196/Split+Button Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-splitbutton--docs Storybook}
  */

package/dist/esm/src/TitleBlockZen/TitleBlockZen.mjs

@@ -159,6 +159,9 @@ var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
   })))));
 };
 /**
+ * @deprecated This component will be renamed to TitleBlock in v2.
+ * Start importing as TitleBlock instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-titleblock--docs Storybook}
  */

package/dist/esm/src/__alpha__/SingleSelect/SingleSelect.mjs

@@ -0,0 +1,27 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Select, Popover } from 'react-aria-components';
+import { List } from './subcomponents/List/List.mjs';
+import { ListSection } from './subcomponents/ListSection/ListSection.mjs';
+import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
+import { Trigger } from './subcomponents/Trigger/Trigger.mjs';
+import styles from './SingleSelect.module.css.mjs';
+const SingleSelect = /*#__PURE__*/function () {
+  const SingleSelect = function (_a) {
+    var classNameOverride = _a.classNameOverride,
+      children = _a.children,
+      restProps = __rest(_a, ["classNameOverride", "children"]);
+    return /*#__PURE__*/React.createElement(Select, __assign({
+      className: classNameOverride,
+      placeholder: ""
+    }, restProps), /*#__PURE__*/React.createElement(Trigger, null), /*#__PURE__*/React.createElement(Popover, {
+      className: styles.popover
+    }, children));
+  };
+  SingleSelect.displayName = 'SingleSelect';
+  SingleSelect.List = List;
+  SingleSelect.ListItem = ListItem;
+  SingleSelect.ListSection = ListSection;
+  return SingleSelect;
+}();
+export { SingleSelect };

package/dist/esm/src/__alpha__/SingleSelect/SingleSelect.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "popover": "SingleSelect-module_popover__ZjL9n"
+};
+export { styles as default };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/List/List.mjs

@@ -0,0 +1,18 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { ListBox } from 'react-aria-components';
+import styles from './List.module.css.mjs';
+const List = /*#__PURE__*/function () {
+  const List = function (_a) {
+    var children = _a.children,
+      className = _a.className,
+      props = __rest(_a, ["children", "className"]);
+    return /*#__PURE__*/React.createElement(ListBox, __assign({
+      className: classnames(styles.list, className)
+    }, props), children);
+  };
+  List.displayName = 'SingleSelect.List';
+  return List;
+}();
+export { List };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/List/List.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "list": "List-module_list__bbFPn"
+};
+export { styles as default };