@odigos/ui-kit 0.0.24 → 0.0.26

package/lib/{index-Dylg236O.js → index-C_LWKMnO.js}

@@ -1,15 +1,15 @@
-import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
-import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
-import './index-DiTtXTRm.js';
-import styled, { css } from 'styled-components';
+import React, { useState, useEffect, useRef, forwardRef, createElement, useCallback, useMemo, Fragment } from 'react';
 import Theme from './theme.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-B-iLphLA.js';
+import styled, { css } from 'styled-components';
+import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, P as PlusIcon, T as TrashIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
+import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
-import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
-import { M as MONITORS_OPTIONS } from './index-D3sp5Hx7.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-D0ykOLrk.js';
-import ReactDOM from 'react-dom';
+import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-B6FywnIf.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-CJs4RDHU.js';
+import './index-DMXaEyAB.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-BPxqZqXu.js';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
+import ReactDOM from 'react-dom';
 import { I as InfoIcon } from './index-IKusBlIE.js';
 
 const TextWrapper$2 = styled.div `
@@ -28,6 +28,7 @@ const Text = ({ children, color, size, weight, align, family, opacity, decoratio
 
 const AutocompleteContainer = styled.div `
   position: relative;
+  width: 100%;
 `;
 const InputWrapper$2 = styled.div `
   width: calc(100% - 16px);
@@ -129,6 +130,9 @@ const SubOptionsList = styled.ul `
   width: 100%;
 `;
 const filterOptions = (optionsList, input) => {
+    if (!input) {
+        return optionsList;
+    }
     return optionsList.reduce((acc, option) => {
         if (option.items) {
             const filteredSubItems = filterOptions(option.items, input);
@@ -142,11 +146,12 @@ const filterOptions = (optionsList, input) => {
         return acc;
     }, []);
 };
-const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style, disabled, ...props }) => {
-    const [query, setQuery] = useState(selectedOption?.label || '');
-    const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, ''));
+const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, defaultText, onTextChange, style, disabled, ...props }) => {
+    const [query, setQuery] = useState(selectedOption?.label || defaultText || '');
+    const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, query));
     const [showOptions, setShowOptions] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
+    useEffect(() => setFilteredOptions(filterOptions(options, query)), [options]);
     const Icon = selectedOption?.icon;
     const handleChange = (e) => {
         e.stopPropagation();
@@ -154,12 +159,15 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
         const filtered = filterOptions(options, input);
         const matched = filtered.length === 1 && filtered[0].label === input ? filtered[0] : undefined;
         setQuery(input);
+        onTextChange?.(input);
         setFilteredOptions(filtered);
         handleOptionClick(matched);
     };
     const handleOptionClick = (option) => {
-        if (!!option)
+        if (option) {
             setQuery(option.label);
+            onTextChange?.(option.label);
+        }
         setShowOptions(!option);
         onOptionSelect?.(option);
     };
@@ -173,7 +181,7 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
         React.createElement(InputWrapper$2, null,
             Icon && React.createElement(Icon, null),
             React.createElement(StyledInput$1, { type: 'text', value: query, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onBlur: () => !disabled && setShowOptions(false), onFocus: () => !disabled && setShowOptions(true), ...props })),
