@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/build/cjs/components/button-group/ButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),r=require("../button/Button.cjs"),s=require("../flex/Flex.cjs");exports.ButtonGroup=({mainAction:n,secondaryAction:o,className:c,...i})=>t.jsxs(s.Flex,{...i,className:e.clsx("jkl-button-group",c),gap:"8",direction:"column",alignItems:"center",children:[t.jsx(r.Button,{variant:"primary",...n}),o&&t.jsx(r.Button,{variant:"ghost",...o})]});
+//# sourceMappingURL=ButtonGroup.cjs.map

package/build/cjs/components/button-group/ButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.cjs","sources":["../../../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"../button/Button.jsx\";\nimport type { ButtonProps } from \"../button/types.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\n\nexport type ButtonGroupProps = {\n    mainAction: Exclude<ButtonProps<\"button\">, \"variant\">;\n    secondaryAction?: Exclude<ButtonProps<\"button\">, \"variant\">;\n};\n\nexport const ButtonGroup = ({\n    mainAction,\n    secondaryAction,\n    className,\n    ...elementAttributes\n}: ButtonGroupProps & ComponentPropsWithoutRef<\"div\">) => {\n    return (\n        <Flex\n            {...elementAttributes}\n            className={clsx(\"jkl-button-group\", className)}\n            gap=\"8\"\n            direction=\"column\"\n            alignItems=\"center\"\n        >\n            <Button\n                variant=\"primary\"\n                {...(mainAction as ButtonProps<\"button\">)}\n            />\n            {secondaryAction && (\n                <Button\n                    variant=\"ghost\"\n                    {...(secondaryAction as ButtonProps<\"button\">)}\n                />\n            )}\n        </Flex>\n    );\n};\n"],"names":["mainAction","secondaryAction","className","elementAttributes","jsxs","Flex","clsx","gap","direction","alignItems","children","jsx","Button","variant"],"mappings":"iPAW2B,EACvBA,WAAAA,EACAC,gBAAAA,EACAC,UAAAA,KACGC,KAGCC,EAAAA,KAACC,EAAAA,KAAA,IACOF,EACJD,UAAWI,EAAAA,KAAK,mBAAoBJ,GACpCK,IAAI,IACJC,UAAU,SACVC,WAAW,SAEXC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACGC,QAAQ,aACHb,IAERC,GACGU,EAAAA,IAACC,EAAAA,OAAA,CACGC,QAAQ,WACHZ"}

package/build/cjs/components/button-group/ButtonGroup.d.cts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ButtonProps } from '../button/types.cjs';
+export type ButtonGroupProps = {
+    mainAction: Exclude<ButtonProps<"button">, "variant">;
+    secondaryAction?: Exclude<ButtonProps<"button">, "variant">;
+};
+export declare const ButtonGroup: ({ mainAction, secondaryAction, className, ...elementAttributes }: ButtonGroupProps & ComponentPropsWithoutRef<"div">) => import("react").JSX.Element;

package/build/cjs/components/button-group/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./ButtonGroup.cjs");exports.ButtonGroup=t.ButtonGroup;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/button-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/button-group/index.d.cts

@@ -0,0 +1 @@
+export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.cjs';

package/build/cjs/components/checkbox/types.d.cts

@@ -1,6 +1,6 @@
 import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';
