@indico-data/design-system 3.0.8 → 3.0.9

package/lib/index.js

@@ -5492,7 +5492,7 @@ const DisplayFormError = (_a) => {
 };
 
 const Input = React__namespace.default.forwardRef((_a, ref) => {
-    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
+    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, tabIndex, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "tabIndex", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
@@ -5502,7 +5502,7 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [iconName && (jsxRuntime.jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsxRuntime.jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [iconName && (jsxRuntime.jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsxRuntime.jsx("input", Object.assign({ ref: ref, tabIndex: tabIndex, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { "data-testid": `${name}-error`, message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -5815,10 +5815,10 @@ const Toggle = React__namespace.default.forwardRef((_a, ref) => {
 });
 
 const Textarea = React__namespace.default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue"]);
+    var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue, tabIndex } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue", "tabIndex"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const textareaClasses = classNames('textarea', { error: hasErrors });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "textarea-wrapper", children: jsxRuntime.jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue }, rest)) }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "textarea-wrapper", children: jsxRuntime.jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue, tabIndex: tabIndex }, rest)) }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledTextarea = withLabel(Textarea);
 
@@ -11910,7 +11910,8 @@ const validateInputValue = (value) => {
     return ''; // Valid time format
 };
 
-const TimePicker = ({ timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, }) => {
+const TimePicker = (_a) => {
+    var { ref, timeValue = '', label = 'Time Picker', name = 'time-picker', hasHiddenLabel = false, onTimeChange, className, isDisabled, isReadOnly, tabIndex } = _a, rest = __rest(_a, ["ref", "timeValue", "label", "name", "hasHiddenLabel", "onTimeChange", "className", "isDisabled", "isReadOnly", "tabIndex"]);
     const [validationError, setValidationError] = React.useState('');
     const [inputValue, setInputValue] = React.useState(timeValue);
     const handleTimeChange = (e) => {
@@ -11932,11 +11933,11 @@ const TimePicker = ({ timeValue = '', label = 'Time Picker', name = 'time-picker
             onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(formattedValue);
         }
     };
-    return (jsxRuntime.jsx("div", { className: "time-input-wrapper", children: jsxRuntime.jsx(LabeledInput, { "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, errorMessage: validationError }) }));
+    return (jsxRuntime.jsx("div", { className: "time-input-wrapper", children: jsxRuntime.jsx(LabeledInput, Object.assign({ ref: ref, tabIndex: tabIndex, className: className, "data-testid": `${name}-input`, label: label, hasHiddenLabel: hasHiddenLabel, value: inputValue, maxLength: 8, onChange: handleTimeChange, onBlur: handleBlur, name: name, errorMessage: validationError, readonly: isReadOnly, isDisabled: isDisabled }, rest)) }));
 };
 
 const DatePicker = (props) => {
-    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick"]);
+    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick, isReadOnly, ref, timeTabIndex, dateTabIndex } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick", "isReadOnly", "ref", "timeTabIndex", "dateTabIndex"]);
     const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
     const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
     const modeMap = {
@@ -11968,7 +11969,7 @@ const DatePicker = (props) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
     const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
-    return (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsxRuntime.jsx(DayPicker, Object.assign({}, finalProps))] }));
+    return (jsxRuntime.jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsxRuntime.jsx("div", { className: "time-picker-wrapper", children: jsxRuntime.jsxs(Row, { align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("p", { className: "ma-0", children: "Select Time" }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(TimePicker, { ref: ref, timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange, readonly: isReadOnly, tabIndex: timeTabIndex }) })] }) })), jsxRuntime.jsx(DayPicker, Object.assign({}, finalProps))] }));
 };
 
 function getNodeName$1(node) {
@@ -13644,7 +13645,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$2(5), flip$2(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, }) {
     const [internalIsOpen, setInternalIsOpen] = React.useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13666,7 +13667,7 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     const click = useClick(context);
     const dismiss = useDismiss(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
-    const tooltipContent = (jsxRuntime.jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: "floatui-container", children: jsxRuntime.jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
+    const tooltipContent = (jsxRuntime.jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsxRuntime.jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
                 (isPortal ? (jsxRuntime.jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
 }
@@ -19081,7 +19082,7 @@ const formatDateAsString$1 = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDatePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, hasHiddenLabel, ref, isReadOnly, tabIndex } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "hasHiddenLabel", "ref", "isReadOnly", "tabIndex"]);
     const inputId = React.useId();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString$1(selected) : '');
@@ -19115,11 +19116,11 @@ function SingleInputDatePicker(props) {
             setLocalTextValue('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', name: 'Date Picker' }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, hasHiddenLabel: hasHiddenLabel, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', tabIndex: tabIndex, name: 'Date Picker', ref: ref, readonly: isReadOnly }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
 }
 
 function InputDateRangePicker(props) {
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, month, id, onSelect, selected, isOpen, setIsOpen, inputPlaceholder, inputIconName, toErrorMessage, fromErrorMessage, gutterWidth, fromLabel, toLabel, closeOnSelect, clearOnClose, hasHiddenLabel, ref, isFromReadOnly, isToReadOnly, toTabIndex, fromTabIndex } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "month", "id", "onSelect", "selected", "isOpen", "setIsOpen", "inputPlaceholder", "inputIconName", "toErrorMessage", "fromErrorMessage", "gutterWidth", "fromLabel", "toLabel", "closeOnSelect", "clearOnClose", "hasHiddenLabel", "ref", "isFromReadOnly", "isToReadOnly", "toTabIndex", "fromTabIndex"]);
     const inputId = React.useId();
     // Hold the input values in state
     const [localTextValueFrom, setLocalTextValueFrom] = React.useState((selected === null || selected === void 0 ? void 0 : selected.from) ? formatDateAsString$1(selected.from) : '');
@@ -19178,14 +19179,14 @@ function InputDateRangePicker(props) {
             setLocalTextValueTo('');
         }
     }, [isOpen, clearOnClose]);
-    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, children: [jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel }) })] }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
+    return (jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, setIsOpen: setIsOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsxs(Row, { gutterWidth: gutterWidth, children: [jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-from`, value: localTextValueFrom, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'from'), errorMessage: fromErrorMessage, label: fromLabel, name: 'From Date', "data-testid": "date-picker-from", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isFromReadOnly, tabIndex: fromTabIndex }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx(LabeledInput, { id: `${inputId}-to`, value: localTextValueTo, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, onChange: (e) => handleInputChange(e, 'to'), errorMessage: toErrorMessage, label: toLabel, name: 'To Date', "data-testid": "date-picker-to", hasHiddenLabel: hasHiddenLabel, ref: ref, readonly: isToReadOnly, tabIndex: toTabIndex }) })] }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, month: localMonth, onMonthChange: (date) => setLocalMonth(date), mode: "range", selected: selected, onSelect: handleDayPickerSelect }, rest))] }));
 }
 
 const formatDateAsString = (date) => format(date, 'MM/dd/yyyy');
 
 function SingleInputDateTimePicker(props) {
     var _a;
-    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel"]);
+    const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, captionLayout, initialMonth, id, label, selected, isOpen, inputPlaceholder, clearOnClose, inputIconName, isClearable, errorMessage, onSelect, timeValue, onTimeChange, hasHiddenLabel, isReadOnly, timePickerRef, dateTabIndex, timeTabIndex, ref } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "captionLayout", "initialMonth", "id", "label", "selected", "isOpen", "inputPlaceholder", "clearOnClose", "inputIconName", "isClearable", "errorMessage", "onSelect", "timeValue", "onTimeChange", "hasHiddenLabel", "isReadOnly", "timePickerRef", "dateTabIndex", "timeTabIndex", "ref"]);
     const inputId = React.useId();
     // The text value is assumed to be unneeded by the consumer.
     const [localTextValue, setLocalTextValue] = React.useState(selected ? formatDateAsString(selected) : '');
@@ -19222,7 +19223,7 @@ function SingleInputDateTimePicker(props) {
     const handleTimeChange = (time) => {
         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
     };
-    return (jsxRuntime.jsxs(Row, { children: [jsxRuntime.jsx(Col, { children: jsxRuntime.jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker` }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx(TimePicker, { timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange }) })] }));
+    return (jsxRuntime.jsxs(Row, { className: "date-time-picker-row", children: [jsxRuntime.jsx(Col, { className: "date-picker-col", children: jsxRuntime.jsxs(FloatUI, { className: "date-picker-float-ui", isOpen: isOpen, ariaLabel: ariaLabel, children: [jsxRuntime.jsx(LabeledInput, { ref: ref, className: `date-picker-input`, id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isReadOnly || isDisabled, readonly: isReadOnly, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, hasHiddenLabel: hasHiddenLabel, label: 'Single Date Picker', name: `${id}-date-picker`, tabIndex: dateTabIndex }), jsxRuntime.jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth, isReadOnly: isReadOnly }, rest))] }) }), jsxRuntime.jsx(Col, { xs: "content", className: "time-picker-col", children: jsxRuntime.jsx(TimePicker, { ref: timePickerRef, className: `time-picker-input`, timeValue: timeValue, name: `${id}-time-picker`, hasHiddenLabel: true, onTimeChange: handleTimeChange, isReadOnly: isReadOnly, isDisabled: isDisabled, tabIndex: timeTabIndex }) })] }));
 }
 
 const Form = (_a) => {