@equinor/echo-components 0.11.9 → 0.11.11

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@equinor/echo-components",
-  "version": "0.11.9",
+  "version": "0.11.11",
   "dependencies": {
     "chart.js": "4.4.3",
+    "react-datepicker": "4.25.0",
     "react-window": "1.8.10",
-    "react-datepicker": "4.25.0"
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "@equinor/echo-utils": ">= 0.4.0 < 0.5.0",
     "@equinor/eds-core-react": "0.34.0",
     "@equinor/eds-icons": "0.19.3",
+    "classnames": "2.5.1",
+    "lodash": ">= 4.17.21 < 5",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2",
-    "zustand": ">= 4.4.7 < 5",
-    "lodash": ">= 4.17.21 < 5",
     "react-sortablejs": "6.1.4",
     "sortablejs": ">= 1.15.1 < 2",
-    "classnames": "2.5.1"
+    "zustand": ">= 4.4.7 < 5"
   },
   "main": "./index.cjs.js",
   "type": "commonjs"

package/src/components/autohiddenContent/AutohiddenContent.d.ts

@@ -12,5 +12,9 @@ type AutohiddenContentProps = {
     /** The content to autohide. */
     children: ReactElement<HTMLElement | string | number>;
 };
+/** A component that autohides its children content after a specified delay.
+ * <p>The implementer may choose between removing the content from the DOM; which will probably shift the layout, or
+ * they can turn the content invisible with CSS.</p>
+ */
 export declare function AutohiddenContent({ delay, hideMethod, onHide, children }: AutohiddenContentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/blackLink/BlackLink.d.ts

@@ -1,5 +1,6 @@
 import { TooltipProps } from '@equinor/eds-core-react';
-type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
+export type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
+    /** To override styles. */
     className?: string;
     /** The external link. */
     href: string;
@@ -7,9 +8,14 @@ type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
     linkText: string;
     /** If true, the link is opened in the same window or tab. */
     preserveTab?: boolean;
-    /** The text to be displayed in the tooltip. */
+    /** The text to be displayed in the tooltip. The tooltip is not rendered on touch devices.*/
     tooltipText?: string;
+    /** An optional callback when the link is clicked. */
     onClick?: () => void;
 };
