@kepler.gl/components 3.3.0-alpha.0 → 3.3.0-alpha.10

package/dist/side-panel/common/source-data-catalog.d.ts

@@ -10,6 +10,7 @@ type MiniDataset = {
     label?: string;
     dataContainer: DataContainerInterface;
     type?: string;
+    metadata?: Record<string, any>;
 };
 type MiniDatasets = {
     [key: string]: MiniDataset;
@@ -21,6 +22,8 @@ export type SourceDataCatalogProps = {
     showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
     updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
     removeDataset?: ActionHandler<typeof openDeleteModal>;
+    refreshDataset?: ActionHandler<typeof VisStateActions.refreshDataset>;
+    updateDatasetProps?: ActionHandler<typeof VisStateActions.updateDatasetProps>;
 };
 declare function SourceDataCatalogFactory(DatasetTitle: ReturnType<typeof DatasetTitleFactory>, DatasetInfo: ReturnType<typeof DatasetInfoFactory>): React.FC<SourceDataCatalogProps>;
 declare namespace SourceDataCatalogFactory {

package/dist/side-panel/filter-panel/filter-panel-header.d.ts

@@ -6,9 +6,13 @@ import { KeplerTable } from '@kepler.gl/table';
 interface StyledFilterHeaderProps extends StyledPanelHeaderProps {
     $labelRCGColorValues: RGBColor[];
 }
-export declare const StyledFilterHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, StyledFilterHeaderProps>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPanelHeaderProps>>, keyof React.Component<any, {}, any>>;
+export declare const StyledFilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof StyledFilterHeaderProps> & StyledFilterHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledPanelHeaderProps> & StyledPanelHeaderProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof StyledFilterHeaderProps> & StyledFilterHeaderProps, never>>> & string;
 export type FilterPanelHeaderProps = {
     className?: string;
     datasets: KeplerTable[];

package/dist/side-panel/interaction-panel/geocoder-config.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type GeocoderConfigProps = {
+    config: {
+        limitSearch: boolean;
+    };
+    onChange: (config: {
+        limitSearch: boolean;
+    }) => void;
+};
+declare function GeocoderConfigFactory(): ({ config, onChange }: GeocoderConfigProps) => React.JSX.Element;
+export default GeocoderConfigFactory;

package/dist/side-panel/interaction-panel/interaction-panel.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentType } from 'react';
 import BrushConfigFactory from './brush-config';
 import TooltipConfigFactory from './tooltip-config';
+import GeocoderConfigFactory from './geocoder-config';
 import { Datasets } from '@kepler.gl/table';
 import { InteractionConfig, ValueOf } from '@kepler.gl/types';
 import { setColumnDisplayFormat as setColumnDisplayFormatAction, ActionHandler } from '@kepler.gl/actions';
@@ -13,8 +14,8 @@ interface InteractionPanelProps {
     };
     setColumnDisplayFormat: ActionHandler<typeof setColumnDisplayFormatAction>;
 }
-declare function InteractionPanelFactory(TooltipConfig: ReturnType<typeof TooltipConfigFactory>, BrushConfig: ReturnType<typeof BrushConfigFactory>): ComponentType<InteractionPanelProps>;
+declare function InteractionPanelFactory(TooltipConfig: ReturnType<typeof TooltipConfigFactory>, BrushConfig: ReturnType<typeof BrushConfigFactory>, GeocoderConfig: ReturnType<typeof GeocoderConfigFactory>): ComponentType<InteractionPanelProps>;
 declare namespace InteractionPanelFactory {
-    var deps: (typeof BrushConfigFactory | typeof TooltipConfigFactory)[];
+    var deps: (typeof GeocoderConfigFactory | typeof TooltipConfigFactory | typeof BrushConfigFactory)[];
 }
 export default InteractionPanelFactory;

package/dist/side-panel/layer-manager.d.ts

@@ -10,8 +10,9 @@ import InfoHelperFactory from '../common/info-helper';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, VisStateActions, MapStateActions, ActionHandler } from '@kepler.gl/actions';
 import { SidePanelItem } from '../types';
-import { PanelListView } from '@kepler.gl/types';
+import { MapState, PanelListView, LayerOrder } from '@kepler.gl/types';
 import { Datasets } from '@kepler.gl/table';