-import { DataTestAutoId } from '../../utilities/types.cjs';
-export interface CheckboxProps extends DataTestAutoId, InputHTMLAttributes<HTMLInputElement> {
+import { DataTestAutoId, WithDisabled } from '../../utilities/types.cjs';
+export interface CheckboxProps extends DataTestAutoId, Omit<InputHTMLAttributes<HTMLInputElement>, "disabled">, WithDisabled {
     children: ReactNode;
     name: string;
     value: string;

package/build/cjs/components/combobox/Combobox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),r=require("../../hooks/useListNavigation/useListNavigation.cjs"),l=require("../chip/Chip.cjs"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CheckIcon.cjs"),c=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),p=require("../tooltip/Tooltip.cjs"),d=require("../tooltip/TooltipContent.cjs"),b=require("../tooltip/TooltipTrigger.cjs");function m(e){return"string"==typeof e?{value:e,label:e}:e}const x=x=>{const{"data-size":k,id:j,placeholder:v,items:f,onChange:h,onFocus:g,onBlur:_,value:y,label:C,noMatchingOption:w,labelProps:q,helpLabel:N,errorLabel:$,width:L,name:T,className:S,invalid:I,description:P,hasTagHover:B,tooltip:D}=x,E=n.useId(j||"jkl-combobox",{generateSuffix:!j}),A=`${E}_label`,F=`${E}_button`,M=`${E}_search-input`,[O,K]=t.useState(y||[]),[H,R]=t.useState(!1),[V,z]=t.useState(""),[G,U]=t.useState(!1),[J,Q]=t.useState(!1),W=t.useRef(null),X=t.useRef(null),Y=t.useRef(!1);t.useEffect(()=>{z(""),H&&W.current&&W.current.focus()},[H]),t.useEffect(()=>{K(e=>y||e)},[y]);const Z=e=>!!O&&O.some(o=>o.value===e.value),ee=t.useCallback(e=>O.filter(o=>o.value!==e),[O]),oe=t.useCallback((e,o)=>{const t=ee(o);K(t),h({type:"change",target:{name:T,value:o,selectedOptions:t}}),e.stopPropagation(),0===t.length&&Q(!1)},[ee,h,T]),te=t.useCallback(e=>{let o;if(O.some(o=>o.value===e))o=ee(e);else{const t=f.find(o=>o.value===e);o=[...O,t]}W.current?.focus(),K(o),h({type:"change",target:{name:T,value:e,selectedOptions:o}})},[O,h,T,ee,f]),ae=e=>{W.current?.focus(),R(!0),z(e.target.value)},ne=t.useMemo(()=>{if(!V)return f;const e=f.filter(e=>e.label.toLowerCase().indexOf(V.toLowerCase())>=0);return U(0===e.length),e},[V,f]),[re,le]=t.useState(ne[0]?.value?`${E}-${ne[0]?.value}`:void 0),se=!H;t.useEffect(()=>{const e=e=>{"Escape"===e.key&&H&&R(!1)};return typeof window<"u"&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&H&&window.removeEventListener("keydown",e)}},[H]);const ie=t.useCallback(e=>{e?W.current&&W.current.focus():Y.current&&X.current&&X.current.focus()},[]),ce=t.useCallback(()=>{Y.current||(g&&g({type:"change",target:{name:T,value:O?.[0].value||"",selectedOptions:O}}),Y.current=!0,R(!0))},[g,O,T]),[ue]=a.useAnimatedHeight(H,{onFirstVisible:ie,onTransitionEnd:ie});r.useListNavigation({ref:ue});const pe=t.useRef(null),de=t.useCallback(e=>{pe.current?.contains(e.relatedTarget)||(z(""),_&&(_({type:"blur",target:{name:T,value:O?.[0]?.value||"",selectedOptions:O}}),X.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),Y.current=!1,R(!1))},[_,T,O]),be=t.useCallback(e=>{e.target.focus({preventScroll:!0})},[]),me=t.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ue.current;o&&o.querySelector('[role="option"]')?.focus()}else"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),R(!1));if(e.metaKey&&"a"===e.key||e.ctrlKey&&"a"===e.key){e.preventDefault(),e.stopPropagation();const o=O.map(e=>({...e,isMarked:!0}));Q(!0),K(o)}else if("Backspace"===e.key)if(e.stopPropagation(),Q(!1),O.some(e=>e.isMarked)){const e=O.filter(e=>!e.isMarked);K(e),z("")}else O.length>0&&""===V&&oe(e,O[O.length-1].value)},[O,V,ue,oe]),xe=t.useCallback(e=>{if("Tab"===e.key)W.current&&(e.preventDefault(),e.stopPropagation(),e.shiftKey||R(!1),W.current.focus());else if("ArrowUp"===e.key&&ue.current&&W.current){const o=ue.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===o?.id&&W.current&&W.current.focus()}},[ue]),ke=O.length>=1,je=t.useCallback(o=>e.jsx(l.Chip,{"data-testid":"jkl-chip","aria-label":`Fjern ${o.tagLabel}`,className:`jkl-combobox__selected-option ${J&&"jkl-combobox__selected-option--marked"}`,variant:"input",onClick:e=>{W.current&&W.current.focus(),oe(e,o.value)},onBlur:de,children:o.tagLabel?o.tagLabel:o.label},o.value),[de,oe,J]);return e.jsx(u.InputGroup,{label:C,id:M,ref:pe,"data-testid":"jkl-combobox","data-size":k,className:o.clsx("jkl-combobox",S,{"jkl-combobox--invalid":!!$||I,"jkl-combobox--menu-open":H,"jkl-combobox--menu-closed":!H&&ke}),labelProps:{id:A,...q},helpLabel:N,errorLabel:$,description:P,tooltip:D,render:t=>e.jsxs("div",{className:o.clsx("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":ke}),style:{width:L},tabIndex:-1,onFocus:ce,onBlur:de,"data-invalid":!!$||I,children:[e.jsxs("div",{className:"jkl-combobox__chips","data-testid":"jkl-combobox__chips",children:[O.map(m).map(o=>B?e.jsxs(p.Tooltip,{children:[e.jsx(b.TooltipTrigger,{children:je(o)}),e.jsx(d.TooltipContent,{children:o.label})]},o.value):je(o)),e.jsx("input",{...t,className:"jkl-combobox__search-input",onChange:ae,"data-testid":"jkl-combobox__search-input",onFocus:ce,onBlur:de,onKeyDown:me,value:V,ref:W,"aria-controls":E,role:"combobox","aria-autocomplete":"list","aria-expanded":H,placeholder:O.length>0?"":v,autoComplete:"off"})]}),e.jsxs("div",{className:"jkl-combobox__menu",role:"listbox",ref:ue,id:E,"aria-labelledby":A,"aria-multiselectable":"true","aria-activedescendant":re,onFocus:ce,onBlur:de,tabIndex:-1,children:[ne.map((o,t)=>e.jsxs("button",{type:"button",id:`${E}__${o.value}`,"aria-selected":Z(o),role:"option",value:o.value,onBlur:de,className:`jkl-combobox__option ${Z(o)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:ce,onKeyDown:xe,onClick:e=>{le(`${E}__${o.value}`),e.stopPropagation(),te(o.value),z("")},onMouseOver:be,children:[o.description?e.jsxs("span",{children:[o.label,e.jsx("span",{className:"jkl-combobox__option-description",children:o.description})]}):o.label,Z(o)?e.jsxs("span",{children:[e.jsx(i.CheckIcon,{})," "]}):null]},`${E}-${o.value}`)),G&&e.jsx("div",{className:"jkl-combobox__no-option",children:w})]}),e.jsx(s.IconButton,{id:F,onFocus:ce,onBlur:de,className:"jkl-text-input-action-button","data-testid":"jkl-combobox__button","aria-label":"Åpne meny","aria-expanded":H,"aria-controls":E,onClick:()=>R(e=>!e),onMouseDown:e=>{e.preventDefault(),X.current?.focus()},children:e.jsx(c.ArrowVerticalAnimated,{pointingDown:se})})]})})};x.displayName="Combobox",exports.Combobox=x,exports.getComboboxValuePair=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),l=require("../../hooks/useListNavigation/useListNavigation.cjs"),r=require("../chip/Chip.cjs"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CheckIcon.cjs"),c=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),d=require("../tooltip/Tooltip.cjs"),p=require("../tooltip/TooltipContent.cjs"),b=require("../tooltip/TooltipTrigger.cjs");function m(e){return"string"==typeof e?{value:e,label:e}:e}const x=x=>{const{"data-size":k,id:j,placeholder:v,items:f,onChange:h,onFocus:g,onBlur:_,value:y,label:C,noMatchingOption:w,labelProps:q,helpLabel:N,errorLabel:$,width:L,name:T,className:S,invalid:I,description:P,hasTagHover:B,tooltip:D,disabled:E,readOnly:O}=x,A=E||O,F=n.useId(j||"jkl-combobox",{generateSuffix:!j}),M=`${F}_label`,K=`${F}_button`,H=`${F}_search-input`,[R,V]=t.useState(y||[]),[z,G]=t.useState(!1),[U,J]=t.useState(""),[Q,W]=t.useState(!1),[X,Y]=t.useState(!1),Z=t.useRef(null),ee=t.useRef(null),oe=t.useRef(!1);t.useEffect(()=>{J(""),z&&Z.current&&Z.current.focus()},[z]),t.useEffect(()=>{V(e=>y||e)},[y]);const te=e=>!!R&&R.some(o=>o.value===e.value),ae=t.useCallback(e=>R.filter(o=>o.value!==e),[R]),ne=t.useCallback((e,o)=>{const t=ae(o);V(t),h({type:"change",target:{name:T,value:o,selectedOptions:t}}),e.stopPropagation(),0===t.length&&Y(!1)},[ae,h,T]),le=t.useCallback(e=>{let o;if(R.some(o=>o.value===e))o=ae(e);else{const t=f.find(o=>o.value===e);o=[...R,t]}Z.current?.focus(),V(o),h({type:"change",target:{name:T,value:e,selectedOptions:o}})},[R,h,T,ae,f]),re=e=>{Z.current?.focus(),G(!0),J(e.target.value)},se=t.useMemo(()=>{if(!U)return f;const e=f.filter(e=>e.label.toLowerCase().indexOf(U.toLowerCase())>=0);return W(0===e.length),e},[U,f]),[ie,ce]=t.useState(se[0]?.value?`${F}-${se[0]?.value}`:void 0),ue=!z;t.useEffect(()=>{const e=e=>{"Escape"===e.key&&z&&G(!1)};return typeof window<"u"&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&z&&window.removeEventListener("keydown",e)}},[z]);const de=t.useCallback(e=>{e?Z.current&&Z.current.focus():oe.current&&ee.current&&ee.current.focus()},[]),pe=t.useCallback(()=>{oe.current||(g&&g({type:"change",target:{name:T,value:R?.[0].value||"",selectedOptions:R}}),oe.current=!0,A||G(!0))},[g,R,T,A]),[be]=a.useAnimatedHeight(z,{onFirstVisible:de,onTransitionEnd:de});l.useListNavigation({ref:be});const me=t.useRef(null),xe=t.useCallback(e=>{me.current?.contains(e.relatedTarget)||(J(""),_&&(_({type:"blur",target:{name:T,value:R?.[0]?.value||"",selectedOptions:R}}),ee.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),oe.current=!1,G(!1))},[_,T,R]),ke=t.useCallback(e=>{e.target.focus({preventScroll:!0})},[]),je=t.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=be.current;o&&o.querySelector('[role="option"]')?.focus()}else"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),G(!1));if(e.metaKey&&"a"===e.key||e.ctrlKey&&"a"===e.key){e.preventDefault(),e.stopPropagation();const o=R.map(e=>({...e,isMarked:!0}));Y(!0),V(o)}else if("Backspace"===e.key)if(e.stopPropagation(),Y(!1),R.some(e=>e.isMarked)){const e=R.filter(e=>!e.isMarked);V(e),J("")}else R.length>0&&""===U&&ne(e,R[R.length-1].value)},[R,U,be,ne]),ve=t.useCallback(e=>{if("Tab"===e.key)Z.current&&(e.preventDefault(),e.stopPropagation(),e.shiftKey||G(!1),Z.current.focus());else if("ArrowUp"===e.key&&be.current&&Z.current){const o=be.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===o?.id&&Z.current&&Z.current.focus()}},[be]),fe=R.length>=1,he=t.useCallback(o=>e.jsx(r.Chip,{"data-testid":"jkl-chip","aria-label":`Fjern ${o.tagLabel}`,className:`jkl-combobox__selected-option ${X&&"jkl-combobox__selected-option--marked"}`,variant:"input",disabled:A,onClick:e=>{Z.current&&Z.current.focus(),ne(e,o.value)},onBlur:xe,children:o.tagLabel?o.tagLabel:o.label},o.value),[xe,ne,X,A]);return e.jsx(u.InputGroup,{label:C,id:H,ref:me,"data-testid":"jkl-combobox","data-size":k,className:o.clsx("jkl-combobox",S,{"jkl-combobox--invalid":!!$||I,"jkl-combobox--menu-open":z,"jkl-combobox--menu-closed":!z&&fe}),labelProps:{id:M,...q},helpLabel:N,errorLabel:$,description:P,tooltip:D,render:t=>e.jsxs("div",{className:o.clsx("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":fe}),style:{width:L},tabIndex:-1,onFocus:pe,onBlur:xe,"data-invalid":!!$||I,children:[e.jsxs("div",{className:"jkl-combobox__chips","data-testid":"jkl-combobox__chips",children:[R.map(m).map(o=>B?e.jsxs(d.Tooltip,{children:[e.jsx(b.TooltipTrigger,{children:he(o)}),e.jsx(p.TooltipContent,{children:o.label})]},o.value):he(o)),e.jsx("input",{...t,className:"jkl-combobox__search-input",onChange:re,"data-testid":"jkl-combobox__search-input",onFocus:pe,onBlur:xe,onKeyDown:je,value:U,ref:Z,"aria-controls":F,role:"combobox","aria-autocomplete":"list","aria-expanded":z,placeholder:R.length>0?"":v,autoComplete:"off",disabled:E,readOnly:O})]}),e.jsxs("div",{className:"jkl-combobox__menu",role:"listbox",ref:be,id:F,"aria-labelledby":M,"aria-multiselectable":"true","aria-activedescendant":ie,onFocus:pe,onBlur:xe,tabIndex:-1,children:[se.map((o,t)=>e.jsxs("button",{type:"button",id:`${F}__${o.value}`,"aria-selected":te(o),role:"option",value:o.value,onBlur:xe,className:`jkl-combobox__option ${te(o)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:pe,onKeyDown:ve,onClick:e=>{ce(`${F}__${o.value}`),e.stopPropagation(),le(o.value),J("")},onMouseOver:ke,children:[o.description?e.jsxs("span",{children:[o.label,e.jsx("span",{className:"jkl-combobox__option-description",children:o.description})]}):o.label,te(o)?e.jsxs("span",{children:[e.jsx(i.CheckIcon,{})," "]}):null]},`${F}-${o.value}`)),Q&&e.jsx("div",{className:"jkl-combobox__no-option",children:w})]}),e.jsx(s.IconButton,{id:K,onFocus:pe,onBlur:xe,className:"jkl-text-input-action-button","data-testid":"jkl-combobox__button","aria-label":"Åpne meny","aria-expanded":z,"aria-controls":F,disabled:A,onClick:()=>G(e=>!e),onMouseDown:e=>{e.preventDefault(),ee.current?.focus()},children:e.jsx(c.ArrowVerticalAnimated,{pointingDown:ue})})]})})};x.displayName="Combobox",exports.Combobox=x,exports.getComboboxValuePair=m;
 //# sourceMappingURL=Combobox.cjs.map

