@equinor/amplify-component-lib 10.5.0 → 10.6.0

package/dist/atoms/hooks/useLocalStorage.d.ts

@@ -1,6 +1,6 @@
-import * as react145 from "react";
+import * as react147 from "react";
 
 //#region src/atoms/hooks/useLocalStorage.d.ts
-declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react145.Dispatch<react145.SetStateAction<T>>, () => void];
+declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react147.Dispatch<react147.SetStateAction<T>>, () => void];
 //#endregion
 export { useLocalStorage };

package/dist/atoms/hooks/useSelect.d.ts

@@ -1,6 +1,6 @@
 import { SelectOption, SelectOptionRequired } from "../../molecules/Select/Select.types.js";
 import { SelectComponentProps } from "../../molecules/Select/Select.js";
-import * as react147 from "react";
+import * as react145 from "react";
 import { ChangeEvent, KeyboardEvent } from "react";
 
 //#region src/atoms/hooks/useSelect.d.ts
@@ -16,8 +16,8 @@ declare const useSelect: <T extends SelectOptionRequired>(props: SelectComponent
   handleOnOpen: () => void;
   handleOnRemoveItem: (item: SelectOption<T>) => void;
   search: string;
-  searchRef: react147.RefObject<HTMLInputElement | null>;
-  itemRefs: react147.RefObject<(HTMLButtonElement | null)[]>;
+  searchRef: react145.RefObject<HTMLInputElement | null>;
+  itemRefs: react145.RefObject<(HTMLButtonElement | null)[]>;
   selectedValues: T[];
   open: boolean;
   tryingToRemoveItem: T | undefined;

package/dist/atoms/style/darkTokens.js

@@ -191,10 +191,7 @@ import{css as e}from"styled-components";const t=e`
     --eds_navigation__button_color: var(--eds_text_static_icons__default);
     --eds_input__label_color: var(--eds_text_static_icons__default);
     --eds_input__text_color: var(--eds_text_static_icons__default);
-    --eds_paragraph__body_short_color: var(--eds_text_static_icons__default);
-    --eds_paragraph__body_long_link_color: var(
-      --eds_text_static_icons__default
-    );
+
     --eds_table__cell_header_color: var(--eds_text_static_icons__default);
     --eds_table__cell_text_color: var(--eds_text_static_icons__default);
     --eds_table__cell_text_bold_color: var(--eds_text_static_icons__default);
@@ -211,20 +208,14 @@ import{css as e}from"styled-components";const t=e`
     --eds_paragraph__body_short_color: var(--eds_text_static_icons__default);
     --eds_paragraph__body_long_color: var(--eds_text_static_icons__default);
     --eds_paragraph__meta_color: var(--eds_text_static_icons__default);
+    --eds_paragraph__body_long_link_color: var(
+      --eds_text_static_icons__default
+    );
 
     --eds_interactive__icon_on_interactive_colors: var(
       --eds_text_static_icons__default
     );
 
     --eds_ui__chip__badge_color: var(--eds_text_static_icons__default);
-
-    /* Override table typography variables */
-    --eds_table__cell_header_color: var(--eds_text__static_icons__default);
-    --eds_table__cell_text_color: var(--eds_text__static_icons__default);
-    --eds_table__cell_text_bold_color: var(--eds_text__static_icons__default);
-    --eds_table__cell_text_link_color: var(--eds_text__static_icons__default);
-    --eds_table__cell_numeric_monospaced_color: var(
-      --eds_text__static_icons__default
-    );
   }
 `;export{t as darkTokens};

package/dist/atoms/style/lightTokens.js

@@ -142,18 +142,46 @@ import{css as e}from"styled-components";const t=e`
     --eds_interactive__disabled__border: rgba(220, 220, 220, 1);
     --eds_interactive__disabled__fill: rgba(234, 234, 234, 1);
     --eds_interactive__link_on_interactive_colors: rgba(255, 255, 255, 1);
-    --eds_interactive__icon_on_interactive_colors: rgba(255, 255, 255, 1);
     --eds_interactive__link_in_snackbars: rgba(151, 202, 206, 1);
     --eds_interactive__pressed_overlay_dark: rgba(0, 0, 0, 0.2);
     --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2);
 
-    /* Override table typography variables */
+    --eds_heading__h1_color: var(--eds_text__static_icons__default);
+    --eds_heading__h2_color: var(--eds_text__static_icons__default);
+    --eds_heading__h3_color: var(--eds_text__static_icons__default);
+    --eds_heading__h4_color: var(--eds_text__static_icons__default);
+    --eds_heading__h5_color: var(--eds_text__static_icons__default);
+    --eds_heading__h6_color: var(--eds_text__static_icons__default);
+
+    --eds_navigation__label_color: var(--eds_text__static_icons__default);
+    --eds_navigation__button_color: var(--eds_text__static_icons__default);
+    --eds_input__label_color: var(--eds_text__static_icons__default);
+    --eds_input__text_color: var(--eds_text__static_icons__default);
+
     --eds_table__cell_header_color: var(--eds_text__static_icons__default);
     --eds_table__cell_text_color: var(--eds_text__static_icons__default);
     --eds_table__cell_text_bold_color: var(--eds_text__static_icons__default);
-    --eds_table__cell_text_link_color: var(--eds_text__static_icons__default);
     --eds_table__cell_numeric_monospaced_color: var(
       --eds_text__static_icons__default
     );