-        showOptions && (React.createElement(OptionsList, null, filteredOptions.map((option, index) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick })))))));
+        showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null));
 };
 const OptionItem = ({ option, renderIcon = true, onClick }) => {
     const hasSubItems = !!option.items && option.items.length > 0;
@@ -251,11 +259,11 @@ const variantStyles = {
     color: ${({ theme }) => theme.colors.secondary};
     &:hover {
       border: 1px solid ${({ theme }) => theme.text.darker_grey};
-      background: ${({ theme }) => theme.colors.primary + Theme.opacity.hex['080']};
+      background: ${({ theme }) => theme.colors.secondary + Theme.opacity.hex['010']};
     }
     &:active {
       border: 1px solid ${({ theme }) => theme.text.dark_grey};
-      background: ${({ theme }) => theme.colors.primary + Theme.opacity.hex['060']};
+      background: ${({ theme }) => theme.colors.secondary + Theme.opacity.hex['015']};
     }
   `,
     tertiary: css `
@@ -289,7 +297,7 @@ const variantStyles = {
     }
   `,
 };
-const StyledButton$2 = styled.button `
+const StyledButton$3 = styled.button `
   height: 36px;
   border-radius: 32px;
   cursor: pointer;
@@ -323,24 +331,13 @@ const StyledButton$2 = styled.button `
 const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
     const ref = useRef(null);
     return (React.createElement(Container$u, { "$variant": variant },
-        React.createElement(StyledButton$2, { ref: ref, "$variant": variant, onClick: (e) => {
+        React.createElement(StyledButton$3, { ref: ref, "$variant": variant, onClick: (e) => {
                 if (onClick)
                     onClick(e);
                 ref.current?.blur();
             }, ...props }, children)));
 };
 
-const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {
-    return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `Cancel${name ? ` ${name}` : ''}`, description: 'Are you sure you want to cancel?', approveButton: {
-            text: 'Confirm',
-            variant: StatusType.Warning,
-            onClick: onApprove,
-        }, denyButton: {
-            text: 'Go Back',
-            onClick: onDeny,
-        } }));
-};
-
 const FlexRow = styled.div `
   display: flex;
   flex-direction: row;
@@ -350,7 +347,6 @@ const FlexRow = styled.div `
 const FlexColumn = styled.div `
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: ${({ $gap = 2 }) => $gap}px;
 `;
 const CenterThis = styled(FlexColumn) `
@@ -358,6 +354,12 @@ const CenterThis = styled(FlexColumn) `
   align-items: center;
   justify-content: center;
 `;
+const VerticalScroll = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  overflow-y: scroll;
+`;
 const Overlay = styled.div `
   position: fixed;
   top: 0;
@@ -371,8 +373,10 @@ const Overlay = styled.div `
 // note: add-destinations does not use this (yet), because it has a custom sidebar
 const ModalBody = styled.div `
   width: 640px;
+  min-height: ${({ $minHeight }) => $minHeight || 'unset'};
   height: ${({ $isNotModal }) => ($isNotModal ? 'fit-content' : 'calc(100vh - 350px)')};
   margin: ${({ $isNotModal }) => ($isNotModal ? '64px 0 0 0' : '64px 7vw 32px 7vw')};
+  padding: 0 2px;
   overflow-y: scroll;
 `;
 // common styles for focused-table containers
@@ -3870,83 +3874,74 @@ function cssValue(value) {
 const fade = createAnimation('FadeLoader', '50% {opacity: 0.3} 100% {opacity: 1}', 'fade');
 const FadeLoader = ({ loading = true, color: clr, scale = 1, speedMultiplier = 1, cssOverride = {}, style = {}, ...additionalprops }) => {
     const theme = Theme.useTheme();
+    const color = clr || theme.text.secondary;
     if (!loading)
         return null;
-    const color = clr || theme.text.secondary;
-    const height = 4, width = 1.5, radius = 2, margin = 2;
-    const { value } = parseLengthAndUnit(margin);
-    const radiusValue = value + 4.2, quarter = radiusValue / 2 + radiusValue / 5.5;
+    const { value } = parseLengthAndUnit(2);
+    const radiusValue = value + 4.2;
+    const quarter = radiusValue / 2 + radiusValue / 5.5;
+    const widthAndHeight = radiusValue * 4 * scale;
     const wrapper = {
-        display: 'inherit',
         position: 'relative',
-        fontSize: '0',
-        top: radiusValue * scale,
-        left: radiusValue * scale,
-        width: `${radiusValue * 3}px`,
-        height: `${radiusValue * 3}px`,
+        width: `${widthAndHeight}px`,
+        height: `${widthAndHeight}px`,
         scale,
         ...style,
         ...cssOverride,
     };
-    const styles = (i) => {
+    const styles = (i, r) => {
         return {
             position: 'absolute',
-            width: cssValue(width),
-            height: cssValue(height),
-            margin: cssValue(margin),
+            width: cssValue(1.5),
+            height: cssValue(4),
+            borderRadius: cssValue(2),
             backgroundColor: color,
-            borderRadius: cssValue(radius),
             transition: '2s',
             animationFillMode: 'both',
             animation: `${fade} ${1.2 / speedMultiplier}s ${i * 0.12}s infinite ease-in-out`,
+            transform: `translate(-50%, -50%) rotate(${r}deg)`,
         };
     };
     return (React.createElement("span", { style: wrapper, ...additionalprops },
         React.createElement("span", { style: {
-                ...styles(1),
-                top: `${radiusValue}px`,
-                left: '0',
+                ...styles(1, 0),
+                top: `calc(50% + ${radiusValue}px)`,
+                left: '50%',
             } }),
         React.createElement("span", { style: {
-                ...styles(2),
-                top: `${quarter}px`,
-                left: `${quarter}px`,
-                transform: 'rotate(-45deg)',
+                ...styles(2, -45),
+                top: `calc(50% + ${quarter}px)`,
+                left: `calc(50% + ${quarter}px)`,
             } }),
         React.createElement("span", { style: {
-                ...styles(3),
-                top: '0',
-                left: `${radiusValue}px`,
-                transform: 'rotate(90deg)',
+                ...styles(3, 90),
+                top: '50%',
+                left: `calc(50% + ${radiusValue}px)`,
             } }),
         React.createElement("span", { style: {
-                ...styles(4),
-                top: `${ -1 * quarter}px`,
-                left: `${quarter}px`,
-                transform: 'rotate(45deg)',
+                ...styles(4, 45),
+                top: `calc(50% + ${ -1 * quarter}px)`,
+                left: `calc(50% + ${quarter}px)`,
             } }),
         React.createElement("span", { style: {
-                ...styles(5),
-                top: `${ -1 * radiusValue}px`,
-                left: '0',
+                ...styles(5, 0),
+                top: `calc(50% + ${ -1 * radiusValue}px)`,
+                left: '50%',
             } }),
         React.createElement("span", { style: {
-                ...styles(6),
-                top: `${ -1 * quarter}px`,
-                left: `${ -1 * quarter}px`,
-                transform: 'rotate(-45deg)',
+                ...styles(6, -45),
+                top: `calc(50% + ${ -1 * quarter}px)`,
+                left: `calc(50% + ${ -1 * quarter}px)`,
             } }),
         React.createElement("span", { style: {
-                ...styles(7),
-                top: '0',
-                left: `${ -1 * radiusValue}px`,
-                transform: 'rotate(90deg)',
+                ...styles(7, 90),
+                top: '50%',
+                left: `calc(50% + ${ -1 * radiusValue}px)`,
             } }),
         React.createElement("span", { style: {
-                ...styles(8),
-                top: `${quarter}px`,
-                left: `${ -1 * quarter}px`,
-                transform: 'rotate(45deg)',
+                ...styles(8, 45),
+                top: `calc(50% + ${quarter}px)`,
+                left: `calc(50% + ${ -1 * quarter}px)`,
             } })));
 };
 
@@ -4578,7 +4573,7 @@ const CopyWrapper = styled(FlexRow) `
   }
 `;
 const DataCardFields = ({ data }) => {
-    return (React.createElement(ListContainer$3, null, data.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
+    return (React.createElement(ListContainer$3, null, data?.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
             ? 'inherit'
             : !!type &&
                 [
@@ -4725,7 +4720,7 @@ const ActionWrapper = styled(FlexRow) `
   margin-left: auto;
   gap: 8px;
 `;
-const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, data }) => {
+const DataCard = ({ title = 'Details', titleBadge, description, action: Action, withExtend, data, children }) => {
     const [extend, setExtend] = useState(false);
     const [hovered, setHovered] = useState(false);
     return (React.createElement(CardContainer, { "$hovered": hovered },
@@ -4737,28 +4732,10 @@ const DataCard = ({ title = 'Details', titleBadge, description, action: Action,
                     typeof Action === 'function' ? React.createElement(Action, null) : Action,
                     withExtend && React.createElement(ExtendArrow, { extend: false })))),
             !!description && React.createElement(Description$2, null, description))) : null,
-        (!withExtend || (withExtend && extend)) && React.createElement(DataCardFields, { data: data })));
-};
-
-const DeleteWarning = ({ isOpen, noOverlay, name, type, isLastItem, onApprove, onDeny }) => {
-    const actionText = type === EntityTypes.Source ? 'uninstrument' : 'delete';
-    return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `${actionText.charAt(0).toUpperCase() + actionText.substring(1)}${name ? ` ${name}` : ''}`, description: `Are you sure you want to ${actionText}?`, note: isLastItem
-            ? {
-                type: StatusType.Warning,
-                title: `You're about to ${actionText} the last ${type || name}`,
-                message: '',
-            }
-            : undefined, approveButton: {
-            text: 'Confirm',
-            variant: 'danger',
-            onClick: onApprove,
-        }, denyButton: {
-            text: 'Go Back',
-            onClick: onDeny,
-        } }));
+        (!withExtend || (withExtend && extend)) && (children || React.createElement(DataCardFields, { data: data }))));
 };
 
