@rio-cloud/rio-uikit 1.1.0 → 1.2.1

package/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -7,17 +7,23 @@ import union from 'lodash/fp/union';
 import noop from 'lodash/fp/noop';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, LAYER_ACTIVE, LAYER_INACTIVE } from '../../../../icons/MapIcon';
+import { MapIcon } from '../../../../icons/MapIcon';
 const MapLayerSettings = (props) => {
+    var _a;
     const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "layers", "onMapLayerChange"]);
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: _jsx(MapIcon, { name: LAYER_ACTIVE, className: 'MapLayerIcon' }), inactiveIcon: _jsx(MapIcon, { name: LAYER_INACTIVE, className: 'MapLayerIconInactive' }), panel: _jsx(MapSettingsPanel, { children: map(layer => {
-                var _a;
-                return React.cloneElement(layer, {
-                    key: (_a = layer === null || layer === void 0 ? void 0 : layer.key) !== null && _a !== void 0 ? _a : `MapLayerSettings_${crypto.randomUUID()}`,
-                    activeBuiltinLayers,
-                    onMapLayerChange,
-                });
-            }, layers) }) }, remainingProps)));
+    const hasLabels = !!((_a = layers.at(0)) === null || _a === void 0 ? void 0 : _a.props.label);
+    const isActive = !isEmpty(allActiveLayer);
+    // Inject onMapLayerChange from the MapContext which will be handled
+    // in the main Map component.
+    const enrichedLayers = map(layer => {
+        var _a;
+        return React.cloneElement(layer, {
+            key: (_a = layer === null || layer === void 0 ? void 0 : layer.key) !== null && _a !== void 0 ? _a : `MapLayerSettings_${crypto.randomUUID()}`,
+            activeBuiltinLayers,
+            onMapLayerChange,
+        });
+    }, layers);
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && _jsx(MapSettingsPanel, { children: enrichedLayers }) }, remainingProps)));
 };
 export default MapLayerSettings;

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -4,7 +4,13 @@ export type MapTypeSettingsProps = {
     mapType?: string;
     enableNightMap?: boolean;
     onMapTypeChange?: () => MapType;
+    defaultTypeLabel?: string | JSX.Element;
+    truckTypeLabel?: string | JSX.Element;
+    terrainTypeLabel?: string | JSX.Element;
+    satelliteTypeLabel?: string | JSX.Element;
+    nightTypeLabel?: string | JSX.Element;
     tooltip?: string | React.ReactNode;
+    dropdownHeaderText?: string | JSX.Element;
 };
 declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapTypeSettings;

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -2,13 +2,15 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import noop from 'lodash/fp/noop';
+import compact from 'lodash/fp/compact';
 import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, } from '../../../constants';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsItem from '../MapSettingsItem';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELLITE_ACTIVE, MAP_TYPE_SATELLITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE, } from '../../../../icons/MapIcon';
