@kaizen/components 2.4.0 → 3.0.0

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

@@ -33,10 +33,8 @@ var Button = React.forwardRef(function (_a, ref) {
     _f = _a.hasHiddenPendingLabel,
     propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
     pendingLabel = _a.pendingLabel,
-    isReversed = _a.isReversed,
-    restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel", "isReversed"]);
-  var shouldUseReverse = ReversedColors.useReversedColors();
-  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+    restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
+  var isReversedVariant = ReversedColors.useReversedColors();
   var pendingProps = isPending ? {
     isPending: isPending,
     hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,

package/dist/cjs/src/GuidanceBlock/GuidanceBlock.cjs

@@ -3,12 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Button = require('../ButtonV1/Button/Button.cjs');
-require('../ButtonV1/IconButton/IconButton.cjs');
 var Heading = require('../Heading/Heading.cjs');
-var Icon = require('../Icon/Icon.cjs');
 var Text = require('../Text/Text.cjs');
-var Tooltip = require('../TooltipV1/Tooltip.cjs');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.css.cjs');
 function _interopDefault(e) {
@@ -18,69 +14,29 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var WithTooltip = function (_a) {
-  var tooltipProps = _a.tooltipProps,
-    children = _a.children;
-  return tooltipProps ? React__default.default.createElement(Tooltip.Tooltip, tslib.__assign({}, tooltipProps), children) : React__default.default.createElement(React__default.default.Fragment, null, children);
-};
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
  */
 var GuidanceBlock = function (_a) {
-  var _b, _c, _d, _e, _f;
-  var _g = _a.layout,
-    layout = _g === void 0 ? 'default' : _g,
-    _h = _a.variant,
-    variant = _h === void 0 ? 'default' : _h,
-    _j = _a.withActionButtonArrow,
-    withActionButtonArrow = _j === void 0 ? true : _j,
-    _k = _a.noMaxWidth,
-    noMaxWidth = _k === void 0 ? false : _k,
-    _l = _a.illustrationType,
-    illustrationType = _l === void 0 ? 'spot' : _l,
-    _m = _a.smallScreenTextAlignment,
-    smallScreenTextAlignment = _m === void 0 ? 'center' : _m,
-    actions = _a.actions,
+  var _b, _c, _d, _e;
+  var _f = _a.layout,
+    layout = _f === void 0 ? 'default' : _f,
+    _g = _a.variant,
+    variant = _g === void 0 ? 'default' : _g,
+    _h = _a.noMaxWidth,
+    noMaxWidth = _h === void 0 ? false : _h,
+    _j = _a.illustrationType,
+    illustrationType = _j === void 0 ? 'spot' : _j,
+    _k = _a.smallScreenTextAlignment,
+    smallScreenTextAlignment = _k === void 0 ? 'center' : _k,
     illustration = _a.illustration,
-    secondaryDismiss = _a.secondaryDismiss,
     actionsSlot = _a.actionsSlot,
-    restProps = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss", "actionsSlot"]);
-  var _o = React.useState(false),
-    hidden = _o[0],
-    setHidden = _o[1];
-  var _p = React.useState(false),
-    removed = _p[0],
-    setRemoved = _p[1];
+    restProps = tslib.__rest(_a, ["layout", "variant", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "illustration", "actionsSlot"]);
   var queries = useMediaQueries.useMediaQueries().queries;
-  var containerRef = React__default.default.createRef();
-  var handleDismissBanner = function () {
-    var _a;
-    setHidden(true);
-    (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
-  };
-  var onTransitionEnd = function (e) {
-    // Be careful: this assumes the final CSS property to be animated is "margin-top".
-    if (hidden && e.propertyName === 'margin-top') {
-      setRemoved(true);
-    }
-  };
-  var marginTop = function () {
-    if (hidden && containerRef.current) {
-      return -containerRef.current.clientHeight + 'px';
-    }
-    return '0';
-  };
-  if (removed) {
-    return React__default.default.createElement(React__default.default.Fragment, null);
-  }
   return React__default.default.createElement("div", {
-    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, queries.isSmall && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment),
-    style: {
-      marginTop: marginTop()
-    },
-    ref: containerRef,
-    onTransitionEnd: onTransitionEnd
+    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], queries.isSmall && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment)
   }, React__default.default.createElement("div", {
     className: GuidanceBlock_module.illustrationWrapper
   }, React__default.default.createElement("div", {
@@ -99,31 +55,9 @@ var GuidanceBlock = function (_a) {
   }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), React__default.default.createElement(Text.Text, {
     tag: "p",
     variant: "body"
-  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) || actionsSlot ? React__default.default.createElement("div", {
+  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), actionsSlot && React__default.default.createElement("div", {
     className: GuidanceBlock_module.buttonContainer
-  }, (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(WithTooltip, {
-    tooltipProps: actions.primary.tooltip
-  }, React__default.default.createElement(Button.Button, tslib.__assign({
-    icon: withActionButtonArrow ? React__default.default.createElement(Icon.Icon, {
-      name: "arrow_forward",
-      isPresentational: true,
-      shouldMirrorInRTL: true
-    }) : undefined,
-    iconPosition: "end"
-  }, actions.primary, {
-    fullWidth: queries.isSmall
-  }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && React__default.default.createElement(WithTooltip, {
-    tooltipProps: actions.secondary.tooltip
-  }, React__default.default.createElement("div", {
-    className: GuidanceBlock_module.secondaryAction
-  }, React__default.default.createElement(Button.Button, tslib.__assign({
-    secondary: true
-  }, actions.secondary, {
-    onClick: secondaryDismiss ? function () {
-      return handleDismissBanner();
-    } : (_f = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _f === void 0 ? void 0 : _f.onClick,
-    fullWidth: queries.isSmall
-  }))))), !actions && actionsSlot && actionsSlot) : null));
+  }, actionsSlot)));
 };
 GuidanceBlock.displayName = 'GuidanceBlock';
 exports.GuidanceBlock = GuidanceBlock;

package/dist/cjs/src/GuidanceBlock/GuidanceBlock.module.css.cjs

@@ -9,7 +9,6 @@ var styles = {
   "descriptionContainer": "GuidanceBlock-module_descriptionContainer__w1-P-",
   "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__aQhc9",
   "buttonContainer": "GuidanceBlock-module_buttonContainer__bcVmB",
-  "hidden": "GuidanceBlock-module_hidden__mwvrs",
   "headingWrapper": "GuidanceBlock-module_headingWrapper__OfZB5",
   "default": "GuidanceBlock-module_default__7naG4",
   "positive": "GuidanceBlock-module_positive__iCp-1",

package/dist/cjs/src/Heading/Heading.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Heading_module = require('./Heading.module.scss.cjs');
+var Heading_module = require('./Heading.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Heading/Heading.module.css.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var styles = {
+  "heading": "Heading-module_heading__6D0PM",
+  "display-0": "Heading-module_display-0__Dmiig",
+  "composable-header-title": "Heading-module_composable-header-title__CPBzk",
+  "heading-1": "Heading-module_heading-1__-GXEH",
+  "heading-2": "Heading-module_heading-2__LiRAV",
+  "heading-3": "Heading-module_heading-3__nVAgQ",
+  "heading-4": "Heading-module_heading-4__ESVT7",
+  "heading-5": "Heading-module_heading-5__zzZxI",
+  "heading-6": "Heading-module_heading-6__-JvYA",
+  "dark": "Heading-module_dark__vO-Uw",
+  "dark-reduced-opacity": "Heading-module_dark-reduced-opacity__24gWp",
+  "white": "Heading-module_white__AJgq4",
+  "white-reduced-opacity": "Heading-module_white-reduced-opacity__VvQaa",
+  "positive": "Heading-module_positive__GVkBf",
+  "small": "Heading-module_small__bALDR",
+  "large": "Heading-module_large__FLTyA",
+  "negative": "Heading-module_negative__exyNh"
+};
+module.exports = styles;

package/dist/cjs/src/Label/Label.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Label_module = require('./Label.module.scss.cjs');
+var Label_module = require('./Label.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Label/Label.module.css.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var styles = {
+  "label": "Label-module_label__jvxMB",
+  "reversed": "Label-module_reversed__Qu7Kc",
+  "disabled": "Label-module_disabled__3Mej6",
+  "text": "Label-module_text__zkbHj",
+  "checkboxOrRadio": "Label-module_checkboxOrRadio__lzm9I",
+  "checkbox": "Label-module_checkbox__vtFpn",
+  "radio": "Label-module_radio__xenTn",
+  "toggle": "Label-module_toggle__prty7",
+  "prependedLabel": "Label-module_prependedLabel__XhXdP",
+  "appendedLabel": "Label-module_appendedLabel__vp5Uc",
+  "prominent": "Label-module_prominent__dW3K7"
+};
+module.exports = styles;

package/dist/cjs/src/LabelledMessage/LabelledMessage.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var LabelledMessage_module = require('./LabelledMessage.module.scss.cjs');
+var LabelledMessage_module = require('./LabelledMessage.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/LabelledMessage/LabelledMessage.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "labelledMessage": "LabelledMessage-module_labelledMessage__kz-UQ",
+  "labelSeparator": "LabelledMessage-module_labelSeparator__A-4BK"
+};
+module.exports = styles;

package/dist/cjs/src/LinkButton/LinkButton.cjs

@@ -37,10 +37,8 @@ var LinkButton = React.forwardRef(function (_a, ref) {
     isFullWidth = _f === void 0 ? false : _f,
     isDisabled = _a.isDisabled,
     className = _a.className,
-    isReversed = _a.isReversed,
-    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className", "isReversed"]);
-  var shouldUseReverse = ReversedColors.useReversedColors();
-  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
+    otherProps = tslib.__rest(_a, ["children", "variant", "size", "icon", "iconPosition", "hasHiddenLabel", "isFullWidth", "isDisabled", "className"]);
+  var isReversedVariant = ReversedColors.useReversedColors();
   return React__default.default.createElement(reactAriaComponents.Link, tslib.__assign({
     ref: ref,
     className: mergeClassNames.mergeClassNames(LinkButton_module.linkButton, Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversedVariant ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),

package/dist/cjs/src/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -85,7 +85,9 @@ var ConfirmationModal = function (_a) {
   if (onConfirm) {
     var confirmAction = {
       label: confirmLabel,
-      onClick: onConfirm
+      onClick: onConfirm,
+      destructive: variant === 'warning',
+      primary: variant !== 'warning'
     };
     var workingProps = confirmWorking ? {
       working: true,
@@ -126,7 +128,6 @@ var ConfirmationModal = function (_a) {
     className: classnames__default.default(isProminent && ConfirmationModal_module.prominent, !unpadded && ConfirmationModal_module.padded)
   }, React__default.default.createElement(ModalAccessibleDescription.ModalAccessibleDescription, null, children))), React__default.default.createElement(ModalFooter.ModalFooter, {
     actions: footerActions,
-    appearance: variant == 'warning' ? 'destructive' : 'primary',
     unpadded: unpadded
   })));
 };

package/dist/cjs/src/Modal/ContextModal/ContextModal.cjs

@@ -97,7 +97,6 @@ var ContextModal = function (_a) {
   })))), React__default.default.createElement(ModalFooter.ModalFooter, {
     variant: image ? 'context' : undefined,
     actions: footerActions,
-    appearance: "primary",
     unpadded: unpadded
   })));
 };

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

@@ -6,7 +6,6 @@ var react = require('@headlessui/react');
 var classnames = require('classnames');
 var reactFocusOn = require('react-focus-on');
 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');
 function _interopDefault(e) {
@@ -50,7 +49,8 @@ var GenericModal = function (_a) {
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
-      console.warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+      // eslint-disable-next-line no-console
+      console.warn('When using the Modal component, you must provide a label for the modal. Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.');
     }
   };
   var focusOnAccessibleLabel = function () {

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

@@ -18,11 +18,9 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ModalFooter = function (_a) {
   var unpadded = _a.unpadded,
     actions = _a.actions,
-    _b = _a.appearance,
-    appearance = _b === void 0 ? 'primary' : _b,
     alignStart = _a.alignStart,
     variant = _a.variant,
-    props = tslib.__rest(_a, ["unpadded", "actions", "appearance", "alignStart", "variant"]);
+    props = tslib.__rest(_a, ["unpadded", "actions", "alignStart", "variant"]);
   var queries = useMediaQueries.useMediaQueries().queries;
   return React__default.default.createElement(ModalBody.ModalBody, {
     inputEdit: variant === 'inputEdit'
@@ -34,9 +32,8 @@ var ModalFooter = function (_a) {
       key: index
     }, React__default.default.createElement(Button.Button, tslib.__assign({
       type: "button",
-      primary: index === 0 && appearance === 'primary',
-      destructive: index === 0 && appearance === 'destructive',
-      secondary: index > 0,
+      primary: index === 0 && !action.destructive && !action.secondary,
+      secondary: index > 0 && !action.destructive && !action.primary,
       fullWidth: queries.isSmall
     }, action)));
   })));

package/dist/cjs/src/Notification/InlineNotification/InlineNotification.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var GenericNotification = require('../subcomponents/GenericNotification/GenericNotification.cjs');
-var GenericNotification_module = require('../subcomponents/GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../subcomponents/GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
 var ToastNotificationsMap = require('./subcomponents/ToastNotificationsMap/ToastNotificationsMap.cjs');
-var ToastNotificationsList_module = require('./ToastNotificationsList.module.scss.cjs');
+var ToastNotificationsList_module = require('./ToastNotificationsList.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.cjs → ToastNotificationsList.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__APiSP"
+  "toastNotificationsList": "ToastNotificationsList-module_toastNotificationsList__AUm-A"
 };
 module.exports = styles;

package/dist/cjs/src/Notification/subcomponents/CancelButton/CancelButton.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Icon = require('../../../Icon/Icon.cjs');
-var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.cjs

@@ -7,7 +7,7 @@ var isRefObject = require('../../../utils/isRefObject.cjs');
 var CancelButton = require('../CancelButton/CancelButton.cjs');
 var NotificationHeading = require('../NotificationHeading/NotificationHeading.cjs');
 var NotificationIcon = require('../NotificationIcon/NotificationIcon.cjs');
-var GenericNotification_module = require('./GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('./GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var styles = {
+  "notification": "GenericNotification-module_notification__-lOMz",
+  "inline": "GenericNotification-module_inline__lnYb9",
+  "toast": "GenericNotification-module_toast__dPvtC",
+  "global": "GenericNotification-module_global__i1IKL",
+  "success": "GenericNotification-module_success__HMC7W",
+  "informative": "GenericNotification-module_informative__S4sGn",
+  "cautionary": "GenericNotification-module_cautionary__VMbSA",
+  "security": "GenericNotification-module_security__pdJT9",
+  "warning": "GenericNotification-module_warning__42AEX",
+  "hidden": "GenericNotification-module_hidden__QOpq1",
+  "icon": "GenericNotification-module_icon__rMIaU",
+  "textContainer": "GenericNotification-module_textContainer__yHSKi",
+  "forceMultiline": "GenericNotification-module_forceMultiline__SlLf9",
+  "title": "GenericNotification-module_title__3cvl6",
+  "notificationTitle": "GenericNotification-module_notificationTitle__-yijp",
+  "text": "GenericNotification-module_text__B5r5l",
+  "cancel": "GenericNotification-module_cancel__4O-Ys",
+  "disabled": "GenericNotification-module_disabled__V2Wyr",
+  "hover": "GenericNotification-module_hover__erovs",
+  "active": "GenericNotification-module_active__2ksOr",
+  "cancelLabel": "GenericNotification-module_cancelLabel__uLIuz",
+  "noBottomMargin": "GenericNotification-module_noBottomMargin__okqYr",
+  "persistent": "GenericNotification-module_persistent__y-Jp7",
+  "subtle": "GenericNotification-module_subtle__TCixZ"
+};
+module.exports = styles;

package/dist/cjs/src/Notification/subcomponents/NotificationHeading/NotificationHeading.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Heading = require('../../../Heading/Heading.cjs');
-var GenericNotification_module = require('../GenericNotification/GenericNotification.module.scss.cjs');
+var GenericNotification_module = require('../GenericNotification/GenericNotification.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -3,8 +3,10 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+var reactAria = require('react-aria');
 var ReactSelect = require('react-select');
 var Async = require('react-select/async');
+var ClearButton = require('../ClearButton/ClearButton.cjs');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Icon = require('../Icon/Icon.cjs');
 var Label = require('../Label/Label.cjs');
@@ -20,6 +22,14 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var Async__default = /*#__PURE__*/_interopDefault(Async);
 
+// react-select defaults to showing "Select..." placeholder text, which goes against our a11y
+// standards — use `label` for the field name and `description` for help text instead.
+// `noPlaceholderText` overrides the default string; `NullPlaceholder` removes the empty DOM node
+// that react-select still renders even when the text is empty.
+var noPlaceholderText = '';
+var NullPlaceholder = function () {
+  return null;
+};
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
@@ -36,8 +46,7 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
     description = _a.description,
     propsFullWidth = _a.fullWidth,
     propsClassName = _a.className,
-    placeholder = _a.placeholder,
-    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "placeholder"]);
+    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className"]);
   var reactId = React.useId();
   // the default for fullWidth depends on the variant
   var fullWidth = propsFullWidth !== null && propsFullWidth !== void 0 ? propsFullWidth : !['secondary', 'secondary-small'].includes(variant);
@@ -49,10 +58,10 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
   }, label) : null, React__default.default.createElement(ReactSelect__default.default, tslib.__assign({}, props, {
     ref: ref,
     "aria-labelledby": labelId,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+    placeholder: noPlaceholderText,
     components: {
       Control: Control,
-      Placeholder: Placeholder,
+      Placeholder: NullPlaceholder,
       DropdownIndicator: DropdownIndicator,
       Menu: Menu,
       GroupHeading: GroupHeading,
@@ -77,14 +86,13 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
 Select.displayName = 'Select';
 var AsyncSelect = React__default.default.forwardRef(function (_a, ref) {
   var propsClassName = _a.className,
-    placeholder = _a.placeholder,
-    props = tslib.__rest(_a, ["className", "placeholder"]);
+    props = tslib.__rest(_a, ["className"]);
   return React__default.default.createElement(Async__default.default, tslib.__assign({}, props, {
     ref: ref,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '',
+    placeholder: noPlaceholderText,
     components: {
       Control: Control,
-      Placeholder: Placeholder,
+      Placeholder: NullPlaceholder,
       DropdownIndicator: DropdownIndicator,
       Menu: Menu,
       Option: Option,
@@ -94,7 +102,7 @@ var AsyncSelect = React__default.default.forwardRef(function (_a, ref) {
       MultiValue: MultiValue,
       IndicatorsContainer: IndicatorsContainer,
       ValueContainer: ValueContainer,
-      ClearIndicator: undefined,
+      ClearIndicator: ClearIndicator,
       IndicatorSeparator: null,
       LoadingMessage: LoadingMessage
     },
@@ -109,13 +117,6 @@ var Control = function (props) {
     className: classnames__default.default(Select_module.control, props.isFocused && Select_module.focusedControl, props.isDisabled && Select_module.disabled)
   })));
 };
-var Placeholder = function (props) {
-  return React__default.default.createElement(ReactSelect.components.Placeholder, tslib.__assign({}, props, {
-    className: Select_module.placeholderOverrides
-  }), React__default.default.createElement("span", {
-    className: Select_module.placeholder
-  }, props.children));
-};
 var DropdownIndicator = function (props) {
   return React__default.default.createElement(ReactSelect.components.DropdownIndicator, tslib.__assign({}, props, {
     className: Select_module.dropdownIndicator
@@ -184,12 +185,12 @@ var ValueContainer = function (props) {
   }));
 };
 var ClearIndicator = function (props) {
-  return React__default.default.createElement(ReactSelect.components.ClearIndicator, tslib.__assign({}, props, {
-    className: Select_module.clearIndicator
-  }), React__default.default.createElement(Icon.Icon, {
-    name: "cancel",
-    isPresentational: true,
-    isFilled: true
+  var buttonRef = React__default.default.useRef(null);
+  var buttonProps = reactAria.useButton(tslib.__assign(tslib.__assign({}, props), {
+    onClick: props.clearValue
+  }), buttonRef).buttonProps;
+  return React__default.default.createElement(ClearButton.ClearButton, tslib.__assign({}, buttonProps, {
+    classNameOverride: Select_module.clearIndicator
   }));
 };
 exports.AsyncSelect = AsyncSelect;

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

@@ -13,7 +13,6 @@ var styles = {
   "valueContainer": "Select-module_valueContainer__MGkpr",
   "indicatorsContainer": "Select-module_indicatorsContainer__2xCsm",
   "loadingMessage": "Select-module_loadingMessage__4Ej9T",
-  "placeholder": "Select-module_placeholder__OAeGA",
   "menu": "Select-module_menu__axmUL",
   "groupHeading": "Select-module_groupHeading__eNw6U",
   "option": "Select-module_option__EdP-F",

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

@@ -10,7 +10,7 @@ var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Popover = require('../MultiSelect/subcomponents/Popover/Popover.cjs');
 var reactDom = require('@floating-ui/react-dom');
 var SelectContext = require('./context/SelectContext.cjs');
-var ListBox = require('./subcomponents/ListBox/ListBox.cjs');
+require('./subcomponents/ListBox/ListBox.cjs');
 var ListBoxSection = require('./subcomponents/ListBoxSection/ListBoxSection.cjs');
 var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
 require('./subcomponents/ListItems/ListItems.cjs');
@@ -50,12 +50,10 @@ var SingleSelect = function (_a) {
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    _d = _a.placeholder,
-    placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
     onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "classNameOverride", "selectedKey", "description", "isDisabled", "onSelectionChange", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -71,7 +69,6 @@ var SingleSelect = function (_a) {
     disabledKeys: disabledKeys,
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
-    placeholder: placeholder,
     isDisabled: isDisabled,
     isRequired: isRequired,
     onSelectionChange: onSelectionChange ? function (key) {
@@ -79,13 +76,13 @@ var SingleSelect = function (_a) {
     } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _e = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _e.labelProps,
-    reactAriaTriggerProps = _e.triggerProps,
-    valueProps = _e.valueProps,
-    menuProps = _e.menuProps,
-    errorMessageProps = _e.errorMessageProps,
-    descriptionProps = _e.descriptionProps;
+  var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _d.labelProps,
+    reactAriaTriggerProps = _d.triggerProps,
+    valueProps = _d.valueProps,
+    menuProps = _d.menuProps,
+    errorMessageProps = _d.errorMessageProps,
+    descriptionProps = _d.descriptionProps;
   // Hack incoming:
   // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
   // We use role=combobox, meaning screen readers will read the value.
@@ -102,7 +99,6 @@ var SingleSelect = function (_a) {
     'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
     valueProps: valueProps,
     'isOpen': state.isOpen,
-    placeholder: placeholder,
     status: status,
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
@@ -110,9 +106,9 @@ var SingleSelect = function (_a) {
     'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
     'aria-required': isRequired
   });
-  var _f = React.useState(),
-    portalContainer = _f[0],
-    setPortalContainer = _f[1];
+  var _e = React.useState(),
+    portalContainer = _e[0],
+    setPortalContainer = _e[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);
@@ -153,7 +149,4 @@ SingleSelect.Section = ListBoxSection.ListBoxSection;
 SingleSelect.SectionDivider = SectionDivider.SectionDivider;
 SingleSelect.Option = Option.Option;
 SingleSelect.ItemDefaultRender = ListItem.ListItem;
-// @deprecated Legacy exported aliases
-SingleSelect.TriggerButton = SelectToggle.SelectToggle;
-SingleSelect.ListBox = ListBox.ListBox;
 exports.SingleSelect = SingleSelect;