@equinor/amplify-component-lib 13.2.7 → 14.1.0

package/dist/molecules/RichTextEditor/RichTextEditor.styles.js

@@ -1,15 +1,20 @@
-import{VARIANT_COLORS as e,colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{shape as r,typography as i}from"../../atoms/style/index.js";import a from"styled-components";import{EditorContent as o}from"@tiptap/react";const s=a(o)`
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{VARIANT_COLORS as t,colors as n}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{shape as i,typography as a}from"../../atoms/style/index.js";import{typographyTemplate as o}from"../../node_modules/@equinor/eds-utils/dist/esm/utils/templates/index.js";import s,{css as c}from"styled-components";import{EditorContent as l}from"@tiptap/react";const u=e=>{switch(e){case`sm`:return r.small;case`md`:return r.medium;case`lg`:return r.large;default:return`0`}},d=({$highlighted:e,$variant:r})=>e?`inset 0 -2px ${n.dataviz.darkblue.darker}`:r?`inset 0 -2px ${t[r]}`:`inset 0 -1px ${n.ui.background__medium.rgba}`,f=s(l)`
   display: grid;
   grid-template-rows: 1fr;
   overflow-y: auto;
   min-height: ${e=>e.$minHeight||`auto`};
   max-height: ${e=>e.$maxHeight||`auto`};
-`,c=a.div`
+
+  span.mention[data-type='mention'] {
+    ${o(e.typography.paragraph.body_short_bold)};
+    color: ${n.interactive.primary__resting.rgba};
+  }
+`,p=s.div`
   display: grid;
   grid-template-rows: auto 1fr;
-  background: ${t.ui.background__default.rgba};
-  border-radius: ${r.corners.borderRadius} ${r.corners.borderRadius} 0 0;
-  border: ${e=>e.$border?`1px solid ${t.ui.background__medium.rgba}`:`none`};
+  background: ${n.ui.background__default.rgba};
+  border-radius: ${i.corners.borderRadius} ${i.corners.borderRadius} 0 0;
+  border: ${e=>e.$border?`1px solid ${n.ui.background__medium.rgba}`:`none`};
   border-bottom: none;
 
   &:has(div[contenteditable='true']) {
@@ -17,32 +22,32 @@ import{VARIANT_COLORS as e,colors as t}from"../../atoms/style/colors.js";import{
   }
 
   & [data-placeholder]::before {
-    color: ${t.text.static_icons__tertiary.rgba} !important;
+    color: ${n.text.static_icons__tertiary.rgba} !important;
   }
 
   .tiptap {
     box-sizing: border-box;
     overflow-y: auto;
-    background: ${e=>e.$lightBackground?`${t.ui.background__default.rgba}`:`${t.ui.background__light.rgba}`};
+    background: ${e=>e.$lightBackground?`${n.ui.background__default.rgba}`:`${n.ui.background__light.rgba}`};
 
     &[contenteditable='true'] {
-      box-shadow: ${({$highlighted:n,$variant:r})=>n?`inset 0 -2px ${t.dataviz.darkblue.darker}`:r?`inset 0 -2px ${e[r]}`:`inset 0 -1px ${t.ui.background__medium.rgba}`};
+      box-shadow: ${e=>e.$hasFooter?`none`:d(e)};
     }
 
-    padding: ${e=>{switch(e.$padding){case`sm`:return n.small;case`md`:return n.medium;case`lg`:return n.large;default:return 0}}};
+    padding: ${e=>u(e.$padding)};
 
     a {
-      color: ${t.interactive.primary__resting.rgba};
+      color: ${n.interactive.primary__resting.rgba};
     }
     a:hover {
       cursor: pointer;
-      color: ${t.interactive.primary__hover.rgba};
+      color: ${n.interactive.primary__hover.rgba};
     }
     p {
       font-size: 16px;
       font-family: 'Equinor', sans-serif;
-      color: ${t.text.static_icons__default.rgba};
-      line-height: ${i.paragraph.body_long.lineHeight};
+      color: ${n.text.static_icons__default.rgba};
+      line-height: ${a.paragraph.body_long.lineHeight};
       margin: 0;
     }
     ul,
@@ -91,7 +96,7 @@ import{VARIANT_COLORS as e,colors as t}from"../../atoms/style/colors.js";import{
       }
 
       th {
-        background-color: ${({$lightBackground:e})=>e?`#f1f3f5`:t.ui.background__default.rgba};
+        background-color: ${({$lightBackground:e})=>e?`#f1f3f5`:n.ui.background__default.rgba};
         font-weight: bold;
         text-align: left;
       }
@@ -125,30 +130,45 @@ import{VARIANT_COLORS as e,colors as t}from"../../atoms/style/colors.js";import{
 
     &:focus-visible {
       outline: none;
-      box-shadow: inset 0 -2px ${t.interactive.primary__resting.rgba};
+      box-shadow: ${e=>e.$hasFooter?`none`:`inset 0 -2px ${n.interactive.primary__resting.rgba}`};
     }
   }
 
   .tiptap p.is-editor-empty:first-child::before {
-    color: ${t.text.static_icons__default.rgba};
+    color: ${n.text.static_icons__default.rgba};
     content: attr(data-placeholder);
     float: left;
     height: 0;
     pointer-events: none;
   }
-`,l=a.div`
+`,m=s.div`
   display: flex;
   flex-direction: column;
-`,u=a.div`
+`,h=s.div`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 0;
+  background: ${e=>e.$lightBackground?n.ui.background__default.rgba:n.ui.background__light.rgba};
+
+  ${e=>e.$hasFooter&&c`
+      box-shadow: ${d(e)};
+
+      &:focus-within {
+        box-shadow: inset 0 -2px ${n.interactive.primary__resting.rgba};
+      }
+    `}
+`,g=s.div`
+  padding: ${e=>`${r.small} ${u(e.$padding)} ${r.small} ${u(e.$padding)}`};
+`,_=s.div`
   display: flex;
   justify-content: space-between;
-  padding: 0 ${n.small};
+  padding: 0 ${r.small};
   > p {
-    color: ${t.text.static_icons__tertiary.rgba};
+    color: ${n.text.static_icons__tertiary.rgba};
   }
-`,d=a.div`
+`,v=s.div`
   display: flex;
-  gap: ${n.small};
-  padding-left: ${n.small};
-  margin-top: ${n.small};
-`;export{s as EditorContent,c as EditorStyling,d as HelperWrapper,u as LabelWrapper,l as Wrapper};
+  gap: ${r.small};
+  padding-left: ${r.small};
+  margin-top: ${r.small};
+`;export{f as EditorContent,p as EditorStyling,h as FieldWrapper,g as FooterContent,v as HelperWrapper,_ as LabelWrapper,m as Wrapper};

package/dist/molecules/RichTextEditor/index.d.ts

@@ -2,17 +2,17 @@ import { EditorStylingProps, RichTextContentProps } from "./RichTextEditor.style
 import { EditorProviderProps } from "./EditorProvider.js";
 import { MenuBarProps } from "./MenuBar/MenuBar.js";
 import { RichTextEditor } from "./RichTextEditor.js";
-import * as react24 from "react";
+import * as react20 from "react";
 import * as styled_components0 from "styled-components";
 import * as _tiptap_react0 from "@tiptap/react";
 import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/molecules/RichTextEditor/index.d.ts
 declare const RichText: {
-  Styling: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<styled_components0.FastOmit<react24.DetailedHTMLProps<react24.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof EditorStylingProps> & EditorStylingProps, never> & Partial<Pick<styled_components0.FastOmit<react24.DetailedHTMLProps<react24.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof EditorStylingProps> & EditorStylingProps, never>>> & string;
-  Provider: react24.FC<EditorProviderProps>;
-  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<styled_components0.FastOmit<Omit<_tiptap_react0.EditorContentProps, "ref"> & react24.RefAttributes<HTMLDivElement>, keyof RichTextContentProps> & RichTextContentProps, never> & Partial<Pick<styled_components0.FastOmit<Omit<_tiptap_react0.EditorContentProps, "ref"> & react24.RefAttributes<HTMLDivElement>, keyof RichTextContentProps> & RichTextContentProps, never>>> & string & Omit<react24.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react24.RefAttributes<HTMLDivElement>>, keyof react24.Component<any, {}, any>>;
-  Bar: react24.FC<MenuBarProps>;
+  Styling: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<styled_components0.FastOmit<react20.DetailedHTMLProps<react20.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof EditorStylingProps> & EditorStylingProps, never> & Partial<Pick<styled_components0.FastOmit<react20.DetailedHTMLProps<react20.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof EditorStylingProps> & EditorStylingProps, never>>> & string;
+  Provider: react20.FC<EditorProviderProps>;
+  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<styled_components0.FastOmit<Omit<_tiptap_react0.EditorContentProps, "ref"> & react20.RefAttributes<HTMLDivElement>, keyof RichTextContentProps> & RichTextContentProps, never> & Partial<Pick<styled_components0.FastOmit<Omit<_tiptap_react0.EditorContentProps, "ref"> & react20.RefAttributes<HTMLDivElement>, keyof RichTextContentProps> & RichTextContentProps, never>>> & string & Omit<react20.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react20.RefAttributes<HTMLDivElement>>, keyof react20.Component<any, {}, any>>;
+  Bar: react20.FC<MenuBarProps>;
 };
 //#endregion
 export { RichText };

package/dist/molecules/Search/Search.d.ts

@@ -1,10 +1,10 @@
-import * as react51 from "react";
+import * as react46 from "react";
 import { SearchProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/Search/Search.d.ts
 interface SearchProps$1 extends SearchProps {
   lightBackground?: boolean;
 }
-declare const Search$1: react51.ForwardRefExoticComponent<SearchProps$1 & react51.RefAttributes<HTMLInputElement>>;
+declare const Search$1: react46.ForwardRefExoticComponent<SearchProps$1 & react46.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Search$1 as Search };

package/dist/molecules/Select/ComboBox/ComboBox.d.ts

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired } from "../Select.types.js";
-import * as react50 from "react";
+import * as react53 from "react";
 
 //#region src/molecules/Select/ComboBox/ComboBox.d.ts
 type ComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & (ListSelectProps<T> | GroupedSelectProps<T>);
@@ -17,6 +17,6 @@ type ComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & Mult
  * @param showSelectedAsText - If values should be shown as "5/10 Selected", defaults to false
  * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
  */
-declare function ComboBox<T extends SelectOptionRequired>(props: ComboBoxProps<T>): react50.JSX.Element;
+declare function ComboBox<T extends SelectOptionRequired>(props: ComboBoxProps<T>): react53.JSX.Element;
 //#endregion
 export { ComboBox, ComboBoxProps };

package/dist/molecules/Select/GroupedSelectPersistent.js

@@ -1 +1 @@
-import{useGroupedSelectItems as e}from"./Select.hooks.js";import{GroupTitle as t,NoItemsFoundText as n,PersistentGroupsWrapper as r}from"./Select.styles.js";import{SelectMenuItem as i}from"./SelectMenuItem.js";import{Divider as a}from"@equinor/eds-core-react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=c=>{let{onItemSelect:l,onItemKeyDown:u,itemRefs:d,CustomMenuItemComponent:f,mode:p}=c,{filteredGroups:m,filteredGroupSum:h}=e(c);return m.length===0?o(n,{children:`No items found`}):`value`in c?null:o(r,{children:m.map((e,n,r)=>s(`div`,{children:[o(t,{group:`navigation`,variant:`label`,children:e.title}),e.items.map((t,r)=>o(i,{index:r+h[n],childOffset:0,item:t,itemRefs:d,onItemKeyDown:u,onItemSelect:l,values:c.values,mode:p,CustomMenuItemComponent:f},`${e.title}-${n}-item-${t.value}`)),n<r.length-1&&o(a,{})]},`${e.title}-${n}`))})};export{c as GroupedSelectPersistent};
+import{useGroupedSelectItems as e}from"./Select.hooks.js";import{GroupTitle as t,PersistentGroupsWrapper as n,PersistentNoItemsFoundText as r}from"./Select.styles.js";import{SelectMenuItem as i}from"./SelectMenuItem.js";import{Divider as a}from"@equinor/eds-core-react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=c=>{let{onItemSelect:l,onItemKeyDown:u,itemRefs:d,CustomMenuItemComponent:f,mode:p}=c,{filteredGroups:m,filteredGroupSum:h}=e(c);return m.length===0?o(r,{children:`No items found`}):`value`in c?null:o(n,{children:m.map((e,n,r)=>s(`div`,{children:[o(t,{group:`navigation`,variant:`label`,children:e.title}),e.items.map((t,r)=>o(i,{index:r+h[n],childOffset:0,item:t,itemRefs:d,onItemKeyDown:u,onItemSelect:l,values:c.values,mode:p,CustomMenuItemComponent:f},`${e.title}-${n}-item-${t.value}`)),n<r.length-1&&o(a,{})]},`${e.title}-${n}`))})};export{c as GroupedSelectPersistent};

package/dist/molecules/Select/ListSelectPersistent.js

@@ -1 +1 @@
-import{capitalize as e}from"../../atoms/utils/string.js";import{getChildOffset as t}from"./Select.utils.js";import{useListSelectItems as n}from"./Select.hooks.js";import{GroupTitle as r,NoItemsFoundText as i,NoTagFoundText as a}from"./Select.styles.js";import{SelectMenuItem as o}from"./SelectMenuItem.js";import{AddTagItem as s}from"./AddTagItem.js";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{search:f,itemRefs:p,onItemKeyDown:m,mode:h}=d,{filteredItems:g}=n(d);if(g.length===0&&(!d.onAddItem||f===``))return l(i,{children:`No items found`});let _=g.some(e=>e.children&&e.children.length>0),v=g.map((e,n)=>({childOffset:t(g,n),index:n,item:e,itemValue:e.value,parentHasNestedItems:_,...d,mode:h}));if(`onAddItem`in d&&d.onAddItem&&f!==``&&(g.length===1&&g.at(0)?.label.toLowerCase()!==f.trim().toLowerCase()||g.length!==1)){let t=d.itemSingularWord?d.itemSingularWord:`tag`;return u(c,{children:[l(r,{group:`navigation`,variant:`label`,children:`Add ${t}`}),l(s,{index:0,itemRefs:p,onItemKeyDown:m,onAddItem:d.onAddItem,addItemSingularWord:t,mode:h,children:f}),l(r,{group:`navigation`,variant:`label`,children:`${e(t)} search results`}),v.length>0?v.map((e,t)=>l(o,{...e,index:t+1},`menu-item-${t}-${e.item.value}`)):u(a,{children:[`No `,t,` for "`,f,`" found.`]})]})}return v.map((e,t)=>l(o,{...e,index:t},`menu-item-${t}-${e.item.value}`))};export{d as ListSelectPersistent};
+import{capitalize as e}from"../../atoms/utils/string.js";import{getChildOffset as t}from"./Select.utils.js";import{useListSelectItems as n}from"./Select.hooks.js";import{GroupTitle as r,NoTagFoundText as i,PersistentNoItemsFoundText as a}from"./Select.styles.js";import{SelectMenuItem as o}from"./SelectMenuItem.js";import{AddTagItem as s}from"./AddTagItem.js";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{search:f,itemRefs:p,onItemKeyDown:m,mode:h}=d,{filteredItems:g}=n(d);if(g.length===0&&(!d.onAddItem||f===``))return l(a,{children:`No items found`});let _=g.some(e=>e.children&&e.children.length>0),v=g.map((e,n)=>({childOffset:t(g,n),index:n,item:e,itemValue:e.value,parentHasNestedItems:_,...d,mode:h}));if(`onAddItem`in d&&d.onAddItem&&f!==``&&(g.length===1&&g.at(0)?.label.toLowerCase()!==f.trim().toLowerCase()||g.length!==1)){let t=d.itemSingularWord?d.itemSingularWord:`tag`;return u(c,{children:[l(r,{group:`navigation`,variant:`label`,children:`Add ${t}`}),l(s,{index:0,itemRefs:p,onItemKeyDown:m,onAddItem:d.onAddItem,addItemSingularWord:t,mode:h,children:f}),l(r,{group:`navigation`,variant:`label`,children:`${e(t)} search results`}),v.length>0?v.map((e,t)=>l(o,{...e,index:t+1},`menu-item-${t}-${e.item.value}`)):u(i,{children:[`No `,t,` for "`,f,`" found.`]})]})}return v.map((e,t)=>l(o,{...e,index:t},`menu-item-${t}-${e.item.value}`))};export{d as ListSelectPersistent};

