@hexure/ui 1.14.4 → 1.14.6

package/dist/cjs/types/components/CustomSelect/CustomSelect.d.ts

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+import { CSSProperties } from 'styled-components';
+export interface OptionProps {
+    label?: string;
+    value: string | number;
+    color?: string;
+    disabled?: boolean;
+}
+export interface OptionGroupProps {
+    options: OptionProps[];
+    label: string;
+}
+export interface styleProps {
+    borderRadius?: string;
+    flexGrow?: number;
+    width?: number | string;
+}
+export interface CustomSelectProps extends AccessibleProps {
+    options?: OptionProps[];
+    optionGroups?: OptionGroupProps[];
+    placeholder?: string;
+    searchable?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    value?: string;
+    style?: CSSProperties;
+    onChange?: (value: string | number) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onSearch?: (searchTerm: string) => void;
+    /** Optional ID for automation purposes */
+    dataItemid?: string;
+    isInvalidRedBackground?: boolean;
+    isWarningError?: boolean;
+    innerRef?: any;
+}
+declare const CustomSelect: FC<CustomSelectProps>;
+export default CustomSelect;

package/dist/cjs/types/components/CustomSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CustomSelect';
+export type { CustomSelectProps, OptionProps, OptionGroupProps } from './CustomSelect';

package/dist/cjs/types/components/Select/Select.d.ts

@@ -34,6 +34,7 @@ export interface SelectProps extends AccessibleProps {
     isInvalidRedBackground?: boolean;
     isWarningError?: boolean;
     innerRef?: any;
+    isCustomSelect?: boolean;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

package/dist/esm/index.js

@@ -2689,7 +2689,7 @@ const q = ({
   });
 });
 