-const StyledButton$1 = styled(Button$4) `
+const StyledButton$2 = styled(Button$4) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4768,7 +4745,7 @@ const StyledButton$1 = styled(Button$4) `
 `;
 const DOCS_LINK = 'https://docs.odigos.io';
 const DocsButton = ({ endpoint = '/', variant = 'secondary' }) => {
-    return (React.createElement(StyledButton$1, { variant: variant, onClick: () => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer') },
+    return (React.createElement(StyledButton$2, { variant: variant, onClick: () => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer') },
         React.createElement(NotebookIcon, { size: 18 }),
         "Docs"));
 };
@@ -5327,6 +5304,13 @@ const IconsNav = ({ orientation = 'vertical', flip, mainIcons, subIcons }) => {
                 React.createElement(Icon, { size: 20 })))))));
 };
 
+const AddButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
+    const theme = Theme.useTheme();
+    return (React.createElement(Button$4, { onClick: onClick, variant: variant, ...props },
+        React.createElement(PlusIcon, { fill: variant === 'primary' ? theme.text.primary : theme.text.info }),
+        React.createElement(Text, { size: 14, family: 'secondary', decoration: 'underline', color: variant === 'primary' ? theme.text.primary : undefined }, label || BUTTON_TEXTS.ADD)));
+};
+
 const Container$c = styled.div `
   display: flex;
   flex-direction: column;