package/dist/molecules/Select/PersistentComboBox/PersistentComboBox.d.ts

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, PersistentSelectProps, SelectOptionRequired } from "../Select.types.js";
-import * as react58 from "react";
+import * as react54 from "react";
 
 //#region src/molecules/Select/PersistentComboBox/PersistentComboBox.d.ts
 type PersistentComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & PersistentSelectProps & (GroupedSelectProps<T> | ListSelectProps<T>);
@@ -18,6 +18,6 @@ type PersistentComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps
  * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
  * @param maxHeight - Max height of the persistent wrapper below the search field, optional
  */
-declare function PersistentComboBox<T extends SelectOptionRequired>(props: PersistentComboBoxProps<T>): react58.JSX.Element;
+declare function PersistentComboBox<T extends SelectOptionRequired>(props: PersistentComboBoxProps<T>): react54.JSX.Element;
 //#endregion
 export { PersistentComboBox, PersistentComboBoxProps };

package/dist/molecules/Select/Select.styles.d.ts

@@ -1,5 +1,5 @@
 import { BaseChipProps, ClickableChipProps, DeletableChipProps } from "../Chip/Chip.js";
-import * as react59 from "react";
+import * as react55 from "react";
 import "@equinor/eds-core-react";
 import * as styled_components11 from "styled-components";
 import * as styled_components_dist_types5 from "styled-components/dist/types";
