@dynamic-framework/ui-react 1.19.0 → 1.20.0

package/dist/index.js

@@ -10,8 +10,8 @@ var reactSplide = require('@splidejs/react-splide');
 var currency = require('currency.js');
 var DatePicker = require('react-datepicker');
 var dateFns = require('date-fns');
-var mask = require('@react-input/mask');
 var Select = require('react-select');
+var mask = require('@react-input/mask');
 var ResponsivePagination = require('react-responsive-pagination');
 var react = require('@floating-ui/react');
 var ContentLoader = require('react-content-loader');
@@ -100,29 +100,31 @@ function usePortal(portalName) {
  * @returns The list and controls to modify the stack
  * @see https://react-hooks.org/docs/useStackState
  */
-function useStackState(initialList) {
+function useStackState(initialList = []) {
     const [list, setList] = React.useState(initialList);
-    const { length } = list;
-    const push = React.useCallback((item) => {
-        setList((prevList) => [
-            ...prevList,
-            item,
-        ]);
-    }, []);
-    const pop = React.useCallback(() => {
-        setList((prevList) => (prevList.slice(0, prevList.length - 1)));
-    }, []);
+    const push = React.useCallback((item) => (setList((prevList) => [
+        ...prevList,
+        item,
+    ])), []);
+    const pop = React.useCallback(() => (setList((prevList) => (prevList.slice(0, prevList.length - 1)))), []);
     const peek = React.useCallback(() => list.at(-1), [list]);
-    const clear = () => setList([]);
-    const isEmpty = React.useCallback(() => list.length === 0, [list]);
-    const controls = {
+    const clear = React.useCallback(() => setList([]), []);
+    const isEmpty = React.useCallback(() => list.length === 0, [list.length]);
+    const controls = React.useMemo(() => ({
         clear,
         isEmpty,
-        length,
+        length: list.length,
         peek,
         pop,
         push,
-    };
+    }), [
+        clear,
+        isEmpty,
+        list.length,
+        peek,
+        pop,
+        push,
+    ]);
     return [list, controls];
 }
 
@@ -156,7 +158,7 @@ function DPortalContextProvider({ portalName, children, availablePortals, }) {
         openPortal,
         closePortal,
     }), [stack, openPortal, closePortal]);
-    return (jsxRuntime.jsxs(DPortalContext.Provider, { value: value, children: [children, created && reactDom.createPortal(jsxRuntime.jsx(jsxRuntime.Fragment, { children: stack.map(({ Component, name, payload, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "backdrop fade show" }), jsxRuntime.jsx(Component, { name: name, payload: payload })] }))) }), document.getElementById(portalName))] }));
+    return (jsxRuntime.jsxs(DPortalContext.Provider, { value: value, children: [children, created && reactDom.createPortal(jsxRuntime.jsx(jsxRuntime.Fragment, { children: stack.map(({ Component, name, payload, }) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: "backdrop fade show" }), jsxRuntime.jsx(Component, { name: name, payload: payload })] }, name))) }), document.getElementById(portalName))] }));
 }
 function useDPortalContext() {
     const context = React.useContext(DPortalContext);
@@ -471,58 +473,187 @@ var DInput$1 = ForwardedDInput;
 
 function DDatePickerTime(_a) {
     var { value, onChange, id, label, className, style } = _a, props = tslib.__rest(_a, ["value", "onChange", "id", "label", "className", "style"]);
-    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center gap-2 flex-column d-datepicker-time', className), style: style, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, className: "d-datepicker-time-label", children: label })), jsxRuntime.jsx(DInput$1, Object.assign({}, onChange && {
+    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center gap-2 flex-column d-datepicker-time', className), style: style, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, className: "d-datepicker-time-label", children: label })), jsxRuntime.jsx(DInput$1, Object.assign({ className: "w-100" }, onChange && {
                 onChange,
             }, { type: "time", id: id, value: value }, props))] }));
 }
 
 function DDatePickerInput(_a, ref) {
-    var { value, onClick, id, iconEnd, className, style } = _a, props = tslib.__rest(_a, ["value", "onClick", "id", "iconEnd", "className", "style"]);
-    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: ref, onClick: onClick, readOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd, className: className, style: style }, props)));
+    var { value, onClick, id, iconEnd, className, style, inputLabel, readOnly: ignored } = _a, props = tslib.__rest(_a, ["value", "onClick", "id", "iconEnd", "className", "style", "inputLabel", "readOnly"]);
+    return (jsxRuntime.jsx(DInput$1, Object.assign({ ref: ref, onClick: onClick, readOnly: true, type: "text", id: id, value: value, onIconEndClick: onClick, iconEnd: iconEnd, className: className, style: style, label: inputLabel }, props)));
 }
 const ForwardedDDatePickerInput = React.forwardRef(DDatePickerInput);
 ForwardedDDatePickerInput.displayName = 'DDatePickerInput';
 var DDatePickerInput$1 = ForwardedDDatePickerInput;
 
-function DMonthPicker(_a) {
-    var { onChange, date, locale, className, calendarClassName, headerPrevYearAriaLabel = 'decrease year', headerNextYearAriaLabel = 'increase year', iconFamilyClass, iconFamilyPrefix, iconPrevMonth: iconPrevMonthProp, iconNextMonth: iconNextMonthProp } = _a, props = tslib.__rest(_a, ["onChange", "date", "locale", "className", "calendarClassName", "headerPrevYearAriaLabel", "headerNextYearAriaLabel", "iconFamilyClass", "iconFamilyPrefix", "iconPrevMonth", "iconNextMonth"]);
-    const selected = React.useMemo(() => dateFns.parseISO(date), [date]);
-    const { iconMap: { chevronLeft, chevronRight, }, } = useDContext();
-    const iconPrevMonth = React.useMemo(() => iconPrevMonthProp || chevronLeft, [chevronLeft, iconPrevMonthProp]);
-    const iconNextMonth = React.useMemo(() => iconNextMonthProp || chevronRight, [chevronRight, iconNextMonthProp]);
-    const dateFormatted = React.useMemo(() => (dateFns.format(new Date(date), 'MMMM yyyy', { locale })), [date, locale]);
-    return (jsxRuntime.jsx(DatePicker, Object.assign({ showMonthYearPicker: true, selected: selected, className: className, calendarClassName: classNames('d-month-picker', calendarClassName), onChange: onChange }, locale && { locale }, { customInput: (jsxRuntime.jsx("p", { className: "fw-bold text-capitalize", children: dateFormatted })), renderCustomHeader: ({ monthDate, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, }) => (jsxRuntime.jsxs("div", { className: "d-flex align-items-center justify-content-between gap-6 fs-6 bg-dark", children: [jsxRuntime.jsx(DButton, { iconStart: iconPrevMonth, size: "sm", variant: "link", theme: "light", onClick: decreaseYear, disabled: prevYearButtonDisabled, ariaLabel: headerPrevYearAriaLabel, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix }), jsxRuntime.jsx("p", { className: "fs-6 fw-bold", children: monthDate.getFullYear() }), jsxRuntime.jsx(DButton, { iconStart: iconNextMonth, size: "sm", variant: "link", theme: "light", onClick: increaseYear, disabled: nextYearButtonDisabled, ariaLabel: headerNextYearAriaLabel, iconEndFamilyClass: iconFamilyPrefix, iconEndFamilyPrefix: iconFamilyPrefix })] })) }, props)));
-}
-
-function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel = 'decrease month', nextMonthAriaLabel = 'increase month', iconSize, buttonVariant, buttonTheme, locale, style, className, }) {
-    const onChangeDate = React.useCallback((value) => {
-        if (value) {
-            changeMonth(dateFns.getMonth(value));
-            changeYear(dateFns.getYear(value));
+function DInputCheck({ type, name, label, ariaLabel, checked = false, id, disabled = false, indeterminate, value, onChange, className, style, }) {
+    const innerRef = React.useRef(null);
+    const handleChange = React.useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    React.useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = Boolean(indeterminate);
         }
-    }, [changeMonth, changeYear]);
-    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center justify-content-between d-datepicker-header', className), style: style, children: [jsxRuntime.jsx(DButton, { iconStart: iconPrevMonth, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, disabled: prevMonthButtonDisabled, ariaLabel: prevMonthAriaLabel }), jsxRuntime.jsx(DMonthPicker, Object.assign({}, !withMonthSelector && { readOnly: true }, withMonthSelector && { className: 'cursor-pointer' }, { date: monthDate.toISOString(), onChange: onChangeDate, iconPrevMonth: iconPrevMonth, iconNextMonth: iconNextMonth }, locale && { locale })), jsxRuntime.jsx(DButton, { iconStart: iconNextMonth, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, disabled: nextMonthButtonDisabled, ariaLabel: nextMonthAriaLabel })] }));
+    }, [indeterminate]);
+    React.useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.checked = checked;
+        }
+    }, [checked]);
+    if (!label) {
+        return (jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel }));
+    }
+    return (jsxRuntime.jsxs("div", { className: "form-check", children: [jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: disabled, type: type, name: name, value: value }), jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label })] }));
+}
+
+function DSelectOptionCheck(_a) {
+    var { innerProps, children, isSelected } = _a, props = tslib.__rest(_a, ["innerProps", "children", "isSelected"]);
+    return (jsxRuntime.jsx(Select.components.Option, Object.assign({ className: classNames({
+            'd-select__option': true,
+            'd-select__option--is-checkbox': true,
+        }), isSelected: isSelected, innerProps: innerProps }, props, { children: jsxRuntime.jsxs("label", { htmlFor: `${innerProps.id}Check`, children: [jsxRuntime.jsx(DInputCheck, { type: "checkbox", checked: isSelected, id: `${innerProps.id}Check` }), children] }) })));
+}
+
+function DSelectOptionIcon(_a) {
+    var { children, data } = _a, props = tslib.__rest(_a, ["children", "data"]);
+    return (jsxRuntime.jsxs(Select.components.Option, Object.assign({ className: classNames({
+            'd-select__option--has-icon': true,
+        }), data: data }, props, { children: [jsxRuntime.jsx(DIcon, { icon: data.icon }), children] })));
+}
+
+function DSelectSingleValueIconText(_a) {
+    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
+    const [value] = getValue();
+    return (jsxRuntime.jsxs(Select.components.SingleValue, Object.assign({ className: classNames({
+            'd-select__control--has-icon': true,
+        }), getValue: getValue }, props, { children: [jsxRuntime.jsx(DIcon, { icon: value.icon }), children] })));
+}
+
+function DSelectDropdownIndicator(props) {
+    const { iconMap: { chevronDown, }, } = useDContext();
+    return (jsxRuntime.jsx(Select.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: chevronDown }) })));
+}
+
+function DSelectClearIndicator(props) {
+    const { iconMap: { xLg, }, } = useDContext();
+    return (jsxRuntime.jsx(Select.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: xLg }) })));
+}
+
+function DSelectMultiValueRemove(props) {
+    const { iconMap: { x, }, } = useDContext();
+    return (jsxRuntime.jsx(Select.components.MultiValueRemove, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: x }) })));
+}
+
+function DSelectLoadingIndicator({ innerProps, }) {
+    return (jsxRuntime.jsx("div", Object.assign({ className: classNames({
+            'd-select__indicator': true,
+            'd-select__loading-indicator': true,
+        }) }, innerProps, { children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })));
+}
+
+function DSelectOptionEmoji(_a) {
+    var { children, data } = _a, props = tslib.__rest(_a, ["children", "data"]);
+    return (jsxRuntime.jsxs(Select.components.Option, Object.assign({ className: classNames({
+            'd-select__option--has-icon': true,
+        }), data: data }, props, { children: [jsxRuntime.jsx("span", { children: data.emoji }), jsxRuntime.jsx("span", { children: children })] })));
+}
+
+function DSelectSingleValueEmoji(_a) {
+    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
+    const [value] = getValue();
+    return (jsxRuntime.jsx(Select.components.SingleValue, Object.assign({ className: classNames({
+            'd-select__control--has-icon': true,
+        }), getValue: getValue }, props, { children: value.emoji })));
+}
+
+function DSelectSingleValueEmojiText(_a) {
+    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
+    const [value] = getValue();
+    return (jsxRuntime.jsxs(Select.components.SingleValue, Object.assign({ className: classNames({
+            'd-select__control--has-icon': true,
+        }), getValue: getValue }, props, { children: [jsxRuntime.jsx("span", { children: value.emoji }), jsxRuntime.jsx("span", { children: children })] })));
+}
+
+function DSelect(_a) {
+    var { id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick } = _a, props = tslib.__rest(_a, ["id", "className", "style", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "rtl", "searchable", "multi", "components", "defaultValue", "onIconStartClick", "onIconEndClick"]);
+    const handleOnIconStartClick = React.useCallback(() => {
+        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);
+    }, [onIconStartClick, defaultValue]);
+    const handleOnIconEndClick = React.useCallback(() => {
+        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);
+    }, [onIconEndClick, defaultValue]);
+    return (jsxRuntime.jsxs("div", { className: classNames('d-select', className, {
+            disabled: disabled || loading,
+        }), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: classNames({
+                    'input-group': true,
+                    'has-validation': invalid,
+                    disabled: disabled || loading,
+                }), children: [iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), jsxRuntime.jsx(Select, Object.assign({ styles: {
+                            control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),
+                            container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),
+                            menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%' })),
+                        }, className: classNames('d-select-component', {
+                            'is-invalid': invalid,
+                            'is-valid': valid,
+                        }), classNamePrefix: "d-select", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, unstyled: true, components: Object.assign({ DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), ((invalid || valid) && !iconEnd && !loading) && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !loading) && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
+}
+var DSelect$1 = Object.assign(DSelect, {
+    OptionCheck: DSelectOptionCheck,
+    OptionIcon: DSelectOptionIcon,
+    SingleValueIconText: DSelectSingleValueIconText,
+    DropdownIndicator: DSelectDropdownIndicator,
+    ClearIndicator: DSelectClearIndicator,
+    MultiValueRemove: DSelectMultiValueRemove,
+    LoadingIndicator: DSelectLoadingIndicator,
+    OptionEmoji: DSelectOptionEmoji,
+    SingleValueEmoji: DSelectSingleValueEmoji,
+    SingleValueEmojiText: DSelectSingleValueEmojiText,
+});
+
+function DDatePickerHeader({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel = 'decrease month', nextMonthAriaLabel = 'increase month', iconSize, buttonVariant, buttonTheme, locale, style, className, minYearSelect, maxYearSelect, }) {
+    const arrayYears = React.useMemo(() => Array.from({ length: maxYearSelect - minYearSelect + 1 }, (_, index) => minYearSelect + index), [maxYearSelect, minYearSelect]);
+    const years = React.useMemo(() => arrayYears.map((year) => ({
+        label: year.toString(),
+        value: year,
+    })), [arrayYears]);
+    const defaultYear = React.useMemo(() => years.find((year) => year.value === dateFns.getYear(date)), [date, years]);
+    const arrayMonths = React.useMemo(() => Array.from({ length: 12 }, (_, i) => dateFns.format(new Date(2000, i), 'LLLL', { locale })), [locale]);
+    const months = React.useMemo(() => arrayMonths.map((month, i) => ({
+        label: month,
+        value: i,
+    })), [arrayMonths]);
+    const defaultMonth = React.useMemo(() => ({
+        label: arrayMonths[dateFns.getMonth(date)],
+        value: dateFns.getMonth(date),
+    }), [arrayMonths, date]);
+    return (jsxRuntime.jsxs("div", { className: classNames('d-flex align-items-center d-datepicker-header', className), style: style, children: [jsxRuntime.jsx(DButton, { iconStart: iconPrevMonth, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: decreaseMonth, disabled: prevMonthButtonDisabled, ariaLabel: prevMonthAriaLabel, className: "header-button" }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-center flex-grow-1", children: [jsxRuntime.jsx(DSelect$1, { options: months, value: defaultMonth, defaultValue: defaultMonth, onChange: (month) => changeMonth((month === null || month === void 0 ? void 0 : month.value) || 0), searchable: false }), jsxRuntime.jsx(DSelect$1, { options: years, value: defaultYear, defaultValue: defaultYear, onChange: (year) => changeYear(Number(year === null || year === void 0 ? void 0 : year.value)), searchable: false })] }), jsxRuntime.jsx(DButton, { iconStart: iconNextMonth, iconStartFamilyClass: iconFamilyClass, iconStartFamilyPrefix: iconFamilyPrefix, iconStartMaterialStyle: iconMaterialStyle, size: iconSize, variant: buttonVariant, theme: buttonTheme, onClick: increaseMonth, disabled: nextMonthButtonDisabled, ariaLabel: nextMonthAriaLabel, className: "header-button" })] }));
 }
 
 function DDatePicker(_a) {
-    var { date, selectsRange = false, withMonthSelector, inputLabel, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, headerPrevMonthAriaLabel = 'decrease month', headerNextMonthAriaLabel = 'increase month', headerIconSize = 'sm', headerButtonVariant = 'link', headerButtonTheme = 'dark', locale, className, style } = _a, props = tslib.__rest(_a, ["date", "selectsRange", "withMonthSelector", "inputLabel", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeLabel", "iconInput", "iconHeaderPrevMonth", "iconHeaderNextMonth", "iconMaterialStyle", "iconFamilyClass", "iconFamilyPrefix", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "headerIconSize", "headerButtonVariant", "headerButtonTheme", "locale", "className", "style"]);
+    var { date, selectsRange = false, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel = 'open calendar', inputId = 'input-calendar', timeId = 'input-time', timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect = 1900, maxYearSelect = 2100, iconHeaderSize = 'sm', headerPrevMonthAriaLabel = 'decrease month', headerNextMonthAriaLabel = 'increase month', headerButtonVariant = 'link', headerButtonTheme = 'dark', invalid = false, valid = false, locale, className, formatWeekDay: formatWeekDayProp, style } = _a, props = tslib.__rest(_a, ["date", "selectsRange", "inputLabel", "inputHint", "inputAriaLabel", "inputActionAriaLabel", "inputId", "timeId", "timeLabel", "iconInput", "iconHeaderPrevMonth", "iconHeaderNextMonth", "iconMaterialStyle", "iconFamilyClass", "iconFamilyPrefix", "minYearSelect", "maxYearSelect", "iconHeaderSize", "headerPrevMonthAriaLabel", "headerNextMonthAriaLabel", "headerButtonVariant", "headerButtonTheme", "invalid", "valid", "locale", "className", "formatWeekDay", "style"]);
     const { iconMap: { calendar, chevronLeft, chevronRight, }, } = useDContext();
     const selected = React.useMemo(() => (date ? dateFns.parseISO(date) : null), [date]);
     const iconInput = React.useMemo(() => iconInputProp || calendar, [calendar, iconInputProp]);
+    const handleFormatWeekDay = React.useMemo(() => (formatWeekDayProp
+        ? (day) => formatWeekDayProp(day)
+        : (day) => day.substring(0, 1)), [formatWeekDayProp]);
     const iconPrevMonth = React.useMemo(() => iconHeaderPrevMonthProp || chevronLeft, [chevronLeft, iconHeaderPrevMonthProp]);
     const iconNextMonth = React.useMemo(() => iconHeaderNextMonthProp || chevronRight, [chevronRight, iconHeaderNextMonthProp]);
-    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeader, Object.assign({}, headerProps, locale && { locale }, { iconPrevMonth: iconPrevMonth, iconNextMonth: iconNextMonth, iconMaterialStyle: iconMaterialStyleProp, prevMonthAriaLabel: headerPrevMonthAriaLabel, nextMonthAriaLabel: headerNextMonthAriaLabel, iconSize: headerIconSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, withMonthSelector: !!withMonthSelector }))), [locale,
+    const DatePickerHeader = React.useCallback((headerProps) => (jsxRuntime.jsx(DDatePickerHeader, Object.assign({}, headerProps, locale && { locale }, { iconPrevMonth: iconPrevMonth, iconNextMonth: iconNextMonth, iconMaterialStyle: iconMaterialStyleProp, prevMonthAriaLabel: headerPrevMonthAriaLabel, nextMonthAriaLabel: headerNextMonthAriaLabel, iconSize: iconHeaderSize, buttonVariant: headerButtonVariant, buttonTheme: headerButtonTheme, minYearSelect: minYearSelect, maxYearSelect: maxYearSelect }))), [
+        locale,
         iconPrevMonth,
         iconNextMonth,
         iconMaterialStyleProp,
         headerPrevMonthAriaLabel,
         headerNextMonthAriaLabel,
-        headerIconSize,
+        iconHeaderSize,
         headerButtonVariant,
         headerButtonTheme,
-        withMonthSelector,
+        minYearSelect,
+        maxYearSelect,
     ]);
-    return (jsxRuntime.jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "d-date-picker", renderCustomHeader: (headerProps) => jsxRuntime.jsx(DatePickerHeader, Object.assign({}, headerProps)), customInput: (jsxRuntime.jsx(DDatePickerInput$1, { id: inputId, "aria-label": inputAriaLabel, iconEndAriaLabel: inputActionAriaLabel, iconMaterialStyle: iconMaterialStyleProp, iconEnd: iconInput, className: className, style: style })), customTimeInput: jsxRuntime.jsx(DDatePickerTime, { id: timeId, label: timeLabel }), selectsRange: selectsRange }, locale && { locale }, props)));
+    return (jsxRuntime.jsx(DatePicker, Object.assign({ selected: selected, calendarClassName: "d-date-picker", renderCustomHeader: (headerProps) => jsxRuntime.jsx(DatePickerHeader, Object.assign({}, headerProps)), selectsRange: selectsRange, formatWeekDay: handleFormatWeekDay, customInput: (jsxRuntime.jsx(DDatePickerInput$1, { id: inputId, "aria-label": inputAriaLabel, iconEndAriaLabel: inputActionAriaLabel, iconMaterialStyle: iconMaterialStyleProp, iconEnd: iconInput, inputLabel: inputLabel, className: className, style: style, invalid: invalid, valid: valid, hint: inputHint })), customTimeInput: (jsxRuntime.jsx(DDatePickerTime, { id: timeId, label: timeLabel })) }, locale && { locale }, props)));
 }
 
 function DInputMask(props, ref) {
@@ -691,40 +822,39 @@ const ForwardedDInputPassword = React.forwardRef(DInputPassword);
 ForwardedDInputPassword.displayName = 'DInputPassword';
 var DInputPassword$1 = ForwardedDInputPassword;
 
-function DInputCheck({ type, name, label, ariaLabel, checked = false, id, disabled = false, indeterminate, value, onChange, className, style, }) {
-    const innerRef = React.useRef(null);
-    const handleChange = React.useCallback((event) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange]);
-    React.useEffect(() => {
-        if (innerRef.current) {
-            innerRef.current.indeterminate = Boolean(indeterminate);
-        }
-    }, [indeterminate]);
-    React.useEffect(() => {
-        if (innerRef.current) {
-            innerRef.current.checked = checked;
-        }
-    }, [checked]);
-    if (!label) {
-        return (jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: disabled, type: type, name: name, value: value, "aria-label": ariaLabel }));
-    }
-    return (jsxRuntime.jsxs("div", { className: "form-check", children: [jsxRuntime.jsx("input", { ref: innerRef, onChange: handleChange, className: classNames('form-check-input', className), style: style, id: id, disabled: disabled, type: type, name: name, value: value }), jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label })] }));
-}
-
 function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder, type = 'text', disabled = false, loading = false, secret = false, iconFamilyClass, iconFamilyPrefix, characters = 4, invalidIcon: invalidIconProp, validIcon: validIconProp, innerInputMode = 'text', hint, invalid = false, valid = false, className, style, onChange, }) {
     const [pattern, setPattern] = React.useState('');
+    const [activeInput, setActiveInput] = React.useState(Array.from({ length: characters }).fill(''));
+    const isInputNum = React.useMemo(() => type === 'number' || type === 'tel', [type]);
     React.useEffect(() => {
         setPattern(type === 'number' ? '[0-9]+' : '^[a-zA-Z0-9]+$');
     }, [type]);
-    const nextInput = React.useCallback((event) => {
+    const handleOTPChange = React.useCallback((otp) => {
+        const otpValue = otp.join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(otpValue);
+    }, [onChange]);
+    const handlePaste = React.useCallback((event) => {
+        event.preventDefault();
+        const pastedData = event.clipboardData.getData('text/plain');
+        const cleanData = isInputNum ? pastedData.replace(/[^0-9]/gmi, '') : pastedData;
+        const newInput = Array.from({ length: characters }).map((_, index) => cleanData[index] || '');
+        setActiveInput(newInput);
+        handleOTPChange(newInput);
+        event.currentTarget.blur();
+    }, [characters, handleOTPChange, isInputNum]);
+    const nextInput = React.useCallback((event, index) => {
         var _a;
-        const input = event.target;
         const regex = new RegExp(pattern);
+        const input = event.currentTarget;
         if (!regex.test(input.value)) {
             input.value = '';
         }
         if (input.value !== '') {
+            setActiveInput((prev) => {
+                const newValue = prev.with(index, input.value);
+                handleOTPChange(newValue);
+                return newValue;
+            });
             if (input.nextSibling) {
                 (_a = input.nextSibling) === null || _a === void 0 ? void 0 : _a.focus();
             }
@@ -732,43 +862,39 @@ function DInputPin({ id, label = '', labelIcon, labelIconFamilyClass, labelIconF
                 input.blur();
             }
         }
-    }, [pattern]);
-    const prevInput = React.useCallback((event) => {
+    }, [handleOTPChange, pattern]);
+    const prevInput = React.useCallback(({ key, currentTarget }, index) => {
         var _a;
-        if (event.key === 'Backspace') {
-            const { value } = event.currentTarget;
-            if (event.currentTarget.previousSibling && value === '') {
-                (_a = event.currentTarget.previousSibling) === null || _a === void 0 ? void 0 : _a.focus();
+        if (key === 'Backspace') {
+            const { value } = currentTarget;
+            setActiveInput((prev) => {
+                const newVal = prev.with(index, '');
+                handleOTPChange(newVal);
+                return newVal;
+            });
+            if (currentTarget.previousSibling && value === '') {
+                (_a = currentTarget.previousSibling) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                event.currentTarget.blur();
-                event.currentTarget.focus();
+                currentTarget.blur();
+                currentTarget.focus();
             }
         }
-    }, []);
-    const focusInput = React.useCallback((event) => {
-        // eslint-disable-next-line no-param-reassign
-        event.currentTarget.value = '';
+    }, [handleOTPChange]);
+    const focusInput = React.useCallback((index) => {
+        setActiveInput((prev) => prev.with(index, ''));
     }, []);
     const wheelInput = React.useCallback((event) => {
         event.currentTarget.blur();
     }, []);
-    const formChange = React.useCallback((event) => {
-        const formData = new FormData(event.currentTarget);
-        const values = Array.from(formData.values()).join('');
-        onChange === null || onChange === void 0 ? void 0 : onChange(values);
-    }, [onChange]);
-    const preventDefaultEvent = React.useCallback((event) => {
-        event.preventDefault();
-    }, []);
     const { iconMap: { input } } = useDContext();
     const invalidIcon = React.useMemo(() => invalidIconProp || input.invalid, [input.invalid, invalidIconProp]);
     const validIcon = React.useMemo(() => validIconProp || input.valid, [input.valid, validIconProp]);
-    return (jsxRuntime.jsxs("div", { className: classNames('d-input-pin', className), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("form", { id: id, onInput: formChange, onSubmit: preventDefaultEvent, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames({
+    return (jsxRuntime.jsxs("div", { className: classNames('d-input-pin', className), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: "pinIndex0", children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: "d-input-pin-group", id: id, children: [Array.from({ length: characters }).map((_, index) => (jsxRuntime.jsx("input", Object.assign({ className: classNames({
                             'form-control': true,
                             'is-invalid': invalid,
                             'is-valid': valid,
-                        }), type: secret ? 'password' : type, "aria-describedby": `${id}State`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onChange: nextInput, onKeyDown: prevInput, onFocus: focusInput, onWheel: wheelInput, onClick: preventDefaultEvent, autoComplete: "off", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), (invalid || valid) && !loading && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? invalidIcon : validIcon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), loading && (jsxRuntime.jsx("div", { className: "input-group-text", children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
+                        }), value: activeInput[index], type: secret ? 'password' : type, "aria-describedby": `${id}State`, inputMode: innerInputMode, id: `pinIndex${index}`, name: `pin-${index}`, maxLength: 1, onInput: (event) => nextInput(event, index), onKeyDown: (event) => prevInput(event, index), onFocus: () => focusInput(index), onWheel: wheelInput, onClick: (event) => event.preventDefault(), onPaste: (event) => handlePaste(event), autoComplete: "off", placeholder: placeholder, disabled: disabled || loading, required: true }, type === 'number' && ({ min: 0, max: 9 })), index))), (invalid || valid) && !loading && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? invalidIcon : validIcon, familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), loading && (jsxRuntime.jsx("div", { className: "input-group-text", children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
 }
 
 function DInputSelect({ id, name, label = '', className, style, options = [], labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled = false, loading = false, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, floatingLabel = false, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }) {
@@ -862,110 +988,6 @@ function DInputSwitch({ label, ariaLabel, id, name, checked, disabled, readonly,
     return (jsxRuntime.jsxs("div", { className: "form-check form-switch", children: [jsxRuntime.jsx("input", { id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', className), style: style, type: "checkbox", role: "switch", checked: internalIsChecked, disabled: disabled, "aria-label": ariaLabel }), label && (jsxRuntime.jsx("label", { className: "form-check-label", htmlFor: id, children: label }))] }));
 }
 
-function DSelectOptionCheck(_a) {
-    var { innerProps, children, isSelected } = _a, props = tslib.__rest(_a, ["innerProps", "children", "isSelected"]);
-    return (jsxRuntime.jsx(Select.components.Option, Object.assign({ className: classNames({
-            'd-select__option': true,
-            'd-select__option--is-checkbox': true,
-        }), isSelected: isSelected, innerProps: innerProps }, props, { children: jsxRuntime.jsxs("label", { htmlFor: `${innerProps.id}Check`, children: [jsxRuntime.jsx(DInputCheck, { type: "checkbox", checked: isSelected, id: `${innerProps.id}Check` }), children] }) })));
-}
-
-function DSelectOptionIcon(_a) {
-    var { children, data } = _a, props = tslib.__rest(_a, ["children", "data"]);
-    return (jsxRuntime.jsxs(Select.components.Option, Object.assign({ className: classNames({
-            'd-select__option--has-icon': true,
-        }), data: data }, props, { children: [jsxRuntime.jsx(DIcon, { icon: data.icon }), children] })));
-}
-
-function DSelectSingleValueIconText(_a) {
-    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
-    const [value] = getValue();
-    return (jsxRuntime.jsxs(Select.components.SingleValue, Object.assign({ className: classNames({
-            'd-select__control--has-icon': true,
-        }), getValue: getValue }, props, { children: [jsxRuntime.jsx(DIcon, { icon: value.icon }), children] })));
-}
-
-function DSelectDropdownIndicator(props) {
-    const { iconMap: { chevronDown, }, } = useDContext();
-    return (jsxRuntime.jsx(Select.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: chevronDown }) })));
-}
-
-function DSelectClearIndicator(props) {
-    const { iconMap: { xLg, }, } = useDContext();
-    return (jsxRuntime.jsx(Select.components.ClearIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: xLg }) })));
-}
-
-function DSelectMultiValueRemove(props) {
-    const { iconMap: { x, }, } = useDContext();
-    return (jsxRuntime.jsx(Select.components.MultiValueRemove, Object.assign({}, props, { children: jsxRuntime.jsx(DIcon, { icon: x }) })));
-}
-
-function DSelectLoadingIndicator({ innerProps, }) {
-    return (jsxRuntime.jsx("div", Object.assign({ className: classNames({
-            'd-select__indicator': true,
-            'd-select__loading-indicator': true,
-        }) }, innerProps, { children: jsxRuntime.jsx("span", { className: "spinner-border spinner-border-sm", role: "status", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: "Loading..." }) }) })));
-}
-
-function DSelectOptionEmoji(_a) {
-    var { children, data } = _a, props = tslib.__rest(_a, ["children", "data"]);
-    return (jsxRuntime.jsxs(Select.components.Option, Object.assign({ className: classNames({
-            'd-select__option--has-icon': true,
-        }), data: data }, props, { children: [jsxRuntime.jsx("span", { children: data.emoji }), jsxRuntime.jsx("span", { children: children })] })));
-}
-
-function DSelectSingleValueEmoji(_a) {
-    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
-    const [value] = getValue();
-    return (jsxRuntime.jsx(Select.components.SingleValue, Object.assign({ className: classNames({
-            'd-select__control--has-icon': true,
-        }), getValue: getValue }, props, { children: value.emoji })));
-}
-
-function DSelectSingleValueEmojiText(_a) {
-    var { children, getValue } = _a, props = tslib.__rest(_a, ["children", "getValue"]);
-    const [value] = getValue();
-    return (jsxRuntime.jsxs(Select.components.SingleValue, Object.assign({ className: classNames({
-            'd-select__control--has-icon': true,
-        }), getValue: getValue }, props, { children: [jsxRuntime.jsx("span", { children: value.emoji }), jsxRuntime.jsx("span", { children: children })] })));
-}
-
-function DSelect(_a) {
-    var { id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick } = _a, props = tslib.__rest(_a, ["id", "className", "style", "label", "labelIcon", "labelIconFamilyClass", "labelIconFamilyPrefix", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "rtl", "searchable", "multi", "components", "defaultValue", "onIconStartClick", "onIconEndClick"]);
-    const handleOnIconStartClick = React.useCallback(() => {
-        onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);
-    }, [onIconStartClick, defaultValue]);
-    const handleOnIconEndClick = React.useCallback(() => {
-        onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);
-    }, [onIconEndClick, defaultValue]);
-    return (jsxRuntime.jsxs("div", { className: classNames('d-select', className, {
-            disabled: disabled || loading,
-        }), style: style, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, children: [label, labelIcon && (jsxRuntime.jsx(DIcon, { icon: labelIcon, size: `var(--${PREFIX_BS}input-label-font-size)`, familyClass: labelIconFamilyClass, familyPrefix: labelIconFamilyPrefix }))] })), jsxRuntime.jsxs("div", { className: classNames({
-                    'input-group': true,
-                    'has-validation': invalid,
-                    disabled: disabled || loading,
-                }), children: [iconStart && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsxRuntime.jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), jsxRuntime.jsx(Select, Object.assign({ styles: {
-                            control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),
-                            container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),
-                            menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%' })),
-                        }, className: classNames('d-select-component', {
-                            'is-invalid': invalid,
-                            'is-valid': valid,
-                        }), classNamePrefix: "d-select", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, unstyled: true, components: Object.assign({ DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), ((invalid || valid) && !iconEnd && !loading) && (jsxRuntime.jsx("span", { className: "input-group-text", id: `${id}State`, children: jsxRuntime.jsx(DIcon, { className: "input-group-validation-icon", icon: invalid ? 'exclamation-circle' : 'check', familyClass: iconFamilyClass, familyPrefix: iconFamilyPrefix }) })), (iconEnd && !loading) && (jsxRuntime.jsx("button", { type: "button", className: "input-group-text", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, "aria-label": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (jsxRuntime.jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (jsxRuntime.jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] }));
-}
-var DSelect$1 = Object.assign(DSelect, {
-    OptionCheck: DSelectOptionCheck,
-    OptionIcon: DSelectOptionIcon,
-    SingleValueIconText: DSelectSingleValueIconText,
-    DropdownIndicator: DSelectDropdownIndicator,
-    ClearIndicator: DSelectClearIndicator,
-    MultiValueRemove: DSelectMultiValueRemove,
-    LoadingIndicator: DSelectLoadingIndicator,
-    OptionEmoji: DSelectOptionEmoji,
-    SingleValueEmoji: DSelectSingleValueEmoji,
-    SingleValueEmojiText: DSelectSingleValueEmojiText,
-});
-
 function DListItem({ children, className, style, active = false, disabled = false, theme, onClick, }) {
     const Tag = React.useMemo(() => (onClick ? 'button' : 'div'), [onClick]);
     return (jsxRuntime.jsx(Tag, Object.assign({}, Tag === 'button' && {
@@ -1398,8 +1420,6 @@ exports.DOffcanvasFooter = DOffcanvasFooter;
 exports.DOffcanvasHeader = DOffcanvasHeader;
 exports.DPaginator = DPaginator;
 exports.DPopover = DPopover;
-exports.DPortalContext = DPortalContext;
-exports.DPortalContextProvider = DPortalContextProvider;
 exports.DProgress = DProgress;
 exports.DQuickActionButton = DQuickActionButton;
 exports.DQuickActionCheck = DQuickActionCheck;