@equinor/amplify-component-lib 11.0.3 → 11.0.5

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

@@ -1,4 +1,4 @@
-import * as react1 from "react";
+import * as react0 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: react1.ForwardRefExoticComponent<ExpandingIconButtonProps & react1.RefAttributes<HTMLDivElement>>;
+declare const ExpandingIconButton: react0.ForwardRefExoticComponent<ExpandingIconButtonProps & react0.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ExpandingIconButton };

package/dist/deprecated/IconToggleButton.d.ts

@@ -1,4 +1,4 @@
-import * as react3 from "react";
+import * as react1 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: react3.ForwardRefExoticComponent<IconToggleButtonProps & react3.RefAttributes<HTMLButtonElement>>;
+declare const IconToggleButton: react1.ForwardRefExoticComponent<IconToggleButtonProps & react1.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconToggleButton };

package/dist/molecules/Banner/Banner.styles.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 r from"styled-components";const i={info:{background:e.interactive.secondary__highlight.rgba,fill:e.interactive.secondary__resting.rgba},warning:{background:e.interactive.warning__highlight.rgba,fill:e.interactive.warning__resting.rgba},danger:{background:e.interactive.danger__highlight.rgba,fill:e.interactive.danger__text.rgba}},a={comfortable:{padding:t.medium_small,gap:t.medium},compact:{padding:`${t.x_small} ${t.small}`,gap:t.medium_small}},o=r.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 from"styled-components";const i={info:{background:e.ui.background__info.rgba,fill:e.interactive.secondary__resting.rgba},warning:{background:e.ui.background__warning.rgba,fill:e.interactive.warning__text.rgba},danger:{background:e.ui.background__danger.rgba,fill:e.interactive.danger__text.rgba}},a={comfortable:{padding:t.medium_small,gap:t.medium},compact:{padding:`${t.x_small} ${t.small}`,gap:t.medium_small}},o=r.div`
   height: fit-content;
   display: grid;
   grid-template-columns: auto 1fr;

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 react5 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: react5.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
+declare const DateRangePicker$1: react9.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
   variant?: Variants;
   meta?: string;
   loading?: boolean;
-} & react5.RefAttributes<HTMLDivElement>>;
+} & react9.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DateRangePicker$1 as DateRangePicker, DateRangePickerProps$1 as DateRangePickerProps };

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

@@ -1,10 +1,10 @@
-import * as react41 from "react";
+import * as react39 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: react41.ForwardRefExoticComponent<SearchProps$1 & react41.RefAttributes<HTMLInputElement>>;
+declare const Search$1: react39.ForwardRefExoticComponent<SearchProps$1 & react39.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Search$1 as Search };

package/dist/molecules/Select/SearchBar.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{getVariantIcon as t}from"../../atoms/utils/forms.js";import{SkeletonField as n}from"../Skeleton/SkeletonField.js";import{ClearButton as r,ComboBoxChip as i,Container as a,HelperWrapper as o,PlaceholderText as s,Section as c,ValueText as l,Wrapper as u}from"./Select.styles.js";import{Icon as d}from"../index.js";import{useMemo as f,useRef as p}from"react";import{Label as m}from"@equinor/eds-core-react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{arrow_drop_down as _,arrow_drop_up as v,clear as y}from"@equinor/eds-icons";const b=({props:b,anchorRef:x,handleOnClear:S,handleOnSearchChange:C,handleOnSearchKeyDown:w,handleToggleOpen:T,search:E,selectedValues:D,handleOnOpen:O,handleOnRemoveItem:k,open:A,searchRef:j,tryingToRemoveItem:M})=>{let{clearable:N=!0,loading:P=!1,disabled:F=!1,lightBackground:I=!1,placeholder:L=`Select...`,label:R,helperText:z,showHelperIcon:B=!0,id:V=`amplify-combobox-${R}`,variant:H,"data-testid":U,mode:W=`menu`}=b,G=p(`${Math.max(40,Math.random()*80)}%`),K=f(()=>!!z,[z]),q=f(()=>{if(B)return t(H)},[B,H]),J=f(()=>{if(`value`in b&&b.value&&`customValueComponent`in b&&b.customValueComponent)return h(b.customValueComponent,{item:b.value});if(`value`in b&&b.value)return h(l,{children:b.value.label});if(`showSelectedAsText`in b&&b.showSelectedAsText){let e=b.items?b.items.length:b.groups.flatMap(e=>e.items).length;return h(l,{children:typeof b.showSelectedAsText==`function`?b.showSelectedAsText({selectedAmount:D.length,totalAmount:e}):`${D.length}/${e} Selected`})}else return D.map(e=>`customValueComponent`in b&&b.customValueComponent?h(b.customValueComponent,{item:e,onDelete:()=>k(e),tryingToRemove:M!==void 0&&M.value===e.value},e.value):h(i,{"data-testid":`amplify-combobox-chip`,className:`amplify-combo-box-chip`,onDelete:()=>k(e),$tryingToRemove:M?.value===e.value,$lightBackground:I,children:e.label},e.value))},[D,M,I,b,k]);return g(u,{$showBackgroundColor:W===`persistent`,children:[g(a,{"data-testid":U||`combobox-container`,ref:x,onClick:O,"aria-expanded":A,$variant:H,$loading:P,$lightBackground:I,children:[g(c,{children:[!P&&E===``&&D.length===0&&h(s,{children:L}),(E===``&&`value`in b||`values`in b&&D.length>0&&(!b.showSelectedAsText||b.showSelectedAsText&&E===``))&&!P&&J,h(`input`,{id:V,disabled:F||P,ref:j,type:`search`,role:`combobox`,value:E,autoComplete:`off`,onChange:C,onKeyDownCapture:w}),P&&h(n,{role:`progressbar`,style:{width:G.current,left:0,top:`50%`,transform:`translateY(-50%)`},"data-testid":`select-loading-skeleton`})]}),W===`menu`&&h(d,{onClick:T,data:A?v:_,color:P?e.interactive.disabled__fill.rgba:e.interactive.primary__resting.rgba}),N&&D.length>0&&!P&&h(r,{id:`clear`,variant:`ghost_icon`,onClick:S,"data-testid":`clearBtn`,$rightPadding:W===`menu`,disabled:F,children:h(d,{data:y,size:18})})]}),K&&g(o,{$borderBottom:W===`persistent`,$variant:F?`disabled`:H,children:[q&&h(d,{data:q,size:16}),h(m,{label:z,htmlFor:V})]})]})};export{b as SearchBar};
+import{colors as e}from"../../atoms/style/colors.js";import{getVariantIcon as t}from"../../atoms/utils/forms.js";import{SkeletonField as n}from"../Skeleton/SkeletonField.js";import{ClearButton as r,ComboBoxChip as i,Container as a,HelperWrapper as o,PlaceholderText as s,Section as c,ValueText as l,Wrapper as u}from"./Select.styles.js";import{Icon as d}from"../index.js";import{useMemo as f,useRef as p}from"react";import{Label as m}from"@equinor/eds-core-react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{arrow_drop_down as _,arrow_drop_up as v,clear as y}from"@equinor/eds-icons";const b=({props:b,anchorRef:x,handleOnClear:S,handleOnSearchChange:C,handleOnSearchKeyDown:w,handleToggleOpen:T,search:E,selectedValues:D,handleOnOpen:O,handleOnRemoveItem:k,open:A,searchRef:j,tryingToRemoveItem:M})=>{let{clearable:N=!0,loading:P=!1,disabled:F=!1,lightBackground:I=!1,placeholder:L=`Select...`,label:R,helperText:z,showHelperIcon:B=!0,id:V=`amplify-combobox-${R}`,variant:H,"data-testid":U,mode:W=`menu`}=b,G=p(`${Math.max(40,Math.random()*80)}%`),K=f(()=>!!z,[z]),q=f(()=>{if(B)return t(H)},[B,H]),J=f(()=>{if(`value`in b&&b.value&&`customValueComponent`in b&&b.customValueComponent)return h(b.customValueComponent,{item:b.value});if(`value`in b&&b.value)return h(l,{children:b.value.label});if(`showSelectedAsText`in b&&b.showSelectedAsText){let e=b.items?b.items.length:b.groups.flatMap(e=>e.items).length;return h(l,{children:typeof b.showSelectedAsText==`function`?b.showSelectedAsText({selectedAmount:D.length,totalAmount:e}):`${D.length}/${e} Selected`})}else return D.map(e=>`customValueComponent`in b&&b.customValueComponent?h(b.customValueComponent,{item:e,onDelete:()=>k(e),tryingToRemove:M!==void 0&&M.value===e.value},e.value):h(i,{"data-testid":`amplify-combobox-chip`,className:`amplify-combo-box-chip`,onDelete:()=>k(e),$tryingToRemove:M?.value===e.value,$lightBackground:I,children:e.label},e.value))},[D,M,I,b,k]);return g(u,{$showBackgroundColor:W===`persistent`,children:[g(a,{"data-testid":U||`combobox-container`,ref:x,onClick:O,"aria-expanded":A,$variant:H,$loading:P,$lightBackground:I,children:[g(c,{children:[!P&&E===``&&D.length===0&&h(s,{children:L}),(E===``&&`value`in b||`values`in b&&D.length>0&&(!b.showSelectedAsText||b.showSelectedAsText&&E===``))&&!P&&J,h(`input`,{id:V,disabled:F||P,ref:j,type:`search`,role:`combobox`,value:E,autoComplete:`off`,onChange:C,onKeyDownCapture:w,"aria-invalid":H===`error`?!0:void 0}),P&&h(n,{role:`progressbar`,style:{width:G.current,left:0,top:`50%`,transform:`translateY(-50%)`},"data-testid":`select-loading-skeleton`})]}),W===`menu`&&h(d,{onClick:T,data:A?v:_,color:P?e.interactive.disabled__fill.rgba:e.interactive.primary__resting.rgba}),N&&D.length>0&&!P&&h(r,{id:`clear`,variant:`ghost_icon`,onClick:S,"data-testid":`clearBtn`,$rightPadding:W===`menu`,disabled:F,children:h(d,{data:y,size:18})})]}),K&&g(o,{$borderBottom:W===`persistent`,$variant:F?`disabled`:H,children:[q&&h(d,{data:q,size:16}),h(m,{label:z,htmlFor:V})]})]})};export{b as SearchBar};

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

@@ -172,7 +172,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
 `,x=u(c.Item)`
   flex-grow: 1;
   padding-left: 10px;
-  
+
   > div {
     grid-auto-columns: auto;
     justify-content: flex-start;
@@ -186,14 +186,16 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     outline: 2px dashed ${r.interactive.primary__resting.rgba};
   }
 
-    ${({$selected:e})=>e?d`
-            background: ${r.interactive.primary__selected_highlight.rgba};
+  ${({$selected:e})=>e?d`
+          background: ${r.interactive.primary__selected_highlight.rgba};
 
-            &:hover {
-              background: ${r.interactive.primary__selected_hover.rgba};
-            }
-          `:``}}
+          &:hover {
+            background: ${r.interactive.primary__selected_hover.rgba};
+          }
+        `:``}
 `,S=u.div`
+  position: relative;
+  isolation: isolate;
   border: 1px solid ${r.ui.background__heavy.rgba};
   border-radius: ${a.corners.borderRadius};
   overflow: auto;
@@ -202,6 +204,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
 `,C=u.div`
   position: sticky;
   top: 0;
+  z-index: 1;
 `,w=u.button`
   width: 100%;
   display: flex;
@@ -252,7 +255,9 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
 `,j=u.div`
   display: flex;
   align-items: center;
+  gap: ${i.small};
 `,M=u(s)`
   width: 36px;
   height: 36px;
+  flex-shrink: 0;
 `;export{_ as ClearButton,v as ComboBoxChip,h as Container,b as GroupTitle,m as HelperWrapper,p as LabelWrapper,T as MenuItemSpacer,j as MenuItemWrapper,k as NoItemsFoundText,O as NoTagFoundText,S as PersistentComboBoxWrapper,y as PersistentGroupsWrapper,w as PersistentListItem,C as PersistentStickyWrapper,E as PlaceholderText,g as Section,M as SmallButton,A as StyledMenu,x as StyledMenuItem,D as ValueText,f as Wrapper};

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