+import PanelHeaderActionFactory from './panel-header-action';
 type LayerBlendingSelectorProps = {
     layerBlending: string;
     updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
@@ -20,13 +21,14 @@ type LayerBlendingSelectorProps = {
 type LayerManagerProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     layerBlending: string;
     overlayBlending: string;
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
     showAddDataModal: () => void;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
     showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
@@ -36,10 +38,10 @@ type LayerManagerProps = {
     showDeleteDataset?: boolean;
 } & WrappedComponentProps;
 export declare const LayerBlendingSelector: React.MemoExoticComponent<({ layerBlending, updateLayerBlending, intl, className }: LayerBlendingSelectorProps) => React.JSX.Element>;
-declare function LayerManagerFactory(LayerList: ReturnType<typeof LayerListFactory>, DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>, PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, DatasetSection: ReturnType<typeof DatasetSectionFactory>, AddLayerButton: ReturnType<typeof AddLayerButtonFactory>, InfoHelper: ReturnType<typeof InfoHelperFactory>): React.FC<import("react-intl").WithIntlProps<LayerManagerProps>> & {
+declare function LayerManagerFactory(LayerList: ReturnType<typeof LayerListFactory>, DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>, PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, DatasetSection: ReturnType<typeof DatasetSectionFactory>, AddLayerButton: ReturnType<typeof AddLayerButtonFactory>, InfoHelper: ReturnType<typeof InfoHelperFactory>, PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): React.FC<import("react-intl").WithIntlProps<LayerManagerProps>> & {
     WrappedComponent: React.ComponentType<LayerManagerProps>;
 };
 declare namespace LayerManagerFactory {
-    var deps: (typeof InfoHelperFactory | typeof LayerListFactory | typeof DatasetLayerGroupFactory | typeof PanelViewListToggleFactory | (() => React.FC<import("./panel-title").PanelTitleProps>) | typeof DatasetSectionFactory | typeof AddLayerButtonFactory)[];
+    var deps: (typeof InfoHelperFactory | typeof PanelHeaderActionFactory | typeof LayerListFactory | typeof DatasetLayerGroupFactory | typeof PanelViewListToggleFactory | (() => React.FC<import("./panel-title").PanelTitleProps>) | typeof DatasetSectionFactory | typeof AddLayerButtonFactory)[];
 }
 export default LayerManagerFactory;

package/dist/side-panel/layer-panel/color-scale-selector.d.ts

@@ -27,7 +27,7 @@ export type ColorScaleSelectorProps = {
     searchable: boolean;
     displayOption: string;
     getOptionValue: string;
-    aggregatedBins?: AggregatedBin[];
+    aggregatedBins?: Record<number, AggregatedBin>;
     channelKey: string;
 };
 declare function ColorScaleSelectorFactory(ColorBreaksPanel: ReturnType<typeof ColorBreaksPanelFactory>): React.FC<ColorScaleSelectorProps>;

package/dist/side-panel/layer-panel/color-selector.d.ts

@@ -22,11 +22,13 @@ type ColorSelectorProps = {
     useOpacity?: boolean;
     setColorUI?: (newConfig: NestedPartial<ColorUI>) => void;
 };
-export declare const ColorBlock: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const ColorBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "backgroundcolor"> & {
     backgroundcolor: RGBColor;
-}>>;
-export declare const ColorSelectorInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColorSelectorInputProps>>;
-export declare const InputBoxContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "backgroundcolor"> & {
+    backgroundcolor: RGBColor;
+}, never>>> & string;
+export declare const ColorSelectorInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorSelectorInputProps> & ColorSelectorInputProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColorSelectorInputProps> & ColorSelectorInputProps, never>>> & string;
+export declare const InputBoxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare function ColorSelectorFactory(ColorRangeSelector: ReturnType<typeof ColorRangeSelectorFactory>, RangeSlider: ReturnType<typeof RangeSliderFactory>): React.FC<ColorSelectorProps>;
 declare namespace ColorSelectorFactory {
     var deps: (typeof RangeSliderFactory | typeof ColorRangeSelectorFactory)[];

package/dist/side-panel/layer-panel/custom-palette.d.ts

@@ -41,11 +41,9 @@ export type CustomPaletteInputProps = {
     onAdd: (index: number) => void;
     onToggleSketcher: (index: number) => void;
 };
-export declare const ColorPaletteItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const DividerLine: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const ColorSwatch: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
+export declare const ColorPaletteItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DividerLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ColorSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
 export type ColorPaletteInputProps = {
     value: string | number;
     onChange: (val: unknown) => void;

package/dist/side-panel/layer-panel/dataset-layer-group.d.ts

@@ -3,10 +3,11 @@ import DatasetLayerSectionFactory from './dataset-layer-section';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, VisStateActions, ActionHandler, MapStateActions } from '@kepler.gl/actions';
 import { Datasets } from '@kepler.gl/table';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 type DatasetLayerGroupProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     showDeleteDataset: boolean;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
@@ -15,6 +16,7 @@ type DatasetLayerGroupProps = {
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
 };
 declare function DatasetLayerGroupFactory(DatasetLayerSection: ReturnType<typeof DatasetLayerSectionFactory>): React.FC<DatasetLayerGroupProps>;
 declare namespace DatasetLayerGroupFactory {

package/dist/side-panel/layer-panel/dataset-layer-section.d.ts

@@ -4,11 +4,12 @@ import LayerListFactory from './layer-list';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { UIStateActions, ActionHandler, VisStateActions, MapStateActions } from '@kepler.gl/actions';
 import { KeplerTable, Datasets } from '@kepler.gl/table';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 type DatasetLayerSectionProps = {
     datasets: Datasets;
     dataset: KeplerTable;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     showDeleteDataset: boolean;
     showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
@@ -17,6 +18,7 @@ type DatasetLayerSectionProps = {
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
+    mapState?: MapState;
 };
 declare function DatasetLayerSectionFactory(SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>, LayerList: ReturnType<typeof LayerListFactory>): React.FC<DatasetLayerSectionProps>;
 declare namespace DatasetLayerSectionFactory {

package/dist/side-panel/layer-panel/dataset-section.d.ts

@@ -14,6 +14,8 @@ type DatasetSectionProps = {
     updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
     removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
     showAddDataModal: () => void;
+    refreshDataset?: ActionHandler<typeof VisStateActions.refreshDataset>;
+    updateDatasetProps?: ActionHandler<typeof VisStateActions.updateDatasetProps>;
 };
 export declare function AddDataButtonFactory(): React.FC<AddDataButtonProps>;
 declare function DatasetSectionFactory(SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>, AddDataButton: ReturnType<typeof AddDataButtonFactory>): React.FC<DatasetSectionProps>;

package/dist/side-panel/layer-panel/layer-config-group.d.ts

@@ -19,20 +19,14 @@ export type LayerConfigGroupProps = {
     IconComponent?: React.ElementType;
     children?: React.ReactNode;
 };
-export declare const StyledLayerConfigGroupAction: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const ConfigGroupCollapsibleContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
-export declare const ConfigGroupCollapsibleHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>>;
-export declare const StyledLayerConfigGroup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledLayerConfigGroupAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ConfigGroupCollapsibleContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
+export declare const ConfigGroupCollapsibleHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className"> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "className">>> & string;
+export declare const StyledLayerConfigGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 interface StyledConfigGroupHeaderProps {
     collapsible?: boolean;
 }
-export declare const StyledConfigGroupHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, StyledConfigGroupHeaderProps>>;
+export declare const StyledConfigGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "collapsible"> & StyledConfigGroupHeaderProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "collapsible"> & StyledConfigGroupHeaderProps, "className">>> & string;
 export declare function LayerConfigGroupLabelFactory(InfoHelper: ReturnType<typeof InfoHelperFactory>): React.FC<LayerConfigGroupLabelProps>;
 export declare namespace LayerConfigGroupLabelFactory {
     var deps: (typeof InfoHelperFactory)[];

package/dist/side-panel/layer-panel/layer-configurator.d.ts

@@ -9,6 +9,7 @@ import LayerTypeSelectorFactory from './layer-type-selector';
 import TextLabelPanelFactory from './text-label-panel';
 import VisConfigSliderFactory from './vis-config-slider';
 import VisConfigSwitchFactory from './vis-config-switch';
+import ScenegraphModelSelectorFactory from './scenegraph-model-selector';
 import RasterTileLayerConfiguratorFactory from './raster-tile-layer-configurator';
 import VectorTileLayerConfiguratorFactory from './vector-tile-layer-configurator';
 import { ActionHandler, toggleModal } from '@kepler.gl/actions';
@@ -46,6 +47,7 @@ export declare const getLayerConfiguratorProps: (props: LayerConfiguratorProps)
     fields: import("@kepler.gl/types").Field[];
     onChange: (newConfig: Partial<LayerBaseConfig>) => void;
     setColorUI: (prop: string, newConfig: NestedPartial<ColorUI>) => void;
+    setLayerTextLabel: (idx: number | "all", prop: string, value: any) => void;
 };
 export declare const getVisConfiguratorProps: (props: LayerConfiguratorProps) => {
     layer: Layer;
@@ -60,9 +62,9 @@ export declare const getLayerChannelConfigProps: (props: LayerConfiguratorProps)
     onChange: (newConfig: Partial<LayerBaseConfig>, channel: string, newVisConfig?: Partial<LayerVisConfig>) => void;
     setColorUI: (prop: string, newConfig: NestedPartial<ColorUI>) => void;
 };
-declare function LayerConfiguratorFactory(SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>, VisConfigSlider: ReturnType<typeof VisConfigSliderFactory>, TextLabelPanel: ReturnType<typeof TextLabelPanelFactory>, LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>, ChannelByValueSelector: ReturnType<typeof ChannelByValueSelectorFactory>, LayerColumnModeConfig: ReturnType<typeof LayerColumnModeConfigFactory>, LayerTypeSelector: ReturnType<typeof LayerTypeSelectorFactory>, VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>, LayerColorSelector: ReturnType<typeof LayerColorSelectorFactory>, LayerColorRangeSelector: ReturnType<typeof LayerColorRangeSelectorFactory>, ArcLayerColorSelector: ReturnType<typeof ArcLayerColorSelectorFactory>, AggrScaleSelector: ReturnType<typeof AggrScaleSelectorFactory>, VectorTileLayerConfigurator: ReturnType<typeof VectorTileLayerConfiguratorFactory>, RasterTileLayerConfigurator: ReturnType<typeof RasterTileLayerConfiguratorFactory>): React.ComponentType<LayerConfiguratorProps>;
+declare function LayerConfiguratorFactory(SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>, VisConfigSlider: ReturnType<typeof VisConfigSliderFactory>, TextLabelPanel: ReturnType<typeof TextLabelPanelFactory>, LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>, ChannelByValueSelector: ReturnType<typeof ChannelByValueSelectorFactory>, LayerColumnModeConfig: ReturnType<typeof LayerColumnModeConfigFactory>, LayerTypeSelector: ReturnType<typeof LayerTypeSelectorFactory>, VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>, LayerColorSelector: ReturnType<typeof LayerColorSelectorFactory>, LayerColorRangeSelector: ReturnType<typeof LayerColorRangeSelectorFactory>, ArcLayerColorSelector: ReturnType<typeof ArcLayerColorSelectorFactory>, AggrScaleSelector: ReturnType<typeof AggrScaleSelectorFactory>, VectorTileLayerConfigurator: ReturnType<typeof VectorTileLayerConfiguratorFactory>, RasterTileLayerConfigurator: ReturnType<typeof RasterTileLayerConfiguratorFactory>, ScenegraphModelSelector: ReturnType<typeof ScenegraphModelSelectorFactory>): React.ComponentType<LayerConfiguratorProps>;
 declare namespace LayerConfiguratorFactory {
-    var deps: (typeof RasterTileLayerConfiguratorFactory | typeof VisConfigSwitchFactory | typeof LayerConfigGroupFactory | typeof VisConfigSliderFactory | typeof SourceDataSelectorFactory | typeof TextLabelPanelFactory | typeof ChannelByValueSelectorFactory | typeof LayerColumnModeConfigFactory | typeof LayerTypeSelectorFactory | typeof LayerColorSelectorFactory | typeof LayerColorRangeSelectorFactory | typeof ArcLayerColorSelectorFactory | typeof AggrScaleSelectorFactory | typeof VectorTileLayerConfiguratorFactory)[];
+    var deps: (typeof ScenegraphModelSelectorFactory | typeof SourceDataSelectorFactory | typeof VisConfigSliderFactory | typeof TextLabelPanelFactory | typeof LayerConfigGroupFactory | typeof ChannelByValueSelectorFactory | typeof LayerColumnModeConfigFactory | typeof LayerTypeSelectorFactory | typeof VisConfigSwitchFactory | typeof LayerColorSelectorFactory | typeof LayerColorRangeSelectorFactory | typeof ArcLayerColorSelectorFactory | typeof AggrScaleSelectorFactory | typeof VectorTileLayerConfiguratorFactory | typeof RasterTileLayerConfiguratorFactory)[];
 }
 export default LayerConfiguratorFactory;
 export declare const AggregationTypeSelector: ({ channel, layer, onChange }: AggregationSelectorProps) => React.JSX.Element;

package/dist/side-panel/layer-panel/layer-group-header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LayerOrderGroup } from '@kepler.gl/types';
+import PanelHeaderActionFactory from '../panel-header-action';
+export type LayerGroupHeaderProps = {
+    layerGroup: LayerOrderGroup;
+    isLayerGroupContentOpen?: boolean;
+    onToggleLayerGroupContent?: () => void;
+    listeners?: any;
+    className?: string;
+};
+declare function LayerGroupHeaderFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): React.FC<LayerGroupHeaderProps>;
+declare namespace LayerGroupHeaderFactory {
+    var deps: (typeof PanelHeaderActionFactory)[];
+}
+export default LayerGroupHeaderFactory;

package/dist/side-panel/layer-panel/layer-list.d.ts

@@ -2,22 +2,28 @@ import React from 'react';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
 import { Datasets } from '@kepler.gl/table';
 import { UIStateActions, VisStateActions, MapStateActions } from '@kepler.gl/actions';
+import { LayerOrder, MapState } from '@kepler.gl/types';
 import LayerPanelFactory from './layer-panel';
+import LayerGroupHeaderFactory from './layer-group-header';
 import { SplitMap } from '@kepler.gl/types';
 export type LayerListProps = {
     datasets: Datasets;
     layers: Layer[];
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     layerClasses: LayerClassesType;
     isSortable?: boolean;
     splitMap?: SplitMap;
+    mapState?: MapState;
     uiStateActions: typeof UIStateActions;
     visStateActions: typeof VisStateActions;
     mapStateActions: typeof MapStateActions;
 };
-export type LayerListFactoryDeps = [typeof LayerPanelFactory];
-declare function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>): React.FC<LayerListProps>;
+export type LayerListFactoryDeps = [
+    typeof LayerPanelFactory,
+    typeof LayerGroupHeaderFactory
+];
+declare function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>, LayerGroupHeader: ReturnType<typeof LayerGroupHeaderFactory>): React.FC<LayerListProps>;
 declare namespace LayerListFactory {
-    var deps: (typeof LayerPanelFactory)[];
+    var deps: (typeof LayerGroupHeaderFactory | typeof LayerPanelFactory)[];
 }
 export default LayerListFactory;

package/dist/side-panel/layer-panel/layer-panel-header.d.ts

@@ -34,7 +34,7 @@ export type LayerPanelHeaderProps = {
     layerType?: string | null;
     allowDuplicate?: boolean;
     isDragNDropEnabled?: boolean;
-    warning?: boolean;
+    warning?: React.ReactNode;
     labelRCGColorValues?: RGBColor | null;
     actionIcons?: {
         remove: ComponentType<Partial<BaseProps>>;

package/dist/side-panel/layer-panel/layer-panel.d.ts

@@ -2,7 +2,7 @@ import React, { CSSProperties, MouseEventHandler, TouchEventHandler } from 'reac
 import { ActionHandler, MapStateActions, VisStateActions, toggleModal } from '@kepler.gl/actions';
 import { Layer } from '@kepler.gl/layers';
 import { Datasets } from '@kepler.gl/table';
-import { SplitMap } from '@kepler.gl/types';
+import { MapState, SplitMap } from '@kepler.gl/types';
 import LayerConfiguratorFactory from './layer-configurator';
 import LayerPanelHeaderFactory from './layer-panel-header';
 type LayerPanelProps = {
@@ -20,6 +20,7 @@ type LayerPanelProps = {
     }[];
     isDraggable?: boolean;
     idx: number;
+    mapState?: MapState;
     openModal: ActionHandler<typeof toggleModal>;
     layerColorUIChange: ActionHandler<typeof VisStateActions.layerColorUIChange>;
     layerConfigChange: ActionHandler<typeof VisStateActions.layerConfigChange>;

package/dist/side-panel/layer-panel/raster-tile-layer-configurator.d.ts

@@ -12,6 +12,6 @@ type RasterTileLayerConfiguratorProps = {
 };
 declare function RasterTileLayerConfiguratorFactory(LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>, VisConfigSlider: ReturnType<typeof VisConfigSliderFactory>, InfoHelper: ReturnType<typeof InfoHelperFactory>, VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>): React.FC<RasterTileLayerConfiguratorProps>;
 declare namespace RasterTileLayerConfiguratorFactory {
-    var deps: (typeof InfoHelperFactory | typeof VisConfigSwitchFactory | typeof LayerConfigGroupFactory | typeof VisConfigSliderFactory)[];
+    var deps: (typeof InfoHelperFactory | typeof VisConfigSliderFactory | typeof LayerConfigGroupFactory | typeof VisConfigSwitchFactory)[];
 }
 export default RasterTileLayerConfiguratorFactory;

package/dist/side-panel/layer-panel/scenegraph-model-selector.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import LayerTypeDropdownListFactory from './layer-type-dropdown-list';
+import LayerTypeListItemFactory from './layer-type-list-item';
+import { LayerTypeOption } from './layer-type-dropdown-list';
+export type ScenegraphModelSelectorProps = {
+    selected: string;
+    onSelect: (scenegraph: {
+        id: string;
+        angles: number[];
+    }) => void;
+    options?: LayerTypeOption[];
+    disabled?: boolean;
+    theme: any;
+};
+declare function ScenegraphModelSelectorFactory(LayerTypeListItem: ReturnType<typeof LayerTypeListItemFactory>, LayerTypeDropdownList: ReturnType<typeof LayerTypeDropdownListFactory>): React.FC<Omit<ScenegraphModelSelectorProps, "theme">>;
+declare namespace ScenegraphModelSelectorFactory {
+    var deps: (typeof LayerTypeDropdownListFactory | typeof LayerTypeListItemFactory)[];
+}
+type ScenegraphCustomModelUrlInputProps = {
+    customModelUrl: string;
+    onChange: (url: string) => void;
+};
+export declare const ScenegraphCustomModelUrlInput: React.FC<ScenegraphCustomModelUrlInputProps>;
+export default ScenegraphModelSelectorFactory;

package/dist/side-panel/layer-panel/text-label-panel.d.ts

@@ -12,6 +12,6 @@ type TextLabelPanelProps = {
 };
 declare function TextLabelPanelFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>, LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>, FieldSelector: ReturnType<typeof FieldSelectorFactory>, ColorSelector: ReturnType<typeof ColorSelectorFactory>): React.ComponentType<TextLabelPanelProps>;
 declare namespace TextLabelPanelFactory {
-    var deps: (typeof RangeSliderFactory | typeof FieldSelectorFactory | typeof LayerConfigGroupFactory | typeof ColorSelectorFactory)[];
+    var deps: (typeof RangeSliderFactory | typeof FieldSelectorFactory | typeof ColorSelectorFactory | typeof LayerConfigGroupFactory)[];
 }
 export default TextLabelPanelFactory;

package/dist/side-panel/layer-panel/vector-tile-layer-configurator.d.ts

@@ -18,6 +18,6 @@ type Props = {
 };
 declare function VectorTileLayerConfiguratorFactory(ChannelByValueSelector: ReturnType<typeof ChannelByValueSelectorFactory>, LayerColorRangeSelector: ReturnType<typeof LayerColorRangeSelectorFactory>, LayerColorSelector: ReturnType<typeof LayerColorSelectorFactory>, LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>, VisConfigSlider: ReturnType<typeof VisConfigSliderFactory>, VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>, _SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>, FieldSelector: ReturnType<typeof FieldSelectorFactory>): React.FC<Props>;
 declare namespace VectorTileLayerConfiguratorFactory {
-    var deps: (typeof FieldSelectorFactory | typeof VisConfigSwitchFactory | typeof LayerConfigGroupFactory | typeof VisConfigSliderFactory | typeof SourceDataSelectorFactory | typeof ChannelByValueSelectorFactory | typeof LayerColorSelectorFactory | typeof LayerColorRangeSelectorFactory)[];
+    var deps: (typeof FieldSelectorFactory | typeof SourceDataSelectorFactory | typeof VisConfigSliderFactory | typeof LayerConfigGroupFactory | typeof ChannelByValueSelectorFactory | typeof VisConfigSwitchFactory | typeof LayerColorSelectorFactory | typeof LayerColorRangeSelectorFactory)[];
 }
 export default VectorTileLayerConfiguratorFactory;

package/dist/side-panel/layer-panel/vis-config-slider.d.ts

@@ -12,6 +12,8 @@ type VisConfigSliderProps = {
     disabled?: boolean;
     inputTheme?: string;
     allowCustomValue?: boolean;
+    focusRange?: [number, number];
+    focusWeight?: number;
 };
 declare function VisConfigSliderFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>): React.FC<VisConfigSliderProps>;
 declare namespace VisConfigSliderFactory {

package/dist/side-panel/map-manager.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import MapStyleSelectorFactory from './map-style-panel/map-style-selector';
 import LayerGroupSelectorFactory from './map-style-panel/map-layer-selector';
+import GlobeConfigPanelFactory from './map-style-panel/globe-config-panel';
 import PanelTitleFactory from '../side-panel/panel-title';
 import { PanelMeta } from './common/types';
 import { WrappedComponentProps } from 'react-intl';
 import { MapStyle } from '@kepler.gl/reducers';
-import { MapStyleActions } from '@kepler.gl/actions';
+import { MapStyleActions, MapStateActions } from '@kepler.gl/actions';
+import { MapState } from '@kepler.gl/types';
 export type MapManagerProps = {
     mapStyle: MapStyle;
+    mapState?: MapState;
     mapStyleActions: {
         mapStyleChange: typeof MapStyleActions.mapStyleChange;
         mapConfigChange: typeof MapStyleActions.mapConfigChange;
@@ -15,13 +18,16 @@ export type MapManagerProps = {
         setBackgroundColor: typeof MapStyleActions.setBackgroundColor;
         removeCustomMapStyle: typeof MapStyleActions.removeCustomMapStyle;
     };
+    mapStateActions?: {
+        globeConfigChange: typeof MapStateActions.globeConfigChange;
+    };
     showAddMapStyleModal: () => void;
     panelMetadata: PanelMeta;
 } & WrappedComponentProps;
-declare function MapManagerFactory(MapStyleSelector: ReturnType<typeof MapStyleSelectorFactory>, LayerGroupSelector: ReturnType<typeof LayerGroupSelectorFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>): React.FC<import("react-intl").WithIntlProps<MapManagerProps>> & {
+declare function MapManagerFactory(MapStyleSelector: ReturnType<typeof MapStyleSelectorFactory>, LayerGroupSelector: ReturnType<typeof LayerGroupSelectorFactory>, PanelTitle: ReturnType<typeof PanelTitleFactory>, GlobeConfigPanel: ReturnType<typeof GlobeConfigPanelFactory>): React.FC<import("react-intl").WithIntlProps<MapManagerProps>> & {
     WrappedComponent: React.ComponentType<MapManagerProps>;
 };
 declare namespace MapManagerFactory {
-    var deps: ((() => React.FC<import("../side-panel/panel-title").PanelTitleProps>) | typeof MapStyleSelectorFactory | typeof LayerGroupSelectorFactory)[];
+    var deps: ((() => React.FC<import("../side-panel/panel-title").PanelTitleProps>) | typeof GlobeConfigPanelFactory | typeof MapStyleSelectorFactory | typeof LayerGroupSelectorFactory)[];
 }
 export default MapManagerFactory;

package/dist/side-panel/map-style-panel/globe-config-panel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MapState } from '@kepler.gl/types';
+import { GlobeConfig } from '@kepler.gl/constants';
+import PanelHeaderActionFactory from '../panel-header-action';
+import RangeSliderFactory from '../../common/range-slider';
+import LayerGroupColorPickerFactory from './map-layer-group-color-picker';
+export type GlobeConfigPanelProps = {
+    mapState: MapState;
+    onGlobeConfigChange: (config: Partial<GlobeConfig>) => void;
+};
+declare function GlobeConfigPanelFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>, RangeSlider: ReturnType<typeof RangeSliderFactory>, LayerGroupColorPicker: ReturnType<typeof LayerGroupColorPickerFactory>): React.FC<GlobeConfigPanelProps>;
+declare namespace GlobeConfigPanelFactory {
+    var deps: (typeof RangeSliderFactory | typeof PanelHeaderActionFactory | typeof LayerGroupColorPickerFactory)[];
+}
+export default GlobeConfigPanelFactory;

package/dist/side-panel/panel-header.d.ts

@@ -34,6 +34,7 @@ type DropdownCallbacks = {
     onExportData: () => void;
     onExportConfig?: () => void;
     onExportMap: () => void;
+    onExportVideo?: () => void;
     onSaveToStorage: (() => void) | null;
     onSaveAsToStorage: (() => void) | null;
     onSaveMap?: () => void;

package/dist/side-panel/panel-tab.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BaseProps } from '../common/icons';
 type StyledPanelTabProps = {
-    active?: boolean;
+    $active?: boolean;
 };
 export type PanelItem = {
     id: string;
@@ -13,8 +13,6 @@ export type PanelTabProps = {
     panel: PanelItem;
     onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare const StyledPanelTab: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, StyledPanelTabProps>>;
+export declare const StyledPanelTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & StyledPanelTabProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & StyledPanelTabProps, "className">>> & string;
 export declare function PanelTabFactory(): React.FC<PanelTabProps>;
 export default PanelTabFactory;

package/dist/side-panel/panel-view-list-toggle.d.ts

@@ -9,11 +9,11 @@ type PanelViewListToggleProps = {
     mode: PanelListView;
     togglePanelListView: (view: string) => void;
 };
-export declare const StyledToggleOption: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}>, never>, {
+export declare const StyledToggleOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & {
     $active: boolean;
-}>>;
+}, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "$active"> & {
+    $active: boolean;
+}, "className">>> & string;
 declare function ToggleOptionFactory(): React.FC<ToggleOptionProps>;
 declare const TOGGLE_OPTIONS: ({
     id: "list";

package/dist/side-panel/side-bar.d.ts

@@ -23,9 +23,6 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SideBarProps>;
         state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<SideBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
@@ -47,9 +44,6 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SideBarProps>;
         state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<SideBarProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
@@ -71,6 +65,7 @@ declare function SidebarFactory(CollapseButton: ReturnType<typeof CollapseButton
         shouldShowCollapseButton: boolean;
     };
     contextType?: React.Context<any> | undefined;
+    propTypes?: any;
 };
 declare namespace SidebarFactory {
     var deps: (() => ({ onClick, isOpen }: CollapseButtonProps) => React.JSX.Element)[];

package/dist/side-panel.d.ts

@@ -8,7 +8,7 @@ import InteractionManagerFactory from './side-panel/interaction-manager';
 import MapManagerFactory from './side-panel/map-manager';
 import CustomPanelsFactory from './side-panel/custom-panel';
 import { SidePanelProps } from './types';
-export declare const StyledSidePanelContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledSidePanelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /**
  * Vertical sidebar containing input components for the rendering layers
  */

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import { MapStyle } from '@kepler.gl/reducers';
 import { Layer, LayerClassesType } from '@kepler.gl/layers';
-import { Filter, InteractionConfig, UiState } from '@kepler.gl/types';
+import { Filter, InteractionConfig, MapState, UiState, LayerOrder } from '@kepler.gl/types';
 import { MapStyleActions, VisStateActions, MapStateActions, UIStateActions } from '@kepler.gl/actions';
 import { Datasets } from '@kepler.gl/table';
 export type BaseComponentProps = PropsWithChildren<HTMLAttributes<unknown>>;
@@ -20,8 +20,9 @@ export type SidePanelProps = {
     overlayBlending?: string;
     layers: Layer[];
     layerClasses: LayerClassesType;
-    layerOrder: string[];
+    layerOrder: LayerOrder;
     mapStyle: MapStyle;
+    mapState?: MapState;
     mapInfo: {
         title?: string;
         description?: string;