package/build/cjs/components/combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type FC,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n    item: string | ComboboxValuePair,\n): ComboboxValuePair {\n    return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\n/**\n * @deprecated Bruk heller Select med `multiple` og `searchable` satt til\n * `true`. Combobox vil bli fjernet ved en senere oppdatering.\n */\nexport const Combobox: FC<ComboboxProps> = (props) => {\n    const {\n        \"data-size\": dataSize,\n        id,\n        placeholder,\n        items,\n        onChange,\n        onFocus,\n        onBlur,\n        value,\n        label,\n        noMatchingOption,\n        labelProps,\n        helpLabel,\n        errorLabel,\n        width,\n        name,\n        className,\n        invalid,\n        description,\n        hasTagHover,\n        tooltip,\n    } = props;\n    const listId = useId(id || \"jkl-combobox\", { generateSuffix: !id });\n    const labelId = `${listId}_label`;\n    const buttonId = `${listId}_button`;\n    const inputId = `${listId}_search-input`;\n\n    const [selectedValue, setSelectedValue] = useState<\n        Array<ComboboxValuePair>\n    >(value || []);\n    const [showMenu, setShowMenu] = useState<boolean>(false);\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [noResults, setNoResults] = useState(false);\n    const [marked, setMarked] = useState<boolean>(false);\n\n    const searchRef = useRef<HTMLInputElement>(null);\n    const inputRef = useRef<HTMLDivElement>(null);\n    const focusInsideRef = useRef(false);\n\n    useEffect(() => {\n        setSearchValue(\"\");\n        if (showMenu && searchRef.current) {\n            searchRef.current.focus();\n        }\n    }, [showMenu]);\n\n    useEffect(() => {\n        setSelectedValue((prev) => value || prev);\n    }, [value]);\n\n    // Funksjon for å stile valgt element\n    const isSelected = (option: ValuePair) => {\n        if (!selectedValue) {\n            return false;\n        }\n\n        return selectedValue.some((value) => value.value === option.value);\n    };\n\n    // Fjerne ett eller flere valg\n    const removeOption = useCallback(\n        (option: string) => {\n            return selectedValue.filter((value) => value.value !== option);\n        },\n        [selectedValue],\n    );\n\n    const onTagRemove = useCallback(\n        (\n            e:\n                | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n                | React.KeyboardEvent<HTMLInputElement>,\n            option: string,\n        ) => {\n            const newValue = removeOption(option);\n            setSelectedValue(newValue);\n            onChange({\n                type: \"change\",\n                target: { name, value: option, selectedOptions: newValue },\n            });\n            e.stopPropagation();\n\n            if (newValue.length === 0) {\n                setMarked(false);\n            }\n        },\n        [removeOption, onChange, name],\n    );\n\n    // Håndtere valgt verdi i listen\n    const onItemClick = useCallback(\n        (option: string) => {\n            let newValue: Array<ValuePair>;\n\n            if (selectedValue.some((value) => value.value === option)) {\n                newValue = removeOption(option);\n            } else {\n                const item = items.find((i) => i.value === option);\n                newValue = [...selectedValue, item as ValuePair];\n            }\n            searchRef.current?.focus();\n            setSelectedValue(newValue);\n            onChange({\n                type: \"change\",\n                target: { name, value: option, selectedOptions: newValue },\n            });\n        },\n        [selectedValue, onChange, name, removeOption, items],\n    );\n\n    // Funksjon for søk\n    const onSearch = (e: {\n        target: { value: React.SetStateAction<string> };\n    }) => {\n        searchRef.current?.focus();\n        setShowMenu(true);\n        setSearchValue(e.target.value);\n    };\n\n    const options = useMemo(() => {\n        if (!searchValue) {\n            return items;\n        }\n\n        const filteredOptions = items.filter(\n            (option) =>\n                option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n                0,\n        );\n\n        setNoResults(filteredOptions.length === 0);\n\n        return filteredOptions;\n    }, [searchValue, items]);\n\n    // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n    const [activeDescendant, setActiveDescendant] = useState<\n        string | undefined\n    >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n    // Håndtere arrow-state\n    const isPointingDown = !showMenu;\n\n    // Lukk meny med ESC\n    useEffect(() => {\n        const handleEscape = (e: globalThis.KeyboardEvent) => {\n            if (e.key === \"Escape\" && showMenu) {\n                setShowMenu(false);\n            }\n        };\n        if (typeof window !== \"undefined\") {\n            window.addEventListener(\"keydown\", handleEscape);\n        }\n        return () => {\n            if (typeof window !== \"undefined\" && showMenu) {\n                window.removeEventListener(\"keydown\", handleEscape);\n            }\n        };\n    }, [showMenu]);\n\n    // Fokushåndtering\n    const handleFocusPlacement = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            if (searchRef.current) {\n                searchRef.current.focus();\n            }\n        } else {\n            if (focusInsideRef.current && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }\n    }, []);\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({\n                    type: \"change\",\n                    target: {\n                        name,\n                        value: selectedValue?.[0].value || \"\",\n                        selectedOptions: selectedValue,\n                    },\n                });\n            }\n            focusInsideRef.current = true;\n            setShowMenu(true);\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\n\n    const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n    const handleBlur = useCallback(\n        (\n            e: FocusEvent<\n                HTMLDivElement | HTMLInputElement | HTMLButtonElement\n            >,\n        ) => {\n            const componentRootElement = componentRootElementRef.current;\n            const nextFocusIsInsideComponent = componentRootElement?.contains(\n                e.relatedTarget as Node,\n            );\n            if (!nextFocusIsInsideComponent) {\n                setSearchValue(\"\");\n\n                if (onBlur) {\n                    onBlur({\n                        type: \"blur\",\n                        target: {\n                            name,\n                            value: selectedValue?.[0]?.value || \"\",\n                            selectedOptions: selectedValue,\n                        },\n                    });\n                    inputRef.current?.dispatchEvent(\n                        new Event(\"focusout\", { bubbles: true }),\n                    );\n                }\n                focusInsideRef.current = false;\n                setShowMenu(false);\n            }\n        },\n        [onBlur, name, selectedValue],\n    );\n\n    const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n        // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n        // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n        (e.target as HTMLButtonElement).focus({ preventScroll: true });\n    }, []);\n\n    // Tastaturnavigasjon\n    const handleSearchOnKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"ArrowDown\") {\n                e.preventDefault();\n                e.stopPropagation();\n                const listElement = dropdownRef.current;\n                if (listElement) {\n                    listElement\n                        .querySelector<HTMLButtonElement>('[role=\"option\"]')\n                        ?.focus();\n                }\n            } else if (e.key === \"Escape\") {\n                e.preventDefault();\n                e.stopPropagation();\n                setShowMenu(false);\n            }\n\n            if ((e.metaKey && e.key === \"a\") || (e.ctrlKey && e.key === \"a\")) {\n                e.preventDefault();\n                e.stopPropagation();\n                const updatedSelectedValue = selectedValue.map((item) => ({\n                    ...item,\n                    isMarked: true,\n                }));\n                setMarked(true);\n                setSelectedValue(updatedSelectedValue);\n            } else if (e.key === \"Backspace\") {\n                e.stopPropagation();\n                setMarked(false);\n\n                // Sjekk om selectedValue er markert\n                const selectedValueIsMarked = selectedValue.some(\n                    (item) => item.isMarked,\n                );\n\n                if (selectedValueIsMarked) {\n                    const updatedSelectedValue = selectedValue.filter(\n                        (item) => !item.isMarked,\n                    );\n                    setSelectedValue(updatedSelectedValue);\n                    setSearchValue(\"\");\n                } else if (selectedValue.length > 0 && searchValue === \"\") {\n                    // Hvis ingen items er markert, fjern siste valgte item\n                    onTagRemove(\n                        e,\n                        selectedValue[selectedValue.length - 1].value,\n                    );\n                }\n            }\n        },\n        [selectedValue, searchValue, dropdownRef, onTagRemove],\n    );\n\n    const handleOptionOnKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Tab\") {\n                if (searchRef.current) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey) {\n                        searchRef.current.focus();\n                    } else {\n                        setShowMenu(false);\n                        searchRef.current.focus();\n                    }\n                }\n            } else if (e.key === \"ArrowUp\") {\n                if (dropdownRef.current && searchRef.current) {\n                    // Can't be based on index since the first item might be filtered out\n                    const firstVisible = dropdownRef.current.querySelector(\n                        '[role=\"option\"]:not([hidden])',\n                    );\n                    if (\n                        e.currentTarget.id === firstVisible?.id &&\n                        searchRef.current\n                    ) {\n                        searchRef.current.focus();\n                    }\n                }\n            }\n        },\n        [dropdownRef],\n    );\n\n    const hasSelection = selectedValue.length >= 1;\n\n    const renderSelectedOption = useCallback(\n        (option: ComboboxValuePair) => (\n            <Chip\n                key={option.value}\n                data-testid=\"jkl-chip\"\n                aria-label={`Fjern ${option.tagLabel}`}\n                className={`jkl-combobox__selected-option ${\n                    marked && \"jkl-combobox__selected-option--marked\"\n                }`}\n                variant=\"input\"\n                onClick={(e) => {\n                    if (searchRef.current) {\n                        searchRef.current.focus();\n                    }\n                    onTagRemove(e, option.value);\n                }}\n                onBlur={handleBlur}\n            >\n                {option.tagLabel ? option.tagLabel : option.label}\n            </Chip>\n        ),\n        [handleBlur, onTagRemove, marked],\n    );\n\n    return (\n        <InputGroup\n            label={label}\n            id={inputId}\n            ref={componentRootElementRef}\n            data-testid=\"jkl-combobox\"\n            data-size={dataSize}\n            className={clsx(\"jkl-combobox\", className, {\n                \"jkl-combobox--invalid\": !!errorLabel || invalid,\n                \"jkl-combobox--menu-open\": showMenu,\n                \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n            })}\n            labelProps={{\n                id: labelId,\n                ...labelProps,\n            }}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            description={description}\n            tooltip={tooltip}\n            render={(inputProps) => (\n                <div\n                    className={clsx(\"jkl-combobox__wrapper\", {\n                        \"jkl-combobox__wrapper--active-value\": hasSelection,\n                    })}\n                    style={{ width }}\n                    tabIndex={-1}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    data-invalid={!!errorLabel || invalid}\n                >\n                    <div\n                        className=\"jkl-combobox__chips\"\n                        data-testid=\"jkl-combobox__chips\"\n                    >\n                        {selectedValue\n                            .map(getComboboxValuePair)\n                            .map((option) => {\n                                return hasTagHover ? (\n                                    <Tooltip key={option.value}>\n                                        <TooltipTrigger>\n                                            {renderSelectedOption(option)}\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            {option.label}\n                                        </TooltipContent>\n                                    </Tooltip>\n                                ) : (\n                                    renderSelectedOption(option)\n                                );\n                            })}\n                        <input\n                            {...inputProps}\n                            className=\"jkl-combobox__search-input\"\n                            onChange={onSearch}\n                            data-testid=\"jkl-combobox__search-input\"\n                            onFocus={handleFocus}\n                            onBlur={handleBlur}\n                            onKeyDown={handleSearchOnKeyDown}\n                            value={searchValue}\n                            ref={searchRef}\n                            aria-controls={listId}\n                            role=\"combobox\"\n                            aria-autocomplete=\"list\"\n                            aria-expanded={showMenu}\n                            placeholder={\n                                selectedValue.length > 0 ? \"\" : placeholder\n                            }\n                            autoComplete=\"off\"\n                        />\n                    </div>\n\n                    <div\n                        className=\"jkl-combobox__menu\"\n                        // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n                        role=\"listbox\"\n                        ref={dropdownRef}\n                        id={listId}\n                        aria-labelledby={labelId}\n                        aria-multiselectable=\"true\"\n                        aria-activedescendant={activeDescendant}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        tabIndex={-1}\n                    >\n                        {options.map((option, i) => (\n                            <button\n                                key={`${listId}-${option.value}`}\n                                type=\"button\"\n                                id={`${listId}__${option.value}`}\n                                aria-selected={isSelected(option)}\n                                // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n                                role=\"option\"\n                                value={option.value}\n                                onBlur={handleBlur}\n                                className={`jkl-combobox__option ${\n                                    isSelected(option) &&\n                                    \"jkl-combobox__option--selected\"\n                                }`}\n                                data-testid=\"jkl-combobox__option\"\n                                data-testautoid={`jkl-combobox__option-${i}`}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOptionOnKeyDown}\n                                onClick={(e) => {\n                                    setActiveDescendant(\n                                        `${listId}__${option.value}`,\n                                    ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n                                    e.stopPropagation();\n                                    onItemClick(option.value);\n                                    setSearchValue(\"\");\n                                }}\n                                onMouseOver={handleMouseOver}\n                            >\n                                {option.description ? (\n                                    <span>\n                                        {option.label}\n                                        <span className=\"jkl-combobox__option-description\">\n                                            {option.description}\n                                        </span>\n                                    </span>\n                                ) : (\n                                    option.label\n                                )}\n                                {isSelected(option) ? (\n                                    <span>\n                                        <CheckIcon />{\" \"}\n                                    </span>\n                                ) : null}\n                            </button>\n                        ))}\n                        {noResults && (\n                            <div className=\"jkl-combobox__no-option\">\n                                {noMatchingOption}\n                            </div>\n                        )}\n                    </div>\n                    <IconButton\n                        id={buttonId}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        className=\"jkl-text-input-action-button\"\n                        data-testid=\"jkl-combobox__button\"\n                        aria-label=\"Åpne meny\"\n                        aria-expanded={showMenu}\n                        aria-controls={listId}\n                        onClick={() => setShowMenu((previous) => !previous)}\n                        onMouseDown={(e) => {\n                            e.preventDefault();\n                            inputRef.current?.focus();\n                        }}\n                    >\n                        <ArrowVerticalAnimated pointingDown={isPointingDown} />\n                    </IconButton>\n                </div>\n            )}\n        />\n    );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","tooltip","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type FC,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n    item: string | ComboboxValuePair,\n): ComboboxValuePair {\n    return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\n/**\n * @deprecated Bruk heller Select med `multiple` og `searchable` satt til\n * `true`. Combobox vil bli fjernet ved en senere oppdatering.\n */\nexport const Combobox: FC<ComboboxProps> = (props) => {\n    const {\n        \"data-size\": dataSize,\n        id,\n        placeholder,\n        items,\n        onChange,\n        onFocus,\n        onBlur,\n        value,\n        label,\n        noMatchingOption,\n        labelProps,\n        helpLabel,\n        errorLabel,\n        width,\n        name,\n        className,\n        invalid,\n        description,\n        hasTagHover,\n        tooltip,\n        disabled,\n        readOnly,\n    } = props;\n    // Begge tilstandene låser utvalget: menyen skal ikke kunne åpnes og tagger ikke fjernes.\n    const locked = disabled || readOnly;\n    const listId = useId(id || \"jkl-combobox\", { generateSuffix: !id });\n    const labelId = `${listId}_label`;\n    const buttonId = `${listId}_button`;\n    const inputId = `${listId}_search-input`;\n\n    const [selectedValue, setSelectedValue] = useState<\n        Array<ComboboxValuePair>\n    >(value || []);\n    const [showMenu, setShowMenu] = useState<boolean>(false);\n    const [searchValue, setSearchValue] = useState<string>(\"\");\n    const [noResults, setNoResults] = useState(false);\n    const [marked, setMarked] = useState<boolean>(false);\n\n    const searchRef = useRef<HTMLInputElement>(null);\n    const inputRef = useRef<HTMLDivElement>(null);\n    const focusInsideRef = useRef(false);\n\n    useEffect(() => {\n        setSearchValue(\"\");\n        if (showMenu && searchRef.current) {\n            searchRef.current.focus();\n        }\n    }, [showMenu]);\n\n    useEffect(() => {\n        setSelectedValue((prev) => value || prev);\n    }, [value]);\n\n    // Funksjon for å stile valgt element\n    const isSelected = (option: ValuePair) => {\n        if (!selectedValue) {\n            return false;\n        }\n\n        return selectedValue.some((value) => value.value === option.value);\n    };\n\n    // Fjerne ett eller flere valg\n    const removeOption = useCallback(\n        (option: string) => {\n            return selectedValue.filter((value) => value.value !== option);\n        },\n        [selectedValue],\n    );\n\n    const onTagRemove = useCallback(\n        (\n            e:\n                | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n                | React.KeyboardEvent<HTMLInputElement>,\n            option: string,\n        ) => {\n            const newValue = removeOption(option);\n            setSelectedValue(newValue);\n            onChange({\n                type: \"change\",\n                target: { name, value: option, selectedOptions: newValue },\n            });\n            e.stopPropagation();\n\n            if (newValue.length === 0) {\n                setMarked(false);\n            }\n        },\n        [removeOption, onChange, name],\n    );\n\n    // Håndtere valgt verdi i listen\n    const onItemClick = useCallback(\n        (option: string) => {\n            let newValue: Array<ValuePair>;\n\n            if (selectedValue.some((value) => value.value === option)) {\n                newValue = removeOption(option);\n            } else {\n                const item = items.find((i) => i.value === option);\n                newValue = [...selectedValue, item as ValuePair];\n            }\n            searchRef.current?.focus();\n            setSelectedValue(newValue);\n            onChange({\n                type: \"change\",\n                target: { name, value: option, selectedOptions: newValue },\n            });\n        },\n        [selectedValue, onChange, name, removeOption, items],\n    );\n\n    // Funksjon for søk\n    const onSearch = (e: {\n        target: { value: React.SetStateAction<string> };\n    }) => {\n        searchRef.current?.focus();\n        setShowMenu(true);\n        setSearchValue(e.target.value);\n    };\n\n    const options = useMemo(() => {\n        if (!searchValue) {\n            return items;\n        }\n\n        const filteredOptions = items.filter(\n            (option) =>\n                option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n                0,\n        );\n\n        setNoResults(filteredOptions.length === 0);\n\n        return filteredOptions;\n    }, [searchValue, items]);\n\n    // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n    const [activeDescendant, setActiveDescendant] = useState<\n        string | undefined\n    >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n    // Håndtere arrow-state\n    const isPointingDown = !showMenu;\n\n    // Lukk meny med ESC\n    useEffect(() => {\n        const handleEscape = (e: globalThis.KeyboardEvent) => {\n            if (e.key === \"Escape\" && showMenu) {\n                setShowMenu(false);\n            }\n        };\n        if (typeof window !== \"undefined\") {\n            window.addEventListener(\"keydown\", handleEscape);\n        }\n        return () => {\n            if (typeof window !== \"undefined\" && showMenu) {\n                window.removeEventListener(\"keydown\", handleEscape);\n            }\n        };\n    }, [showMenu]);\n\n    // Fokushåndtering\n    const handleFocusPlacement = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            if (searchRef.current) {\n                searchRef.current.focus();\n            }\n        } else {\n            if (focusInsideRef.current && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }\n    }, []);\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({\n                    type: \"change\",\n                    target: {\n                        name,\n                        value: selectedValue?.[0].value || \"\",\n                        selectedOptions: selectedValue,\n                    },\n                });\n            }\n            focusInsideRef.current = true;\n            if (!locked) {\n                setShowMenu(true);\n            }\n        }\n    }, [onFocus, selectedValue, name, locked]);\n\n    const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\n\n    const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n    const handleBlur = useCallback(\n        (\n            e: FocusEvent<\n                HTMLDivElement | HTMLInputElement | HTMLButtonElement\n            >,\n        ) => {\n            const componentRootElement = componentRootElementRef.current;\n            const nextFocusIsInsideComponent = componentRootElement?.contains(\n                e.relatedTarget as Node,\n            );\n            if (!nextFocusIsInsideComponent) {\n                setSearchValue(\"\");\n\n                if (onBlur) {\n                    onBlur({\n                        type: \"blur\",\n                        target: {\n                            name,\n                            value: selectedValue?.[0]?.value || \"\",\n                            selectedOptions: selectedValue,\n                        },\n                    });\n                    inputRef.current?.dispatchEvent(\n                        new Event(\"focusout\", { bubbles: true }),\n                    );\n                }\n                focusInsideRef.current = false;\n                setShowMenu(false);\n            }\n        },\n        [onBlur, name, selectedValue],\n    );\n\n    const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n        // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n        // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n        (e.target as HTMLButtonElement).focus({ preventScroll: true });\n    }, []);\n\n    // Tastaturnavigasjon\n    const handleSearchOnKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"ArrowDown\") {\n                e.preventDefault();\n                e.stopPropagation();\n                const listElement = dropdownRef.current;\n                if (listElement) {\n                    listElement\n                        .querySelector<HTMLButtonElement>('[role=\"option\"]')\n                        ?.focus();\n                }\n            } else if (e.key === \"Escape\") {\n                e.preventDefault();\n                e.stopPropagation();\n                setShowMenu(false);\n            }\n\n            if ((e.metaKey && e.key === \"a\") || (e.ctrlKey && e.key === \"a\")) {\n                e.preventDefault();\n                e.stopPropagation();\n                const updatedSelectedValue = selectedValue.map((item) => ({\n                    ...item,\n                    isMarked: true,\n                }));\n                setMarked(true);\n                setSelectedValue(updatedSelectedValue);\n            } else if (e.key === \"Backspace\") {\n                e.stopPropagation();\n                setMarked(false);\n\n                // Sjekk om selectedValue er markert\n                const selectedValueIsMarked = selectedValue.some(\n                    (item) => item.isMarked,\n                );\n\n                if (selectedValueIsMarked) {\n                    const updatedSelectedValue = selectedValue.filter(\n                        (item) => !item.isMarked,\n                    );\n                    setSelectedValue(updatedSelectedValue);\n                    setSearchValue(\"\");\n                } else if (selectedValue.length > 0 && searchValue === \"\") {\n                    // Hvis ingen items er markert, fjern siste valgte item\n                    onTagRemove(\n                        e,\n                        selectedValue[selectedValue.length - 1].value,\n                    );\n                }\n            }\n        },\n        [selectedValue, searchValue, dropdownRef, onTagRemove],\n    );\n\n    const handleOptionOnKeyDown = useCallback(\n        (e: KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Tab\") {\n                if (searchRef.current) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey) {\n                        searchRef.current.focus();\n                    } else {\n                        setShowMenu(false);\n                        searchRef.current.focus();\n                    }\n                }\n            } else if (e.key === \"ArrowUp\") {\n                if (dropdownRef.current && searchRef.current) {\n                    // Can't be based on index since the first item might be filtered out\n                    const firstVisible = dropdownRef.current.querySelector(\n                        '[role=\"option\"]:not([hidden])',\n                    );\n                    if (\n                        e.currentTarget.id === firstVisible?.id &&\n                        searchRef.current\n                    ) {\n                        searchRef.current.focus();\n                    }\n                }\n            }\n        },\n        [dropdownRef],\n    );\n\n    const hasSelection = selectedValue.length >= 1;\n\n    const renderSelectedOption = useCallback(\n        (option: ComboboxValuePair) => (\n            <Chip\n                key={option.value}\n                data-testid=\"jkl-chip\"\n                aria-label={`Fjern ${option.tagLabel}`}\n                className={`jkl-combobox__selected-option ${\n                    marked && \"jkl-combobox__selected-option--marked\"\n                }`}\n                variant=\"input\"\n                disabled={locked}\n                onClick={(e) => {\n                    if (searchRef.current) {\n                        searchRef.current.focus();\n                    }\n                    onTagRemove(e, option.value);\n                }}\n                onBlur={handleBlur}\n            >\n                {option.tagLabel ? option.tagLabel : option.label}\n            </Chip>\n        ),\n        [handleBlur, onTagRemove, marked, locked],\n    );\n\n    return (\n        <InputGroup\n            label={label}\n            id={inputId}\n            ref={componentRootElementRef}\n            data-testid=\"jkl-combobox\"\n            data-size={dataSize}\n            className={clsx(\"jkl-combobox\", className, {\n                \"jkl-combobox--invalid\": !!errorLabel || invalid,\n                \"jkl-combobox--menu-open\": showMenu,\n                \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n            })}\n            labelProps={{\n                id: labelId,\n                ...labelProps,\n            }}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            description={description}\n            tooltip={tooltip}\n            render={(inputProps) => (\n                <div\n                    className={clsx(\"jkl-combobox__wrapper\", {\n                        \"jkl-combobox__wrapper--active-value\": hasSelection,\n                    })}\n                    style={{ width }}\n                    tabIndex={-1}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    data-invalid={!!errorLabel || invalid}\n                >\n                    <div\n                        className=\"jkl-combobox__chips\"\n                        data-testid=\"jkl-combobox__chips\"\n                    >\n                        {selectedValue\n                            .map(getComboboxValuePair)\n                            .map((option) => {\n                                return hasTagHover ? (\n                                    <Tooltip key={option.value}>\n                                        <TooltipTrigger>\n                                            {renderSelectedOption(option)}\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            {option.label}\n                                        </TooltipContent>\n                                    </Tooltip>\n                                ) : (\n                                    renderSelectedOption(option)\n                                );\n                            })}\n                        <input\n                            {...inputProps}\n                            className=\"jkl-combobox__search-input\"\n                            onChange={onSearch}\n                            data-testid=\"jkl-combobox__search-input\"\n                            onFocus={handleFocus}\n                            onBlur={handleBlur}\n                            onKeyDown={handleSearchOnKeyDown}\n                            value={searchValue}\n                            ref={searchRef}\n                            aria-controls={listId}\n                            role=\"combobox\"\n                            aria-autocomplete=\"list\"\n                            aria-expanded={showMenu}\n                            placeholder={\n                                selectedValue.length > 0 ? \"\" : placeholder\n                            }\n                            autoComplete=\"off\"\n                            disabled={disabled}\n                            readOnly={readOnly}\n                        />\n                    </div>\n\n                    <div\n                        className=\"jkl-combobox__menu\"\n                        // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n                        role=\"listbox\"\n                        ref={dropdownRef}\n                        id={listId}\n                        aria-labelledby={labelId}\n                        aria-multiselectable=\"true\"\n                        aria-activedescendant={activeDescendant}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        tabIndex={-1}\n                    >\n                        {options.map((option, i) => (\n                            <button\n                                key={`${listId}-${option.value}`}\n                                type=\"button\"\n                                id={`${listId}__${option.value}`}\n                                aria-selected={isSelected(option)}\n                                // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n                                role=\"option\"\n                                value={option.value}\n                                onBlur={handleBlur}\n                                className={`jkl-combobox__option ${\n                                    isSelected(option) &&\n                                    \"jkl-combobox__option--selected\"\n                                }`}\n                                data-testid=\"jkl-combobox__option\"\n                                data-testautoid={`jkl-combobox__option-${i}`}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOptionOnKeyDown}\n                                onClick={(e) => {\n                                    setActiveDescendant(\n                                        `${listId}__${option.value}`,\n                                    ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n                                    e.stopPropagation();\n                                    onItemClick(option.value);\n                                    setSearchValue(\"\");\n                                }}\n                                onMouseOver={handleMouseOver}\n                            >\n                                {option.description ? (\n                                    <span>\n                                        {option.label}\n                                        <span className=\"jkl-combobox__option-description\">\n                                            {option.description}\n                                        </span>\n                                    </span>\n                                ) : (\n                                    option.label\n                                )}\n                                {isSelected(option) ? (\n                                    <span>\n                                        <CheckIcon />{\" \"}\n                                    </span>\n                                ) : null}\n                            </button>\n                        ))}\n                        {noResults && (\n                            <div className=\"jkl-combobox__no-option\">\n                                {noMatchingOption}\n                            </div>\n                        )}\n                    </div>\n                    <IconButton\n                        id={buttonId}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        className=\"jkl-text-input-action-button\"\n                        data-testid=\"jkl-combobox__button\"\n                        aria-label=\"Åpne meny\"\n                        aria-expanded={showMenu}\n                        aria-controls={listId}\n                        disabled={locked}\n                        onClick={() => setShowMenu((previous) => !previous)}\n                        onMouseDown={(e) => {\n                            e.preventDefault();\n                            inputRef.current?.focus();\n                        }}\n                    >\n                        <ArrowVerticalAnimated pointingDown={isPointingDown} />\n                    </IconButton>\n                </div>\n            )}\n        />\n    );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","tooltip","disabled","readOnly","locked","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/combobox/types.d.cts

@@ -1,4 +1,5 @@
 import { ChangeEvent } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { ValuePair } from '../../utilities/valuePair.cjs';
 import { InputGroupProps, LabelProps } from '../input-group/types.cjs';
 export type ComboboxValuePair = ValuePair & {
@@ -14,7 +15,7 @@ export interface ComboboxPartialChangeEvent extends Partial<Omit<ChangeEvent<HTM
     };
 }
 export type ComboboxChangeEventHandler = (event: ComboboxPartialChangeEvent) => void;
-export interface ComboboxProps extends InputGroupProps {
+export interface ComboboxProps extends InputGroupProps, WithDisabled, WithReadOnly {
     id?: string;
     placeholder?: string;
     labelProps?: Omit<LabelProps, "children" | "htmlFor" | "standAlone">;

package/build/cjs/components/date-input/DateInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/mergeRefs.cjs");require("../../utilities/polymorphism/SlotComponent.cjs");const i=require("../button/Button.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs");const c=require("../icon/icons/CalendarIcon.cjs");require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../../hooks/useId/useId.cjs");const s=require("../input-group/InputGroup.cjs"),t=require("./calendar/Calendar.cjs"),a=require("./utils.cjs"),u=o.forwardRef((u,l)=>{const{max:d,min:p,defaultValue:j,value:q,name:I,onChange:m,onBlur:b,onClick:v,onFocus:h,id:C,"data-testautoid":g,className:w="",label:k,labelProps:y,helpLabel:f,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,required:D,disabled:P,readOnly:N,autoComplete:R,inputMode:B,...M}=u,{inline:O,style:S,"data-size":E,...T}=M,V=o.useId(),z=C?`${C}-calendar`:`jkl-calendar-${V}`,G=void 0!==q,[H,U]=o.useState(j??""),F=G?q:H,$=a.toValidBoundary(p),Q=a.toValidBoundary(d),W=o.useRef(null),J=r.useMergeRefs(W,l),K=e=>{G||U(e.target.value),m?.(e)},X=()=>{!G&&W.current&&U(W.current.value)};return e.jsx(s.InputGroup,{id:C,className:n.clsx("jkl-date-input",w),inline:O,style:S,"data-size":E,label:k,labelProps:y,helpLabel:f,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,render:n=>e.jsxs("div",{className:"jkl-date-input__wrapper","data-invalid":n["aria-invalid"],children:[e.jsx("input",{ref:J,"data-testid":"jkl-date-input__input","data-testautoid":g,"data-empty":F?void 0:"true",className:"jkl-date-input__input",name:I,type:"date",...G?{value:q}:{defaultValue:j},max:Q,min:$,required:D,disabled:P,readOnly:N,autoComplete:R,inputMode:B,onChange:K,onFocus:h,onBlur:b,onClick:e=>{e.preventDefault(),v?.(e)},...T,...n}),e.jsx(i.Button,{type:"button",variant:"ghost",icon:e.jsx(c.CalendarIcon,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:P||N,onClick:X,popovertarget:z}),e.jsx(t.Calendar,{"data-testid":"jkl-calendar",id:z,value:F,min:$,max:Q,onChange:e=>(e=>{const n=W.current;if(!n)return;const o=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;o?o.call(n,e):n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0}))})(e.target.value),label:k,description:_,popover:"auto"})]})})});u.displayName="DateInput",exports.DateInput=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),o=require("../../hooks/useMergeRefs/useMergeRefs.cjs"),i=require("../button/Button.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs");const c=require("../icon/icons/CalendarIcon.cjs");require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../../hooks/useId/useId.cjs");const s=require("../input-group/InputGroup.cjs"),t=require("./calendar/Calendar.cjs"),a=require("./utils.cjs"),u=r.forwardRef((u,l)=>{const{max:d,min:p,defaultValue:j,value:q,name:I,onChange:m,onBlur:b,onClick:v,onFocus:g,id:h,"data-testautoid":C,className:k="",label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,...B}=u,{inline:O,style:E,"data-size":S,...T}=B,V=r.useId(),z=h?`${h}-calendar`:`jkl-calendar-${V}`,G=void 0!==q,[H,U]=r.useState(j??""),F=G?q:H,$=a.toValidBoundary(p),Q=a.toValidBoundary(d),W=r.useRef(null),J=o.useMergeRefs(W,l),K=e=>{G||U(e.target.value),m?.(e)},X=()=>{!G&&W.current&&U(W.current.value)};return e.jsx(s.InputGroup,{id:h,className:n.clsx("jkl-date-input",k),inline:O,style:E,"data-size":S,label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,render:n=>e.jsxs("div",{className:"jkl-date-input__wrapper","data-invalid":n["aria-invalid"],children:[e.jsx("input",{ref:J,"data-testid":"jkl-date-input__input","data-testautoid":C,"data-empty":F?void 0:"true",className:"jkl-date-input__input",name:I,type:"date",...G?{value:q}:{defaultValue:j},max:Q,min:$,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,onChange:K,onFocus:g,onBlur:b,onClick:e=>{e.preventDefault(),v?.(e)},...T,...n}),e.jsx(i.Button,{type:"button",variant:"ghost",icon:e.jsx(c.CalendarIcon,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:P||R,onClick:X,popovertarget:z}),e.jsx(t.Calendar,{"data-testid":"jkl-calendar",id:z,value:F,min:$,max:Q,onChange:e=>(e=>{const n=W.current;if(!n)return;const r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;r?r.call(n,e):n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0}))})(e.target.value),label:w,description:_,popover:"auto"})]})})});u.displayName="DateInput",exports.DateInput=u;
 //# sourceMappingURL=DateInput.cjs.map