@@ -11,15 +11,15 @@ interface ComboBoxChipProps {
   $lightBackground?: boolean;
   className: string;
 }
-declare const ComboBoxChip: styled_components_dist_types5.IStyledComponentBase<"web", styled_components11.FastOmit<styled_components11.FastOmit<((Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+declare const ComboBoxChip: styled_components_dist_types5.IStyledComponentBase<"web", styled_components11.FastOmit<styled_components11.FastOmit<((Omit<react55.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never> & Partial<Pick<styled_components11.FastOmit<((Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLButtonElement | HTMLDivElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never> & Partial<Pick<styled_components11.FastOmit<((Omit<react55.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never>>> & string & Omit<react59.ForwardRefExoticComponent<(Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLButtonElement | HTMLDivElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never>>> & string & Omit<react55.ForwardRefExoticComponent<(Omit<react55.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof react59.Component<any, {}, any>>;
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLButtonElement | HTMLDivElement>>, keyof react55.Component<any, {}, any>>;
 //#endregion
 export { ComboBoxChip };

package/dist/molecules/Select/Select.styles.js

@@ -1,15 +1,15 @@
-import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{shape as a}from"../../atoms/style/index.js";import{Chip as o}from"../Chip/Chip.js";import{Button as s,Menu as c,Typography as l}from"@equinor/eds-core-react";import u,{css as d}from"styled-components";const f=u.div`
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{shape as a}from"../../atoms/style/index.js";import{Chip as o}from"../Chip/Chip.js";import{Button as s,Menu as c,Typography as l}from"@equinor/eds-core-react";import u,{css as d}from"styled-components";const f=`calc(${i.medium} * 2 + 24px)`,p=u.div`
   display: flex;
   flex-direction: column;
   gap: ${i.small};
   ${({$showBackgroundColor:e})=>e&&d`
       background-color: ${r.ui.background__default.rgba};
     `}
-`,p=u.span`
+`,m=u.span`
   display: flex;
   gap: ${i.x_small};
   width: 100%;
-`,m=u.span`
+`,h=u.span`
   display: flex;
   gap: ${i.small};
   align-items: center;
@@ -31,7 +31,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       border-bottom: 1px solid ${r.ui.background__heavy.rgba};
       padding-bottom: ${i.small};
     `}
-`,h=u.div`
+`,g=u.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -101,7 +101,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       width: calc(100% - 24px);
     }
   }
-`,g=u.section`
+`,_=u.section`
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -151,7 +151,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       }
     }
   }
-`,_=u(s)`
+`,v=u(s)`
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
@@ -171,13 +171,13 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       fill: ${r.interactive.disabled__text.rgba};
     }
   }
-`,v=u(o)`
+`,y=u(o)`
   background: ${({$tryingToRemove:e,$lightBackground:t})=>e?r.interactive.primary__hover_alt.rgba:t?r.ui.background__light.rgba:r.ui.background__default.rgba} !important;
-`,y=u.div`
+`,b=u.div`
   padding: ${i.small} 0;
-`,b=u(l)`
+`,x=u(l)`
   padding: ${i.small} 0 ${i.small} ${i.medium};
-`,x=u(c.Item)`
+`,S=u(c.Item)`
   flex-grow: 1;
   padding-left: 10px;
 
@@ -201,7 +201,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
             background: ${r.interactive.primary__selected_hover.rgba};
           }
         `:``}
-`,S=u.div`
+`,C=u.div`
   position: relative;
   isolation: isolate;
   display: flex;
@@ -211,21 +211,22 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   overflow: hidden;
   background-color: ${r.ui.background__default.rgba};
   height: ${({$shouldShowLabel:e,$maxHeight:t})=>t||(e?d`calc(100% - 16px)`:`100%`)};
-`,C=u.div`
+`,w=u.div`
   position: sticky;
   top: 0;
   z-index: 1;
-`,w=u.div`
+`,T=u.div`
   flex: 1;
   min-height: 0;
   overflow: auto;
-`,T=u.button`
+`,E=u.button`
   width: 100%;
   display: flex;
   align-items: center;
   padding: ${i.medium} ${i.medium};
   justify-content: flex-start;
   gap: ${i.small};
+  min-height: ${f};
   box-sizing: border-box;
   svg {
     flex-shrink: 0;
@@ -236,19 +237,19 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   &:focus-visible {
     outline: 2px dashed ${r.interactive.primary__resting.rgba};
   }
-`,E=u.hr`
+`,D=u.hr`
   height: calc(100% + ${i.medium} * 2);
   justify-self: center;
   width: ${i.x_large};
   min-width: ${i.x_large};
-`,D=u(l)`
+`,O=u(l)`
   user-select: none;
   pointer-events: none;
   position: absolute;
   color: ${r.text.static_icons__tertiary.rgba};
   top: calc(50%);
   transform: translate(0, -50%);
-`,O=u(l)`
+`,k=u(l)`
   user-select: none;
   pointer-events: none;
   position: absolute;
@@ -260,11 +261,17 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   text-overflow: ellipsis;
   color: ${r.text.static_icons__default.rgba};
   max-width: 100%;
-`,k=u(l)`
-  margin: ${i.medium};
 `,A=u(l)`
-  margin-left: ${i.medium};
-`,j=u(c)`
+  margin: ${i.medium};
+`,j=u(l).attrs({group:`navigation`,variant:`menu_title`})`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: ${i.medium};
+  box-sizing: border-box;
+`,M=u(j)`
+  min-height: ${f};
+`,N=u(c)`
   max-height: 20rem;
   max-width: inherit;
   overflow-y: auto;
@@ -272,16 +279,16 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     width: inherit;
     max-width: inherit;
   }
-`,M=u.div`
+`,P=u.div`
   display: flex;
   align-items: center;
   gap: ${i.small};
-`,N=d`
+`,F=d`
   width: 36px;
   height: 36px;
   flex-shrink: 0;
-`,P=u(s)`
-  ${N}
-`,F=u.div`
-  ${N}
-`;export{F as ChevronPlaceholder,_ as ClearButton,v as ComboBoxChip,h as Container,b as GroupTitle,m as HelperWrapper,p as LabelWrapper,E as MenuItemSpacer,M as MenuItemWrapper,A as NoItemsFoundText,k as NoTagFoundText,S as PersistentComboBoxWrapper,y as PersistentGroupsWrapper,T as PersistentListItem,w as PersistentListScrollArea,C as PersistentStickyWrapper,D as PlaceholderText,g as Section,P as SmallButton,j as StyledMenu,x as StyledMenuItem,O as ValueText,f as Wrapper};
+`,I=u(s)`
+  ${F}
+`,L=u.div`
+  ${F}
+`;export{L as ChevronPlaceholder,v as ClearButton,y as ComboBoxChip,g as Container,x as GroupTitle,h as HelperWrapper,m as LabelWrapper,D as MenuItemSpacer,P as MenuItemWrapper,j as NoItemsFoundText,A as NoTagFoundText,C as PersistentComboBoxWrapper,b as PersistentGroupsWrapper,E as PersistentListItem,T as PersistentListScrollArea,M as PersistentNoItemsFoundText,w as PersistentStickyWrapper,O as PlaceholderText,_ as Section,I as SmallButton,N as StyledMenu,S as StyledMenuItem,k as ValueText,p as Wrapper};

package/dist/molecules/Select/SingleSelect/SingleSelect.d.ts

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from "../Select.types.js";
-import * as react165 from "react";
+import * as react171 from "react";
 
 //#region src/molecules/Select/SingleSelect/SingleSelect.d.ts
 type SingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & (ListSelectProps<T> | GroupedSelectProps<T>);
@@ -15,6 +15,6 @@ type SingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> &
  * @param onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
  * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
  */
-declare function SingleSelect<T extends SelectOptionRequired>(props: SingleSelectProps<T>): react165.JSX.Element;
+declare function SingleSelect<T extends SelectOptionRequired>(props: SingleSelectProps<T>): react171.JSX.Element;
 //#endregion
 export { SingleSelect, SingleSelectProps };

package/dist/molecules/SelectionControls/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import * as react168 from "react";
+import * as react174 from "react";
 import { CheckboxProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Checkbox/Checkbox.d.ts
@@ -7,6 +7,6 @@ interface CheckboxProps$1 extends CheckboxProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Checkbox$1: react168.ForwardRefExoticComponent<CheckboxProps$1 & react168.RefAttributes<HTMLInputElement>>;
+declare const Checkbox$1: react174.ForwardRefExoticComponent<CheckboxProps$1 & react174.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps };

package/dist/molecules/SelectionControls/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as react170 from "react";
+import * as react176 from "react";
 import { RadioProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Radio/Radio.d.ts
@@ -7,6 +7,6 @@ interface RadioProps$1 extends RadioProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Radio$1: react170.ForwardRefExoticComponent<RadioProps$1 & react170.RefAttributes<HTMLInputElement>>;
+declare const Radio$1: react176.ForwardRefExoticComponent<RadioProps$1 & react176.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Radio$1 as Radio, RadioProps$1 as RadioProps };

package/dist/molecules/SelectionControls/Switch/Switch.d.ts

@@ -1,10 +1,10 @@
-import * as react172 from "react";
+import * as react178 from "react";
 import { SwitchProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Switch/Switch.d.ts
 interface SwitchProps$1 extends SwitchProps {
   outlined?: boolean;
 }
-declare const Switch$1: react172.ForwardRefExoticComponent<SwitchProps$1 & react172.RefAttributes<HTMLInputElement>>;
+declare const Switch$1: react178.ForwardRefExoticComponent<SwitchProps$1 & react178.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

package/dist/molecules/Skeleton/SkeletonBase/SkeletonBase.d.ts

@@ -1,4 +1,4 @@
-import * as react53 from "react";
+import * as react48 from "react";
 import * as styled_components8 from "styled-components";
 import * as styled_components_dist_types4 from "styled-components/dist/types";
 import * as styled_components_dist_models_Keyframes0 from "styled-components/dist/models/Keyframes";
@@ -8,6 +8,6 @@ declare const skeletonBaseloading: styled_components_dist_models_Keyframes0.defa
 interface SkeletonBaseProps {
   $offset?: number;
 }
-declare const SkeletonBase: styled_components_dist_types4.IStyledComponentBase<"web", styled_components8.FastOmit<styled_components8.FastOmit<react53.DetailedHTMLProps<react53.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never> & Partial<Pick<styled_components8.FastOmit<react53.DetailedHTMLProps<react53.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never>>> & string;
+declare const SkeletonBase: styled_components_dist_types4.IStyledComponentBase<"web", styled_components8.FastOmit<styled_components8.FastOmit<react48.DetailedHTMLProps<react48.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never> & Partial<Pick<styled_components8.FastOmit<react48.DetailedHTMLProps<react48.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never>>> & string;
 //#endregion
 export { SkeletonBase, SkeletonBaseProps, skeletonBaseloading };

package/dist/molecules/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { Tabs as Tabs$1 } from "./Tabs.types.js";
-import * as react49 from "react";
+import * as react45 from "react";
 import { HTMLAttributes, Ref } from "react";
 
 //#region src/molecules/Tabs/Tabs.d.ts
@@ -27,6 +27,6 @@ declare function Tabs<T>({
   onHover,
   ref,
   ...rest
-}: TabsProps<T>): react49.JSX.Element;
+}: TabsProps<T>): react45.JSX.Element;
 //#endregion
 export { Tabs, TabsProps };

package/dist/molecules/TextField/TextField.js

@@ -1,4 +1,4 @@
-import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,colors as n}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{shape as i}from"../../atoms/style/index.js";import{getSkeletonHeight as a,getSkeletonTop as o}from"../../atoms/utils/skeleton.js";import{SkeletonBase as s}from"../Skeleton/SkeletonBase/SkeletonBase.js";import{InputExplanation as c}from"../InputExplanation/InputExplanation.js";import{useEffect as l,useRef as u,useState as d}from"react";import{TextField as f,Typography as p}from"@equinor/eds-core-react";import m,{css as h}from"styled-components";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=m.div`
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,colors as n}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{shape as i}from"../../atoms/style/index.js";import{getSkeletonHeight as a,getSkeletonTop as o}from"../../atoms/utils/skeleton.js";import{InputExplanation as s}from"../InputExplanation/InputExplanation.js";import{SkeletonBase as c}from"../Skeleton/SkeletonBase/SkeletonBase.js";import{useEffect as l,useRef as u,useState as d}from"react";import{TextField as f,Typography as p}from"@equinor/eds-core-react";import m,{css as h}from"styled-components";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=m.div`
   position: relative;
   height: fit-content;
   input,
@@ -77,7 +77,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
         }
       }
     `}