+
+    --eds_navigation__menu_title_color: var(--eds_text__static_icons__default);
+    --eds_navigation__menu_tabs_color: var(--eds_text__static_icons__default);
+    --eds_ui__accordion_header_color: var(--eds_text__static_icons__default);
+
+    --eds_paragraph__overline_color: var(--eds_text__static_icons__default);
+    --eds_paragraph__caption_color: var(--eds_text__static_icons__default);
+    --eds_paragraph__body_short_color: var(--eds_text__static_icons__default);
+    --eds_paragraph__body_long_color: var(--eds_text__static_icons__default);
+    --eds_paragraph__meta_color: var(--eds_text__static_icons__default);
+    --eds_paragraph__body_long_link_color: var(
+      --eds_text__static_icons__default
+    );
+
+    --eds_interactive__icon_on_interactive_colors: var(
+      --eds_text__static_icons__primary_white
+    );
+
+    --eds_ui__chip__badge_color: var(--eds_text__static_icons__default);
   }
 `;export{t as lightTokens};

package/dist/deprecated/ExpandingIconButton/ExpandingIconButton.d.ts

@@ -1,4 +1,4 @@
-import * as react0 from "react";
+import * as react1 from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/deprecated/ExpandingIconButton/ExpandingIconButton.d.ts
@@ -12,6 +12,6 @@ interface ExpandingIconButtonProps {
 /**
  * @deprecated Being deprecated from amplify-component-lib move into app if you want the implementation
  */
-declare const ExpandingIconButton: react0.ForwardRefExoticComponent<ExpandingIconButtonProps & react0.RefAttributes<HTMLDivElement>>;
+declare const ExpandingIconButton: react1.ForwardRefExoticComponent<ExpandingIconButtonProps & react1.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ExpandingIconButton };

package/dist/deprecated/IconToggleButton.d.ts

@@ -1,4 +1,4 @@
-import * as react1 from "react";
+import * as react3 from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/deprecated/IconToggleButton.d.ts
@@ -21,6 +21,6 @@ interface IconToggleButtonProps {
 /**
  * @deprecated Being deprecated from amplify-component-lib move into app if you want the implementation
  */
-declare const IconToggleButton: react1.ForwardRefExoticComponent<IconToggleButtonProps & react1.RefAttributes<HTMLButtonElement>>;
+declare const IconToggleButton: react3.ForwardRefExoticComponent<IconToggleButtonProps & react3.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconToggleButton };

package/dist/molecules/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import * as react7 from "react";
+import * as react5 from "react";
 import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { IconData } from "@equinor/eds-icons";
 
@@ -25,6 +25,6 @@ type DeletableChipProps = BaseChipProps & InteractiveChipBase & {
   onDelete: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 type ChipProps = Omit<HTMLAttributes<HTMLDivElement | HTMLButtonElement>, 'onClick'> & (ReadOnlyChipProps | ClickableChipProps | DeletableChipProps);
-declare const Chip: react7.ForwardRefExoticComponent<ChipProps & react7.RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+declare const Chip: react5.ForwardRefExoticComponent<ChipProps & react5.RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 //#endregion
 export { BaseChipProps, Chip, ClickableChipProps, DeletableChipProps };

package/dist/molecules/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import { Variants } from "../../atoms/types/variants.js";
-import * as react9 from "react";
+import * as react7 from "react";
 import { DatePickerProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/DatePicker/DatePicker.d.ts
@@ -9,11 +9,11 @@ type DatePickerProps$1 = Omit<DatePickerProps, 'variant' | 'defaultValue'> & {
   meta?: string;
   loading?: boolean;
 };
-declare const DatePicker$1: react9.ForwardRefExoticComponent<Omit<DatePickerProps, "defaultValue" | "variant"> & {
+declare const DatePicker$1: react7.ForwardRefExoticComponent<Omit<DatePickerProps, "defaultValue" | "variant"> & {
   variant?: Variants;
   defaultValue?: Date | undefined;
   meta?: string;
   loading?: boolean;
-} & react9.RefAttributes<HTMLDivElement>>;
+} & react7.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DatePicker$1 as DatePicker, DatePickerProps$1 as DatePickerProps };

package/dist/molecules/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import { Variants } from "../../atoms/types/variants.js";
-import * as react11 from "react";
+import * as react9 from "react";
 import { DateRangePickerProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/DateRangePicker/DateRangePicker.d.ts
@@ -8,10 +8,10 @@ type DateRangePickerProps$1 = Omit<DateRangePickerProps, 'variant'> & {
   meta?: string;
   loading?: boolean;
 };
-declare const DateRangePicker$1: react11.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
+declare const DateRangePicker$1: react9.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
   variant?: Variants;
   meta?: string;
   loading?: boolean;
-} & react11.RefAttributes<HTMLDivElement>>;
+} & react9.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DateRangePicker$1 as DateRangePicker, DateRangePickerProps$1 as DateRangePickerProps };

package/dist/molecules/Dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import * as react15 from "react";
+import * as react11 from "react";
 import { ReactNode } from "react";
 import { ButtonProps, DialogProps } from "@equinor/eds-core-react";
 import { IconData } from "@equinor/eds-icons";
@@ -51,6 +51,6 @@ interface DialogProps$1 extends Omit<DialogProps, 'title'> {
  * @param additionalInfo - Defaults to empty, and won't show the additional info button
  * Also inherits props from EDS dialog
  */
-declare const Dialog$1: react15.ForwardRefExoticComponent<DialogProps$1 & react15.RefAttributes<HTMLDivElement>>;
+declare const Dialog$1: react11.ForwardRefExoticComponent<DialogProps$1 & react11.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Dialog$1 as Dialog, DialogAction, DialogProps$1 as DialogProps };

package/dist/molecules/EquinorLogo/EquinorLogo.d.ts

@@ -1,11 +1,11 @@
 import { SizeIconProps } from "../../atoms/types/Icon.js";
-import * as react5 from "react";
+import * as react13 from "react";
 
 //#region src/molecules/EquinorLogo/EquinorLogo.d.ts
 interface EquinorLogoProps extends Partial<SizeIconProps> {
   large?: boolean;
   color?: 'red' | 'white' | 'black';
 }
-declare const EquinorLogo: react5.ForwardRefExoticComponent<EquinorLogoProps & react5.RefAttributes<SVGSVGElement>>;
+declare const EquinorLogo: react13.ForwardRefExoticComponent<EquinorLogoProps & react13.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { EquinorLogo, EquinorLogoProps };

package/dist/molecules/IconCell/IconCell.d.ts

@@ -1,5 +1,5 @@
 import { IconCellColor, IconCellState, IconCellVariant, IconCellVariants } from "./IconCell.types.js";
-import * as react13 from "react";
+import * as react15 from "react";
 import { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
 import { IconData } from "@equinor/eds-icons";
 
@@ -49,6 +49,6 @@ type IconCellProps = ScribbledOutProps | RegularIconCellProps;
  * @param {React.Ref<HTMLButtonElement>} ref - Ref forwarded to the inner button element.
  * @returns {JSX.Element} The rendered IconCell.
  */
-declare const IconCell: react13.ForwardRefExoticComponent<IconCellProps & react13.RefAttributes<HTMLButtonElement>>;
+declare const IconCell: react15.ForwardRefExoticComponent<IconCellProps & react15.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconCell, IconCellProps };

package/dist/molecules/InformationalNotice/InformationalNotice.d.ts

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 
 //#region src/molecules/InformationalNotice/InformationalNotice.d.ts
 interface InformationalNoticeProps {
   color?: 'grey' | 'white';
   spacing?: 'compact' | 'comfortable';
-  children: string;
+  children: string | ReactNode | ReactNode[];
 }
 declare const InformationalNotice: FC<InformationalNoticeProps>;
 //#endregion

package/dist/molecules/InformationalNotice/InformationalNotice.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Container as t}from"./InformationalNotice.styles.js";import{getIconSize as n}from"./InformationalNotice.utils.js";import{Icon as r,Typography as i}from"@equinor/eds-core-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{info_circle as s}from"@equinor/eds-icons";const c=({children:c,color:l=`grey`,spacing:u=`comfortable`})=>o(t,{$spacing:u,$color:l,children:[a(r,{data:s,color:e.text.static_icons__default.rgba,size:n(u)}),a(i,{variant:`body_long`,children:c})]});export{c as InformationalNotice};
+import{colors as e}from"../../atoms/style/colors.js";import{Container as t}from"./InformationalNotice.styles.js";import{getIconSize as n}from"./InformationalNotice.utils.js";import{Icon as r,Typography as i}from"@equinor/eds-core-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{info_circle as s}from"@equinor/eds-icons";const c=({children:c,color:l=`grey`,spacing:u=`comfortable`})=>o(t,{$spacing:u,$color:l,children:[a(r,{data:s,color:e.text.static_icons__default.rgba,size:n(u)}),typeof c==`string`?a(i,{variant:`body_long`,children:c}):c]});export{c as InformationalNotice};

package/dist/molecules/InformationalNotice/InformationalNotice.styles.js

@@ -1,9 +1,10 @@
-import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import n,{css as r}from"styled-components";const i={compact:{gap:t.medium_small,padding:t.small},comfortable:{gap:t.medium,padding:t.medium_small}},a=n.div`
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{shape as n}from"../../atoms/style/index.js";import r,{css as i}from"styled-components";const a={compact:{gap:t.medium_small,padding:t.small},comfortable:{gap:t.medium,padding:t.medium_small}},o=r.div`
   display: grid;
   grid-template-columns: auto 1fr;
+  border-radius: ${n.corners.borderRadius};
   background: ${({$color:t})=>t===`white`?e.ui.background__default.rgba:e.ui.background__light.rgba};
-  ${({$spacing:e})=>{let{gap:t,padding:n}=i[e];return r`
+  ${({$spacing:e})=>{let{gap:t,padding:n}=a[e];return i`
       padding: ${n};
       gap: ${t};
     `}}
-`;export{a as Container};
+`;export{o as Container};

package/dist/organisms/Faq/Category/Question/Question.js

@@ -1 +1 @@
-import{formatDate as e}from"../../../../atoms/utils/date.js";import{usePrefetchRichTextImages as t}from"../../../../atoms/hooks/usePrefetchRichTextImages.js";import{RichTextDisplay as n}from"../../../../molecules/RichTextDisplay/RichTextDisplay.js";import{Container as r,ExpandWrapper as i,Header as a,TopRight as o,Wrapper as s}from"./Question.styles.js";import{useState as c}from"react";import{Button as l,Icon as u,Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{chevron_down as m,chevron_up as h}from"@equinor/eds-icons";import{AnimatePresence as g}from"motion/react";import{FaqService as _}from"@equinor/subsurface-app-management";const v=({id:v,question:y,createdDate:b,answer:x})=>{t({richTextValues:x?[x]:[],onImageRead:e=>_.getFaqImage(e)});let[S,C]=c(!1);return f(s,{children:p(r,{children:[f(a,{id:`faq-${v}`,children:f(d,{variant:`h4`,children:y})}),p(o,{children:[f(d,{group:`paragraph`,variant:`caption`,children:e(b)}),f(l,{variant:`ghost_icon`,onClick:()=>{C(e=>!e)},"data-testid":`toggle-open`,"aria-label":S?`Collapse answer to: ${y}`:`Expand answer to: ${y}`,children:f(u,{data:S?h:m})})]}),f(g,{children:S&&f(i,{initial:{height:0},exit:{height:0},animate:{height:`auto`},children:f(n,{value:x,onImageRead:e=>_.getFaqImage(e),padding:`none`})})})]})})};export{v as Question};
+import{formatDate as e}from"../../../../atoms/utils/date.js";import{usePrefetchRichTextImages as t}from"../../../../atoms/hooks/usePrefetchRichTextImages.js";import{RichTextDisplay as n}from"../../../../molecules/RichTextDisplay/RichTextDisplay.js";import{Container as r,ExpandWrapper as i,Header as a,TopRight as o,Wrapper as s}from"./Question.styles.js";import{useRef as c,useState as l}from"react";import{Button as u,Icon as d,Typography as f}from"@equinor/eds-core-react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{chevron_down as h,chevron_up as g}from"@equinor/eds-icons";import{AnimatePresence as _}from"motion/react";import{useLocation as v}from"@tanstack/react-router";import{FaqService as y}from"@equinor/subsurface-app-management";const b=({id:b,question:x,createdDate:S,answer:C})=>{t({richTextValues:C?[C]:[],onImageRead:e=>y.getFaqImage(e)});let{hash:w}=v(),T=c(w===`faq-${b}`),[E,D]=l(T.current);return p(s,{children:m(r,{children:[p(a,{id:`faq-${b}`,children:p(f,{variant:`h4`,children:x})}),m(o,{children:[p(f,{group:`paragraph`,variant:`caption`,children:e(S)}),p(u,{variant:`ghost_icon`,onClick:()=>{D(e=>!e),T.current&&=!1},"data-testid":`toggle-open`,"aria-label":E?`Collapse answer to: ${x}`:`Expand answer to: ${x}`,children:p(d,{data:E?g:h})})]}),p(_,{children:E&&p(i,{initial:{height:T.current?`auto`:0},exit:{height:0},animate:{height:`auto`},children:p(n,{value:C,onImageRead:e=>y.getFaqImage(e),padding:`none`})})})]})})};export{b as Question};

package/dist/organisms/Filter/Filter.d.ts

@@ -1,5 +1,5 @@
 import { FilterProps } from "./Filter.types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/organisms/Filter/Filter.d.ts
 
@@ -32,6 +32,6 @@ declare function Filter<T extends string>({
   id,
   openOnFocus,
   ...rest
-}: FilterProps<T>): react_jsx_runtime5.JSX.Element;
+}: FilterProps<T>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Filter };

package/dist/organisms/Filter/Filter.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Container as t,Content as n,SearchField as r,SearchFieldWrapper as i,Section as a,StyledChip as o,Wrapper as s}from"./Filter.styles.js";import{getFilteredAutoCompleteOptions as c}from"./Filter.utils.js";import{AutoCompleteMenu as l}from"./AutoCompleteMenu.js";import{AutoCompleteText as u}from"./AutoCompleteText.js";import{useRef as d,useState as f}from"react";import{Button as p,Icon as m,Typography as h}from"@equinor/eds-core-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{arrow_drop_down as v,arrow_drop_up as y,clear as b,info_circle as x,search as S}from"@equinor/eds-icons";import{AnimatePresence as C,motion as w}from"motion/react";function T({values:T,search:E,onSearchChange:D,onSearchEnter:O,onClearFilter:k,onClearAllFilters:A,children:j,topContent:M,inlineContent:N,initialOpen:P=!1,placeholder:F=`Search...`,id:I,openOnFocus:L=!0,...R}){let z=d(null),B=d(null),[V,H]=f(P),[U,W]=f(void 0),G=d(P?`auto`:0),K=()=>{H(e=>!e),G.current===`auto`&&(G.current=0)},q=()=>{!V&&L&&H(!0)},J=()=>{z.current?.focus()},Y=e=>{if(!(`autoCompleteOptions`in R)){O(e);return}let t=c({searchValue:e,autoCompleteOptions:R.autoCompleteOptions});if(t.length===1){R.onAutoComplete(t[0].key,t[0]);return}O(e)},X=e=>{if(e.key===`Enter`&&E!==``)Y(E);else if(e.key===`Backspace`&&E===``){if(U===void 0){for(let e of Object.keys(T).toReversed())if(T[e].length>0){W(e);break}return}k(U,T[U].length-1),W(void 0)}},Z=Object.values(T).some(e=>e.length>0);return _(s,{id:I,children:[M,_(t,{children:[_(a,{ref:B,onClick:J,children:[g(m,{data:S,color:e.text.static_icons__tertiary.rgba}),Object.keys(T).flatMap(e=>T[e].map(({label:t,icon:n},r,i)=>g(o,{onDelete:()=>k(e,r),leadingIconData:n,$tryingToRemove:U===e&&r===i.length-1,children:t},`${t}-${r}-${e}`))),_(i,{children:[`autoCompleteOptions`in R&&R.autoCompleteOptions&&g(u,{search:E,autoCompleteOptions:R.autoCompleteOptions}),g(r,{ref:z,id:`filter-search-${I}`,type:`search`,autoComplete:`off`,value:E,placeholder:Z?void 0:F,onChange:D,onKeyDownCapture:X,onFocus:q})]}),Object.values(T).some(e=>e.length>0)&&g(p,{variant:`ghost_icon`,onClick:A,"data-testid":`clear-all-x`,children:g(m,{data:b,size:18,color:e.text.static_icons__tertiary.rgba})})]}),N,_(`button`,{onClick:K,"data-testid":`toggle-open-button`,children:[g(h,{variant:`button`,group:`navigation`,as:`span`,children:`Filters`}),g(m,{data:V?y:v,color:e.text.static_icons__tertiary.rgba})]})]}),g(C,{children:V&&g(w.div,{animate:{height:`auto`},initial:{height:G.current},exit:{height:0},children:_(n,{children:[_(`span`,{children:[g(m,{data:x,size:16,color:e.text.static_icons__tertiary.rgba}),g(h,{variant:`label`,group:`input`,color:e.text.static_icons__tertiary.rgba,children:`Type a keyword and press enter`})]}),j]})})}),`autoCompleteOptions`in R&&R.autoCompleteOptions&&g(l,{isFilterOpen:V,search:E,anchorElement:B.current,autoCompleteOptions:R.autoCompleteOptions,onAutoComplete:R.onAutoComplete,searchElement:z.current})]})}export{T as Filter};
+import{colors as e}from"../../atoms/style/colors.js";import{Container as t,Content as n,SearchAndValuesWrapper as r,SearchField as i,SearchFieldWrapper as a,Section as o,StyledChip as s,Wrapper as c}from"./Filter.styles.js";import{getFilteredAutoCompleteOptions as l}from"./Filter.utils.js";import{AutoCompleteMenu as u}from"./AutoCompleteMenu.js";import{AutoCompleteText as d}from"./AutoCompleteText.js";import{useRef as f,useState as p}from"react";import{Button as m,Icon as h,Typography as g}from"@equinor/eds-core-react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{arrow_drop_down as y,arrow_drop_up as b,clear as x,info_circle as S,search as C}from"@equinor/eds-icons";import{AnimatePresence as w,motion as T}from"motion/react";function E({values:E,search:D,onSearchChange:O,onSearchEnter:k,onClearFilter:A,onClearAllFilters:j,children:M,topContent:N,inlineContent:P,initialOpen:F=!1,placeholder:I=`Search...`,id:L,openOnFocus:R=!0,...z}){let B=f(null),V=f(null),[H,U]=p(F),[W,G]=p(void 0),K=f(F?`auto`:0),q=()=>{U(e=>!e),K.current===`auto`&&(K.current=0)},J=()=>{!H&&R&&U(!0)},Y=()=>{B.current?.focus()},X=e=>{if(!(`autoCompleteOptions`in z)){k(e);return}let t=l({searchValue:e,autoCompleteOptions:z.autoCompleteOptions});if(t.length===1){z.onAutoComplete(t[0].key,t[0]);return}k(e)},Z=e=>{if(e.key===`Enter`&&D!==``)X(D);else if(e.key===`Backspace`&&D===``){if(W===void 0){for(let e of Object.keys(E).toReversed())if(E[e].length>0){G(e);break}return}A(W,E[W].length-1),G(void 0)}},Q=Object.values(E).some(e=>e.length>0);return v(c,{id:L,children:[N,v(t,{children:[v(o,{ref:V,onClick:Y,children:[_(h,{data:C,color:e.text.static_icons__tertiary.rgba}),v(r,{children:[Object.keys(E).flatMap(e=>E[e].map(({label:t,icon:n},r,i)=>_(s,{onDelete:()=>A(e,r),leadingIconData:n,$tryingToRemove:W===e&&r===i.length-1,children:t},`${t}-${r}-${e}`))),v(a,{children:[`autoCompleteOptions`in z&&z.autoCompleteOptions&&_(d,{search:D,autoCompleteOptions:z.autoCompleteOptions}),_(i,{ref:B,id:`filter-search-${L}`,type:`search`,autoComplete:`off`,value:D,placeholder:Q?void 0:I,onChange:O,onKeyDownCapture:Z,onFocus:J})]})]}),Object.values(E).some(e=>e.length>0)&&_(m,{variant:`ghost_icon`,onClick:j,"data-testid":`clear-all-x`,children:_(h,{data:x,size:18,color:e.text.static_icons__tertiary.rgba})})]}),P,v(`button`,{onClick:q,"data-testid":`toggle-open-button`,children:[_(g,{variant:`button`,group:`navigation`,as:`span`,children:`Filters`}),_(h,{data:H?b:y,color:e.text.static_icons__tertiary.rgba})]})]}),_(w,{children:H&&_(T.div,{animate:{height:`auto`},initial:{height:K.current},exit:{height:0},children:v(n,{children:[v(`span`,{children:[_(h,{data:S,size:16,color:e.text.static_icons__tertiary.rgba}),_(g,{variant:`label`,group:`input`,color:e.text.static_icons__tertiary.rgba,children:`Type a keyword and press enter`})]}),M]})})}),`autoCompleteOptions`in z&&z.autoCompleteOptions&&_(u,{isFilterOpen:H,search:D,anchorElement:V.current,autoCompleteOptions:z.autoCompleteOptions,onAutoComplete:z.onAutoComplete,searchElement:B.current})]})}export{E as Filter};

package/dist/organisms/Filter/Filter.styles.js

@@ -42,9 +42,8 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
   }
   min-height: calc(48px - (2 * ${t.medium_small}));
   align-items: center;
-  flex-grow: 1;
   display: flex;
-  flex-wrap: wrap;
+  flex-grow: 1;
   gap: ${t.x_small};
   padding: ${t.medium_small} ${t.small};
   cursor: text;
@@ -66,7 +65,12 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
       height: 24px;
     }
   }
-`,d=a.input`
+`,d=a.span`
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  gap: ${t.x_small};
+`,f=a.input`
   background: transparent;
   width: 0;
   flex-grow: 1;
@@ -86,7 +90,7 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
   &::-webkit-search-results-decoration {
     display: none;
   }
-`,f=a(s.div)`
+`,p=a(s.div)`
   border-bottom-left-radius: ${n.corners.borderRadius};
   border-bottom-right-radius: ${n.corners.borderRadius};
   background: ${e.ui.background__default.rgba};
@@ -99,12 +103,12 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
     display: flex;
     gap: ${t.x_small};
   }
-`,p=a(i)`
+`,m=a(i)`
   ${({$tryingToRemove:t})=>{if(t)return o`
         background: ${e.interactive.primary__hover_alt.rgba};
       `}}