package/build/cjs/components/date-input/DateInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n    (props, forwardedInputRef) => {\n        const {\n            max,\n            min,\n            defaultValue,\n            value,\n            name,\n            onChange,\n            onBlur,\n            onClick,\n            onFocus,\n            id,\n            \"data-testautoid\": testAutoId,\n            className = \"\",\n            label,\n            labelProps,\n            helpLabel,\n            errorLabel,\n            supportLabelProps,\n            tooltip,\n            description,\n            required,\n            disabled,\n            readOnly,\n            autoComplete,\n            inputMode,\n            ...rest\n        } = props;\n\n        // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n        // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n        const {\n            inline,\n            style,\n            \"data-size\": dataSize,\n            ...inputAttributes\n        } = rest;\n\n        const generatedCalendarId = useId();\n        const calendarId = id\n            ? `${id}-calendar`\n            : `jkl-calendar-${generatedCalendarId}`;\n\n        const isControlled = value !== undefined;\n\n        // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n        // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n        // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n        const [internalValue, setInternalValue] = useState<string>(\n            defaultValue ?? \"\",\n        );\n        const currentValue = isControlled ? value : internalValue;\n\n        // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n        // react-hook-forms register). Både det native feltet og kalenderen\n        // forholder seg til ISO-strenger.\n        const minValue = toValidBoundary(min);\n        const maxValue = toValidBoundary(max);\n\n        // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n        // slik at vi kan lese og skrive verdien fra kalenderen.\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n        const handleInputChange = (\n            event: React.ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) {\n                setInternalValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n        // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n        // slik at også react-hook-form fanger endringen.\n        const commitFromCalendar = (next: string) => {\n            const input = inputRef.current;\n            if (!input) {\n                return;\n            }\n            const setNativeValue = Object.getOwnPropertyDescriptor(\n                window.HTMLInputElement.prototype,\n                \"value\",\n            )?.set;\n            if (setNativeValue) {\n                setNativeValue.call(input, next);\n            } else {\n                input.value = next;\n            }\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n        // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n        // ukontrollert modus.\n        const syncCalendarFromInput = () => {\n            if (!isControlled && inputRef.current) {\n                setInternalValue(inputRef.current.value);\n            }\n        };\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-date-input\", className)}\n                inline={inline}\n                style={style}\n                data-size={dataSize}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-date-input__wrapper\"\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                    >\n                        <input\n                            ref={setInputRef}\n                            data-testid=\"jkl-date-input__input\"\n                            data-testautoid={testAutoId}\n                            data-empty={currentValue ? undefined : \"true\"}\n                            className=\"jkl-date-input__input\"\n                            name={name}\n                            type=\"date\"\n                            {...(isControlled ? { value } : { defaultValue })}\n                            max={maxValue}\n                            min={minValue}\n                            required={required}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                            autoComplete={autoComplete}\n                            inputMode={inputMode}\n                            onChange={handleInputChange}\n                            onFocus={onFocus}\n                            onBlur={onBlur}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClick?.(e);\n                            }}\n                            {...inputAttributes}\n                            {...inputProps}\n                        />\n                        <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            icon={<CalendarIcon />}\n                            aria-label=\"Åpne kalender\"\n                            data-testid=\"jkl-date-input__trigger\"\n                            className=\"jkl-date-input__calendar-trigger\"\n                            disabled={disabled || readOnly}\n                            onClick={syncCalendarFromInput}\n                            // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n                            popovertarget={calendarId}\n                        />\n                        <Calendar\n                            data-testid=\"jkl-calendar\"\n                            id={calendarId}\n                            value={currentValue}\n                            min={minValue}\n                            max={maxValue}\n                            onChange={(e) => commitFromCalendar(e.target.value)}\n                            label={label}\n                            description={description}\n                            popover=\"auto\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"q9DAUaA,EAAYC,EAAAA,WACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
+{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs/useMergeRefs.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n    (props, forwardedInputRef) => {\n        const {\n            max,\n            min,\n            defaultValue,\n            value,\n            name,\n            onChange,\n            onBlur,\n            onClick,\n            onFocus,\n            id,\n            \"data-testautoid\": testAutoId,\n            className = \"\",\n            label,\n            labelProps,\n            helpLabel,\n            errorLabel,\n            supportLabelProps,\n            tooltip,\n            description,\n            required,\n            disabled,\n            readOnly,\n            autoComplete,\n            inputMode,\n            ...rest\n        } = props;\n\n        // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n        // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n        const {\n            inline,\n            style,\n            \"data-size\": dataSize,\n            ...inputAttributes\n        } = rest;\n\n        const generatedCalendarId = useId();\n        const calendarId = id\n            ? `${id}-calendar`\n            : `jkl-calendar-${generatedCalendarId}`;\n\n        const isControlled = value !== undefined;\n\n        // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n        // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n        // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n        const [internalValue, setInternalValue] = useState<string>(\n            defaultValue ?? \"\",\n        );\n        const currentValue = isControlled ? value : internalValue;\n\n        // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n        // react-hook-forms register). Både det native feltet og kalenderen\n        // forholder seg til ISO-strenger.\n        const minValue = toValidBoundary(min);\n        const maxValue = toValidBoundary(max);\n\n        // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n        // slik at vi kan lese og skrive verdien fra kalenderen.\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n        const handleInputChange = (\n            event: React.ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) {\n                setInternalValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n        // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n        // slik at også react-hook-form fanger endringen.\n        const commitFromCalendar = (next: string) => {\n            const input = inputRef.current;\n            if (!input) {\n                return;\n            }\n            const setNativeValue = Object.getOwnPropertyDescriptor(\n                window.HTMLInputElement.prototype,\n                \"value\",\n            )?.set;\n            if (setNativeValue) {\n                setNativeValue.call(input, next);\n            } else {\n                input.value = next;\n            }\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n        // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n        // ukontrollert modus.\n        const syncCalendarFromInput = () => {\n            if (!isControlled && inputRef.current) {\n                setInternalValue(inputRef.current.value);\n            }\n        };\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-date-input\", className)}\n                inline={inline}\n                style={style}\n                data-size={dataSize}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-date-input__wrapper\"\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                    >\n                        <input\n                            ref={setInputRef}\n                            data-testid=\"jkl-date-input__input\"\n                            data-testautoid={testAutoId}\n                            data-empty={currentValue ? undefined : \"true\"}\n                            className=\"jkl-date-input__input\"\n                            name={name}\n                            type=\"date\"\n                            {...(isControlled ? { value } : { defaultValue })}\n                            max={maxValue}\n                            min={minValue}\n                            required={required}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                            autoComplete={autoComplete}\n                            inputMode={inputMode}\n                            onChange={handleInputChange}\n                            onFocus={onFocus}\n                            onBlur={onBlur}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClick?.(e);\n                            }}\n                            {...inputAttributes}\n                            {...inputProps}\n                        />\n                        <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            icon={<CalendarIcon />}\n                            aria-label=\"Åpne kalender\"\n                            data-testid=\"jkl-date-input__trigger\"\n                            className=\"jkl-date-input__calendar-trigger\"\n                            disabled={disabled || readOnly}\n                            onClick={syncCalendarFromInput}\n                            // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n                            popovertarget={calendarId}\n                        />\n                        <Calendar\n                            data-testid=\"jkl-calendar\"\n                            id={calendarId}\n                            value={currentValue}\n                            min={minValue}\n                            max={maxValue}\n                            onChange={(e) => commitFromCalendar(e.target.value)}\n                            label={label}\n                            description={description}\n                            popover=\"auto\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"i6DAUaA,EAAYC,EAAAA,WACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}

package/build/cjs/components/date-input/DateInput.d.cts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const DateInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "max" | "min" | "type" | "value"> & import('../../utilities/types.js').DataTestAutoId & {
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "defaultValue" | "children" | "max" | "min" | "type" | "value" | "readOnly"> & import('../../utilities/types.js').DataTestAutoId & import('../../utilities/types.js').WithDisabled & import('../../utilities/types.js').WithReadOnly & {
     value?: string;
     defaultValue?: string;
     min?: string | number;

package/build/cjs/components/date-input/types.d.cts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { DataTestAutoId } from '../../utilities/types.cjs';
+import { DataTestAutoId, WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
 /**
  * Props for `DateInput`. Komponenten bygger på et native `<input type="date">`,
@@ -9,7 +9,7 @@ import { InputGroupProps } from '../input-group/types.cjs';
  * Kan brukes både kontrollert (`value` + `onChange`) og ukontrollert (`defaultValue`,
  * eller via react-hook-forms `register`).
  */
-export type DateInputProps = Omit<InputGroupProps, "children" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "min" | "max" | "children"> & DataTestAutoId & {
+export type DateInputProps = Omit<InputGroupProps, "children" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "min" | "max" | "children" | "disabled" | "readOnly"> & DataTestAutoId & WithDisabled & WithReadOnly & {
     /**
      * Kontrollert verdi som ISO-datostreng (`YYYY-MM-DD`), f.eks. `"2026-08-13"`.
      * Oppgis sammen med `onChange`. La stå udefinert for ukontrollert bruk.

package/build/cjs/components/input-group/InputGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),i=require("../../hooks/useId/useId.cjs"),s=require("./Label.cjs"),o=require("./SupportLabel.cjs"),n=l.forwardRef((n,t)=>{const{className:a,children:p,errorLabel:d,helpLabel:u,inline:c,label:j,labelProps:b,render:h,supportLabelProps:x,description:m,tooltip:y,id:v,...f}=n,g=i.useId(v||"jkl-input",{generateSuffix:!v}),k=i.useId("jkl-support-label"),I=i.useId("jkl-description"),L=!!y,S=d||u,q=d?"error":u?"help":void 0,w={"aria-describedby":[m?I:void 0,S?k:void 0].filter(Boolean).join(" ")||void 0,"aria-invalid":!!d||void 0,id:g},N=h?()=>h(w):()=>{const e=l.Children.toArray(n.children)[0];if(l.isValidElement(e))return l.cloneElement(e,{...w,...e.props})};return e.jsxs("div",{ref:t,className:r.clsx(a,"jkl-input-group",{"jkl-input-group--inline":c}),...f,children:[e.jsx(s.Label,{standAlone:!0,htmlFor:g,srOnly:c,...b,style:{whiteSpace:L?"nowrap":void 0,...b?.style},children:L?e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{whiteSpace:"normal"},children:j})," ",y]}):j}),m&&e.jsx("p",{id:I,className:"jkl-input-group-description",children:m}),N(),e.jsx(o.SupportLabel,{srOnly:c,...x,label:S,labelType:q,id:k})]})});n.displayName="InputGroup",exports.InputGroup=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),i=require("../../hooks/useId/useId.cjs"),s=require("./Label.cjs"),o=require("./SupportLabel.cjs"),t=l.forwardRef((t,n)=>{const{className:a,children:p,errorLabel:d,helpLabel:u,inline:c,label:j,labelProps:b,render:h,supportLabelProps:x,description:m,tooltip:y,id:v,...f}=t,k=i.useId(v||"jkl-input",{generateSuffix:!v}),g=i.useId("jkl-support-label"),I=i.useId("jkl-description"),L=!!y,S=d||u,q=d?"error":u?"help":void 0,N={"aria-describedby":[m?I:void 0,S?g:void 0].filter(Boolean).join(" ")||void 0,"aria-invalid":!!d||void 0,id:k},w=h?()=>h(N):()=>{const e=l.Children.toArray(t.children)[0];if(l.isValidElement(e))return l.cloneElement(e,{...N,...e.props})};return e.jsxs("div",{ref:n,className:r.clsx(a,"jkl-input-group",{"jkl-input-group--inline":c}),...f,children:[e.jsx(s.Label,{standAlone:!0,htmlFor:k,srOnly:c,...b,style:{whiteSpace:L?"nowrap":void 0,...b?.style},children:L?e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"jkl-label__text",style:{whiteSpace:"normal"},children:j})," ",y]}):j}),m&&e.jsx("p",{id:I,className:"jkl-input-group-description",children:m}),w(),e.jsx(o.SupportLabel,{srOnly:c,...x,label:S,labelType:q,id:g})]})});t.displayName="InputGroup",exports.InputGroup=t;
 //# sourceMappingURL=InputGroup.cjs.map

package/build/cjs/components/input-group/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n        const descriptionId = useId(\"jkl-description\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy =\n            [\n                description ? descriptionId : undefined,\n                supportText ? supportId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p\n                        id={descriptionId}\n                        className=\"jkl-input-group-description\"\n                    >\n                        {description}\n                    </p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,WACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAAA,MAAM,qBAClBG,EAAgBH,EAAAA,MAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAAA,KAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAAA,KAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAA,KAAAS,EAAAA,SAAA,CACIxC,SAAA,CAAAiC,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAAA,IAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}
+{"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n        const descriptionId = useId(\"jkl-description\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy =\n            [\n                description ? descriptionId : undefined,\n                supportText ? supportId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span\n                                className=\"jkl-label__text\"\n                                style={{ whiteSpace: \"normal\" }}\n                            >\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p\n                        id={descriptionId}\n                        className=\"jkl-input-group-description\"\n                    >\n                        {description}\n                    </p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,WACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAAA,MAAM,qBAClBG,EAAgBH,EAAAA,MAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAAA,KAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAAA,KAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAA,KAAAS,EAAAA,SAAA,CACIxC,SAAA,CAAAiC,EAAAA,IAAC,OAAA,CACGlC,UAAU,kBACVuC,MAAO,CAAEC,WAAY,UAEpBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAAA,IAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}

package/build/cjs/components/input-group/Label.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs");require("react");exports.Label=({variant:t="small",srOnly:s,children:a,standAlone:n,htmlFor:o,className:r="",...c})=>{const i=l.clsx("jkl-label",r,{[`jkl-label--${t}`]:t,"jkl-label--sr-only":s}),p=n?"label":"span";return!n&&o&&(o=void 0,"production"!==process.env.NODE_ENV&&console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.")),e.jsx(p,{...c,className:i,htmlFor:o,children:a})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs");require("react");exports.Label=({variant:a="small",srOnly:s,pageHeading:n,children:t,standAlone:o,htmlFor:r,className:c="",...i})=>{const d=l.clsx("jkl-label",c,{[`jkl-label--${a}`]:a&&!n,"jkl-label--sr-only":s&&!n}),p=o?"label":"span";!o&&r&&(r=void 0,"production"!==process.env.NODE_ENV&&console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components."));const h=e.jsx(p,{...i,className:d,htmlFor:r,children:t});return n?e.jsx("h1",{className:"jkl-label-heading",children:h}):h};
 //# sourceMappingURL=Label.cjs.map

package/build/cjs/components/input-group/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n    variant = \"small\",\n    srOnly,\n    children,\n    standAlone,\n    htmlFor,\n    className = \"\",\n    ...rest\n}) => {\n    const labelClassNames = clsx(\"jkl-label\", className, {\n        [`jkl-label--${variant}`]: variant,\n        \"jkl-label--sr-only\": srOnly,\n    });\n\n    const C = standAlone ? \"label\" : \"span\";\n\n    if (!standAlone && htmlFor) {\n        htmlFor = undefined;\n        if (process.env.NODE_ENV !== \"production\") {\n            console.warn(\n                \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n            );\n        }\n    }\n\n    return (\n        <C {...rest} className={labelClassNames} htmlFor={htmlFor}>\n            {children}\n        </C>\n    );\n};\n"],"names":["variant","srOnly","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn"],"mappings":"4LAIqC,EACjCA,QAAAA,EAAU,QACVC,OAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEH,MAAMC,EAAkBC,EAAAA,KAAK,YAAaH,EAAW,CACjD,CAAC,cAAcL,KAAYA,EAC3B,qBAAsBC,IAGpBQ,EAAIN,EAAa,QAAU,OAEjC,OAAKA,GAAcC,IACfA,OAAU,EACmB,eAAzBM,QAAQC,IAAIC,UACZC,QAAQC,KACJ,qVAMPL,EAAA,IAAMH,EAAMD,UAAWE,EAAiBH,QAAAA,EACpCF,SAAAA"}
+{"version":3,"file":"Label.cjs","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n    variant = \"small\",\n    srOnly,\n    pageHeading,\n    children,\n    standAlone,\n    htmlFor,\n    className = \"\",\n    ...rest\n}) => {\n    const labelClassNames = clsx(\"jkl-label\", className, {\n        [`jkl-label--${variant}`]: variant && !pageHeading,\n        \"jkl-label--sr-only\": srOnly && !pageHeading,\n    });\n\n    const C = standAlone ? \"label\" : \"span\";\n\n    if (!standAlone && htmlFor) {\n        htmlFor = undefined;\n        if (process.env.NODE_ENV !== \"production\") {\n            console.warn(\n                \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n            );\n        }\n    }\n\n    const label = (\n        <C {...rest} className={labelClassNames} htmlFor={htmlFor}>\n            {children}\n        </C>\n    );\n\n    if (pageHeading) {\n        return <h1 className=\"jkl-label-heading\">{label}</h1>;\n    }\n\n    return label;\n};\n"],"names":["variant","srOnly","pageHeading","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn","label","jsx"],"mappings":"4LAIqC,EACjCA,QAAAA,EAAU,QACVC,OAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEH,MAAMC,EAAkBC,EAAAA,KAAK,YAAaH,EAAW,CACjD,CAAC,cAAcN,KAAYA,IAAYE,EACvC,qBAAsBD,IAAWC,IAG/BQ,EAAIN,EAAa,QAAU,QAE5BA,GAAcC,IACfA,OAAU,EACmB,eAAzBM,QAAQC,IAAIC,UACZC,QAAQC,KACJ,+UAKZ,MAAMC,QACDN,EAAA,IAAMH,EAAMD,UAAWE,EAAiBH,QAAAA,EACpCF,SAAAA,IAIT,OAAID,EACOe,EAAAA,IAAC,KAAA,CAAGX,UAAU,oBAAqBH,SAAAa,IAGvCA"}

package/build/cjs/components/input-group/types.d.cts

@@ -1,6 +1,6 @@
 import { CSSProperties, FieldsetHTMLAttributes, ReactNode } from 'react';
-import { DataTestAutoId, Size, WithChildren, WithOptionalChildren } from '../../utilities/types.cjs';
-export interface FieldGroupProps extends DataTestAutoId, FieldsetHTMLAttributes<HTMLFieldSetElement> {
+import { DataTestAutoId, Size, WithChildren, WithDisabled, WithOptionalChildren } from '../../utilities/types.cjs';
+export interface FieldGroupProps extends DataTestAutoId, Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "disabled">, WithDisabled {
     legend: string;
     labelProps?: Omit<LabelProps, "children">;
     supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel">;
@@ -42,6 +42,13 @@ export interface LabelProps extends WithChildren {
     id?: string;
     variant?: LabelVariant;
     srOnly?: boolean;
+    /**
+     * Viser labelen eller legenden som sidens hovedoverskrift (`<h1>`).
+     * Bruk ved ett spørsmål per side. Ikke kombiner med `srOnly`.
+     *
+     * @default false
+     */
+    pageHeading?: boolean;
     standAlone?: boolean;
     htmlFor?: string;
     className?: string;

package/build/cjs/components/input-panel/InputPanel.d.cts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & import('../../utilities/types.js').JokulModes & {
+export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "children"> & import('../../utilities/types.js').JokulModes & import('../../utilities/types.js').WithDisabled & {
     label: string;
     type: "radio" | "checkbox";
     amount?: string;

package/build/cjs/components/input-panel/types.d.cts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-import { JokulModes } from '../../utilities/types.cjs';
-export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & JokulModes & {
+import { JokulModes, WithDisabled } from '../../utilities/types.cjs';
+export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "disabled"> & JokulModes & WithDisabled & {
     label: string;
     type: "radio" | "checkbox";
     /**

package/build/cjs/components/message/Message.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),c=require("../icon/icons/SuccessIcon.cjs"),l=require("../icon/icons/WarningIcon.cjs"),o=require("./DismissButton.cjs"),t=e=>{switch(e){case"error":return s.jsx(r.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(n.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(c.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(l.WarningIcon,{className:"jkl-message__icon"});default:return null}};function m(r){const n=i.forwardRef((n,c)=>{const{id:l,title:m,fullWidth:d,className:u="",dismissed:j,dismissAction:g,children:k,role:x,...f}=n,_=a.useId(l||"jkl-message",{generateSuffix:!l}),h=i.Children.map(k,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:k}):k;return s.jsxs("div",{...f,id:l,ref:c,className:e.clsx("jkl-message",`jkl-message--${r}`,u,{"jkl-message--full":d,"jkl-message--dismissed":j}),role:x,children:[t(r),s.jsxs("div",{className:"jkl-message__content",children:[m&&s.jsx("p",{className:"jkl-message__title",children:m}),s.jsx("div",{className:"jkl-message__message",children:h})]}),g?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})});return n.displayName="Message",n}const d=i.forwardRef((r,n)=>{const{id:c,title:l,fullWidth:m,className:d="",dismissed:u,dismissAction:j,children:g,variant:k="info",role:x,...f}=r,_=a.useId(c||"jkl-message",{generateSuffix:!c}),h=i.Children.map(g,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:g}):g;return s.jsxs("div",{...f,id:c,ref:n,className:e.clsx("jkl-message",`jkl-message--${k}`,d,{"jkl-message--full":m,"jkl-message--dismissed":u}),role:x,children:[t(k),s.jsxs("div",{className:"jkl-message__content",children:[l&&s.jsx("p",{className:"jkl-message__title",children:l}),s.jsx("div",{className:"jkl-message__message",children:h})]}),j?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})}),u=m("info");u.displayName="InfoMessage";const j=m("error");j.displayName="ErrorMessage";const g=m("warning");g.displayName="WarningMessage";const k=m("success");k.displayName="SuccessMessage",exports.ErrorMessage=j,exports.InfoMessage=u,exports.Message=d,exports.SuccessMessage=k,exports.WarningMessage=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),c=require("../icon/icons/SuccessIcon.cjs"),l=require("../icon/icons/WarningIcon.cjs"),o=require("./DismissButton.cjs"),t=e=>{switch(e){case"error":return s.jsx(r.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(n.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(c.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(l.WarningIcon,{className:"jkl-message__icon"});default:return null}};function m(r){const n=i.forwardRef((n,c)=>{const{id:l,title:m,fullWidth:d,className:u="",dismissed:j,dismissAction:g,children:k,role:x,...f}=n,_=a.useId(l||"jkl-message",{generateSuffix:!l}),h=i.Children.map(k,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:k}):k;return s.jsxs("div",{...f,id:l,ref:c,className:e.clsx("jkl-message",u,{"jkl-message--full":d,"jkl-message--dismissed":j}),"data-color":r,role:x,children:[t(r),s.jsxs("div",{className:"jkl-message__content",children:[m&&s.jsx("p",{className:"jkl-message__title",children:m}),s.jsx("div",{className:"jkl-message__message",children:h})]}),g?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})});return n.displayName="Message",n}const d=i.forwardRef((r,n)=>{const{id:c,title:l,fullWidth:m,className:d="",dismissed:u,dismissAction:j,children:g,variant:k="info",role:x,...f}=r,_=a.useId(c||"jkl-message",{generateSuffix:!c}),h=i.Children.map(g,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:g}):g;return s.jsxs("div",{...f,id:c,ref:n,className:e.clsx("jkl-message",d,{"jkl-message--full":m,"jkl-message--dismissed":u}),"data-testid":"jkl-message","data-color":k,role:x,children:[t(k),s.jsxs("div",{className:"jkl-message__content",children:[l&&s.jsx("p",{className:"jkl-message__title",children:l}),s.jsx("div",{className:"jkl-message__message",children:h})]}),j?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})}),u=m("info");u.displayName="InfoMessage";const j=m("error");j.displayName="ErrorMessage";const g=m("warning");g.displayName="WarningMessage";const k=m("success");k.displayName="SuccessMessage",exports.ErrorMessage=j,exports.InfoMessage=u,exports.Message=d,exports.SuccessMessage=k,exports.WarningMessage=g;
 //# sourceMappingURL=Message.cjs.map

package/build/cjs/components/message/Message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"iaAUMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAAA,MAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAAA,IAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAAA,KAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAAA,KACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAAA,KAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAAA,IAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAAA,IAAC8B,EAAAA,cAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EAAAA,WACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAAA,MAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAAA,IAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAAA,KAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAAA,KACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAAA,KAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAAA,IAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAAA,IAAC8B,EAAAA,cAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}
+{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\"jkl-message\", className, {\n                    \"jkl-message--full\": fullWidth,\n                    \"jkl-message--dismissed\": dismissed,\n                })}\n                data-color={messageType}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\"jkl-message\", className, {\n                    \"jkl-message--full\": fullWidth,\n                    \"jkl-message--dismissed\": dismissed,\n                })}\n                data-testid=\"jkl-message\"\n                data-color={variant}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"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"}

package/build/cjs/components/message/types.d.cts

@@ -1,3 +1,4 @@
+import { ColorMode } from '../../utilities/types.cjs';
 export interface MessageProps extends React.ComponentPropsWithoutRef<"div"> {
     fullWidth?: boolean;
     dismissed?: boolean;
@@ -5,7 +6,10 @@ export interface MessageProps extends React.ComponentPropsWithoutRef<"div"> {
         handleDismiss: () => void;
         buttonTitle?: string;
     };
-    variant?: "info" | "error" | "success" | "warning";
+    /**
+     * @default "info"
+     */
+    variant?: ColorMode;
 }
 export interface FormErrorMessageProps {
     className?: string;