@kaizen/components 1.48.0 → 1.49.1

package/dist/cjs/DateInput/DateInput/DateInput.cjs

@@ -28,6 +28,7 @@ var DateInput = React__default.default.forwardRef(function (_a, ref) {
     className: classnames__default.default(DateInput_module.dateInput, classNameOverride)
   }, React__default.default.createElement(Label.Label, {
     htmlFor: id,
+    id: "".concat(id, "-input-label"),
     labelText: labelText,
     reversed: isReversed,
     disabled: disabled

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -15,6 +15,7 @@ var parseDateAsTextOrNumeral = require('../Calendar/utils/parseDateAsTextOrNumer
 require('date-fns');
 var setFocusInCalendar = require('../Calendar/utils/setFocusInCalendar.cjs');
 var CalendarPopover = require('../Calendar/CalendarPopover/CalendarPopover.cjs');
+var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
 var DateInputField = require('./subcomponents/DateInputField/DateInputField.cjs');
 var getLocale = require('./utils/getLocale.cjs');
 var validateDate = require('./utils/validateDate.cjs');
@@ -219,8 +220,11 @@ var DatePicker = function (_a) {
     status: status !== undefined || !shouldUseInbuiltValidation ? status : inbuiltStatus,
     validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation ? validationMessage : inbuiltValidationMessage
   }, restDateInputFieldProps))), isOpen && React__default.default.createElement(CalendarPopover.CalendarPopover, {
-    referenceElement: containerRef.current
-  }, React__default.default.createElement(CalendarSingle.CalendarSingle, {
+    referenceElement: containerRef.current,
+    "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
+  }, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(VisuallyHidden.VisuallyHidden, {
+    id: "".concat(id, "-calendar-label")
+  }, "Select date from calendar for:"), React__default.default.createElement(CalendarSingle.CalendarSingle, {
     id: calendarId,
     selected: selectedDay,
     defaultMonth: defaultMonth,
@@ -229,7 +233,7 @@ var DatePicker = function (_a) {
     locale: locale,
     onDayClick: handleCalendarDayChange,
     onMount: handleCalendarMount
-  })));
+  }))));
 };
 DatePicker.displayName = "DatePicker";
 exports.DatePicker = DatePicker;

package/dist/cjs/DateRangePicker/DateRangePicker.cjs

@@ -16,6 +16,7 @@ var LegacyCalendarRange = require('../Calendar/LegacyCalendarRange/LegacyCalenda
 require('../Icon/subcomponents/SVG/SVG.cjs');
 var DateStartIcon = require('../Icon/DateStartIcon.cjs');
 var Label = require('../Label/Label.cjs');
+var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.cjs');
 var DateRangePicker_module = require('./DateRangePicker.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -110,6 +111,7 @@ var DateRangePicker = function (_a) {
     ref: containerRef,
     className: classNameOverride
   }, React__default.default.createElement(Label.Label, {
+    id: "".concat(id, "-input-label"),
     disabled: isDisabled,
     htmlFor: id,
     labelText: labelText
@@ -134,8 +136,11 @@ var DateRangePicker = function (_a) {
     onEscapeKey: handleOpenClose,
     enabled: isOpen
   }, React__default.default.createElement(CalendarPopover.CalendarPopover, {
-    referenceElement: containerRef.current
-  }, React__default.default.createElement(LegacyCalendarRange.LegacyCalendarRange, {
+    referenceElement: containerRef.current,
+    "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
+  }, React__default.default.createElement(VisuallyHidden.VisuallyHidden, {
+    id: "".concat(id, "-calendar-label")
+  }, "Select dates from calendar for:"), React__default.default.createElement(LegacyCalendarRange.LegacyCalendarRange, {
     selectedRange: selectedDateRange,
     defaultMonth: defaultMonth,
     weekStartsOn: weekStartsOn,

package/dist/cjs/EmptyState/EmptyState.cjs

@@ -54,7 +54,6 @@ var EmptyState = function (_a) {
     loop: loop,
     classNameOverride: EmptyState_module.illustration
   }) : React__default.default.createElement(IllustrationComponent, {
-    alt: illustrationType,
     classNameOverride: EmptyState_module.illustration
   })), React__default.default.createElement("div", {
     className: EmptyState_module.textSide

package/dist/cjs/RichTextEditor/EditableRichTextContent/EditableRichTextContent.cjs

@@ -30,6 +30,7 @@ var EditableRichTextContent = function (_a) {
     contentProps = _a.contentProps,
     restProps = tslib.__rest(_a, ["onClick", "content", "classNameOverride", "labelText", "isLabelHidden", "contentProps"]);
   return React__default.default.createElement(React__default.default.Fragment, null, !isLabelHidden && React__default.default.createElement(Label.Label, {
+    classNameOverride: EditableRichTextContent_module.editorLabel,
     labelText: labelText
   }), React__default.default.createElement("div", tslib.__assign({
     onClick: function (e) {

package/dist/cjs/RichTextEditor/EditableRichTextContent/EditableRichTextContent.module.scss.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var styles = {
+  "editorLabel": "EditableRichTextContent-module_editorLabel__u2Fu9",
   "editableContainer": "EditableRichTextContent-module_editableContainer__zZEMC",
   "hiddenButton": "EditableRichTextContent-module_hiddenButton__Kq3oB"
 };

package/dist/cjs/RichTextEditor/RichTextEditor/RichTextEditor.cjs

@@ -134,6 +134,7 @@ var RichTextEditor = function (_a) {
     // Including `onContentChange` in the dependencies here will cause a 'Maximum update depth exceeded' issue
   }, [editorState]);
   return React__default.default.createElement(React__default.default.Fragment, null, !labelledBy && labelText && React__default.default.createElement(Label.Label, {
+    classNameOverride: RichTextEditor_module.editorLabel,
     id: labelId,
     labelText: labelText
   }), React__default.default.createElement("div", {

package/dist/cjs/RichTextEditor/RichTextEditor/RichTextEditor.module.scss.cjs

@@ -3,6 +3,7 @@
 var styles = {
   "editor": "RichTextEditor-module_editor__pVKqW",
   "hasToolbar": "RichTextEditor-module_hasToolbar__EBxnG",
+  "editorLabel": "RichTextEditor-module_editorLabel__om-dJ",
   "editorWrapper": "RichTextEditor-module_editorWrapper__5q3mG",
   "toolbar": "RichTextEditor-module_toolbar__ceLvw",
   "error": "RichTextEditor-module_error__Xugz8",

package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.cjs

@@ -13,6 +13,7 @@ require('../../../../../../Modal/GenericModal/subcomponents/ModalBody/ModalBody.
 var InputEditModal = require('../../../../../../Modal/InputEditModal/InputEditModal.cjs');
 var TextField = require('../../../../../../TextField/TextField.cjs');
 var validation = require('../../validation.cjs');
+var LinkModal_module = require('./LinkModal.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -61,8 +62,11 @@ var LinkModal = function (_a) {
     type: "text",
     defaultValue: href !== null && href !== void 0 ? href : "",
     labelText: "Link URL",
+    description: "Must start with http:// or https://",
     inputRef: inputRef,
-    validationMessage: validationStatus.message,
+    validationMessage: (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.message) && React__default.default.createElement("div", {
+      className: LinkModal_module.validationErrorMessage
+    }, validationStatus.message),
     status: validationStatus.status,
     onChange: function (e) {
       setHref(e.target.value);

package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.module.scss.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "validationErrorMessage": "LinkModal-module_validationErrorMessage__APw4U"
+};
+module.exports = styles;

package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/validation.cjs

@@ -1,11 +1,18 @@
 'use strict';
 
+var React = require('react');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
 var validateLink = function (href) {
   var isValidLink = /^https?:\/\//.test(href);
   if (!isValidLink) {
     return {
       status: "error",
-      message: "Please enter a valid URL"
+      message: React__default.default.createElement(React__default.default.Fragment, null, "Empty or invalid link. Links must start with http or https, e.g:", React__default.default.createElement("ul", null, React__default.default.createElement("li", null, "https://google.com"), React__default.default.createElement("li", null, "http://www.google.com")))
     };
   }
   return {

package/dist/cjs/Select/Select.cjs

@@ -40,7 +40,8 @@ var Select = React__default.default.forwardRef(function (_a, ref) {
     propsFullWidth = _a.fullWidth,
     propsClassName = _a.className,
     isDisabled = _a.isDisabled,
-    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled"]);
+    placeholder = _a.placeholder,
+    props = tslib.__rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled", "placeholder"]);
   var reactId = React.useId();
   // the default for fullWidth depends on the variant
   var fullWidth = propsFullWidth != null ? propsFullWidth : variant === "secondary" || variant === "secondary-small" ? false : true;
@@ -52,6 +53,7 @@ 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 || "",
     components: {
       Control: Control,
       Placeholder: Placeholder,
@@ -79,9 +81,11 @@ 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,
-    props = tslib.__rest(_a, ["className"]);
+    placeholder = _a.placeholder,
+    props = tslib.__rest(_a, ["className", "placeholder"]);
   return React__default.default.createElement(Async__default.default, tslib.__assign({}, props, {
     ref: ref,
+    placeholder: placeholder || "",
     components: {
       Control: Control,
       Placeholder: Placeholder,

package/dist/cjs/__future__/Select/Select.cjs

@@ -49,7 +49,8 @@ var Select = function (_a) {
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    placeholder = _a.placeholder,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? "" : _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"]);
@@ -70,13 +71,13 @@ var Select = function (_a) {
     isDisabled: isDisabled
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _c = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _c.labelProps,
-    reactAriaTriggerProps = _c.triggerProps,
-    valueProps = _c.valueProps,
-    menuProps = _c.menuProps,
-    errorMessageProps = _c.errorMessageProps,
-    descriptionProps = _c.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.
@@ -99,9 +100,9 @@ var Select = function (_a) {
     isReversed: isReversed,
     ref: refs.setReference
   });
-  var _d = React.useState(),
-    portalContainer = _d[0],
-    setPortalContainer = _d[1];
+  var _e = React.useState(),
+    portalContainer = _e[0],
+    setPortalContainer = _e[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);

package/dist/esm/DateInput/DateInput/DateInput.mjs

@@ -20,6 +20,7 @@ const DateInput = /*#__PURE__*/function () {
       className: classnames(styles.dateInput, classNameOverride)
     }, /*#__PURE__*/React.createElement(Label, {
       htmlFor: id,
+      id: "".concat(id, "-input-label"),
       labelText: labelText,
       reversed: isReversed,
       disabled: disabled

package/dist/esm/DatePicker/DatePicker.mjs

@@ -13,6 +13,7 @@ import { parseDateAsTextOrNumeral } from '../Calendar/utils/parseDateAsTextOrNum
 import 'date-fns';
 import { setFocusInCalendar } from '../Calendar/utils/setFocusInCalendar.mjs';
 import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
 import { DateInputField } from './subcomponents/DateInputField/DateInputField.mjs';
 import { getLocale } from './utils/getLocale.mjs';
 import { validateDate } from './utils/validateDate.mjs';
@@ -212,8 +213,11 @@ const DatePicker = /*#__PURE__*/function () {
       status: status !== undefined || !shouldUseInbuiltValidation ? status : inbuiltStatus,
       validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation ? validationMessage : inbuiltValidationMessage
     }, restDateInputFieldProps))), isOpen && ( /*#__PURE__*/React.createElement(CalendarPopover, {
-      referenceElement: containerRef.current
-    }, /*#__PURE__*/React.createElement(CalendarSingle, {
+      referenceElement: containerRef.current,
+      "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: "".concat(id, "-calendar-label")
+    }, "Select date from calendar for:"), /*#__PURE__*/React.createElement(CalendarSingle, {
       id: calendarId,
       selected: selectedDay,
       defaultMonth: defaultMonth,
@@ -222,7 +226,7 @@ const DatePicker = /*#__PURE__*/function () {
       locale: locale,
       onDayClick: handleCalendarDayChange,
       onMount: handleCalendarMount
-    }))));
+    })))));
   };
   DatePicker.displayName = "DatePicker";
   return DatePicker;

package/dist/esm/DateRangePicker/DateRangePicker.mjs

@@ -14,6 +14,7 @@ import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalen
 import '../Icon/subcomponents/SVG/SVG.mjs';
 import { DateStartIcon } from '../Icon/DateStartIcon.mjs';
 import { Label } from '../Label/Label.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
 import styles from './DateRangePicker.module.scss.mjs';
 
 /**
@@ -102,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/function () {
       ref: containerRef,
       className: classNameOverride
     }, /*#__PURE__*/React.createElement(Label, {
+      id: "".concat(id, "-input-label"),
       disabled: isDisabled,
       htmlFor: id,
       labelText: labelText
@@ -126,8 +128,11 @@ const DateRangePicker = /*#__PURE__*/function () {
       onEscapeKey: handleOpenClose,
       enabled: isOpen
     }, /*#__PURE__*/React.createElement(CalendarPopover, {
-      referenceElement: containerRef.current
-    }, /*#__PURE__*/React.createElement(LegacyCalendarRange, {
+      referenceElement: containerRef.current,
+      "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
+    }, /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: "".concat(id, "-calendar-label")
+    }, "Select dates from calendar for:"), /*#__PURE__*/React.createElement(LegacyCalendarRange, {
       selectedRange: selectedDateRange,
       defaultMonth: defaultMonth,
       weekStartsOn: weekStartsOn,

package/dist/esm/EmptyState/EmptyState.mjs

@@ -46,7 +46,6 @@ const EmptyState = /*#__PURE__*/function () {
       loop: loop,
       classNameOverride: styles.illustration
     })) : ( /*#__PURE__*/React.createElement(IllustrationComponent, {
-      alt: illustrationType,
       classNameOverride: styles.illustration
     }))), /*#__PURE__*/React.createElement("div", {
       className: styles.textSide

package/dist/esm/RichTextEditor/EditableRichTextContent/EditableRichTextContent.mjs

@@ -21,9 +21,10 @@ const EditableRichTextContent = /*#__PURE__*/function () {
       isLabelHidden = _b === void 0 ? false : _b,
       contentProps = _a.contentProps,
       restProps = __rest(_a, ["onClick", "content", "classNameOverride", "labelText", "isLabelHidden", "contentProps"]);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !isLabelHidden && /*#__PURE__*/React.createElement(Label, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !isLabelHidden && ( /*#__PURE__*/React.createElement(Label, {
+      classNameOverride: styles.editorLabel,
       labelText: labelText
-    }), /*#__PURE__*/React.createElement("div", __assign({
+    })), /*#__PURE__*/React.createElement("div", __assign({
       onClick: function (e) {
         return handleEditableClick(e, onClick);
       },

package/dist/esm/RichTextEditor/EditableRichTextContent/EditableRichTextContent.module.scss.mjs

@@ -1,4 +1,5 @@
 var styles = {
+  "editorLabel": "EditableRichTextContent-module_editorLabel__u2Fu9",
   "editableContainer": "EditableRichTextContent-module_editableContainer__zZEMC",
   "hiddenButton": "EditableRichTextContent-module_hiddenButton__Kq3oB"
 };

package/dist/esm/RichTextEditor/RichTextEditor/RichTextEditor.mjs

@@ -101,10 +101,11 @@ const RichTextEditor = /*#__PURE__*/function () {
       onChange(editorState);
       // Including `onContentChange` in the dependencies here will cause a 'Maximum update depth exceeded' issue
     }, [editorState]);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !labelledBy && labelText && /*#__PURE__*/React.createElement(Label, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !labelledBy && labelText && ( /*#__PURE__*/React.createElement(Label, {
+      classNameOverride: styles.editorLabel,
       id: labelId,
       labelText: labelText
-    }), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.editorWrapper, styles[status])
     }, controls && ( /*#__PURE__*/React.createElement(Toolbar, {
       "aria-controls": editorId,

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

@@ -1,6 +1,7 @@
 var styles = {
   "editor": "RichTextEditor-module_editor__pVKqW",
   "hasToolbar": "RichTextEditor-module_hasToolbar__EBxnG",
+  "editorLabel": "RichTextEditor-module_editorLabel__om-dJ",
   "editorWrapper": "RichTextEditor-module_editorWrapper__5q3mG",
   "toolbar": "RichTextEditor-module_toolbar__ceLvw",
   "error": "RichTextEditor-module_error__Xugz8",

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs

@@ -11,6 +11,7 @@ import '../../../../../../Modal/GenericModal/subcomponents/ModalBody/ModalBody.m
 import { InputEditModal } from '../../../../../../Modal/InputEditModal/InputEditModal.mjs';
 import { TextField } from '../../../../../../TextField/TextField.mjs';
 import { validateLink } from '../../validation.mjs';
+import styles from './LinkModal.module.scss.mjs';
 const LinkModal = /*#__PURE__*/function () {
   const LinkModal = function (_a) {
     var onSubmit = _a.onSubmit,
@@ -54,8 +55,11 @@ const LinkModal = /*#__PURE__*/function () {
       type: "text",
       defaultValue: href !== null && href !== void 0 ? href : "",
       labelText: "Link URL",
+      description: "Must start with http:// or https://",
       inputRef: inputRef,
-      validationMessage: validationStatus.message,
+      validationMessage: (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.message) && ( /*#__PURE__*/React.createElement("div", {
+        className: styles.validationErrorMessage
+      }, validationStatus.message)),
       status: validationStatus.status,
       onChange: function (e) {
         setHref(e.target.value);

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.module.scss.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "validationErrorMessage": "LinkModal-module_validationErrorMessage__APw4U"
+};
+export { styles as default };

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/validation.mjs

@@ -1,9 +1,10 @@
+import React from 'react';
 var validateLink = function (href) {
   var isValidLink = /^https?:\/\//.test(href);
   if (!isValidLink) {
     return {
       status: "error",
-      message: "Please enter a valid URL"
+      message: ( /*#__PURE__*/React.createElement(React.Fragment, null, "Empty or invalid link. Links must start with http or https, e.g:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "https://google.com"), /*#__PURE__*/React.createElement("li", null, "http://www.google.com"))))
     };
   }
   return {

package/dist/esm/Select/Select.mjs

@@ -30,7 +30,8 @@ const Select = /*#__PURE__*/function () {
       propsFullWidth = _a.fullWidth,
       propsClassName = _a.className,
       isDisabled = _a.isDisabled,
-      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled"]);
+      placeholder = _a.placeholder,
+      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled", "placeholder"]);
     var reactId = useId();
     // the default for fullWidth depends on the variant
     var fullWidth = propsFullWidth != null ? propsFullWidth : variant === "secondary" || variant === "secondary-small" ? false : true;
@@ -42,6 +43,7 @@ const Select = /*#__PURE__*/function () {
     }, label)) : null, /*#__PURE__*/React.createElement(ReactSelect, __assign({}, props, {
       ref: ref,
       "aria-labelledby": labelId,
+      placeholder: placeholder || "",
       components: {
         Control: Control,
         Placeholder: Placeholder,
@@ -72,9 +74,11 @@ const Select = /*#__PURE__*/function () {
 const AsyncSelect = /*#__PURE__*/function () {
   const AsyncSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var propsClassName = _a.className,
-      props = __rest(_a, ["className"]);
+      placeholder = _a.placeholder,
+      props = __rest(_a, ["className", "placeholder"]);
     return /*#__PURE__*/React.createElement(Async, __assign({}, props, {
       ref: ref,
+      placeholder: placeholder || "",
       components: {
         Control: Control,
         Placeholder: Placeholder,

package/dist/esm/__future__/Select/Select.mjs

@@ -41,7 +41,8 @@ const Select = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selectedKey = _a.selectedKey,
       description = _a.description,
-      placeholder = _a.placeholder,
+      _c = _a.placeholder,
+      placeholder = _c === void 0 ? "" : _c,
       isDisabled = _a.isDisabled,
       portalContainerId = _a.portalContainerId,
       restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
@@ -62,13 +63,13 @@ const Select = /*#__PURE__*/function () {
       isDisabled: isDisabled
     }, restProps);
     var state = useSelectState(ariaSelectProps);
-    var _c = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _c.labelProps,
-      reactAriaTriggerProps = _c.triggerProps,
-      valueProps = _c.valueProps,
-      menuProps = _c.menuProps,
-      errorMessageProps = _c.errorMessageProps,
-      descriptionProps = _c.descriptionProps;
+    var _d = 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.
@@ -91,9 +92,9 @@ const Select = /*#__PURE__*/function () {
       isReversed: isReversed,
       ref: refs.setReference
     });
-    var _d = useState(),
-      portalContainer = _d[0],
-      setPortalContainer = _d[1];
+    var _e = useState(),
+      portalContainer = _e[0],
+      setPortalContainer = _e[1];
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);