-`,m=a.section`
+`,h=a.section`
   position: relative;
   flex-grow: 1;
   display: flex;
-`;export{l as Container,f as Content,d as SearchField,m as SearchFieldWrapper,u as Section,p as StyledChip,c as Wrapper};
+`;export{l as Container,p as Content,d as SearchAndValuesWrapper,f as SearchField,h as SearchFieldWrapper,u as Section,m as StyledChip,c as Wrapper};

package/dist/organisms/Filter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionRequired } from "../../molecules/Select/Select.types.js";
 import { FilterProps } from "./Filter.types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/organisms/Filter/QuickFilter.d.ts
 interface QuickFilterProps<T extends string> {
@@ -14,6 +14,6 @@ declare function QuickFilter<T extends string>({
   items,
   onQuickFilter,
   label
-}: QuickFilterProps<T>): react_jsx_runtime7.JSX.Element;
+}: QuickFilterProps<T>): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { QuickFilter };

package/dist/organisms/Filter/SortMenu.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/organisms/Filter/SortMenu.d.ts
 interface SortMenuProps<S> {
@@ -13,6 +13,6 @@ declare function SortMenu<S>({
   value,
   onChange,
   items
-}: SortMenuProps<S>): react_jsx_runtime6.JSX.Element;
+}: SortMenuProps<S>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { SortMenu };

package/dist/organisms/ReleaseNote/ReleaseNote.js

@@ -24,4 +24,4 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
   display: flex;
   gap: ${t.medium};
   align-items: center;
-`,C=d(({applicationName:n,releaseDate:d,createdDate:h,tags:C,version:w,title:T,body:E,actionMenu:D,expanded:O=!1},k)=>{let A=o({releaseDate:d,createdDate:h}),j=f(O?`auto`:c),[M,N]=p(O),[P,F]=p(i(E).length>0),I=f(new ResizeObserver(e=>{e.at(0)&&e[0].target.scrollHeight>c&&F(!0)}));return _(b,{ref:k,style:{paddingBottom:M?t.medium:void 0},children:[_(x,{children:[_(S,{children:[g(m,{variant:`caption`,color:e.text.static_icons__secondary.rgba,children:n}),_(m,{variant:`overline`,color:e.text.static_icons__tertiary.rgba,children:[r(A),w?` ・ ${w}`:``,` ・ `,a(E)]})]}),g(u,{tags:C,children:D})]}),g(m,{variant:`h4`,children:T}),g(v.div,{ref:e=>{e&&I.current.observe(e)},initial:{height:j.current},animate:{height:M?`auto`:c},style:{overflow:M?`auto`:void 0},children:g(s,{value:E,onImageRead:y.getReleaseNoteImage,padding:`none`})}),P&&!O&&g(l,{expanded:M,onToggleExpanded:()=>{N(e=>!e)}})]})});C.displayName=`ReleaseNote`;export{C as ReleaseNote};
+`,C=d(({applicationName:d,releaseDate:h,createdDate:C,tags:w,version:T,title:E,body:D,actionMenu:O,expanded:k=!1},A)=>{let j=o({releaseDate:h,createdDate:C}),M=f(k?`auto`:c),[N,P]=p(k),[F,I]=p(i(D).length>0),L=f(new ResizeObserver(e=>{e.at(0)&&e[0].target.scrollHeight>c&&I(!0)}));return _(b,{ref:A,style:{paddingBottom:N?t.medium:void 0},children:[_(x,{children:[_(S,{children:[g(m,{variant:`caption`,color:e.text.static_icons__secondary.rgba,children:d}),_(m,{variant:`overline`,color:e.text.static_icons__tertiary.rgba,children:[r(j),T?` ・ ${T}`:``,` ・ `,a(D)]})]}),g(u,{tags:w,children:O})]}),g(m,{variant:`h4`,children:E}),g(v.div,{ref:e=>{e&&L.current.observe(e)},initial:{height:M.current},animate:{height:N?`auto`:c},style:{overflow:N?`auto`:void 0,marginBottom:N&&F?`calc(${t.medium} + ${n.button.minHeight})`:void 0},children:g(s,{value:D,onImageRead:y.getReleaseNoteImage,padding:`none`})}),F&&!k&&g(l,{expanded:N,onToggleExpanded:()=>{P(e=>!e)}})]})});C.displayName=`ReleaseNote`;export{C as ReleaseNote};

