@equinor/amplify-component-lib 10.0.6 → 10.1.0

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

@@ -1,6 +1,6 @@
-import * as react134 from "react";
+import * as react135 from "react";
 
 //#region src/atoms/hooks/useLocalStorage.d.ts
-declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react134.Dispatch<react134.SetStateAction<T>>, () => void];
+declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react135.Dispatch<react135.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 react131 from "react";
+import * as react137 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: react131.RefObject<HTMLInputElement | null>;
-  itemRefs: react131.RefObject<(HTMLButtonElement | null)[]>;
+  searchRef: react137.RefObject<HTMLInputElement | null>;
+  itemRefs: react137.RefObject<(HTMLButtonElement | null)[]>;
   selectedValues: T[];
   open: boolean;
   tryingToRemoveItem: T | undefined;

package/dist/molecules/Badge/Badge.styles.js

@@ -1,4 +1,4 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r from"styled-components";const{shape:i}=e,a=e=>({light:{background:`rgba(235, 235, 235, 1)`,color:t.text.static_icons__tertiary.rgba},danger:{background:t.interactive.danger__resting.rgba,color:t.text.static_icons__primary_white.rgba},empty:{background:t.interactive.disabled__fill.rgba,color:t.interactive.disabled__text.rgba},default:{background:t.text.static_icons__tertiary.rgba,color:t.text.static_icons__primary_white.rgba}})[e],o=r.div`
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r from"styled-components";const{shape:i}=e,a=e=>({light:{background:t.ui.background__light_medium.rgba,color:t.text.static_icons__tertiary.rgba},danger:{background:t.interactive.danger__resting.rgba,color:t.text.static_icons__primary_white.rgba},empty:{background:t.interactive.disabled__fill.rgba,color:t.interactive.disabled__text.rgba},default:{background:t.text.static_icons__tertiary.rgba,color:t.text.static_icons__primary_white.rgba}})[e],o=r.div`
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/molecules/OptionalTooltip/OptionalTooltip.d.ts

@@ -1,4 +1,4 @@
-import * as react25 from "react";
+import * as react17 from "react";
 import { TooltipProps } from "@equinor/eds-core-react";
 import * as _floating_ui_utils0 from "@floating-ui/utils";
 
@@ -6,14 +6,14 @@ import * as _floating_ui_utils0 from "@floating-ui/utils";
 type OptionalTooltipProps = {
   textTransform?: string;
 } & TooltipProps;
-declare const OptionalTooltip: react25.ForwardRefExoticComponent<{
+declare const OptionalTooltip: react17.ForwardRefExoticComponent<{
   textTransform?: string;
 } & {
   placement?: _floating_ui_utils0.Placement;
-  title?: react25.ReactNode;
+  title?: react17.ReactNode;
   children: React.ReactElement & React.RefAttributes<HTMLElement>;
   enterDelay?: number;
   portalContainer?: HTMLElement;
-} & Omit<react25.HTMLAttributes<HTMLDivElement>, "title"> & react25.RefAttributes<HTMLDivElement>>;
+} & Omit<react17.HTMLAttributes<HTMLDivElement>, "title"> & react17.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { OptionalTooltip, OptionalTooltipProps };

package/dist/molecules/ProfileAvatar/ProfileAvatar.d.ts

@@ -1,4 +1,4 @@
-import * as react37 from "react";
+import * as react21 from "react";
 
 //#region src/molecules/ProfileAvatar/ProfileAvatar.d.ts
 interface ProfileAvatarProps {
@@ -7,6 +7,6 @@ interface ProfileAvatarProps {
   size?: 'small' | 'small-medium' | 'medium' | 'large' | 'x-large' | number;
   disabled?: boolean;
 }
-declare const ProfileAvatar: react37.ForwardRefExoticComponent<ProfileAvatarProps & react37.RefAttributes<HTMLDivElement>>;
+declare const ProfileAvatar: react21.ForwardRefExoticComponent<ProfileAvatarProps & react21.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ProfileAvatar, ProfileAvatarProps };

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

@@ -1,7 +1,7 @@
 import { EditorPanel, ImageExtensionFnProps, RichTextEditorFeatures } from "../RichTextEditor.types.js";
 import { MenuButtonProps } from "./MenuButton.js";
 import { AddImageProps } from "./AddImageButton.js";
-import * as react29 from "react";
+import * as react31 from "react";
 import { FC } from "react";
 import * as styled_components0 from "styled-components";
 import { Editor } from "@tiptap/react";
@@ -14,10 +14,10 @@ interface MenuBarProps extends Pick<ImageExtensionFnProps, 'onImageUpload'> {
 }
 declare const AmplifyBar: FC<MenuBarProps>;
 declare const EditorMenu: {
-  Bar: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react29.DetailedHTMLProps<react29.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-  Bars: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react29.DetailedHTMLProps<react29.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-  Button: react29.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & react29.RefAttributes<HTMLButtonElement>>;
-  Section: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react29.DetailedHTMLProps<react29.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+  Bar: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react31.DetailedHTMLProps<react31.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+  Bars: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react31.DetailedHTMLProps<react31.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+  Button: react31.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & react31.RefAttributes<HTMLButtonElement>>;
+  Section: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react31.DetailedHTMLProps<react31.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
   AddImageButton: FC<AddImageProps>;
 };
 declare const EditorText: {

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

@@ -2,16 +2,16 @@ import { EditorStylingProps, RichTextContentProps } from "./RichTextEditor.style
 import { EditorProviderProps } from "./EditorProvider.js";
 import { MenuBarProps } from "./MenuBar/MenuBar.js";
 import { RichTextEditor } from "./RichTextEditor.js";
-import * as react17 from "react";
+import * as react23 from "react";
 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_components_dist_types0.Substitute<react17.DetailedHTMLProps<react17.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EditorStylingProps>> & string;
-  Provider: react17.FC<EditorProviderProps>;
-  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<Omit<_tiptap_react0.EditorContentProps, "ref"> & react17.RefAttributes<HTMLDivElement>, RichTextContentProps>> & string & Omit<react17.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react17.RefAttributes<HTMLDivElement>>, keyof react17.Component<any, {}, any>>;
-  Bar: react17.FC<MenuBarProps>;
+  Styling: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<react23.DetailedHTMLProps<react23.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EditorStylingProps>> & string;
+  Provider: react23.FC<EditorProviderProps>;
+  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<Omit<_tiptap_react0.EditorContentProps, "ref"> & react23.RefAttributes<HTMLDivElement>, RichTextContentProps>> & string & Omit<react23.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react23.RefAttributes<HTMLDivElement>>, keyof react23.Component<any, {}, any>>;
+  Bar: react23.FC<MenuBarProps>;
 };
 //#endregion
 export { RichText };

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

@@ -1,4 +1,4 @@
-import * as react96 from "react";
+import * as react94 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: react96.ForwardRefExoticComponent<RadioProps$1 & react96.RefAttributes<HTMLInputElement>>;
+declare const Radio$1: react94.ForwardRefExoticComponent<RadioProps$1 & react94.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 react94 from "react";
+import * as react96 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: react94.ForwardRefExoticComponent<SwitchProps$1 & react94.RefAttributes<HTMLInputElement>>;
+declare const Switch$1: react96.ForwardRefExoticComponent<SwitchProps$1 & react96.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

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_runtime6 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_runtime6.JSX.Element;
 //#endregion
 export { Filter };

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_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 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_runtime4.JSX.Element;
+}: QuickFilterProps<T>): react_jsx_runtime5.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_runtime4 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_runtime4.JSX.Element;
 //#endregion
 export { SortMenu };

package/dist/organisms/ReleaseNotesPage/ReleaseNotesPage.js

@@ -1 +1 @@
-import{TableOfContentsProvider as e}from"../../providers/TableOfContentsProvider.js";import{TableOfContents as t}from"../TableOfContents/TableOfContents.js";import{useFilteredReleaseNotes as n}from"./hooks/useFilteredReleaseNotes.js";import{extractYearsData as r,monthValueToString as i,yearId as a}from"./ReleaseNotesPage.utils.js";import{ReleasePosts as o}from"./ReleasePosts/ReleasePosts.js";import{ReleaseNoteFilter as s}from"./ReleaseNoteFilter.js";import{Container as c,StickyRightSide as l}from"./ReleaseNotesPage.styles.js";import{useMemo as u}from"react";import{Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=()=>{let{data:m}=n();return f(e,{items:u(()=>{let e=[];for(let t of r(m))e.push({value:a(t.value),label:t.label,children:t.months.map(e=>({label:e.label,value:i(e.value)}))});return e},[m]),children:p(c,{children:[f(d,{variant:`h1`,bold:!0,children:`Release Notes`}),p(`section`,{children:[f(s,{}),f(o,{})]}),f(l,{children:f(t,{onlyShowSelectedChildren:!1,variant:`border`})})]})})};export{m as ReleaseNotesPage};
+import{TableOfContentsProvider as e}from"../../providers/TableOfContentsProvider.js";import{TableOfContents as t}from"../TableOfContents/TableOfContents.js";import{useFilteredReleaseNotes as n}from"./hooks/useFilteredReleaseNotes.js";import{extractYearsData as r,monthValueToString as i,yearId as a}from"./ReleaseNotesPage.utils.js";import{ReleasePosts as o}from"./ReleasePosts/ReleasePosts.js";import{ReleaseNoteFilter as s}from"./ReleaseNoteFilter.js";import{Container as c,StickyRightSide as l}from"./ReleaseNotesPage.styles.js";import{useMemo as u}from"react";import{Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=()=>{let{data:m}=n();return f(e,{items:u(()=>{let e=[];for(let t of r(m))e.push({value:a(t.value),label:t.label,children:t.months.map(e=>({label:e.label,value:i(e.value)}))});return e},[m]),children:p(c,{children:[f(d,{variant:`h1`,bold:!0,children:`Release Notes`}),p(`section`,{children:[f(s,{}),f(o,{})]}),f(l,{children:f(t,{onlyShowSelectedChildren:!1})})]})})};export{m as ReleaseNotesPage};

package/dist/organisms/TableOfContents/TableOfContents.constants.js

@@ -1 +1 @@
-import{spacings as e}from"../../atoms/style/spacings.js";const t={buttons:`39px`,border:`34px`,borderHorizontal:`34px`},n={buttons:e.x_small,border:`0`,borderHorizontal:`0`};export{n as GAP,t as HEIGHT};
+const e=`34px`;export{e as VERTICAL_ITEM_HEIGHT};

package/dist/organisms/TableOfContents/TableOfContents.d.ts

@@ -1,11 +1,10 @@
-import { TableOfContentsVariants } from "./TableOfContents.types.js";
+import { TableOfContentsMode } from "./TableOfContents.types.js";
 import { FC } from "react";
 
 //#region src/organisms/TableOfContents/TableOfContents.d.ts
 interface TableOfContentsProps {
-  variant?: TableOfContentsVariants;
+  mode?: TableOfContentsMode;
   onlyShowSelectedChildren?: boolean;
-  isLink?: boolean;
 }
 declare const TableOfContents: FC<TableOfContentsProps>;
 //#endregion

package/dist/organisms/TableOfContents/TableOfContents.js

@@ -1 +1 @@
-import{getValues as e}from"../../providers/TableOfContentsProvider.utils.js";import{useTableOfContents as t}from"../../providers/TableOfContentsProvider.js";import{BorderItemsContainer as n,BorderItemsHorizontalContainer as r,TableOfContentsContainer as i}from"./TableOfContents.styles.js";import{TableOfContentsItem as a}from"./TableOfContentsItem.js";import{useMemo as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=({variant:c=`buttons`,onlyShowSelectedChildren:l=!0,isLink:u=!1})=>{let{items:d,selected:f}=t(),p=o(()=>{for(let[t,n]of d.entries()){let r=e([],n);if(n.value===f||f&&r.includes(f))return t}return-1},[d,f]);return c===`border`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(n,{"data-testid":`border-items-container-${e.value}`,$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,onlyShowSelectedChildren:l,isLink:u,...e})},e.value))}):c===`borderHorizontal`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(r,{$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u})},e.value))}):s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,children:d.map(e=>s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u},e.value))})};export{c as TableOfContents};
+import{getValues as e}from"../../providers/TableOfContentsProvider.utils.js";import{useTableOfContents as t}from"../../providers/TableOfContentsProvider.js";import{Tabs as n}from"../../molecules/Tabs/Tabs.js";import{HorizontalItemsContainer as r,TableOfContentsContainer as i,VerticalItemsContainer as a}from"./TableOfContents.styles.js";import{TableOfContentsItem as o}from"./TableOfContentsItem.js";import{useMemo as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=({mode:l=`vertical`,onlyShowSelectedChildren:u=!0})=>{let{items:d,selected:f,setSelected:p}=t(),m=s(()=>{for(let[t,n]of d.entries()){let r=e([],n);if(n.value===f||f&&r.includes(f))return t}return-1},[d,f]);return l===`horizontal`?c(r,{children:c(n,{selected:f,onChange:e=>{e&&p(e)},options:d})}):c(i,{className:`page-menu`,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>c(a,{"data-testid":`border-items-container-${e.value}`,$index:t,$activeIndex:m,"aria-selected":m===t,children:c(o,{onlyShowSelectedChildren:u,...e})},e.value))})};export{l as TableOfContents};