+import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
 const MapTypeSettings = (props) => {
-    const { mapType, onMapTypeChange = noop, enableNightMap = true } = props, remainingProps = __rest(props, ["mapType", "onMapTypeChange", "enableNightMap"]);
+    const { mapType, onMapTypeChange = noop, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText } = props, remainingProps = __rest(props, ["mapType", "onMapTypeChange", "enableNightMap", "defaultTypeLabel", "truckTypeLabel", "terrainTypeLabel", "satelliteTypeLabel", "nightTypeLabel", "dropdownHeaderText"]);
     const type = useMemo(() => ({
         isDefault: mapType === MAP_TYPE_DEFAULT,
         isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
@@ -33,6 +35,22 @@ const MapTypeSettings = (props) => {
             return _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE });
         }
     };
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), panel: _jsxs(MapSettingsPanel, { children: [enableNightMap && (_jsx(MapSettingsItem, { className: 'MapTypeNight', onClick: () => onMapTypeChange(MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE }) })), _jsx(MapSettingsItem, { className: 'MapTypeSatelite', onClick: () => onMapTypeChange(MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE }) }), _jsx(MapSettingsItem, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE }) }), _jsx(MapSettingsItem, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_INACTIVE }) }), _jsx(MapSettingsItem, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE }) })] }) }, remainingProps)));
+    const dropdownHeader = dropdownHeaderText && (_jsx(MapSettingsDropdownHeader, { label: dropdownHeaderText }, 'mapTypeDropdownHeader'));
+    const mapTypeNight = (_jsx(MapSettingsItem, { className: 'MapTypeNight', onClick: () => onMapTypeChange(MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE }), label: nightTypeLabel }, 'MapTypeNight'));
+    const mapTypeSatellite = (_jsx(MapSettingsItem, { className: 'MapTypeSatellite', onClick: () => onMapTypeChange(MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE }), label: satelliteTypeLabel }, 'MapTypeSatellite'));
+    const mapTypeTerrain = (_jsx(MapSettingsItem, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE }), label: terrainTypeLabel }, 'MapTypeTerrain'));
+    const mapTypeTruck = (_jsx(MapSettingsItem, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_INACTIVE }), label: truckTypeLabel }, 'MapTypeFlatTruck'));
+    const mapTypeDefault = (_jsx(MapSettingsItem, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE }), label: defaultTypeLabel }, 'MapTypeFlat'));
+    const hasLabels = !!defaultTypeLabel || !!truckTypeLabel || !!terrainTypeLabel || !!satelliteTypeLabel || !!nightTypeLabel;
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
+            ? compact([
+                dropdownHeader,
+                mapTypeNight,
+                mapTypeSatellite,
+                mapTypeTerrain,
+                mapTypeTruck,
+                mapTypeDefault,
+            ])
+            : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })) }, remainingProps)));
 };
 export default MapTypeSettings;

package/components/map/components/features/settings/buttons/MapCenterMarkerButton.js

@@ -3,9 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, CENTER_MARKER_ACTIVE, CENTER_MARKER_INACTIVE } from '../../../../icons/MapIcon';
+import { MapIcon } from '../../../../icons/MapIcon';
 const MapCenterMarkerButton = (props) => {
     const { isActive = false, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: CENTER_MARKER_ACTIVE, className: 'MapCenterMarkerButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: CENTER_MARKER_INACTIVE, className: 'MapCenterMarkerButtonIconInactive' }), onToggle: onToggle }, remainingProps)));
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle }, remainingProps)));
 };
 export default MapCenterMarkerButton;