-`,y=m(s)`
+`,y=m(c)`
   position: absolute;
   left: ${r.small};
   border-radius: ${i.corners.borderRadius};
@@ -89,4 +89,4 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   display: flex;
   gap: ${r.x_small};
   align-items: center;
-`,S=e=>{if(e.maxCharacters&&`type`in e&&e.type!==`text`)throw Error('`maxCharacters` prop is not supported for input types other than "text".');if(e.explanation&&!e.label)throw Error("`explanation` prop requires a `label` to be set on the TextField.");let i={...e,variant:e.variant===`dirty`?void 0:e.variant},s=e.loading?void 0:e.variant,p=o(e),m=a(e),h=u(`${Math.max(20,Math.random()*80)}%`),[S,C]=d(typeof e.value==`string`?e.value.length:0),[w,T]=d(0),E=e=>{if(e){let t=e.getBoundingClientRect().width;T(t)}},D=t=>{e.onChange&&e.onChange(t),e.maxCharacters&&C(t.target.value.length)};return l(()=>{typeof e.value==`string`&&e.maxCharacters&&e.value.length!==S&&C(e.value.length)},[S,e.maxCharacters,e.value]),_(v,{ref:t=>{if(!t||!e.maxCharacters)return;let n=t.querySelector(`input, textarea`);n&&C(n.value.length)},$variant:s,$disabled:e.loading?!1:e.disabled,$helperRightWidth:w,style:{marginBottom:!e.helperText&&e.maxCharacters?`calc(${r.small} + 1rem)`:0},children:[g(f,{...i,label:i.label?_(x,{children:[i.label,e.explanation&&g(c,{position:e.explanationPosition,children:e.explanation})]}):void 0,disabled:e.loading||e.disabled,onChange:D}),e.loading&&g(y,{className:`skeleton`,role:`progressbar`,style:{top:p,height:m,width:h.current}}),e.maxCharacters&&_(b,{ref:E,variant:`helper`,group:`input`,color:i.variant?t[i.variant]:n.text.static_icons__tertiary.rgba,style:{bottom:e.helperText?`0`:`calc((${r.small} + 1rem) * -1)`},children:[S,` / `,e.maxCharacters]})]})};export{S as TextField};
+`,S=e=>{if(e.maxCharacters&&`type`in e&&e.type!==`text`)throw Error('`maxCharacters` prop is not supported for input types other than "text".');if(e.explanation&&!e.label)throw Error("`explanation` prop requires a `label` to be set on the TextField.");let i={...e,variant:e.variant===`dirty`?void 0:e.variant},c=e.loading?void 0:e.variant,p=o(e),m=a(e),h=u(`${Math.max(20,Math.random()*80)}%`),[S,C]=d(typeof e.value==`string`?e.value.length:0),[w,T]=d(0),E=e=>{if(e){let t=e.getBoundingClientRect().width;T(t)}},D=t=>{e.onChange&&e.onChange(t),e.maxCharacters&&C(t.target.value.length)};return l(()=>{typeof e.value==`string`&&e.maxCharacters&&e.value.length!==S&&C(e.value.length)},[S,e.maxCharacters,e.value]),_(v,{ref:t=>{if(!t||!e.maxCharacters)return;let n=t.querySelector(`input, textarea`);n&&C(n.value.length)},$variant:c,$disabled:e.loading?!1:e.disabled,$helperRightWidth:w,style:{marginBottom:!e.helperText&&e.maxCharacters?`calc(${r.small} + 1rem)`:0},children:[g(f,{...i,label:i.label?_(x,{children:[i.label,e.explanation&&g(s,{position:e.explanationPosition,children:e.explanation})]}):void 0,disabled:e.loading||e.disabled,onChange:D}),e.loading&&g(y,{className:`skeleton`,role:`progressbar`,style:{top:p,height:m,width:h.current}}),e.maxCharacters&&_(b,{ref:E,variant:`helper`,group:`input`,color:i.variant?t[i.variant]:n.text.static_icons__tertiary.rgba,style:{bottom:e.helperText?`0`:`calc((${r.small} + 1rem) * -1)`},children:[S,` / `,e.maxCharacters]})]})};export{S as TextField};