package/dist/organisms/SideBar/SideBar.d.ts

@@ -1,4 +1,4 @@
-import * as react131 from "react";
+import * as react127 from "react";
 import { HTMLAttributes, ReactNode } from "react";
 
 //#region src/organisms/SideBar/SideBar.d.ts
@@ -16,6 +16,6 @@ interface SideBarWithCreate extends SideBarProps {
   createDisabled?: boolean;
   createActive?: boolean;
 }
-declare const SideBar: react131.ForwardRefExoticComponent<(SideBarWithCreate | BaseSideBar) & react131.RefAttributes<HTMLDivElement>>;
+declare const SideBar: react127.ForwardRefExoticComponent<(SideBarWithCreate | BaseSideBar) & react127.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SideBar };

package/dist/organisms/Status/Description.d.ts

@@ -1,9 +1,9 @@
-import * as react137 from "react";
+import * as react135 from "react";
 
 //#region src/organisms/Status/Description.d.ts
 interface DescriptionProps {
   text?: string;
 }
-declare const Description: react137.ForwardRefExoticComponent<DescriptionProps & react137.RefAttributes<HTMLHeadingElement>>;
+declare const Description: react135.ForwardRefExoticComponent<DescriptionProps & react135.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { Description };

package/dist/organisms/Status/MissingAccesses.d.ts

@@ -1,4 +1,4 @@
-import * as react135 from "react";
+import * as react137 from "react";
 
 //#region src/organisms/Status/MissingAccesses.d.ts
 interface AccessType {
@@ -9,6 +9,6 @@ interface MissingAccessesProps {
   accesses?: AccessType[];
   text?: string;
 }
-declare const MissingAccesses: react135.ForwardRefExoticComponent<MissingAccessesProps & react135.RefAttributes<HTMLDivElement>>;
+declare const MissingAccesses: react137.ForwardRefExoticComponent<MissingAccessesProps & react137.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MissingAccesses };

package/dist/organisms/Status/collections/PageNotFound.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/organisms/Status/collections/PageNotFound.d.ts
 interface PageNotFoundProps {
@@ -12,6 +12,6 @@ declare const PageNotFound: ({
   redirectFallbackUrl,
   onBackClick,
   hideBackButton
-}: PageNotFoundProps) => react_jsx_runtime11.JSX.Element;
+}: PageNotFoundProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { PageNotFound };

package/dist/organisms/Status/collections/ServerError.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/organisms/Status/collections/ServerError.d.ts
 interface ServerErrorProps {
@@ -12,6 +12,6 @@ declare const ServerError: ({
   redirectFallbackUrl,
   onBackClick,
   hideBackButton
-}: ServerErrorProps) => react_jsx_runtime12.JSX.Element;
+}: ServerErrorProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { ServerError };

package/dist/organisms/ToggleGroup/ToggleGroup.types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from "react";
+import { TooltipProps } from "@equinor/eds-core-react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/organisms/ToggleGroup/ToggleGroup.types.d.ts
@@ -8,12 +9,18 @@ interface ToggleGroupOptionWithLabel {
 }
 interface ToggleGroupOptionOnlyIcon {
   icon: IconData;
+  tooltip?: undefined;
+}
+interface ToggleGroupOptionOnlyIconWithTooltip {
+  icon: IconData;
+  tooltip: string;
+  tooltipPlacement?: TooltipProps['placement'];
 }
 type ToggleGroupOption = {
   onToggle: (newValue: boolean) => void;
   checked: boolean;
   disabled?: boolean;
-} & (ToggleGroupOptionWithLabel | ToggleGroupOptionOnlyIcon);
+} & (ToggleGroupOptionWithLabel | ToggleGroupOptionOnlyIcon | ToggleGroupOptionOnlyIconWithTooltip);
 /**
  * @param variant - Defaults to 'filled'
  */

package/dist/organisms/ToggleGroup/ToggleGroupOption.js

@@ -1,4 +1,4 @@
-import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{shape as n}from"../../atoms/style/index.js";import{forwardRef as r}from"react";import{Icon as i,Typography as a}from"@equinor/eds-core-react";import o from"styled-components";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=o.button`
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{shape as n}from"../../atoms/style/index.js";import{OptionalTooltip as r}from"../../molecules/OptionalTooltip/OptionalTooltip.js";import{forwardRef as i}from"react";import{Icon as a,Typography as o}from"@equinor/eds-core-react";import s from"styled-components";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=s.button`
   display: flex;
   align-items: center;
   padding: calc(${t.medium_small} / 2); // 6px in comfortable
@@ -55,4 +55,4 @@ import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from".
       fill: ${e.interactive.disabled__text.rgba};
     }
   }
-`,u=r(({checked:e,onToggle:t,icon:n,disabled:r,...o},u)=>{let d=()=>{t(!e)};return c(l,{ref:u,"aria-checked":e,onClick:d,disabled:r,...o,children:[n?s(i,{data:n,size:24}):null,`label`in o?s(a,{as:`span`,variant:`button`,group:`navigation`,children:o.label}):null]})});u.displayName=`ToggleGroupOption`;export{u as ToggleGroupOption};
+`,d=i(({checked:e,onToggle:t,icon:n,disabled:i,...s},d)=>{let f=`tooltip`in s?{...s,tooltip:void 0,toolTipPlacement:void 0}:{...s},p=()=>{t(!e)};return l(u,{ref:d,"aria-checked":e,onClick:p,disabled:i,...f,children:[n?`tooltip`in s&&s.tooltip?c(r,{title:s.tooltip,placement:s.tooltipPlacement,children:c(a,{data:n,size:24})}):c(a,{data:n,size:24}):null,`label`in s?c(o,{as:`span`,variant:`button`,group:`navigation`,children:s.label}):null]})});d.displayName=`ToggleGroupOption`;export{d as ToggleGroupOption};

package/dist/organisms/TopBar/Actions.d.ts

@@ -1,7 +1,7 @@
-import * as react129 from "react";
+import * as react131 from "react";
 import { HTMLAttributes } from "react";
 
 //#region src/organisms/TopBar/Actions.d.ts
-declare const Actions: react129.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react129.RefAttributes<HTMLDivElement>>;
+declare const Actions: react131.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react131.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Actions };

package/dist/organisms/TopBar/FieldMenu/FieldMenu.d.ts

@@ -1,5 +1,5 @@
 import { Field } from "../../../atoms/types/Field.js";
-import * as react127 from "react";
+import * as react129 from "react";
 
 //#region src/organisms/TopBar/FieldMenu/FieldMenu.d.ts
 interface FieldMenuProps {
@@ -8,6 +8,6 @@ interface FieldMenuProps {
   itemNameSingular?: string;
   showAccessITLink?: boolean;
 }
-declare const FieldMenu: react127.ForwardRefExoticComponent<FieldMenuProps & react127.RefAttributes<HTMLDivElement>>;
+declare const FieldMenu: react129.ForwardRefExoticComponent<FieldMenuProps & react129.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FieldMenu };

package/dist/organisms/TopBar/Tutorials/Tutorials.js

@@ -1 +1 @@
-import{TopBarMenu as e}from"../TopBarMenu.js";import{TopBarButton as t}from"../TopBar.styles.js";import{TutorialItem as n}from"./TutorialItem.js";import{Container as r,TutorialList as i}from"./Tutorials.styles.js";import{useRef as a,useState as o}from"react";import{Divider as s,Icon as c,Typography as l}from"@equinor/eds-core-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{youtube_alt as p}from"@equinor/eds-icons";import{useTutorials as m}from"@equinor/subsurface-app-management";const h=({filterTutorials:h,onTutorialStart:g,..._})=>{let{allTutorials:v,tutorialsOnThisPage:y}=m(),[b,x]=o(!1),S=a(null),C=h?v.filter(h):v,w=h?y.filter(h):y,T=C.filter(e=>w.findIndex(t=>t.id===e.id)===-1),E=()=>x(e=>!e);return f(u,{children:[d(t,{variant:`ghost_icon`,ref:S,onClick:E,..._,children:d(c,{data:p})}),b&&d(e,{open:!0,onClose:E,anchorEl:S.current,children:f(r,{children:[f(l,{variant:`h4`,children:[`Available Tutorials (`,C.length,`)`]}),w.length>0&&f(i,{children:[d(l,{variant:`caption`,children:`For current page`}),w.map(e=>d(n,{onTutorialStart:g,onClose:E,...e},e.id))]}),w.length>0&&w.length>0&&d(s,{}),T.length>0&&f(i,{children:[d(l,{variant:`caption`,children:`For other pages`}),T.map(e=>d(n,{onTutorialStart:g,onClose:E,...e},e.id))]})]})})]})};export{h as Tutorials};
+import{TopBarMenu as e}from"../TopBarMenu.js";import{TopBarButton as t}from"../TopBar.styles.js";import{TutorialItem as n}from"./TutorialItem.js";import{Container as r,TutorialList as i}from"./Tutorials.styles.js";import{useRef as a,useState as o}from"react";import{Icon as s,Typography as c}from"@equinor/eds-core-react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{youtube_alt as f}from"@equinor/eds-icons";import{useTutorials as p}from"@equinor/subsurface-app-management";const m=({filterTutorials:m,onTutorialStart:h,...g})=>{let{tutorialsOnThisPage:_}=p(),[v,y]=o(!1),b=a(null),x=m?_.filter(m):_,S=()=>y(e=>!e);return d(l,{children:[u(t,{variant:`ghost_icon`,ref:b,onClick:S,...g,children:u(s,{data:f})}),v&&u(e,{open:!0,onClose:S,anchorEl:b.current,children:d(r,{children:[d(c,{variant:`h4`,children:[`Available Tutorials (`,x.length,`)`]}),x.length>0&&d(i,{children:[u(c,{variant:`caption`,children:`For current page`}),x.map(e=>u(n,{onTutorialStart:h,onClose:S,...e},e.id))]})]})})]})};export{m as Tutorials};

package/dist/organisms/TopBar/Tutorials/Tutorials.styles.js

@@ -3,10 +3,8 @@ import{spacings as e}from"../../../atoms/style/spacings.js";import t from"styled
   flex-direction: column;
   padding: ${e.large};
   width: 520px;
-  > h4 {
-    margin-bottom: ${e.x_large};
-  }
-  > hr {
+  height: 100%;
+  > h4:not(:last-child) {
     margin-bottom: ${e.x_large};
   }
 `,r=t.section`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",