@@ -5348,23 +5332,6 @@ const DeleteButton$2 = styled.button `
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
-const AddButton$2 = styled(Button$4) `
-  color: ${({ theme }) => theme.text.secondary};
-  background: transparent;
-  display: flex;
-  gap: 8px;
-  border: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  align-self: flex-start;
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  transition: opacity 0.3s;
-`;
-const ButtonText$2 = styled(Text) `
-  font-size: 14px;
-  font-weight: 500;
-  font-family: ${({ theme }) => theme.font_family.secondary};
-  text-decoration-line: underline;
-`;
 const INITIAL_ROW$1 = '';
 const InputList = ({ initialValues = [], value, onChange, title, tooltip, required, errorMessage }) => {
     const [rows, setRows] = useState(value || initialValues);
@@ -5422,9 +5389,7 @@ const InputList = ({ initialValues = [], value, onChange, title, tooltip, requir
                     React.createElement(TrashIcon, null))));
         })),
         !!errorMessage && React.createElement(FieldError, null, errorMessage),
-        React.createElement(AddButton$2, { disabled: isAddButtonDisabled, variant: 'tertiary', onClick: handleAddInput },
-            React.createElement(PlusIcon, null),
-            React.createElement(ButtonText$2, null, "ADD ATTRIBUTE"))));
+        React.createElement(AddButton, { onClick: handleAddInput, disabled: isAddButtonDisabled })));
 };
 
 const Container$b = styled.div `
@@ -5439,23 +5404,6 @@ const DeleteButton$1 = styled.button `
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
-const AddButton$1 = styled(Button$4) `
-  color: ${({ theme }) => theme.text.secondary};
-  background: transparent;
-  display: flex;
-  gap: 8px;
-  border: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  align-self: flex-start;
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  transition: opacity 0.3s;
-`;
-const ButtonText$1 = styled(Text) `
-  font-size: 14px;
-  font-weight: 500;
-  font-family: ${({ theme }) => theme.font_family.secondary};
-  text-decoration-line: underline;
-`;
 const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage }) => {
     // INITIAL_ROW as state, because it's dynamic to the "columns" prop
     const [initialRow, setInitialRow] = useState({});
@@ -5528,9 +5476,7 @@ const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage
                         } },
                         React.createElement(TrashIcon, null)))))))),
         !!errorMessage && React.createElement(FieldError, null, errorMessage),
-        React.createElement(AddButton$1, { disabled: isAddButtonDisabled, variant: 'tertiary', onClick: handleAddRow },
-            React.createElement(PlusIcon, null),
-            React.createElement(ButtonText$1, null, "ADD ENDPOINT FILTER"))));
+        React.createElement(AddButton, { onClick: handleAddRow, disabled: isAddButtonDisabled })));
 };
 
 const Container$a = styled.div `