package/components/map/components/features/settings/items/MapCustomerPoiSettingsItem.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export type MapCustomerPoiSettingsItemProps = {
     onToggle?: (setIsShown: boolean) => void;
     isActive?: boolean;
+    label?: string | JSX.Element;
 };
 declare const MapCustomerPoiSettingsItem: (props: MapCustomerPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MapCustomerPoiSettingsItem;

package/components/map/components/features/settings/items/MapLayerIncidentsItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerIncidentsItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/components/map/components/features/settings/items/MapLayerRoadRestrictionsItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerRoadRestrictionsItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/components/map/components/features/settings/items/MapLayerTrafficItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerTrafficItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/components/map/components/features/settings/items/MapSettingsDropdownHeader.d.ts

@@ -0,0 +1,4 @@
+import { type DropdownHeaderProps } from '../../../../../selects/DropdownHeader';
+export type MapSettingsDropdownHeaderProps = DropdownHeaderProps & {};
+declare const MapSettingsDropdownHeader: (props: MapSettingsDropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default MapSettingsDropdownHeader;

package/components/map/components/features/settings/items/MapSettingsDropdownHeader.js

@@ -0,0 +1,9 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+import DropdownHeader from '../../../../../selects/DropdownHeader';
+const MapSettingsDropdownHeader = (props) => {
+    const remainingProps = __rest(props, []);
+    return _jsx(DropdownHeader, Object.assign({ className: 'MapSettingsDropdownHeader' }, remainingProps));
+};
+export default MapSettingsDropdownHeader;

package/components/map/components/features/settings/items/MapWorkshopPoiSettingsItem.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export type MapWorkshopPoiSettingsItemProps = {
     onToggle?: (setIsShown: boolean) => void;
     isActive?: boolean;
+    label?: string | JSX.Element;
 };
 declare const MapWorkshopPoiSettingsItem: (props: MapWorkshopPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MapWorkshopPoiSettingsItem;

package/components/map/icons/MapIcon.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type MapIconProps = {
     name?: string;
     height?: number;
     width?: number;
     className?: string;
 };
-export declare const MapIcon: (props: MapIconProps) => React.FunctionComponentElement<any>;
+export declare const MapIcon: (props: MapIconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ZOOM_IN = "zoomIn";
 export declare const ZOOM_OUT = "zoomOut";
 export declare const BOUNDING_BOX_ACTIVE = "boundingBoxActive";

package/components/map/icons/MapIcon.js

@@ -3,7 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 export const MapIcon = (props) => {
     const { className = '', name = '', height = 40, width = 40 } = props;
-    // const fillColor = active ? '#30B4C0' : '#A7AFBB';
+    if (name.includes('rioglyph')) {
+        return (_jsx("div", Object.assign({ className: 'height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110' }, { children: _jsx("span", { className: `rioglyph ${name} text-size-200pct` }) })));
+    }
     return React.cloneElement(icons[name], {
         className,
         height,

package/components/mapMarker/ClusterMapMarker.d.ts

@@ -48,6 +48,10 @@ export type ClusterMapMarkerProps = {
      * Name of a rioglyph icon.
      */
     iconName?: string;
+    /**
+     * Marker cursor
+     */
+    cursor?: 'cursor-pointer' | 'cursor-grab' | 'cursor-not-allowed';
 };
 declare const ClusterMapMarker: (props: ClusterMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default ClusterMapMarker;

package/components/mapMarker/ClusterMapMarker.js

@@ -3,8 +3,8 @@ import 'react';
 import classNames from 'classnames';
 import { markerColorMapping } from '../map/utils/mapTypes';
 const ClusterMapMarker = (props) => {
-    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, } = props;
-    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active');
+    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, cursor = 'cursor-pointer', } = props;
+    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active', cursor);
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
     return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));

package/components/mapMarker/SingleMapMarker.d.ts

@@ -114,6 +114,10 @@ export type SingleMapMarkerProps = {
      * Shows only the anchor without the rest of the marker.
      */
     anchorOnly?: boolean;
+    /**
+     * Marker cursor
+     */
+    cursor?: 'cursor-pointer' | 'cursor-grab' | 'cursor-not-allowed';
 };
 declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;

package/components/mapMarker/SingleMapMarker.js

@@ -16,11 +16,11 @@ const MapStateIndicator = (props) => {
 };
 const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
-    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, } = props;
+    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', } = props;
     const largeAnchor = anchorSize === 'lg';
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
-    const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '');
-    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging');
+    const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
+    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
     return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };

package/components/selects/DropdownHeader.d.ts

@@ -3,6 +3,7 @@ export type DropdownHeaderProps = {
     icon?: React.ReactNode;
     center?: boolean;
     label: string | React.ReactNode;
+    className?: string;
 };
 declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownHeader;

package/components/selects/DropdownHeader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 const DropdownHeader = (props) => {
-    const { icon, label, center = true } = props;
-    return (_jsx("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''}` }, { children: _jsxs("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
+    const { icon, label, center = true, className = '' } = props;
+    return (_jsx("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''} ${className}` }, { children: _jsxs("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
 };
 export default DropdownHeader;

package/components/selects/Multiselect.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -75,7 +75,7 @@ const Multiselect = (props) => {
         const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
-        const toggleButton = (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? _jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }) : renderSelection(), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] })));
+        const toggleButton = (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? (_jsxs(_Fragment, { children: [_jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] })));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }

package/components/selects/MultiselectToggleFilter.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 const MultiselectToggleFilter = (props) => {
     const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
-    const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active', multiline && 'padding-left-0');
+    const inputClasses = classNames('multiselect-filter-input', isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
     return (_jsx("input", { type: 'text', role: 'searchbox', className: inputClasses, 
         // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
         autoFocus: true, onChange: onFilterChange, defaultValue: filterValue }));

package/components/states/CustomState.js

@@ -19,9 +19,9 @@ const renderButtons = (buttons) => {
         return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: _jsx(StateButton, Object.assign({}, buttons[0])) })));
     }
     if (buttons.length === 2) {
-        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
+        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: [_jsx(StateButton, Object.assign({}, buttons[0]), '1'), _jsx(StateButton, Object.assign({}, buttons[1]), '2')] })), _jsx("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: [_jsx(StateButton, Object.assign({}, buttons[0]), '1'), _jsx(StateButton, Object.assign({}, buttons[1]), '2')] })), _jsx("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
                     return index > 1 && _jsx(StateButton, Object.assign({}, buttonProps), index);
                 }) }))] }));
 };

package/hooks/useAfterMount.js

@@ -6,12 +6,16 @@ import { useEffect, useRef } from 'react';
  * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
  */
 const useAfterMount = (callback, deps) => {
-    const componentJustMountedRef = useRef(true);
+    const hasMountedRef = useRef(false);
     useEffect(() => {
-        if (!componentJustMountedRef.current) {
-            return callback();
+        if (hasMountedRef.current) {
+            // Run the callback only after the first render and
+            // whenever the dependencies change afterwards
+            callback();
+        }
+        else {
+            hasMountedRef.current = true;
         }
-        componentJustMountedRef.current = false;
     }, deps);
 };
 export default useAfterMount;

package/lib/es/DropdownHeader.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/selects/DropdownHeader';
+export * from './components/selects/DropdownHeader';

package/lib/es/DropdownHeader.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var DropdownHeader_1 = require("./components/selects/DropdownHeader");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(DropdownHeader_1).default; } });
+tslib_1.__exportStar(require("./components/selects/DropdownHeader"), exports);

package/lib/es/FeedbackInlineButtons.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackInlineButtons';
+export * from './components/feedback/FeedbackInlineButtons';

package/lib/es/FeedbackInlineButtons.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackInlineButtons_1 = require("./components/feedback/FeedbackInlineButtons");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackInlineButtons_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackInlineButtons"), exports);

package/lib/es/FeedbackRating.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackRating';
+export * from './components/feedback/FeedbackRating';

package/lib/es/FeedbackRating.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackRating_1 = require("./components/feedback/FeedbackRating");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackRating_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackRating"), exports);

package/lib/es/FeedbackReactions.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackReactions';
+export * from './components/feedback/FeedbackReactions';

package/lib/es/FeedbackReactions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackReactions_1 = require("./components/feedback/FeedbackReactions");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackReactions_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackReactions"), exports);

package/lib/es/MapAdditionalLayerSettings.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';
+export * from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';

package/lib/es/MapAdditionalLayerSettings.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var MapAdditionalLayerSettings_1 = require("./components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(MapAdditionalLayerSettings_1).default; } });
+tslib_1.__exportStar(require("./components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings"), exports);

package/lib/es/MapSettingsDropdownHeader.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/items/MapSettingsDropdownHeader';
+export * from './components/map/components/features/settings/items/MapSettingsDropdownHeader';

package/lib/es/MapSettingsDropdownHeader.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var MapSettingsDropdownHeader_1 = require("./components/map/components/features/settings/items/MapSettingsDropdownHeader");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(MapSettingsDropdownHeader_1).default; } });
+tslib_1.__exportStar(require("./components/map/components/features/settings/items/MapSettingsDropdownHeader"), exports);

package/lib/es/SmoothScrollbars.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/smoothScrollbars/SmoothScrollbars';
+export * from './components/smoothScrollbars/SmoothScrollbars';

package/lib/es/SmoothScrollbars.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var SmoothScrollbars_1 = require("./components/smoothScrollbars/SmoothScrollbars");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(SmoothScrollbars_1).default; } });
+tslib_1.__exportStar(require("./components/smoothScrollbars/SmoothScrollbars"), exports);