package/dist/molecules/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import { FC, RefObject } from "react";
+import { FC, ReactNode, RefObject } from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/molecules/Toast/Toast.d.ts
@@ -7,7 +7,7 @@ interface ToastProps {
   onClose: () => void;
   icon?: IconData;
   variant?: 'neutral' | 'info' | 'warning' | 'error' | 'success';
-  description?: string;
+  description?: ReactNode;
   action?: {
     onClick: () => void;
     text: string;

package/dist/molecules/Toast/Toast.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Button as t}from"../Button/Button.js";import{IconButton as n}from"../Button/IconButton/IconButton.js";import{getHeaderIcon as r}from"./Toast.utils.js";import{Container as i,DurationBar as a,Header as o}from"./Toast.styles.js";import{useEffect as s}from"react";import{Icon as c,Typography as l}from"@equinor/eds-core-react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{close as f}from"@equinor/eds-icons";const p=({title:p,icon:m,onClose:h,variant:g,description:_,action:v,duration:y,ref:b})=>{if(y!==void 0&&y<=0)throw Error(`Duration must be a positive number`);s(()=>{if(!y)return;let e=setTimeout(()=>{h()},y*1e3);return()=>clearTimeout(e)},[y,h]);let x=()=>{v?.onClick(),h()},S=r({icon:m,variant:g});return d(i,{ref:b,$variant:g,children:[d(o,{children:[S&&u(c,{data:S}),u(l,{variant:`h6`,color:e.text.static_icons__default.rgba,children:p}),u(n,{icon:f,variant:`ghost`,onClick:h})]}),_&&u(l,{variant:`body_long`,color:e.text.static_icons__secondary.rgba,children:_}),v&&u(t,{variant:`outlined`,onClick:x,children:v.text}),y&&u(a,{role:`progressbar`,$variant:g,$duration:y})]})};export{p as Toast};
+import{colors as e}from"../../atoms/style/colors.js";import{getHeaderIcon as t}from"./Toast.utils.js";import{ActionButton as n,CloseButton as r,Container as i,Description as a,DurationBar as o,Header as s,HeaderIcon as c,Title as l}from"./Toast.styles.js";import{useEffect as u}from"react";import{Icon as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{close as m}from"@equinor/eds-icons";const h=({title:h,icon:g,onClose:_,variant:v,description:y,action:b,duration:x,ref:S})=>{if(x!==void 0&&x<=0)throw Error(`Duration must be a positive number`);u(()=>{if(!x)return;let e=setTimeout(()=>{_()},x*1e3);return()=>clearTimeout(e)},[x,_]);let C=()=>{b?.onClick(),_()},w=t({icon:g,variant:v});return p(i,{ref:S,$variant:v,children:[p(s,{$hasIcon:!!w,children:[w&&f(c,{$variant:v,children:f(d,{data:w})}),f(l,{variant:`h6`,color:e.text.static_icons__default.rgba,children:h}),f(r,{icon:m,variant:`ghost`,onClick:_,$variant:v})]}),y&&f(a,{variant:`body_long`,color:e.text.static_icons__secondary.rgba,children:y}),b&&f(n,{variant:`outlined`,onClick:C,$variant:v,children:b.text}),x&&f(o,{role:`progressbar`,$variant:v,$duration:x})]})};export{h as Toast};