package/dist/organisms/TableOfContents/TableOfContents.styles.js

@@ -1,10 +1,10 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{animation as t}from"../../atoms/style/animation.js";import{spacings as n}from"../../atoms/style/spacings.js";import{HEIGHT as r}from"./TableOfContents.constants.js";import i,{css as a}from"styled-components";import{motion as o}from"framer-motion";import{Link as s}from"@tanstack/react-router";const{colors:c,shape:l}=e,u=i.button`
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{VERTICAL_ITEM_HEIGHT as r}from"./TableOfContents.constants.js";import i,{css as a}from"styled-components";import{motion as o}from"framer-motion";const s=i.button`
   &:hover {
-    background: ${c.interactive.primary__hover_alt.rgba};
+    background: ${t.interactive.primary__hover_alt.rgba};
   }
   ${({$active:e})=>e?``:a`
       &:focus:not(:hover) {
-        outline: 2px dashed ${c.interactive.focus.rgba};
+        outline: 2px dashed ${t.interactive.focus.rgba};
         outline-offset: -4px;
       }
     `}
@@ -13,10 +13,10 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
   grid-template-columns: auto 1fr;
   align-items: center;
   gap: ${n.small};
-  color: ${c.text.static_icons__default.rgba};
+  color: ${t.text.static_icons__default.rgba};
   cursor: pointer;
   padding: 0 ${n.medium};
-  height: ${({$variant:e})=>r[e]};
+  min-height: ${r};
   transition: background 200ms;
   > span {
     display: flex;
@@ -27,104 +27,46 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
     font-weight: 700;
     font-size: 14px;
   }