package/lib/es/components/assetTree/TreeLeaf.js

@@ -11,6 +11,6 @@ const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButto
 const TreeLeaf = react_1.default.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel TreeLabelName', onClick: onActiveItem }, { children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] }))] })));
 });
 exports.default = TreeLeaf;

package/lib/es/components/assetTree/TreeNode.js

@@ -9,6 +9,6 @@ const TreeNode = react_1.default.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel' }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [node.icon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${node.icon}` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length }))] })), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabel TreeLabelName' }, { children: [node.icon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${node.icon}` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length })), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
 });
 exports.default = TreeNode;

package/lib/es/components/assetTree/TreeRoot.js

@@ -7,7 +7,7 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("@formkit/auto-animate/react");
 const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
-    const treeRootClasses = (0, classnames_1.default)('TreeRoot', 'user-select-none overflow-hidden');
+    const treeRootClasses = (0, classnames_1.default)('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
     const [parent, enableAnimations] = (0, react_1.useAutoAnimate)();
     enableAnimations(!disableAnimation);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: parent, className: treeRootClasses, style: { maxHeight } }, { children: children })));

package/lib/es/components/checkbox/Checkbox.js

@@ -53,7 +53,7 @@ const Checkbox = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: text && (0, jsx_runtime_1.jsx)("span", { children: text }) })), renderCustomContent && children] })));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/lib/es/components/feedback/FeedbackInlineButtons.d.ts

@@ -0,0 +1,13 @@
+import React, { type ComponentProps } from 'react';
+type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline inlined with the buttons.
+     */
+    headline?: React.ReactNode;
+    /**
+     * List of buttons to be shown.
+     */
+    buttons?: React.ReactNode[];
+};
+declare const FeedbackInlineButtons: (props: FeedbackInlineButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackInlineButtons;

package/lib/es/components/feedback/FeedbackInlineButtons.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const FeedbackInlineButtons = (props) => {
+    const { buttons = [], headline } = props, remainingProps = tslib_1.__rest(props, ["buttons", "headline"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none' }, { children: [headline && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-dark' }, { children: headline })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar gap-5' }, { children: buttons.map(button => button) }))] })));
+};
+exports.default = FeedbackInlineButtons;

package/lib/es/components/feedback/FeedbackRating.d.ts

@@ -0,0 +1,65 @@
+import React, { type ComponentProps } from 'react';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+type FeedbackRatingProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline
+     */
+    headline?: React.ReactNode;
+    /**
+     * The amount of toggle buttons used to rate.
+     *
+     * @default 1
+     */
+    count: number;
+    /**
+     * Defines whether the buttons are round.
+     *
+     * @default false
+     */
+    circleButtons?: boolean;
+    /**
+     * Optional class names applied to all the buttons.
+     * If you need more control on styling individual buttons, see `buttonStyles`.
+     */
+    buttonClassName?: string;
+    /**
+     * Array of button labels that will be used instead of the index.
+     * There needs to be a label for each button defined.
+     */
+    buttonLabels?: React.ReactNode[];
+    /**
+     * Array of button styles to individually define the button size, style and variant.
+     * There needs to be a item for each button defined.
+     */
+    buttonStyles?: {
+        bsSize?: BUTTON_SIZE;
+        bsStyle?: BUTTON_STYLE;
+        variant?: BUTTON_VARIANT;
+        className?: string;
+    }[];
+    /**
+     * Left aligned label to name the lowest rating option.
+     */
+    leftLabel?: React.ReactNode;
+    /**
+     * Right aligned label to name the highest rating option.
+     */
+    rightLabel?: React.ReactNode;
+    /**
+     * Additional icon placed in front of the rating buttons.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Additional icon placed after the rating buttons.
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Callback triggered when the rating changes.
+     *
+     * @param rating The rating value. Undefined, when a toggle is unchecked.
+     * @returns
+     */
+    onRatingChanged?: (rating: number | undefined) => void;
+};
+declare const FeedbackRating: (props: FeedbackRatingProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackRating;