@equinor/amplify-component-lib 10.8.3 → 10.9.1

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

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

package/dist/deprecated/IconToggleButton.d.ts

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

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

@@ -1,4 +1,4 @@
-import * as react7 from "react";
+import * as react5 from "react";
 import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { IconData } from "@equinor/eds-icons";
 
@@ -25,6 +25,6 @@ type DeletableChipProps = BaseChipProps & InteractiveChipBase & {
   onDelete: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 type ChipProps = Omit<HTMLAttributes<HTMLDivElement | HTMLButtonElement>, 'onClick'> & (ReadOnlyChipProps | ClickableChipProps | DeletableChipProps);
-declare const Chip: react7.ForwardRefExoticComponent<ChipProps & react7.RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+declare const Chip: react5.ForwardRefExoticComponent<ChipProps & react5.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 //#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 react5 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: react5.ForwardRefExoticComponent<Omit<DatePickerProps, "defaultValue" | "variant"> & {
+declare const DatePicker$1: react7.ForwardRefExoticComponent<Omit<DatePickerProps, "defaultValue" | "variant"> & {
   variant?: Variants;
   defaultValue?: Date | undefined;
   meta?: string;
   loading?: boolean;
-} & react5.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 react13 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: react13.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
+declare const DateRangePicker$1: react9.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
   variant?: Variants;
   meta?: string;
   loading?: boolean;
-} & react13.RefAttributes<HTMLDivElement>>;
+} & react9.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DateRangePicker$1 as DateRangePicker, DateRangePickerProps$1 as DateRangePickerProps };

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired } from "../Select.types.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#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>): react_jsx_runtime3.JSX.Element;
+declare function ComboBox<T extends SelectOptionRequired>(props: ComboBoxProps<T>): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { ComboBox, ComboBoxProps };

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 react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#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>): react_jsx_runtime1.JSX.Element;
+declare function PersistentComboBox<T extends SelectOptionRequired>(props: PersistentComboBoxProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { PersistentComboBox, PersistentComboBoxProps };

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&&!F&&h(r,{id:`clear`,variant:`ghost_icon`,onClick:S,"data-testid":`clearBtn`,$rightPadding:W===`menu`,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}),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.d.ts

@@ -11,12 +11,12 @@ interface ComboBoxChipProps {
   $lightBackground?: boolean;
   className: string;
 }
-declare const ComboBoxChip: styled_components_dist_types8.IStyledComponentBase<"web", styled_components_dist_types8.Substitute<((Omit<react43.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+declare const ComboBoxChip: styled_components_dist_types8.IStyledComponentBase<"web", styled_components_dist_types8.Substitute<((Omit<react43.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types8.BaseObject, ComboBoxChipProps>> & string & Omit<react43.ForwardRefExoticComponent<(Omit<react43.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLButtonElement | HTMLDivElement>) & styled_components_dist_types8.BaseObject, ComboBoxChipProps>> & string & Omit<react43.ForwardRefExoticComponent<(Omit<react43.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof react43.Component<any, {}, any>>;
+}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLButtonElement | HTMLDivElement>>, keyof react43.Component<any, {}, any>>;
 //#endregion
 export { ComboBoxChip };

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

@@ -154,6 +154,11 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     height: 24px;
     left: 0;
   }
+  &:disabled {
+    svg {
+      fill: ${r.interactive.disabled__text.rgba};
+    }
+  }
 `,_=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;
 `,v=u.div`

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

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from "../Select.types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#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>): react_jsx_runtime2.JSX.Element;
+declare function SingleSelect<T extends SelectOptionRequired>(props: SingleSelectProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { SingleSelect, SingleSelectProps };

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

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

package/dist/molecules/TextField/TextField.d.ts

@@ -3,10 +3,15 @@ import { FC, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { TextFieldProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/TextField/TextField.d.ts
-type TextFieldProps$1 = Omit<TextFieldProps, 'variant'> & {
+type TextFieldProps$1 = Omit<TextFieldProps, 'variant' | 'inputRef'> & {
   variant?: Variants;
   loading?: boolean;
+  maxCharacters?: number;
 } & (TextareaHTMLAttributes<HTMLTextAreaElement> | InputHTMLAttributes<HTMLInputElement>);
+/**
+ * @param loading - Show loading skeleton on top of the text field.
+ * @param maxCharacters - Maximum number of characters allowed in the text field. Does not enforce the limit, only for display purposes.
+ */
 declare const TextField$1: FC<TextFieldProps$1>;
 //#endregion
 export { TextField$1 as TextField, TextFieldProps$1 as TextFieldProps };

package/dist/molecules/TextField/TextField.js

@@ -1,5 +1,6 @@
-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{useRef as c}from"react";import{TextField as l}from"@equinor/eds-core-react";import u,{css as d}from"styled-components";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=u.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{SkeletonBase as s}from"../Skeleton/SkeletonBase/SkeletonBase.js";import{useEffect as c,useRef as l,useState as u}from"react";import{TextField as d,Typography as f}from"@equinor/eds-core-react";import p,{css as m}from"styled-components";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=p.div`
   position: relative;
+  height: fit-content;
   input,
   textarea {
     color: ${n.text.static_icons__default.rgba};
@@ -22,14 +23,18 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     outline: none !important;
   }
 
-  ${({$variant:e,$disabled:r})=>r?d`
+  div[class*='HelperText'] {
+    margin-right: ${({$helperRightWidth:e})=>e?`calc(${e}px + ${r.medium})`:0};
+  }
+
+  ${({$variant:e,$disabled:r})=>r?m`
         div {
           outline: none !important;
         }
         p {
           color: ${n.interactive.disabled__text.rgba} !important;
         }
-      `:e===void 0?d`
+      `:e===void 0?m`
         input:hover,
         textarea:hover {
           box-shadow: inset 0 -2px 0 0
@@ -43,8 +48,8 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
               ${n.interactive.primary__resting.rgba};
           }
         }
-      `:d`
-      ${e===`dirty`&&d`
+      `:m`
+      ${e===`dirty`&&m`
         input,
         textarea {
           box-shadow: inset 0 -2px 0 0 ${t[e]};
@@ -66,9 +71,12 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
         }
       }
     `}
-`,h=u(s)`
+`,v=p(s)`
   position: absolute;
   left: ${r.small};
   border-radius: ${i.corners.borderRadius};
   transform: translateY(${r.x_small});
-`,g=e=>{let t={...e,variant:e.variant===`dirty`?void 0:e.variant},n=e.loading?void 0:e.variant,r=o(e),i=a(e),s=c(`${Math.max(20,Math.random()*80)}%`);return p(m,{$variant:n,$disabled:e.loading?!1:e.disabled,children:[f(l,{...t,disabled:e.loading||e.disabled}),e.loading&&f(h,{className:`skeleton`,role:`progressbar`,style:{top:r,height:i,width:s.current}})]})};export{g as TextField};
+`,y=p(f)`
+  position: absolute;
+  right: ${r.small};
+`,b=e=>{if(e.maxCharacters&&`type`in e&&e.type!==`text`)throw Error('`maxCharacters` prop is not supported for input types other than "text".');let i={...e,variant:e.variant===`dirty`?void 0:e.variant},s=e.loading?void 0:e.variant,f=o(e),p=a(e),m=l(`${Math.max(20,Math.random()*80)}%`),[b,x]=u(typeof e.value==`string`?e.value.length:0),[S,C]=u(0),w=e=>{if(e){let t=e.getBoundingClientRect().width;C(t)}},T=t=>{e.onChange&&e.onChange(t),e.maxCharacters&&x(t.target.value.length)},E=t=>{e.maxCharacters&&t&&t.value.length!==b&&x(t.value.length)};return c(()=>{typeof e.value==`string`&&e.maxCharacters&&e.value.length!==b&&x(e.value.length)},[b,e.maxCharacters,e.value]),g(_,{$variant:s,$disabled:e.loading?!1:e.disabled,$helperRightWidth:S,style:{marginBottom:e.helperText?0:`calc(${r.small} + 1rem)`},children:[h(d,{...i,inputRef:E,disabled:e.loading||e.disabled,onChange:T}),e.loading&&h(v,{className:`skeleton`,role:`progressbar`,style:{top:f,height:p,width:m.current}}),e.maxCharacters&&g(y,{ref:w,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:[b,` / `,e.maxCharacters]})]})};export{b as TextField};

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime5.JSX.Element;
+}: SortMenuProps<S>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { SortMenu };

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

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

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

@@ -1,9 +1,9 @@
-import * as react129 from "react";
+import * as react139 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: react139.ForwardRefExoticComponent<TitleProps & react139.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { Title };

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

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

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

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

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

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

package/dist/organisms/Status/collections/PageNotFound.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/PageNotFound.d.ts
 interface PageNotFoundProps {
@@ -12,6 +12,6 @@ declare const PageNotFound: ({
   redirectFallbackUrl,
   onBackClick,
   hideBackButton
-}: PageNotFoundProps) => react_jsx_runtime9.JSX.Element;
+}: PageNotFoundProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { PageNotFound };

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

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

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

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

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

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

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

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

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

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

package/dist/providers/TableOfContentsProvider.js

@@ -1 +1 @@
-import{useOnScreenMultiple as e}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as t}from"./TableOfContentsProvider.utils.js";import{createContext as n,useCallback as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import{useLocation as u,useNavigate as d}from"@tanstack/react-router";const f=n(void 0);function p(){let e=i(f);if(e===void 0)throw Error(`'useTableOfContents' must be used within provider`);return e}const m=({items:n,children:i,hashNavigation:p})=>{let m=d(),{hash:h}=u(),[g,_]=c(n[0]?.value),[v,y]=c([]),b=s(!1),x=o(()=>n.flatMap(e=>t([],e)),[n]);a(()=>{y(x.map(e=>document.getElementById(e)))},[x]);let S=r(e=>e.value===g?!0:e.children&&g?t([],e).includes(g):!1,[g]),C=e(v),w=s(-1),T=r((e,t)=>{let n=x.indexOf(e),r=v[n],i=t?.behavior??`smooth`;if(n===-1||!r){console.warn(`TableOfContents: Unable to find element with value: ${e}`);return}let a=x[n];p&&m({to:`.`,hash:`#${a}`,hashScrollIntoView:!1,replace:!0,search:e=>e}),r.scrollIntoView({block:`start`,behavior:i}),w.current=n;let o=1/0,s=0,c=()=>{let e=r?.getBoundingClientRect().top;if(e===o){if(s+=1,s>1){_(a),w.current=-1;return}}else s=0,o=e;requestAnimationFrame(c)};requestAnimationFrame(c)},[v,p,m,x]);return a(()=>{if(!b.current&&C.length>0){b.current=!0;let e=decodeURIComponent(h.replace(`#`,``));if(!e.length||!x.includes(e))return;T(e)}},[C.length,T,h,x]),a(()=>{if(C.length===0||C.length!==x.length||w.current!==-1||!b.current)return;let e=-1;for(let t=C.length-1;t>=0;t--)C[t]&&(e=t);e===-1||x.at(e)===void 0||(_(x[e]),p&&m({to:`.`,hash:`#${x[e]}`,hashScrollIntoView:!1,replace:!0,search:e=>e}))},[T,p,m,x,C]),l(f.Provider,{value:{items:n,selected:g,setSelected:T,isActive:S},children:i})};export{m as TableOfContentsProvider,p as useTableOfContents};
+import{useOnScreenMultiple as e}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as t}from"./TableOfContentsProvider.utils.js";import{createContext as n,useCallback as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import{useLocation as u,useNavigate as d}from"@tanstack/react-router";const f=n(void 0);function p(){let e=i(f);if(e===void 0)throw Error(`'useTableOfContents' must be used within provider`);return e}const m=({items:n,children:i,hashNavigation:p})=>{let m=d(),{hash:h}=u(),[g,_]=c(n[0]?.value),[v,y]=c([]),b=s(!1),x=o(()=>n.flatMap(e=>t([],e)),[n]);a(()=>{y(x.map(e=>document.getElementById(e)))},[x]);let S=r(e=>e.value===g?!0:e.children&&g?t([],e).includes(g):!1,[g]),C=e(v),w=s(-1),T=r((e,t)=>{let n=x.indexOf(e),r=v[n],i=t?.behavior??`smooth`;if(n===-1||!r){console.warn(`TableOfContents: Unable to find element with value: ${e}`);return}let a=x[n];p&&m({to:`.`,hash:a,hashScrollIntoView:!1,replace:!0,search:e=>e}),r.scrollIntoView({block:`start`,behavior:i}),w.current=n;let o=1/0,s=0,c=()=>{let e=r?.getBoundingClientRect().top;if(e===o){if(s+=1,s>1){_(a),w.current=-1;return}}else s=0,o=e;requestAnimationFrame(c)};requestAnimationFrame(c)},[v,p,m,x]);return a(()=>{if(!b.current&&C.length>0){b.current=!0;let e=decodeURIComponent(h.replace(`#`,``));if(!e.length||!x.includes(e))return;T(e)}},[C.length,T,h,x]),a(()=>{if(C.length===0||C.length!==x.length||w.current!==-1||!b.current)return;let e=-1;for(let t=C.length-1;t>=0;t--)C[t]&&(e=t);e===-1||x.at(e)===void 0||(_(x[e]),p&&m({to:`.`,hash:x[e],hashScrollIntoView:!1,replace:!0,search:e=>e}))},[T,p,m,x,C]),l(f.Provider,{value:{items:n,selected:g,setSelected:T,isActive:S},children:i})};export{m as TableOfContentsProvider,p as useTableOfContents};

package/package.json

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