-  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
-          border-radius: ${l.corners.borderRadius};
-          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
-        `;case`border`:return a`
-          > span {
-            font-weight: ${t?700:500};
-            &:after {
-              height: 0;
-              display: block;
-              content: attr(title);
-              font-weight: 700;
-              font-size: 14px;
-              overflow: hidden;
-              visibility: hidden;
-            }
-          }
-        `}}}
+  ${({$active:e})=>a`
+      > span {
+        font-weight: ${e?700:500};
+        &:after {
+          height: 0;
+          display: block;
+          content: attr(title);
+          font-weight: 700;
+          font-size: 14px;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+    `}
   ${({$active:e})=>!e&&a`
       &:disabled {
-        color: ${c.interactive.disabled__text.rgba};
+        color: ${t.interactive.disabled__text.rgba};
         cursor: not-allowed;
       }
     `}
-`,d=i(s)`
-  text-decoration: none;
-  &:focus,
-  &:hover,
-  &:active {
-    text-decoration: none;
-    color: ${c.text.static_icons__default.rgba};
-  }
-  &:hover {
-    background: ${c.interactive.primary__hover_alt.rgba};
-  }
-  &:focus-visible {
-    color: ${c.text.static_icons__default.rgba};
-    outline: 2px dashed ${c.interactive.focus.rgba};
-    outline-offset: -4px;
-  }
-
-  ${({$disabled:e,$active:t})=>e&&!t&&a`
-      color: ${c.interactive.disabled__text.rgba} !important;
-      &:hover {
-        cursor: not-allowed;
+`,c=i.div`
+  button[role='tab'] {
+    .count {
+      background: ${t.ui.background__light_medium.rgba};
+      padding: 0 ${n.x_small};
+      > span {
+        color: ${t.text.static_icons__tertiary.rgba};
       }
-    `};
+    }
 
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  gap: ${n.small};
-  color: ${c.text.static_icons__default.rgba};
-  cursor: pointer;
-  padding: 0 ${n.medium};
-  height: ${({$variant:e})=>r[e]};
-  transition: background 200ms;
-
-  > span {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    text-align: left;
-    font-family: 'Equinor', sans-serif;
-    font-weight: 700;
-    font-size: 14px;
-  }
-  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
-          border-radius: ${l.corners.borderRadius};
-          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
-        `;case`border`:return a`
-          > span {
-            font-weight: ${t?700:500};
-            &:after {
-              height: 0;
-              display: block;
-              content: attr(title);
-              font-weight: 700;
-              font-size: 14px;
-              overflow: hidden;
-              visibility: hidden;
-            }
-          }
-        `}}}
-`,f=i.div`
-  display: flex;
-  position: relative;
-  &:after {
-    position: absolute;
-    left: 0;
-    bottom: ${({$activeIndex:e,$index:t})=>`${(e-t)*100}%`};
-    content: '';
-    width: 100%;
-    height: 2px;
-    background: ${c.interactive.primary__resting.rgba};
-    z-index: 100;
+    &:disabled {
+      .count {
+        background: ${t.interactive.disabled__fill.rgba};
+        > span {
+          color: ${t.interactive.disabled__text.rgba};
+        }
+      }
+    }
   }
-`,p=i.div`
+`,l=i.div`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -136,57 +78,33 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
     content: '';
     width: 2px;
     height: 100%;
-    background: ${c.interactive.primary__resting.rgba};
+    background: ${t.interactive.primary__resting.rgba};
     z-index: 100;
-    transition: top ${t.transitionMS};
+    transition: top ${e.transitionMS};
   }
-`,m=i(o.div)`
+`,u=i(o.div)`
   display: flex;
   flex-direction: column;
   position: relative;
-  ${({$variant:e})=>a`
-    min-height: ${r[e]};
-    ${e===`buttons`&&`gap: ${n.x_small};`}
-  `}
-`,h=i(o.div)`
+  min-height: ${r};
+`,d=i(o.div)`
   display: flex;
-  flex-direction: ${({$variant:e})=>e===`borderHorizontal`?`row`:`column`};
+  flex-direction: column;
   height: fit-content;
   overflow: hidden;
-  ${({$variant:e})=>{switch(e){case`buttons`:return`gap: ${n.small};`;case`border`:return a`
-          &:after {
-            position: absolute;
-            left: 0;
-            content: '';
-            width: 2px;
-            height: 100%;
-            background: ${c.ui.background__medium.rgba};
-          }
-        `;case`borderHorizontal`:return a`
-          &:after {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            content: '';
-            width: 100%;
-            height: 2px;
-            background: ${c.ui.background__medium.rgba};
-          }
-        `}}}
-`,g=i(o.div)`
+  &:after {
+    position: absolute;
+    left: 0;
+    content: '';
+    width: 2px;
+    height: 100%;
+    background: ${t.ui.background__medium.rgba};
+  }
+`,f=i(o.div)`
   display: flex;
   flex-direction: column;
-  ${({$shouldShowChildren:e})=>e?null:a`
-          visibility: hidden;
-          height: 0 !important;
-        `}
-  > div > button, a {
-    ${({$variant:e})=>{switch(e){case`buttons`:return a`
-            margin-left: ${n.medium};
-          `;case`border`:return a`
-            padding-left: ${n.x_large};
-          `}}}
+  > div > button,
+  a {
+    padding-left: ${n.x_large};
   }
-
-  ${({$variant:e})=>e===`buttons`&&`gap:${n.x_small};`}
-`;export{p as BorderItemsContainer,f as BorderItemsHorizontalContainer,u as Button,g as ChildContainer,d as Link,h as TableOfContentsContainer,m as TableOfContentsItemContainer};
+`;export{s as Button,f as ChildContainer,c as HorizontalItemsContainer,d as TableOfContentsContainer,u as TableOfContentsItemContainer,l as VerticalItemsContainer};

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

@@ -1,4 +1,4 @@
 //#region src/organisms/TableOfContents/TableOfContents.types.d.ts
-type TableOfContentsVariants = 'buttons' | 'border' | 'borderHorizontal';
+type TableOfContentsMode = 'vertical' | 'horizontal';
 //#endregion
-export { TableOfContentsVariants };
+export { TableOfContentsMode };

package/dist/organisms/TableOfContents/TableOfContentsItem.js

@@ -1,5 +1 @@
-import{useTableOfContents as e}from"../../providers/TableOfContentsProvider.js";import{Badge as t}from"../../molecules/Badge/Badge.js";import{GAP as n,HEIGHT as r}from"./TableOfContents.constants.js";import{Button as i,ChildContainer as a,Link as o,TableOfContentsItemContainer as s}from"./TableOfContents.styles.js";import{useEffect as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({label:m,value:h,count:g,disabled:_=!1,children:v,variant:y,onlyShowSelectedChildren:b,isLink:x=!1})=>{let{isActive:S,selected:C,setSelected:w}=e(),T=u(void 0);c(()=>{T.current===void 0&&(T.current=0)},[]);let E=l(()=>S({label:m,value:h,children:v})&&!_,[v,_,S,m,h]),D=e=>{_&&e&&e.preventDefault(),!_&&C!==h&&w(h)},O=b&&E||!b;return f(s,{$variant:y,layoutScroll:!0,layoutRoot:!0,children:[x?f(o,{$active:C===h,$variant:y,onClick:e=>D(e),to:_?``:`#${h}`,$disabled:_,tabIndex:_?-1:0,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}):f(i,{$active:C===h,$variant:y,onClick:()=>D(),disabled:_,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}),v&&d(a,{$shouldShowChildren:O,$variant:y,initial:{height:T.current},animate:{height:`
-                  calc(
-                    (${O?r[y]:`0`} * ${v.length})
-                    ${y===`buttons`?`+ (${n.buttons} * ${v.length-1})`:``}
-                  )`},transition:{duration:.4},children:v.map(e=>d(p,{onlyShowSelectedChildren:b,variant:y,...e,isLink:x},e.value))})]})};export{p as TableOfContentsItem};
+import{useTableOfContents as e}from"../../providers/TableOfContentsProvider.js";import{Badge as t}from"../../molecules/Badge/Badge.js";import{Button as n,ChildContainer as r,TableOfContentsItemContainer as i}from"./TableOfContents.styles.js";import{useMemo as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{AnimatePresence as c}from"framer-motion";const l=({label:u,value:d,count:f,disabled:p=!1,children:m,onlyShowSelectedChildren:h})=>{let{isActive:g,selected:_,setSelected:v}=e(),y=a(()=>g({label:u,value:d,children:m})&&!p,[m,p,g,u,d]);return s(i,{layoutScroll:!0,layoutRoot:!0,children:[s(n,{$active:_===d,onClick:()=>{!p&&_!==d&&v(d)},disabled:p,children:[o(`span`,{title:u,children:u}),f!==void 0&&o(t,{variant:p?`empty`:`light`,value:f})]}),o(c,{children:m&&(h&&y||!h)&&o(r,{initial:{height:0},animate:{height:`auto`},exit:{height:0},transition:{duration:.4},children:m.map(e=>o(l,{onlyShowSelectedChildren:h,...e},e.value))})})]})};export{l as TableOfContentsItem};

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

@@ -1,7 +1,7 @@
 import { ToggleGroup } from "./ToggleGroup.types.js";
-import * as react138 from "react";
+import * as react133 from "react";
 
 //#region src/organisms/ToggleGroup/ToggleGroup.d.ts
-declare const ToggleGroup$1: react138.ForwardRefExoticComponent<ToggleGroup & react138.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroup$1: react133.ForwardRefExoticComponent<ToggleGroup & react133.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ToggleGroup$1 as ToggleGroup };

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

@@ -1,9 +1,9 @@
 import { ToggleGroupOption } from "./ToggleGroup.types.js";
-import * as react136 from "react";
+import * as react131 from "react";
 import { HTMLAttributes } from "react";
 
 //#region src/organisms/ToggleGroup/ToggleGroupOption.d.ts
 type ToggleGroupOptionProps = ToggleGroupOption & Omit<HTMLAttributes<HTMLButtonElement>, 'onToggle' | 'disabled'>;
-declare const ToggleGroupOption$1: react136.ForwardRefExoticComponent<ToggleGroupOptionProps & react136.RefAttributes<HTMLButtonElement>>;
+declare const ToggleGroupOption$1: react131.ForwardRefExoticComponent<ToggleGroupOptionProps & react131.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ToggleGroupOption$1 as ToggleGroupOption };

package/dist/organisms/TopBar/Notifications/NotificationProvider.d.ts

@@ -1,4 +1,4 @@
-import * as react133 from "react";
+import * as react139 from "react";
 import { Dispatch, FC, ReactNode, SetStateAction } from "react";
 
 //#region src/organisms/TopBar/Notifications/NotificationProvider.d.ts
@@ -6,7 +6,7 @@ interface NotificationContext {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   isOpen: boolean;
 }
-declare const NotificationContext: react133.Context<NotificationContext | undefined>;
+declare const NotificationContext: react139.Context<NotificationContext | undefined>;
 declare const useNotification: () => NotificationContext;
 //#endregion
 export { useNotification };

package/dist/providers/AuthProvider/AuthProviderInner.js

@@ -1 +1 @@
-import{auth as e,environment as t}from"../../atoms/utils/auth_environment.js";import{FullPageSpinner as n}from"../../molecules/FullPageSpinner/FullPageSpinner.js";import{MissingAccessToApp as r}from"../../organisms/Status/collections/MissingAccessToApp.js";import{useEffect as i,useRef as a,useState as o}from"react";import{useMsal as s,useMsalAuthentication as c}from"@azure/msal-react";import{InteractionRequiredAuthError as l,InteractionType as u}from"@azure/msal-browser";import{jsx as d}from"react/jsx-runtime";import{jwtDecode as f}from"jwt-decode";const{GRAPH_ENDPOINTS:p,GRAPH_REQUESTS_LOGIN:m,GRAPH_REQUESTS_PHOTO:h,GRAPH_REQUESTS_BACKEND:g,fetchMsGraph:_,isInIframe:v}=e,{getApiScope:y}=t,b=({children:e,account:t,setAccount:b,setPhoto:x,setRoles:S,authState:C,setAuthState:w,withoutLoader:T,loadingComponent:E,unauthorizedComponent:D,withoutBackend:O})=>{let{instance:k,accounts:A,inProgress:j}=s(),{login:M,result:N,error:P,acquireToken:F}=c(u.Silent,m),[I,L]=o(!1),R=a(!1);return i(()=>{I||(async()=>{console.log(`[AuthProvider] Initializing`),await k.initialize(),console.log(`[AuthProvider] Finished initializing`),L(!0)})().catch(e=>{console.error(`[AuthProvider] Error during initialization`,e)})},[k,I]),i(()=>{I&&(P instanceof l&&!v()&&C!==`unauthorized`?(console.error(P),console.log(`[AuthProvider] No account found, need to login via. redirect`),M(u.Redirect,m).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):N?.account&&!t?(console.log(`[AuthProvider] Found account in useMsalAuth result, setting that one as active`),k.setActiveAccount(N.account),b(N.account)):A.length>0&&!t?(console.log(`[AuthProvider] Found account in accounts array, setting that one as active`),k.setActiveAccount(A[0]),b(A[0])):P&&console.error(`[AuthProvider] Unexpected error:`,P))},[t,A,P,k,I,M,N,b,C]),i(()=>{if(!t||!I||R.current||j!==`none`)return;R.current=!0;let e=async()=>{try{let e=await F(u.Silent,h);if(e){let t=await _(p.PHOTO,e.accessToken);if(t.status===404)return null;let n=await t.blob();x((window.URL??window.webkitURL).createObjectURL(n))}}catch(e){console.error(e)}},n=async()=>{try{let e=await F(u.Silent,g(y(import.meta.env.VITE_API_SCOPE)));if(console.log(`[AuthProvider] Successfully acquired token`),e&&e.accessToken){console.log(`[AuthProvider] Decoding token`);let t=f(e.accessToken);if(console.log(`[AuthProvider] Token was valid`),t.roles)console.log(`[AuthProvider] Found roles`),S(t.roles);else throw Error(`Could not find roles in token`);w(`authorized`)}}catch(e){console.error(`[AuthProvider] Token error when trying to get roles!`,e),w(`unauthorized`)}};(async()=>{await e(),O?w(`authorized`):await n()})()},[t,F,P,I,j,w,x,S,O]),C===`unauthorized`?D??d(r,{}):T?e:C===`loading`||t===void 0?E??d(n,{variant:`application`}):e};export{b as AuthProviderInner};
+import{auth as e,environment as t}from"../../atoms/utils/auth_environment.js";import{FullPageSpinner as n}from"../../molecules/FullPageSpinner/FullPageSpinner.js";import{MissingAccessToApp as r}from"../../organisms/Status/collections/MissingAccessToApp.js";import{useEffect as i,useRef as a,useState as o}from"react";import{useMsal as s,useMsalAuthentication as c}from"@azure/msal-react";import{BrowserAuthError as l,BrowserAuthErrorCodes as u,InteractionRequiredAuthError as d,InteractionType as f}from"@azure/msal-browser";import{jsx as p}from"react/jsx-runtime";import{jwtDecode as m}from"jwt-decode";const{GRAPH_ENDPOINTS:h,GRAPH_REQUESTS_LOGIN:g,GRAPH_REQUESTS_PHOTO:_,GRAPH_REQUESTS_BACKEND:v,fetchMsGraph:y,isInIframe:b}=e,{getApiScope:x}=t,S=({children:e,account:t,setAccount:S,setPhoto:C,setRoles:w,authState:T,setAuthState:E,withoutLoader:D,loadingComponent:O,unauthorizedComponent:k,withoutBackend:A})=>{let{instance:j,accounts:M,inProgress:N}=s(),{login:P,result:F,error:I,acquireToken:L}=c(f.Silent,g),[R,z]=o(!1),B=a(!1);return i(()=>{R||(async()=>{console.log(`[AuthProvider] Initializing`),await j.initialize(),console.log(`[AuthProvider] Finished initializing`),z(!0)})().catch(e=>{console.error(`[AuthProvider] Error during initialization`,e)})},[j,R]),i(()=>{R&&(I instanceof d&&!b()&&T!==`unauthorized`?(console.error(I),console.log(`[AuthProvider] No account found, need to login via. redirect`),P(f.Redirect,g).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):F?.account&&!t?(console.log(`[AuthProvider] Found account in useMsalAuth result, setting that one as active`),j.setActiveAccount(F.account),S(F.account)):M.length>0&&!t?(console.log(`[AuthProvider] Found account in accounts array, setting that one as active`),j.setActiveAccount(M[0]),S(M[0])):I instanceof l&&I.errorCode===u.monitorWindowTimeout?(console.error(I),console.log(`[AuthProvider] Trying to login again via. redirect due to monitor window timeout`),P(f.Redirect,g).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):I&&console.error(`[AuthProvider] Unexpected error:`,I))},[t,M,I,j,R,P,F,S,T]),i(()=>{if(!t||!R||B.current||N!==`none`)return;B.current=!0;let e=async()=>{try{let e=await L(f.Silent,_);if(e){let t=await y(h.PHOTO,e.accessToken);if(t.status===404)return null;let n=await t.blob();C((window.URL??window.webkitURL).createObjectURL(n))}}catch(e){console.error(e)}},n=async()=>{try{let e=await L(f.Silent,v(x(import.meta.env.VITE_API_SCOPE)));if(console.log(`[AuthProvider] Successfully acquired token`),e&&e.accessToken){console.log(`[AuthProvider] Decoding token`);let t=m(e.accessToken);if(console.log(`[AuthProvider] Token was valid`),t.roles)console.log(`[AuthProvider] Found roles`),w(t.roles);else throw Error(`Could not find roles in token`);E(`authorized`)}}catch(e){console.error(`[AuthProvider] Token error when trying to get roles!`,e),E(`unauthorized`)}};(async()=>{await e(),A?E(`authorized`):await n()})()},[t,L,I,R,N,E,C,w,A]),T===`unauthorized`?k??p(r,{}):D?e:T===`loading`||t===void 0?O??p(n,{variant:`application`}):e};export{S as AuthProviderInner};

package/package.json

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