@@ -5555,23 +5501,6 @@ const DeleteButton = styled.button `
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
-const AddButton = styled(Button$4) `
-  color: ${({ theme }) => theme.text.secondary};
-  background: transparent;
-  display: flex;
-  gap: 8px;
-  border: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  align-self: flex-start;
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  transition: opacity 0.3s;
-`;
-const ButtonText = styled(Text) `
-  font-size: 14px;
-  font-weight: 500;
-  font-family: ${({ theme }) => theme.font_family.secondary};
-  text-decoration-line: underline;
-`;
 const INITIAL_ROW = {
     key: '',
     value: '',
@@ -5634,9 +5563,7 @@ const KeyValueInputsList = ({ initialKeyValuePairs = [], value, onChange, title,
                 } },
                 React.createElement(TrashIcon, null)))))),
         !!errorMessage && React.createElement(FieldError, null, errorMessage),
-        React.createElement(AddButton, { disabled: isAddButtonDisabled, variant: 'tertiary', onClick: handleAddRow },
-            React.createElement(PlusIcon, null),
-            React.createElement(ButtonText, null, "ADD ATTRIBUTE"))));
+        React.createElement(AddButton, { onClick: handleAddRow, disabled: isAddButtonDisabled })));
 };
 
 const Container$9 = styled.div `
@@ -5787,7 +5714,7 @@ const ButtonsContainer = styled.div `
   gap: 8px;
   align-items: center;
 `;