@@ -1,4 +1,4 @@
-import * as react39 from "react";
+import * as react41 from "react";
 import * as styled_components_dist_types6 from "styled-components/dist/types";
 import * as styled_components_dist_models_Keyframes0 from "styled-components/dist/models/Keyframes";
 
@@ -7,6 +7,6 @@ declare const skeletonBaseloading: styled_components_dist_models_Keyframes0.defa
 interface SkeletonBaseProps {
   $offset?: number;
 }
-declare const SkeletonBase: styled_components_dist_types6.IStyledComponentBase<"web", styled_components_dist_types6.Substitute<react39.DetailedHTMLProps<react39.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonBaseProps>> & string;
+declare const SkeletonBase: styled_components_dist_types6.IStyledComponentBase<"web", styled_components_dist_types6.Substitute<react41.DetailedHTMLProps<react41.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonBaseProps>> & string;
 //#endregion
 export { SkeletonBase, SkeletonBaseProps, skeletonBaseloading };

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

@@ -1,5 +1,5 @@
 import { FilterProps } from "./Filter.types.js";
-import * as react_jsx_runtime11 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_runtime11.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_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime12.JSX.Element;
+}: QuickFilterProps<T>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { QuickFilter };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 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_runtime10.JSX.Element;
+}: SortMenuProps<S>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { SortMenu };

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

@@ -1,4 +1,4 @@
-import * as react137 from "react";
+import * as react129 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: react137.ForwardRefExoticComponent<(SideBarWithCreate | BaseSideBar) & react137.RefAttributes<HTMLDivElement>>;
+declare const SideBar: react129.ForwardRefExoticComponent<(SideBarWithCreate | BaseSideBar) & react129.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SideBar };

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

@@ -1,10 +1,10 @@
-import * as react131 from "react";
+import * as react137 from "react";
 
 //#region src/organisms/Status/Action.d.ts
 interface ActionProps {
   onClick: () => void;
   buttonText?: string;
 }
-declare const Action: react131.ForwardRefExoticComponent<ActionProps & react131.RefAttributes<HTMLButtonElement>>;
+declare const Action: react137.ForwardRefExoticComponent<ActionProps & react137.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Action };

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

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

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

@@ -1,4 +1,4 @@
-import * as react135 from "react";
+import * as react141 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: react141.ForwardRefExoticComponent<MissingAccessesProps & react141.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MissingAccesses };

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime9 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_runtime8.JSX.Element;
+}: PageNotFoundProps) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { PageNotFound };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 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_runtime9.JSX.Element;
+}: ServerErrorProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { ServerError };

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

@@ -1,7 +1,7 @@
-import * as react141 from "react";
+import * as react133 from "react";
 import { HTMLAttributes } from "react";
 
 //#region src/organisms/TopBar/Actions.d.ts
-declare const Actions: react141.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react141.RefAttributes<HTMLDivElement>>;
+declare const Actions: react133.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react133.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 react139 from "react";
+import * as react131 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: react139.ForwardRefExoticComponent<FieldMenuProps & react139.RefAttributes<HTMLDivElement>>;
+declare const FieldMenu: react131.ForwardRefExoticComponent<FieldMenuProps & react131.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FieldMenu };

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/TutorialPopover.js

@@ -31,7 +31,9 @@ import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}fro
         top: 0;
         transform: translate(-50%, 0) rotate(45deg);
       `}}const S=f(v(l))`
-  width: 360px;
+  width: ${({$hasImage:e})=>e?`fit-content`:`360px`};
+  max-width: 90vw;
+  max-height: 90vh;
   padding: ${t.medium};
   background: ${e.ui.background__tutorial_card.rgba};
   display: flex;
@@ -47,10 +49,6 @@ import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}fro
     gap: ${t.small};
     align-items: center;
   }
-  > img {
-    max-height: 170px;
-    object-fit: contain;
-  }
   ${({$highlightingElement:t,$caretPosition:n})=>t&&p`
       transform: translateX(-50%);
       &:before {
@@ -64,6 +62,18 @@ import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}fro
       }
     `}
 `,C=f.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.medium};
+  overflow: auto;
+  > img {
+    max-width: 100%;
+    width: fit-content;
+    height: fit-content;
+    object-fit: contain;
+    align-self: center;
+  }
+`,w=f.div`
   display: flex;
   justify-content: flex-end;
   gap: ${t.small};
@@ -72,4 +82,4 @@ import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}fro
       margin-right: auto;
     }
   }
-`,w=({contentRef:t,isHighlighting:n,id:l,top:f,left:p,width:v,height:x,name:w,steps:T})=>{let{customStepContent:E}=o(),{activeTutorial:D,activeStep:O,skipTutorial:k,startTutorial:A,goToNextStep:j,goToPreviousStep:M}=b(),{data:N}=y(D?.steps.at(O)?.imgUrl??void 0),[P,F]=s(void 0),{style:I,highlightingElement:L,caretPosition:R}=i({contentRef:t,top:f,left:p,width:v,height:x,popoverSize:P}),z=e=>{if(!e){F(void 0);return}F({width:e.clientWidth,height:e.clientHeight})},B=()=>{k(l)},V=()=>{A(l)};if(O!==void 0&&T[O].custom&&!E[T[O].id])throw Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${l}, step ID: ${T[O].id}`);return!L&&n?null:!D||O===void 0?g(S,{ref:z,style:{...I},$highlightingElement:L,$caretPosition:R,...r,children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:w})]}),g(C,{children:[h(c,{variant:`ghost`,onClick:B,children:`Skip`}),h(c,{onClick:V,children:`Start tour`})]})]}):g(S,{ref:z,style:{...I,width:T[O].custom?`auto`:void 0},$caretPosition:R,$highlightingElement:L,...r,children:[T[O].custom?E[T[O].id]:g(m,{children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:T[O]?.title})]}),h(d,{variant:`body_short`,children:T[O]?.body}),N?h(`img`,{src:N,alt:T[O].title}):null]}),g(C,{children:[h(c,{variant:`outlined`,disabled:O===0,onClick:M,children:`Back`}),h(c,{variant:`ghost`,onClick:B,children:`Cancel`}),h(c,{onClick:j,children:O===T.length-1?`Finish`:`Next`})]}),h(a,{stepAmount:T.length})]})};export{w as TutorialPopover};
+`,T=({contentRef:t,isHighlighting:n,id:l,top:f,left:p,width:v,height:x,name:T,steps:E})=>{let{customStepContent:D}=o(),{activeTutorial:O,activeStep:k,skipTutorial:A,startTutorial:j,goToNextStep:M,goToPreviousStep:N}=b(),{data:P}=y(O?.steps.at(k)?.imgUrl??void 0),[F,I]=s(void 0),{style:L,highlightingElement:R,caretPosition:z}=i({contentRef:t,top:f,left:p,width:v,height:x,popoverSize:F}),B=e=>{if(!e){I(void 0);return}I({width:e.clientWidth,height:e.clientHeight})},V=()=>{A(l)},H=()=>{j(l)};if(k!==void 0&&E[k].custom&&!D[E[k].id])throw Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${l}, step ID: ${E[k].id}`);return!R&&n?null:!O||k===void 0?g(S,{ref:B,style:{...L},$highlightingElement:R,$caretPosition:z,$hasImage:!1,...r,children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:T})]}),g(w,{children:[h(c,{variant:`ghost`,onClick:V,children:`Skip`}),h(c,{onClick:H,children:`Start tour`})]})]}):g(S,{ref:B,style:{...L,width:E[k].custom?`auto`:void 0},$caretPosition:z,$highlightingElement:R,$hasImage:!!P,...r,children:[E[k].custom?D[E[k].id]:g(m,{children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:E[k]?.title})]}),g(C,{children:[h(d,{variant:`body_short`,children:E[k]?.body}),P?h(`img`,{src:/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(P)?P:`data:image/png;base64,${P}`,alt:E[k]?.title??``}):null]})]}),g(w,{children:[h(c,{variant:`outlined`,disabled:k===0,onClick:N,children:`Back`}),h(c,{variant:`ghost`,onClick:V,children:`Cancel`}),h(c,{onClick:M,children:k===E.length-1?`Finish`:`Next`})]}),h(a,{stepAmount:E.length})]})};export{T as TutorialPopover};

package/package.json

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