+/** A semantic link component that features link text and icon.
+ *
+ * @example
+ * <BlackLink href="https://example.com" linkText="Link to somewhere" tooltipText="This links somewhere" />
+*/
 export declare const BlackLink: ({ className, href, linkText, preserveTab, tooltipText, onClick, enterDelay, placement, ...toolTipRest }: LinkProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/copyToClipboard/CopyToClipboard.d.ts

@@ -1,9 +1,18 @@
 import React from 'react';
 export interface CopyToClipboardProps {
+    /** The text to be copied. */
     copyableText: string;
+    /** The EDS standard variant which alters the colours. Defaults to neutral. */
     variant?: 'neutral' | 'warning' | 'error' | 'success';
+    /** If the copyable text is very long, this can be optionally set. */
     multiline?: boolean;
+    /** To override styles. */
     className?: string;
 }
+/** A component that simplifies the copying of text.
+ * <p>The user can select the text inside the input element to have it highlighted, or
+ *  they can click the copy button to copy the text.</p>
+ * <p>The component uses Clipboard API, but is not concerned with permissions.</p>
+ * */
 declare const CopyToClipboard: ({ copyableText, className, multiline, variant }: CopyToClipboardProps) => React.JSX.Element;
 export { CopyToClipboard };

package/src/components/echoCard/Title.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardIcons {
     name: string;
     color: string;

package/src/components/functionalLocationListItem/FunctionalLocationListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FunctionalLocationListeItemProps {
     className?: string;
     functionalLocationId: string;

package/src/components/horizontalTabView/HorizontalTabView.d.ts

@@ -1,15 +1,30 @@
-/// <reference types="react" />
 import { TabListProps, TabPanelsProps, TabsProps } from '@equinor/eds-core-react';
-/** The topmost wrapper element for the tab view.*/
+/** Allows markup to be horizontally sectioned in tabs. <br />
+ * The component is a drop in replacement for the regular EDS tabs.
+ *
+ * @example
+ * const { HorizontalTabs, Tab, TabPanels, Tabs, TabPanel } = HorizontalTabView;
+ *
+ * <HorizontalTabs onChange={setActiveTab} activeTab={activeTab}>
+        <Tabs>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+        </Tabs>
+        <TabPanels>
+            <TabPanel>Tab Content 1</TabPanel>
+            <TabPanel>Tab Content 2</TabPanel>
+        </TabPanels>
+    </HorizontalTabs>
+*/
 export declare function TabView(props: TabsProps): import("react/jsx-runtime").JSX.Element;
 /** Returns the parent element of the tabs themselves. */
 export declare function Tabs(props: TabListProps): import("react/jsx-runtime").JSX.Element;
 /** Returns a button that acts like a tab button in a tab list. */
 export declare const Tab: import("react").ForwardRefExoticComponent<{
-    active?: boolean | undefined;
-    value?: string | number | undefined;
-    disabled?: boolean | undefined;
-    as?: import("react").ElementType | undefined;
+    active?: boolean;
+    value?: number | string;
+    disabled?: boolean;
+    as?: import("react").ElementType;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
 /** Returns the parent of the tab-sectioned content. */
 export declare function TabPanels(props: TabPanelsProps): import("react/jsx-runtime").JSX.Element;

package/src/components/horizontalTabView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Tab, TabPanels, TabView, Tabs } from './HorizontalTabView';
 declare const EDSPanel: import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").TabPanelProps & import("react").RefAttributes<HTMLDivElement>>;
 interface HorizontalTabsProps {

package/src/components/iconLink/compactIconLink/CompactIconLink.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CompactIconLinkProps {
     title: string;
     meta: string;

package/src/components/index.d.ts

@@ -19,7 +19,16 @@ export * from './functionalLocationListItem/FunctionalLocationListItem';
 export * from './horizontalTabView';
 export * from './iconLink/compactIconLink/CompactIconLink';
 export * from './iconLink/inlineTagIconLink/InlineTagIconLink';
+export * from './itemMarker/ItemMarker';
+export * from './itemMarker/ItemMarkerExpanded';
+export * from './itemMarker/ItemMarkerIcon';
+export * from './itemMarker/MultipleItemMarkers';
+export * from './itemMarkerAndPopoverWrapper/itemMarkerAndPopoverWrapper';
+export * from './itemMarkerPopover/itemMarkerPopover';
 export * from './legend';
+export * from './legendChip/legendChip';
+export * from './legendSelector/legendSelector';
+export * from './legendSelectorMenu/legendSelectorMenu';
 export * from './linkIcon/LinkIcon';
 export * from './listItem';
 export * from './listRow/ListRow';
@@ -28,6 +37,7 @@ export * from './multilineTabs/MultilineTabs';
 export * from './notificationListItem/NotificationListItem';
 export * from './pcMatrix/PCMatrix';
 export * from './rightPanel';
+export * from './scrollableTabs/ScrollableTabs';
 export * from './searchBar';
 export * from './secondaryMarker/SecondaryMarker';
 export * from './secondaryMarker/SecondaryMarkerExpander';

package/src/components/itemMarker/ChipsContainer.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ChipProps } from '../../elements/tagIcon/Chip';
+export interface ChipsContainerProps {
+    chips: ChipProps[];
+    className?: string;
+    children?: ReactNode;
+    isTransparent?: boolean;
+    style?: CSSProperties;
+}
+export declare const ChipsContainer: React.FC<ChipsContainerProps>;

package/src/components/itemMarker/ItemMarker.d.ts

@@ -0,0 +1,46 @@
+import React, { CSSProperties } from 'react';
+import { ChipProps } from '../../elements';
+import { IconSize, ItemMarkerIconType, ItemMarkerPosition, ItemMarkerSize } from './utils/itemMarkerUtils';
+export interface ItemMarkerProps {
+    icon: ItemMarkerIconType;
+    size?: ItemMarkerSize;
+    isTransparent?: boolean;
+    isActive?: boolean;
+    isChipsEnabled?: boolean;
+    chips?: ChipProps[];
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    hasPointer?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    style?: CSSProperties;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    maxNumberOfChips?: number;
+    zIndex?: number | string;
+}
+/**
+ * Renders an item marker with optional chips.
+ *
+ * @param {ItemMarkerIconType} icon - Icon to use.
+ * @param {ItemMarkerSize} size - Size of the item marker (optional).
+ * @param {boolean} isTransparent - If true, marker is visible; if false, transparent (optional).
+ * @param {boolean} isActive - Indicates active state (optional).
+ * @param {boolean} isChipsEnabled - Shows chips if true (optional).
+ * @param {ChipProps[]} chips - Chips to display (optional).
+ * @param {string} backgroundColor - The itemMarker's background color (optional).
+ * @param {string} iconColor - Background color of the icon (optional).
+ * @param {IconSize} iconSize - Size of the icon (optional).
+ * @param {boolean} hasPointer - If true, marker includes a pointer (optional).
+ * @param {ItemMarkerPosition} pointerPosition - ItemMarker's pointer position (optional).
+ * @param {CSSProperties} style - Custom styles for itemMarker and chips (optional).
+ * @param {() => void} onClick - Click handler for the itemMarker (optional).
+ * @param {() => void} onMouseEnter - Mouse enter handler for the itemMarker (optional).
+ * @param {() => void} onMouseLeave - Mouse leave handler for the itemMarker (optional).
+ * @param {number} maxNumberOfChips - Maximum chips displayed (optional).
+ * @param {number | string} [zIndex] - z-index of the marker and chips (optional).
+ *
+ * @returns {JSX.Element} Component
+ */
+export declare const ItemMarker: React.FC<ItemMarkerProps>;

package/src/components/itemMarker/ItemMarkerChip.d.ts

@@ -0,0 +1,9 @@
+export interface ItemMarkerChipProps {
+    title: string;
+    color: string;
+    id?: string;
+    textColor?: string;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const ItemMarkerChip: React.FC<ItemMarkerChipProps>;

package/src/components/itemMarker/ItemMarkerChips.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { ChipProps } from '../../elements/tagIcon/Chip';
+export interface ItemMarkerChipsProps {
+    chips: ChipProps[];
+    maxNumberOfChips?: number;
+    className?: string;
+    style?: CSSProperties;
+    isTransparent?: boolean;
+}
+export declare const ItemMarkerChips: React.FC<ItemMarkerChipsProps>;

package/src/components/itemMarker/ItemMarkerContent.d.ts

@@ -0,0 +1,14 @@
+import { IconSize, ItemMarkerIconType, ItemMarkerPosition, ItemMarkerSize } from './utils/itemMarkerUtils';
+export type ItemMarkerContentProps = {
+    icon: ItemMarkerIconType;
+    size?: ItemMarkerSize;
+    hasPointer?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    isActive?: boolean;
+    isTransparent?: boolean;
+    onClick?: () => void;
+};
+export declare const ItemMarkerContent: ({ icon, size, hasPointer, pointerPosition, backgroundColor, iconColor, iconSize, isActive, isTransparent, onClick }: ItemMarkerContentProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/itemMarker/ItemMarkerExpanded.d.ts

@@ -0,0 +1,7 @@
+interface ItemMarkerExpandedProps {
+    title: string;
+    description: string;
+    onClick?: () => void;
+}
+export declare const ItemMarkerExpanded: ({ title, description, onClick }: ItemMarkerExpandedProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/itemMarker/ItemMarkerIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconSize, ItemMarkerIconType, ItemMarkerSize } from './utils/itemMarkerUtils';
+interface ItemMarkerIconProps {
+    icon: ItemMarkerIconType;
+    isActive?: boolean;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    size?: ItemMarkerSize;
+}
+export declare const ItemMarkerIcon: React.FC<ItemMarkerIconProps>;
+export {};

package/src/components/itemMarker/MultipleItemMarkers.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { ItemMarkerPosition } from './utils/itemMarkerUtils';
+export interface MultipleItemMarkersProps {
+    children: ReactNode;
+    isTransparent?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    className?: string;
+}
+/**
+ * Generic component that renders multiple item markers
+ *
+ *
+ * @param {ReactNode} children - Use for adding multiple ItemMarkers.
+ * @param {boolean} isTransparent - Boolean that determines whether the marker is transparent. When set to true, the marker is displayed; when false, the marker is made transparent (optional).
+ * @param {ItemMarkerPosition} pointerPosition - A value that determines the position of the pointer relative to the marker. This specifies where the pointer should be placed (optional).
+ * @param {string} className - Use for styling (optional).
+ *
+ * @returns {JSX.Element} The rendered component
+ */
+export declare const MultipleItemMarkers: React.FC<MultipleItemMarkersProps>;

package/src/components/itemMarker/utils/itemMarkerUtils.d.ts

@@ -0,0 +1,17 @@
+import { IconData } from '@equinor/eds-icons';
+export type ItemMarkerIconType = IconData | JSX.Element | string;
+export type IconSize = 16 | 24;
+export declare enum ItemMarkerSize {
+    Small = 28,
+    Default = 36,
+    Medium = 40,
+    Large = 48
+}
+export declare enum ItemMarkerPosition {
+    Center = "Center",
+    TopRight = "TopRight",
+    TopLeft = "TopLeft",
+    BottomRight = "BottomRight",
+    BottomLeft = "BottomLeft"
+}
+export declare const getPointerPositionClass: (position: ItemMarkerPosition | undefined) => string | undefined;

package/src/components/itemMarkerAndPopoverWrapper/itemMarkerAndPopoverWrapper.d.ts

@@ -0,0 +1,16 @@
+type ItemMarkerAndPopoverWrapperProps = {
+    title: string;
+    items: JSX.Element[];
+    itemMarker: JSX.Element;
+    closeOnOutsideClick?: boolean;
+};
+/**
+ *
+ * @param {string} title - Title of the popover.
+ * @param {JSX.Element[]} items - List of items to be displayed in the popover.
+ * @param {JSX.Element} itemMarker - Item marker component. This can also be the MultipleIconMarkers component.
+ * @param {boolean} closeOnOutsideClick - If true, popover will close on outside click (optional).
+ * @returns  {JSX.Element} Component
+ */
+export declare const ItemMarkerAndPopoverWrapper: ({ title, items, itemMarker, closeOnOutsideClick }: ItemMarkerAndPopoverWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/itemMarkerPopover/Pagination.d.ts

@@ -0,0 +1,7 @@
+export type PaginationProps = {
+    itemCount: number;
+    currentItemIndex: number;
+    setCurrentItemIndex: (index: number) => void;
+    darkTheme?: boolean;
+};
+export declare const Pagination: ({ itemCount, currentItemIndex, setCurrentItemIndex, darkTheme }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/itemMarkerPopover/itemMarkerPopover.d.ts

@@ -0,0 +1,9 @@
+export type ItemMarkerPopover = {
+    items: JSX.Element[] | string[];
+    isOpen: boolean;
+    handleClose: () => void;
+    togglePopover: () => void;
+    title: string;
+    closeOnOutsideClick?: boolean;
+};
+export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, togglePopover, title, closeOnOutsideClick }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;

package/src/components/legendChip/legendChip.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LegendChipProps {
+    legendStatus: string;
+    backgroundColor: string;
+    onClick?: (isDisabled: boolean) => void;
+}
+/**
+ * Legend chip component to display a legend status chip.
+ * @param {string} legend - The legend status to be displayed.
+ * @param {string} backgroundColor - The background color of the chip.
+ * @param {(isDisabled: boolean) => void} onClick - Function to be called when the chip is clicked.
+ */
+export declare const LegendChip: React.FC<LegendChipProps>;
+export {};

package/src/components/legendSelector/legendSelector.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface LegendSelectorProps {
+    items: string[];
+    selectedItem: string;
+    setSelectedItem: (selectedItem: string) => void;
+    legends: JSX.Element[];
+    icon?: JSX.Element;
+}
+/**
+ * Legend selector component that will display the selected legend type and the statuses.
+ * @param {JSX.Element[]} items - List of items to be displayed in the menu.
+ * @param {string} selectedItem - The selected item.
+ * @param {(selectedItem: string) => void} setSelectedItem - Function to set the selected item.
+ * @param {JSX.Element[]} legends - List of legend chip components to be displayed.
+ * @param {JSX.Element} icon - Icon to be displayed before the legend selector. Optional.
+ */
+export declare const LegendSelector: React.FC<LegendSelectorProps>;

package/src/components/legendSelectorMenu/legendSelectorMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LegendSelectorMenuProps {
+    items: string[];
+    selectedItem: string;
+    setSelectedItem: (selectedItem: string) => void;
+}
+/**
+ * Legend selector component to choose which legend type to display.
+ * @param {JSX.Element[]} items - List of items to be displayed in the menu.
+ * @param {string} selectedItem - The selected item.
+ * @param {(selectedItem: string) => void} setSelectedItem - Function to set the selected item.
+ */
+export declare const LegendSelectorMenu: React.FC<LegendSelectorMenuProps>;
+export {};

package/src/components/linkIcon/LinkIcon.d.ts

@@ -1,9 +1,16 @@
 import { TooltipProps } from '@equinor/eds-core-react';
 type LinkIconProps = Omit<TooltipProps, 'children'> & {
+    /** Optionally override tooltip styles. */
     tooltipClassName?: string;
+    /** Optionally override link styles. */
     className?: string;
+    /** The link destination. */
     href: string;
     onClick?: () => void;
 };
+/** A simple link component that only features an icon.
+ * <p>Implementers can optionally specify a tooltip to further clarify the destination.
+ * <br /> On touch devices, this tooltip is <u>not rendered.</u></p>
+ */
 export declare function LinkIcon({ href, className, tooltipClassName, onClick, ...toolTipProps }: LinkIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/listItem/ListItem.d.ts

@@ -44,9 +44,15 @@ interface ListItemBaseProps {
     /**
      * Style Modification
      */
-    className?: string;
     style?: CSSProperties;
+    className?: string;
+    cardClassName?: string;
+    /**
+     * Intended for displaying optional messages regarding the given list item
+     */
     footer?: React.ReactNode;
+    iconColor?: string;
+    hideIcon?: boolean;
 }
 export type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
 declare function ListItem(props: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/src/components/markedContent/MarkedContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MarkedContentProps {
     backgroundColor: string;
     textColor: string;

package/src/components/multilineTabs/MultilineTabs.d.ts

@@ -24,5 +24,12 @@ export interface MultilineTabsProps {
  *    children: The sectioned tab content.
  * }
  * @returns {*} {JSX.Element} Returns a custom EDS Tab bar and sectioned content.
+ * @example
+ * <MultilineTabs tabs={{title: "Footab"}, {title: "Bartab"}}>
+ *   <Tabs.Panels>
+ *       <Tabs.Panel>Foo</Tabs.Panel>
+ *       <Tabs.Panel>Bar</Tabs.Panel>
+ *   /Tabs.Panels>
+ * </MultilineTabs>
  */
 export declare const MultilineTabs: (props: MultilineTabsProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/scrollableTabs/ScrollableTabs.d.ts

@@ -0,0 +1,14 @@
+import { TabsProps } from '@equinor/eds-core-react';
+import { ReactNode } from 'react';
+interface ScrollableTabsProps extends TabsProps {
+    /** Unique ID for the top level element */
+    id: string;
+    /** To override styles. */
+    className?: string;
+    /** The list of tabs to be rendered. */
+    tabsListContent: ReactNode[];
+    /** The list of tab content. Rendered inside EDSTab.Panel */
+    tabsPanelContent: ReactNode[];
+}
+declare function ScrollableTabs({ id, className, tabsListContent, tabsPanelContent, variant }: ScrollableTabsProps): import("react/jsx-runtime").JSX.Element;
+export { ScrollableTabs };

package/src/components/searchBar/floatingSearchBar/FloatingSearchBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Suggestion, SuggestionGroup } from '../common/types';
 export interface FloatingSearchBarProps {
     ariaLabel?: string;

package/src/components/secondaryMarker/SecondaryMarker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerProps {
     /**
      * The title

package/src/components/secondaryMarker/SecondaryMarkerExpander.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SecondaryMarkerExpanderProps {
     /**
      * onClick for the expander

package/src/components/secondaryMarker/SecondaryMarkerWithChip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerWithChipProps {
     title: string;
     description: string;

package/src/components/secondaryMarker/SecondaryMarkerWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerWrapperProps {
     children: React.ReactNode;
     className?: string;

package/src/components/titleAndStatusLabel/titleAndStatusLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TitleAndStatusLabelProps {
     title: string;
     statusText?: string;

package/src/components/visualTextIcon/visualTextIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface VisualTextIconProps {
     /**
      * Text that replaces the icon

package/src/elements/index.d.ts

@@ -3,8 +3,8 @@ export { Icon } from './icon/Icon';
 export { RadioButtonGroup } from './radioButtonGroup/RadioButtonGroup';
 export * from './roundIconButton/RoundIconButton';
 export { SliderField } from './sliderField/SliderField';
-export type { ChipProps } from './tagIcon/Chip';
 export { Chip } from './tagIcon/Chip';
+export type { ChipProps } from './tagIcon/Chip';
 export { Chips } from './tagIcon/Chips';
 export { TagIcon } from './tagIcon/TagIcon';
 export { TagIconShadowWrapper } from './tagIcon/TagIconShadow';

package/src/elements/tagIcon/Chip.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 export interface ChipProps {
     title: string;
     color: string;
+    id?: string;
+    textColor?: string;
     className?: string;
     onClick?: () => void;
 }

package/src/elements/tagIcon/Chips.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipProps } from './Chip';
 export interface ChipsProps {
     chips: ChipProps[];

package/src/elements/tagIcon/TagIconWithChips.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipsProps } from './Chips';
 export interface TagIconChipsProps extends ChipsProps {
     icon: React.JSX.Element;

package/src/hooks/useIsMobile.d.ts

@@ -1,5 +1,4 @@
 /**
- * Hook for checking if page is loaded from mobile device.
- * @returns boolean true if on mobile.
+ * @deprecated use isMobileDevice from @equinor/echo-utils instead
  */
 export declare function useIsMobile(): boolean;

package/src/icons/echoAssets/index.d.ts

@@ -1,12 +1,14 @@
 export * from './badges';
 export * from './external';
 export * from './general';
+export * from './legendMarker';
+export * from './legendMarkerChip';
 export * from './maps';
 export * from './misc';
 export * from './notifications';
 export * from './punches';
 export * from './sap';
-export * from "./sidesheet";
+export * from './sidesheet';
 export * from './subsea';
 export * from './workOrders';
 export * from './xld';

package/src/icons/echoAssets/legendMarker.d.ts

@@ -0,0 +1,2 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const legend_marker: IconData;

package/src/icons/echoAssets/legendMarkerChip.d.ts

@@ -0,0 +1,2 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const legend_marker_chip: IconData;

package/src/icons/echoAssets/xld.d.ts

@@ -1,2 +1,3 @@
 import { IconData } from '@equinor/eds-icons';
 export declare const xld_sticky_note: IconData;
+export declare const add_xld_sticky_note: IconData;

package/src/theme/themeConst.d.ts

@@ -121,4 +121,12 @@ export declare const themeConst: {
     readonly hoverIconWithNotification: string;
     tertiaryText: string;
     secondaryText: string;
+    backgroundDark: string;
+    backgroundDark2: string;
+    backgroundDark3: string;
+    hoverDark: string;
+    borderDark: string;
+    focusDark: string;
+    primaryTextForDarkBackground: string;
+    secondaryTextForDarkBackground: string;
 };

package/src/types/draggableItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DraggableItem {
     id: number;
     element: React.ReactNode;

package/src/types/menuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface MenuItem {
     labelId: string;
     label: string;