-const StyledButton = styled(Button$4) `
+const StyledButton$1 = styled(Button$4) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5803,7 +5730,7 @@ const NavigationButtons = ({ buttons }) => {
         return button.icon ? (React.createElement(button.icon, { size: 14, rotate: rotate, fill: theme.text[button.variant || 'secondary'] })) : button.iconSrc ? (React.createElement("img", { src: button.iconSrc, alt: button.label, width: 8, height: 12 })) : null;
     };
     return (React.createElement(ButtonsContainer, null, buttons.map((btn, index) => (React.createElement(Tooltip, { key: index, text: btn.tooltip || '' },
-        React.createElement(StyledButton, { key: index, variant: btn.variant || 'secondary', onClick: btn.onClick, disabled: btn.disabled },
+        React.createElement(StyledButton$1, { key: index, variant: btn.variant || 'secondary', onClick: btn.onClick, disabled: btn.disabled },
             shouldRenderBackButton({ button: btn, index }) && renderButton({ button: btn, rotate: 0 }),
             btn.label,
             !shouldRenderBackButton({ button: btn, index }) && renderButton({ button: btn, rotate: 180 })))))));
@@ -5867,7 +5794,7 @@ const ActionButton = styled(Text) `
     transition: transform 0.3s;
   }
 `;
-const NotificationNote = ({ type, title, message, action, onClose, duration = 5000, overrideMaxWidth, style }) => {
+const NotificationNote = ({ type, icon, title, message, action, onClose, duration = 5000, overrideMaxWidth, style }) => {
     const theme = Theme.useTheme();
     // These are for handling transitions:
     // isLeaving - to trigger the slide-out animation
@@ -5901,7 +5828,7 @@ const NotificationNote = ({ type, title, message, action, onClose, duration = 50
             progress.current.style.animationPlayState = 'running';
         }
     };
-    const StatusIcon = getStatusIcon(type, theme);
+    const StatusIcon = icon || getStatusIcon(type, theme);
     return (React.createElement(Container$8, { className: onClose ? 'animated' : '', "$duration": duration, "$isLeaving": isLeaving, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         React.createElement(Content$2, { "data-id": 'toast', "$type": type, style: style },
             React.createElement(StatusIcon, { fill: theme.text[type] }),
@@ -6009,6 +5936,40 @@ const Segment = ({ options = [], selected, setSelected }) => {
         React.createElement(Background, { "$bgColor": bgColor, "$width": bgSize.width, "$height": bgSize.height, "$x": bgPosition.x, "$y": bgPosition.y, "$isFirstItem": selectedIdx === 0, "$isLastItem": selectedIdx === options.length - 1 })));
 };
 
+const StyledButton = styled(Button$4) `
+  gap: 8px;
+  text-transform: none;
+  text-decoration: none;
+  border: ${({ theme, $withBorder }) => `1px solid ${$withBorder ? theme.colors.border : 'transparent'}`};
+  &.not-selected {
+    background-color: ${({ theme, $color }) => $color || theme.colors.dropdown_bg_2 + Theme.opacity.hex['060']};
+    &:hover {
+      background-color: ${({ theme, $hoverColor }) => $hoverColor || theme.colors.dropdown_bg_2};
+    }
+  }
+  &.selected {
+    background-color: ${({ theme }) => theme.colors.majestic_blue + Theme.opacity.hex['030']};
+  }
+`;
+const TextLimited = styled(Text) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+`;
+const SelectionButton = ({ label, onClick, icon: Icon, iconSrc, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }) => {
+    const theme = Theme.useTheme();
+    return (React.createElement(StyledButton, { onClick: onClick, className: isSelected ? 'selected' : 'not-selected', "$withBorder": withBorder, "$color": color, "$hoverColor": hoverColor, style: style },
+        Icon && (React.createElement("div", null,
+            React.createElement(Icon, { fill: theme.text.info }))),
+        iconSrc && (React.createElement("div", null,
+            React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }))),
+        React.createElement(TextLimited, null, label),
+        isSelected && (React.createElement("div", null,
+            React.createElement(CheckIcon, { fill: theme.colors.majestic_blue_soft }))),
+        badgeLabel !== undefined && React.createElement(Badge, { label: badgeLabel, filled: badgeFilled || isSelected })));
+};
+
 const Container$5 = styled.div `
   display: flex;
   flex-direction: column;
@@ -28877,4 +28838,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { FlexRow as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, SectionTitle as O, Segment as P, SkeletonLoader as Q, Status as R, ScrollX as S, ToggleCodeComponent as T, Stepper as U, Text as V, TextArea as W, Toggle as X, Tooltip as Y, TraceLoader as Z, WarningModal as _, Badge as a, FlexColumn as a0, CenterThis as a1, Overlay as a2, ModalBody as a3, TableContainer as a4, TableTitleWrap as a5, TableWrap as a6, getDefaultExportFromCjs as a7, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { FlexRow as $, AddButton as A, Button$4 as B, Checkbox as C, DataCard as D, ExtendArrow as E, FadeLoader as F, NoDataFound as G, Header as H, IconButton as I, NotificationNote as J, KeyValueInputsList as K, SectionTitle as L, Modal as M, NavigationButtons as N, Segment as O, SelectionButton as P, SkeletonLoader as Q, Status as R, ScrollX as S, ToggleCodeComponent as T, Stepper as U, Text as V, TextArea as W, Toggle as X, Tooltip as Y, TraceLoader as Z, WarningModal as _, AutocompleteInput as a, FlexColumn as a0, CenterThis as a1, VerticalScroll as a2, Overlay as a3, ModalBody as a4, TableContainer as a5, TableTitleWrap as a6, TableWrap as a7, getDefaultExportFromCjs as a8, Badge as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, Divider as h, DocsButton as i, Drawer as j, DrawerHeader as k, DrawerFooter as l, Dropdown as m, FieldError as n, FieldLabel as o, IconGroup as p, IconTitleBadge as q, IconWrapped as r, IconsNav as s, ImageControlled as t, Input as u, InputList as v, InputTable as w, InteractiveTable as x, MonitorsCheckboxes as y, MonitorsIcons as z };

package/lib/{index-KOMAv-TS.js → index-CamnKrev.js}

@@ -21,13 +21,6 @@ const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
             React.createElement("path", { d: 'M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z' }))));
 };
 
-const EditIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M8 14C10.6787 11.8171 10.7261 16.2383 14 12.6667M2 13.997L3.81777 13.9999C4.07739 14.0003 4.2072 14.0005 4.32937 13.9712C4.43769 13.9452 4.54125 13.9022 4.63623 13.8438C4.74337 13.778 4.83516 13.6858 5.01874 13.5014L13.6676 4.81451C14.021 4.4596 14.1088 3.91087 13.8396 3.47722C13.5142 2.95298 13.0691 2.50221 12.5511 2.16754C12.136 1.8993 11.5908 1.95805 11.2417 2.30864L2.53993 11.0487C2.36296 11.2264 2.27447 11.3153 2.21029 11.4188C2.15338 11.5105 2.11072 11.6104 2.08378 11.7151C2.05341 11.8331 2.05031 11.9588 2.04411 12.2101L2 13.997Z' })));
-};
-
 const FilterIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -66,6 +59,13 @@ const OverviewIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9.33348 11.4667C9.33348 10.7199 9.33348 10.3466 9.47881 10.0613C9.60664 9.81046 9.81061 9.60649 10.0615 9.47866C10.3467 9.33333 10.7201 9.33333 11.4668 9.33333H11.8668C12.6136 9.33333 12.9869 9.33333 13.2721 9.47866C13.523 9.60649 13.727 9.81046 13.8548 10.0613C14.0002 10.3466 14.0002 10.7199 14.0002 11.4667V11.8667C14.0002 12.6134 14.0002 12.9868 13.8548 13.272C13.727 13.5229 13.523 13.7268 13.2721 13.8547C12.9869 14 12.6136 14 11.8668 14H11.4668C10.7201 14 10.3467 14 10.0615 13.8547C9.81061 13.7268 9.60664 13.5229 9.47881 13.272C9.33348 12.9868 9.33348 12.6134 9.33348 11.8667V11.4667Z' })));
 };
 
+const DataStreamsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill || '#7A7A7A', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4 6.66602H12C12.6213 6.66602 12.9319 6.66602 13.1769 6.56452C13.5036 6.4292 13.7632 6.16963 13.8985 5.84293C14 5.5979 14 5.28727 14 4.66602C14 4.04476 14 3.73413 13.8985 3.4891C13.7632 3.1624 13.5036 2.90283 13.1769 2.76751C12.9319 2.66602 12.6213 2.66602 12 2.66602H4C3.37874 2.66602 3.06812 2.66602 2.82309 2.76751C2.49638 2.90283 2.23682 3.1624 2.10149 3.4891C2 3.73413 2 4.04476 2 4.66602C2 5.28727 2 5.5979 2.10149 5.84293C2.23682 6.16963 2.49638 6.4292 2.82309 6.56452C3.06812 6.66602 3.37874 6.66602 4 6.66602ZM4 6.66602L4 7.99935C4 9.8403 5.49238 11.3327 7.33333 11.3327H8.66667M8.66667 11.3327C8.66667 11.9539 8.66667 12.2646 8.76816 12.5096C8.90349 12.8363 9.16305 13.0959 9.48976 13.2312C9.73478 13.3327 10.0454 13.3327 10.6667 13.3327H12C12.6213 13.3327 12.9319 13.3327 13.1769 13.2312C13.5036 13.0959 13.7632 12.8363 13.8985 12.5096C14 12.2646 14 11.9539 14 11.3327C14 10.7114 14 10.4008 13.8985 10.1558C13.7632 9.82907 13.5036 9.5695 13.1769 9.43418C12.9319 9.33268 12.6213 9.33268 12 9.33268H10.6667C10.0454 9.33268 9.73478 9.33268 9.48976 9.43418C9.16305 9.5695 8.90349 9.82907 8.76816 10.1558C8.66667 10.4008 8.66667 10.7114 8.66667 11.3327Z' })));
+};
+
 const SlackLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("g", { fillRule: 'evenodd', clipRule: 'evenodd' },
@@ -82,4 +82,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z' })));
 };
 
-export { CrossCircledIcon as C, EditIcon as E, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, SlackLogo as S, TerminalIcon as T, OverviewIcon as a };
+export { CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, SlackLogo as S, TerminalIcon as T, OverviewIcon as a };