-const Wrapper$h = styled.div(props => ({
+const Wrapper$i = styled.div(props => ({
     display: 'inline-block',
     position: 'relative',
     height: props.$height || '16px',
@@ -2737,7 +2737,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
     const [show_content, toggleContent] = useState(false);
     const baseId = dataItemid || `tooltip-${Math.random().toString(36).slice(2, 9)}`;
     if (auto) {
-        return (React.createElement(Wrapper$h, { "data-itemid": `${baseId}-wrapper` },
+        return (React.createElement(Wrapper$i, { "data-itemid": `${baseId}-wrapper` },
             React.createElement("style", null, ` 
        .custom-tooltip-arrow { 
           box-shadow: 1px 1px 0 0 #0193D7; /* top border for arrow (matches border) */
@@ -2754,6 +2754,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
             z-index: 9999; /* Ensure tooltip is above other elements */
             position: absolute; /* Ensure z-index works */
             word-break: break-word; /* Prevents overflow of long words */
+            opacity: 1;
         }
           
       `),
@@ -2761,7 +2762,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
             React.createElement(TooltipPortal, null,
                 React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: `${baseId}-auto-tooltip-data-html`, render: () => React.createElement("p", { "data-itemid": `${baseId}-text` }, children) }))));
     }
-    return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+    return (React.createElement(Wrapper$i, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-text`, type: 'small' }, children)))) : null));
 };
@@ -2989,7 +2990,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$g = styled.div `
+const Wrapper$h = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -3014,7 +3015,7 @@ const Buttons$1 = styled.div `
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
     const baseId = dataItemid || 'action-dialog';
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Container$5, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
             title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? (React.createElement(Copy, { align: 'center', "data-itemid": `${baseId}-description` }, description)) : null,
@@ -3024,7 +3025,7 @@ const ActionDialog = (_a) => {
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": primaryButton.children || `${baseId}-${primaryButton.children}`, dataItemid: primaryButton.children || `${baseId}-${primaryButton.children}`, format: primaryButton.format || 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$g = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -3069,7 +3070,7 @@ const Alert = (_a) => {
             icon: mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, "data-itemid": `${baseId}-wrapper`, style: { borderLeftColor: type_mapping[type].color } }),
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "$small": small, "data-itemid": `${baseId}-wrapper`, style: { borderLeftColor: type_mapping[type].color } }),
         React.createElement(StyledIcon$4, { color: type_mapping[type].color, "data-itemid": `${baseId}-icon`, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
         React.createElement("div", { "data-itemid": `${baseId}-content` },
             title && !small ? (React.createElement(Heading, { bold: true, "data-itemid": `${baseId}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
@@ -3154,7 +3155,7 @@ const AppHeader = ({ logoUrl, buttons = [], dataItemid }) => {
         React.createElement(Buttons, { "data-itemid": `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { "data-itemid": `${baseId}-button-${i}` })))))));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$f = styled.div `
   display: inline-block;
   border-radius: 4px;
   padding: 4px 6px;
@@ -3191,7 +3192,7 @@ const Remove$1 = styled.div `
 const Tag = (_a) => {
     var { children, color = 'PRIMARY', removable, onClick, dataItemid, rotate, dataSectionName } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid", "rotate", "dataSectionName"]);
     const baseId = dataItemid || 'tag';
-    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, "$rotate": rotate, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$f, Object.assign({ "$color": color, "$removable": removable, "$rotate": rotate, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Content$2, { "data-itemid": `${baseId}-content`, "data-section-name": dataSectionName },
             React.createElement(Label$4, { "$color": color, "data-itemid": `${baseId}-label` }, children),
             removable ? (React.createElement(Remove$1, { "data-itemid": `${baseId}-remove` },
@@ -3327,7 +3328,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
                 }, small: true, type: 'button' }))));
 };
 
-const Wrapper$d = styled.div `
+const Wrapper$e = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -3336,7 +3337,7 @@ const Wrapper$d = styled.div `
   justify-content: space-between;
   padding: 16px 20px;
 `;
-Wrapper$d.defaultProps = { theme: EditableTheme };
+Wrapper$e.defaultProps = { theme: EditableTheme };
 const Left = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -3398,7 +3399,7 @@ const ErrorMsg = styled.span `
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0, dataItemid } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "dataItemid"]);
     const baseId = dataItemid || 'bulk-action-bar';
-    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$e, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Left, { "data-itemid": `${baseId}-left` },
             React.createElement(Info$1, { "data-itemid": `${baseId}-info` },
                 React.createElement(Selected, { "data-itemid": `${baseId}-selected` },
@@ -3411,7 +3412,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, { "data-itemid": `${baseId}-error-msg` }, errorMsg))) : null));
 };
 
-const Wrapper$c = styled.div `
+const Wrapper$d = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -3458,7 +3459,7 @@ Title$1.defaultProps = {
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [], dataItemid } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems", "dataItemid"]);
     const baseId = dataItemid || 'more-menu';
-    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$d, Object.assign({ "$maxHeight": maxHeight }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }), menuItems.map((item, i) => {
         var _a;
         const itemId = `${baseId}`;
         return (React.createElement(MenuItem, { className: item === null || item === void 0 ? void 0 : item.className, "data-itemid": `${itemId}-menu-item`, key: i, onClick: item.onClick },
@@ -3554,7 +3555,7 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, dataItemid: `${baseId}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
-const Wrapper$b = styled.label `
+const Wrapper$c = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
   margin-left: -6px;
@@ -3570,7 +3571,7 @@ const Wrapper$b = styled.label `
     background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
   }
 `;
-Wrapper$b.defaultProps = { theme: EditableTheme };
+Wrapper$c.defaultProps = { theme: EditableTheme };
 const Input$2 = styled.input `
   font-size: 20px;
   margin: 0px;
@@ -3597,7 +3598,7 @@ const Input$2 = styled.input `
     display: block;
   }
 `;
-const getBackgroundColor$3 = (props) => {
+const getBackgroundColor$4 = (props) => {
     if (props.$isWarningError) {
         return '#fcf1c9';
     }
@@ -3608,7 +3609,7 @@ const getBackgroundColor$3 = (props) => {
         return '#ffffff';
     }
 };
-const getBorderColor$3 = (props) => {
+const getBorderColor$4 = (props) => {
     if (props.$isWarningError) {
         return 'Orange';
     }
@@ -3626,8 +3627,8 @@ const Check$1 = styled.span `
   background-color: #fff;
   border-width: 2px;
   border-style: solid;
-  border-color: ${props => getBorderColor$3(props)};
-  background-color: ${props => getBackgroundColor$3(props)};
+  border-color: ${props => getBorderColor$4(props)};
+  background-color: ${props => getBackgroundColor$4(props)};
   box-sizing: border-box;
   position: relative;
   &:after {
@@ -3658,7 +3659,7 @@ const Label$3 = styled.span `
 const Checkbox = (_a) => {
     var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName, isLabelBold = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName", "isLabelBold"]);
     const baseId = dataItemid || 'checkbox';
-    return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, "data-section-name": dataSectionName, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         children ? (React.createElement(Label$3, { "$isLabelBold": isLabelBold, color: color, "data-itemid": `${baseId}-label` },
@@ -3714,6 +3715,230 @@ const Checklist = (_a) => {
         }))));
 };
 
+const getBackgroundColor$3 = (props) => {
+    if (props.$isWarningError) {
+        return '#fcf1c9';
+    }
+    else if (props.$invalid && props.$isInvalidRedBackground) {
+        return '#ffe5e5';
+    }
+    else {
+        return props.$readOnly ? '#f5f5f5' : '#ffffff';
+    }
+};
+const getBorderColor$3 = (props) => {
+    if (props.$isWarningError) {
+        return 'Orange';
+    }
+    else if (props.$invalid) {
+        return Colors.RED.Hex;
+    }
+    else {
+        return '#cccccc';
+    }
+};
+const Wrapper$b = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => getBorderColor$3(props)};
+  background-color: ${props => getBackgroundColor$3(props)};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
+`;
+Wrapper$b.defaultProps = { theme: EditableTheme };
+const Trigger$2 = styled.div `
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: ${props => (props.$searchableOpen ? 'transparent' : Colors.BLACK.Hex)};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: normal;
+  background-color: transparent;
+  background-image: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const IconWrapper$3 = styled(Icon) `
+  position: absolute;
+  right: 9px;
+  z-index: 1;
+  transition: transform 0.2s ease;
+  transform: ${props => (props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+  pointer-events: none;
+`;
+const SearchInput$2 = styled.input `
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: normal;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: ${props => (props.$isOpen ? 'auto' : 'none')};
+  opacity: ${props => (props.$isOpen ? 1 : 0)};
+
+  &::placeholder {
+    color: #999999;
+    opacity: 1;
+  }
+`;
+const DropdownContainer = styled.div `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: white;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  display: ${props => (props.$isOpen ? 'block' : 'none')};
+`;
+const OptionGroupLabel = styled.div `
+  padding: 6px 10px;
+  font-weight: 600;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+`;
+const OptionItem = styled.span `
+  display: block;
+  padding: 8px 10px;
+  padding-left: ${props => (props.$isGrouped ? '20px' : '10px')};
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.$color || Colors.BLACK.Hex};
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+  background-color: ${props => (props.$isSelected ? '#e8f4fd' : 'transparent')};
+  user-select: none;
+  line-height: 1.3em;
+
+  &:hover {
+    background-color: ${props => (props.$disabled ? 'transparent' : '#f5f5f5')};
+  }
+`;
+const CustomSelect = (_a) => {
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, innerRef = null } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "innerRef"]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [value, setValue] = useState(propValue || '');
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    const baseId = dataItemid || 'custom-select';
+    // Update the value when the prop changes
+    useEffect(() => {
+        setValue(propValue || '');
+    }, [propValue]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const handleSearch = (event) => {
+        setSearchTerm(event.target.value);
+        setIsOpen(true);
+    };
+    const handleToggle = () => {
+        if (!readOnly) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleOptionClick = (optionValue, disabled) => {
+        if (disabled || readOnly)
+            return;
+        setValue(optionValue.toString());
+        setIsOpen(false);
+        setSearchTerm('');
+        if (onChange) {
+            onChange(optionValue);
+        }
+    };
+    const getSelectedLabel = () => {
+        if (!value || value === '')
+            return placeholder;
+        // Check in options
+        if (options) {
+            const found = options.find(opt => opt.value.toString() === value.toString());
+            if (found)
+                return found.label || found.value;
+        }
+        // Check in optionGroups
+        if (optionGroups) {
+            for (const group of optionGroups) {
+                const found = group.options.find(opt => opt.value.toString() === value.toString());
+                if (found)
+                    return found.label || found.value;
+            }
+        }
+        return value;
+    };
+    const filteredOptions = searchable
+        ? options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); })
+        : options;
+    const filteredOptionGroups = searchable
+        ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
+        : optionGroups;
+    return (React.createElement(Wrapper$b, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper`, ref: wrapperRef, style: style },
+        searchable && (React.createElement(SearchInput$2, Object.assign({ "$isOpen": isOpen, autoFocus: isOpen, "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
+        React.createElement(Trigger$2, Object.assign({ "$readOnly": readOnly, "$searchableOpen": searchable && isOpen, "data-itemid": `${baseId}-trigger`, id: `${baseId}-trigger`, onClick: handleToggle, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex }, accessibleProps), getSelectedLabel()),
+        React.createElement(IconWrapper$3, { "$isOpen": isOpen, color: Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: mdiChevronDown, size: '22px' }),
+        React.createElement(DropdownContainer, { "$isOpen": isOpen, "data-itemid": `${baseId}-dropdown` },
+            !value && placeholder && (React.createElement(OptionItem, { "$disabled": true, "$isSelected": false, "data-itemid": `${baseId}-placeholder` }, placeholder)),
+            filteredOptionGroups &&
+                filteredOptionGroups.map((group, i) => (React.createElement("div", { "data-itemid": `${baseId}-optgroup-${i}`, key: i },
+                    React.createElement(OptionGroupLabel, null, group.label || `Group ${i}`),
+                    group.options.map((option, j) => (React.createElement(OptionItem, { "$color": option.color, "$disabled": option.disabled, "$isGrouped": true, "$isSelected": !!(value && value !== '' && value.toString() === option.value.toString()), "data-itemid": `${baseId}-option-${i}-${j}`, key: j, onClick: () => handleOptionClick(option.value, option.disabled) }, option.label || option.value)))))),
+            filteredOptions &&
+                filteredOptions.map((option, i) => (React.createElement(OptionItem, { "$color": option.color, "$disabled": option.disabled, "$isSelected": !!(value && value !== '' && value.toString() === option.value.toString()), "data-itemid": `${baseId}-option-${i}`, key: i, onClick: () => handleOptionClick(option.value, option.disabled) }, option.label || option.value))))));
+};
+
 const getBackgroundColor$2 = (props) => {
     if (props.$isWarningError) {
         return '#fcf1c9';
@@ -3801,7 +4026,7 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, innerRef = null } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "innerRef"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, innerRef = null, isCustomSelect = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "innerRef", "isCustomSelect"]);
     const [searchTerm, setSearchTerm] = useState('');
     const [value, setValue] = useState(propValue || '');
     const baseId = dataItemid || 'select';
@@ -3824,6 +4049,9 @@ const Select = (_a) => {
     const filteredOptionGroups = searchable
         ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
         : optionGroups;
+    if (isCustomSelect) {
+        return (React.createElement(CustomSelect, Object.assign({ dataItemid: dataItemid, innerRef: innerRef, invalid: invalid, isInvalidRedBackground: isInvalidRedBackground, isWarningError: isWarningError, onChange: onChange, optionGroups: optionGroups, options: options, placeholder: placeholder, readOnly: readOnly, searchable: searchable, style: style, tabIndex: tabIndex, value: propValue }, accessibleProps)));
+    }
     return (React.createElement(Wrapper$a, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper`, style: style },
         searchable && (React.createElement(SearchInput$1, Object.assign({ "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
         React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, id: `${baseId}-trigger`, name: baseId, onChange: handleChange, placeholder: placeholder, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),