@fremtind/jokul 5.0.5 → 5.2.0

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}=x,D=n.useId(j||"jkl-combobox",{generateSuffix:!j}),E=`${D}_label`,A=`${D}_button`,F=`${D}_search-input`,[M,O]=t.useState(y||[]),[K,H]=t.useState(!1),[R,V]=t.useState(""),[z,G]=t.useState(!1),[U,J]=t.useState(!1),Q=t.useRef(null),W=t.useRef(null),X=t.useRef(!1);t.useEffect(()=>{V(""),K&&Q.current&&Q.current.focus()},[K]),t.useEffect(()=>{O(e=>y||e)},[y]);const Y=e=>!!M&&M.some(o=>o.value===e.value),Z=t.useCallback(e=>M.filter(o=>o.value!==e),[M]),ee=t.useCallback((e,o)=>{const t=Z(o);O(t),h({type:"change",target:{name:T,value:o,selectedOptions:t}}),e.stopPropagation(),0===t.length&&J(!1)},[Z,h,T]),oe=t.useCallback(e=>{let o;if(M.some(o=>o.value===e))o=Z(e);else{const t=f.find(o=>o.value===e);o=[...M,t]}Q.current?.focus(),O(o),h({type:"change",target:{name:T,value:e,selectedOptions:o}})},[M,h,T,Z,f]),te=e=>{Q.current?.focus(),H(!0),V(e.target.value)},ae=t.useMemo(()=>{if(!R)return f;const e=f.filter(e=>e.label.toLowerCase().indexOf(R.toLowerCase())>=0);return G(0===e.length),e},[R,f]),[ne,re]=t.useState(ae[0]?.value?`${D}-${ae[0]?.value}`:void 0),le=!K;t.useEffect(()=>{const e=e=>{"Escape"===e.key&&K&&H(!1)};return typeof window<"u"&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&K&&window.removeEventListener("keydown",e)}},[K]);const se=t.useCallback(e=>{e?Q.current&&Q.current.focus():X.current&&W.current&&W.current.focus()},[]),ie=t.useCallback(()=>{X.current||(g&&g({type:"change",target:{name:T,value:M?.[0].value||"",selectedOptions:M}}),X.current=!0,H(!0))},[g,M,T]),[ce]=a.useAnimatedHeight(K,{onFirstVisible:se,onTransitionEnd:se});r.useListNavigation({ref:ce});const ue=t.useRef(null),pe=t.useCallback(e=>{ue.current?.contains(e.relatedTarget)||(V(""),_&&(_({type:"blur",target:{name:T,value:M?.[0]?.value||"",selectedOptions:M}}),W.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),X.current=!1,H(!1))},[_,T,M]),de=t.useCallback(e=>{e.target.focus({preventScroll:!0})},[]),be=t.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ce.current;o&&o.querySelector('[role="option"]')?.focus()}else"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),H(!1));if(e.metaKey&&"a"===e.key||e.ctrlKey&&"a"===e.key){e.preventDefault(),e.stopPropagation();const o=M.map(e=>({...e,isMarked:!0}));J(!0),O(o)}else if("Backspace"===e.key)if(e.stopPropagation(),J(!1),M.some(e=>e.isMarked)){const e=M.filter(e=>!e.isMarked);O(e),V("")}else M.length>0&&""===R&&ee(e,M[M.length-1].value)},[M,R,ce,ee]),me=t.useCallback(e=>{if("Tab"===e.key)Q.current&&(e.preventDefault(),e.stopPropagation(),e.shiftKey||H(!1),Q.current.focus());else if("ArrowUp"===e.key&&ce.current&&Q.current){const o=ce.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===o?.id&&Q.current&&Q.current.focus()}},[ce]),xe=M.length>=1,ke=t.useCallback(o=>e.jsx(l.Chip,{"data-testid":"jkl-chip","aria-label":`Fjern ${o.tagLabel}`,className:`jkl-combobox__selected-option ${U&&"jkl-combobox__selected-option--marked"}`,variant:"input",onClick:e=>{Q.current&&Q.current.focus(),ee(e,o.value)},onBlur:pe,children:o.tagLabel?o.tagLabel:o.label},o.value),[pe,ee,U]);return e.jsx(u.InputGroup,{label:C,id:F,ref:ue,"data-testid":"jkl-combobox","data-size":k,className:o.clsx("jkl-combobox",S,{"jkl-combobox--invalid":!!$||I,"jkl-combobox--menu-open":K,"jkl-combobox--menu-closed":!K&&xe}),labelProps:{id:E,...q},helpLabel:N,errorLabel:$,description:P,render:t=>e.jsxs("div",{className:o.clsx("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":xe}),style:{width:L},tabIndex:-1,onFocus:ie,onBlur:pe,children:[e.jsxs("div",{className:"jkl-combobox__chips","data-testid":"jkl-combobox__chips",children:[M.map(m).map(o=>B?e.jsxs(p.Tooltip,{children:[e.jsx(b.TooltipTrigger,{children:ke(o)}),e.jsx(d.TooltipContent,{children:o.label})]},o.value):ke(o)),e.jsx("input",{...t,className:"jkl-combobox__search-input",onChange:te,"data-testid":"jkl-combobox__search-input",onFocus:ie,onBlur:pe,onKeyDown:be,value:R,ref:Q,"aria-controls":D,role:"combobox","aria-autocomplete":"list","aria-expanded":K,placeholder:M.length>0?"":v,autoComplete:"off"})]}),e.jsxs("div",{className:"jkl-combobox__menu",role:"listbox",ref:ce,id:D,"aria-labelledby":E,"aria-multiselectable":"true","aria-activedescendant":ne,onFocus:ie,onBlur:pe,tabIndex:-1,children:[ae.map((o,t)=>e.jsxs("button",{type:"button",id:`${D}__${o.value}`,"aria-selected":Y(o),role:"option",value:o.value,onBlur:pe,className:`jkl-combobox__option ${Y(o)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:ie,onKeyDown:me,onClick:e=>{re(`${D}__${o.value}`),e.stopPropagation(),oe(o.value),V("")},onMouseOver:de,children:[o.description?e.jsxs("span",{children:[o.label,e.jsx("span",{className:"jkl-combobox__option-description",children:o.description})]}):o.label,Y(o)?e.jsxs("span",{children:[e.jsx(i.CheckIcon,{})," "]}):null]},`${D}-${o.value}`)),z&&e.jsx("div",{className:"jkl-combobox__no-option",children:w})]}),e.jsx(s.IconButton,{id:A,onFocus:ie,onBlur:pe,className:"jkl-text-input-action-button","data-testid":"jkl-combobox__button","aria-label":"Åpne meny","aria-expanded":K,"aria-controls":D,onClick:()=>H(e=>!e),onMouseDown:e=>{e.preventDefault(),W.current?.focus()},children:e.jsx(c.ArrowVerticalAnimated,{pointingDown:le})})]})})};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"),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;
 //# 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\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    } = 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            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                >\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","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\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":"grBA0BO,SAASA,EACZC,GAEA,MAAuB,iBAATA,EAAoB,CAAEC,MAAOD,EAAME,MAAOF,GAASA,CACrE,CAEO,MAAMG,EAA+BC,IACxC,MACI,YAAaC,EACbC,GAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAV,MAAAA,EACAC,MAAAA,EACAU,iBAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,YAAAA,EACAC,QAAAA,GACAlB,EACEmB,EAASC,EAAAA,MAAMlB,GAAM,eAAgB,CAAEmB,gBAAiBnB,IACxDoB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAU,GAAGL,kBAEZM,EAAeC,GAAoBC,EAAAA,SAExC9B,GAAS,KACJ+B,EAAUC,GAAeF,EAAAA,UAAkB,IAC3CG,EAAaC,GAAkBJ,EAAAA,SAAiB,KAChDK,EAAWC,GAAgBN,EAAAA,UAAS,IACpCO,EAAQC,GAAaR,EAAAA,UAAkB,GAExCS,EAAYC,EAAAA,OAAyB,MACrCC,EAAWD,EAAAA,OAAuB,MAClCE,EAAiBF,EAAAA,QAAO,GAE9BG,EAAAA,UAAU,KACNT,EAAe,IACXH,GAAYQ,EAAUK,SACtBL,EAAUK,QAAQC,SAEvB,CAACd,IAEJY,EAAAA,UAAU,KACNd,EAAkBiB,GAAS9C,GAAS8C,IACrC,CAAC9C,IAGJ,MAAM+C,EAAcC,KACXpB,GAIEA,EAAcqB,KAAMjD,GAAUA,EAAMA,QAAUgD,EAAOhD,OAI1DkD,GAAeC,EAAAA,YAChBH,GACUpB,EAAcwB,OAAQpD,GAAUA,EAAMA,QAAUgD,GAE3D,CAACpB,IAGCyB,GAAcF,EAAAA,YAChB,CACIG,EAGAN,KAEA,MAAMO,EAAWL,GAAaF,GAC9BnB,EAAiB0B,GACjB/C,EAAS,CACLgD,KAAM,SACNC,OAAQ,CAAEzC,KAAAA,EAAMhB,MAAOgD,EAAQU,gBAAiBH,KAEpDD,EAAEK,kBAEsB,IAApBJ,EAASK,QACTtB,GAAU,IAGlB,CAACY,GAAc1C,EAAUQ,IAIvB6C,GAAcV,EAAAA,YACfH,IACG,IAAIO,EAEJ,GAAI3B,EAAcqB,KAAMjD,GAAUA,EAAMA,QAAUgD,GAC9CO,EAAWL,GAAaF,OACrB,CACH,MAAMjD,EAAOQ,EAAMuD,KAAMC,GAAMA,EAAE/D,QAAUgD,GAC3CO,EAAW,IAAI3B,EAAe7B,EAClC,CACAwC,EAAUK,SAASC,QACnBhB,EAAiB0B,GACjB/C,EAAS,CACLgD,KAAM,SACNC,OAAQ,CAAEzC,KAAAA,EAAMhB,MAAOgD,EAAQU,gBAAiBH,MAGxD,CAAC3B,EAAepB,EAAUQ,EAAMkC,GAAc3C,IAI5CyD,GAAYV,IAGdf,EAAUK,SAASC,QACnBb,GAAY,GACZE,EAAeoB,EAAEG,OAAOzD,QAGtBiE,GAAUC,EAAAA,QAAQ,KACpB,IAAKjC,EACD,OAAO1B,EAGX,MAAM4D,EAAkB5D,EAAM6C,OACzBJ,GACGA,EAAO/C,MAAMmE,cAAcC,QAAQpC,EAAYmC,gBAC/C,GAGR,OAAAhC,EAAwC,IAA3B+B,EAAgBP,QAEtBO,GACR,CAAClC,EAAa1B,KAGV+D,GAAkBC,IAAuBzC,EAAAA,SAE9CmC,GAAQ,IAAIjE,MAAQ,GAAGsB,KAAU2C,GAAQ,IAAIjE,aAAU,GAGnDwE,IAAkBzC,EAGxBY,EAAAA,UAAU,KACN,MAAM8B,EAAgBnB,IACJ,WAAVA,EAAEoB,KAAoB3C,GACtBC,GAAY,IAGpB,cAAW2C,OAAW,KAClBA,OAAOC,iBAAiB,UAAWH,GAEhC,YACQE,OAAW,KAAe5C,GACjC4C,OAAOE,oBAAoB,UAAWJ,KAG/C,CAAC1C,IAGJ,MAAM+C,GAAuB3B,cAAa4B,IAClCA,EACIxC,EAAUK,SACVL,EAAUK,QAAQC,QAGlBH,EAAeE,SAAWH,EAASG,SACnCH,EAASG,QAAQC,SAG1B,IAEGmC,GAAc7B,EAAAA,YAAY,KACvBT,EAAeE,UACZnC,GACAA,EAAQ,CACJ+C,KAAM,SACNC,OAAQ,CACJzC,KAAAA,EACAhB,MAAO4B,IAAgB,GAAG5B,OAAS,GACnC0D,gBAAiB9B,KAI7Bc,EAAeE,SAAU,EACzBZ,GAAY,KAEjB,CAACvB,EAASmB,EAAeZ,KAErBiE,IAAeC,EAAAA,kBAAkCnD,EAAU,CAC9DoD,eAAgBL,GAChBM,gBAAiBN,KAGrBO,oBAAkB,CAAEC,IAAKL,KAEzB,MAAMM,GAA0B/C,EAAAA,OAAuB,MAEjDgD,GAAarC,EAAAA,YAEXG,IAI6BiC,GAAwB3C,SACI6C,SACrDnC,EAAEoC,iBAGFxD,EAAe,IAEXxB,IACAA,EAAO,CACH8C,KAAM,OACNC,OAAQ,CACJzC,KAAAA,EACAhB,MAAO4B,IAAgB,IAAI5B,OAAS,GACpC0D,gBAAiB9B,KAGzBa,EAASG,SAAS+C,cACd,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCnD,EAAeE,SAAU,EACzBZ,GAAY,KAGpB,CAACtB,EAAQM,EAAMY,IAGbkE,GAAkB3C,cAAaG,IAGhCA,EAAEG,OAA6BZ,MAAM,CAAEkD,eAAe,KACxD,IAGGC,GAAwB7C,EAAAA,YACzBG,IACG,GAAc,cAAVA,EAAEoB,IAAqB,CACvBpB,EAAE2C,iBACF3C,EAAEK,kBACF,MAAMuC,EAAcjB,GAAYrC,QAC5BsD,GACAA,EACKC,cAAiC,oBAChCtD,OAEd,KAAqB,WAAVS,EAAEoB,MACTpB,EAAE2C,iBACF3C,EAAEK,kBACF3B,GAAY,IAGhB,GAAKsB,EAAE8C,SAAqB,MAAV9C,EAAEoB,KAAiBpB,EAAE+C,SAAqB,MAAV/C,EAAEoB,IAAc,CAC9DpB,EAAE2C,iBACF3C,EAAEK,kBACF,MAAM2C,EAAuB1E,EAAc2E,IAAKxG,IAAAA,IACzCA,EACHyG,UAAU,KAEdlE,GAAU,GACVT,EAAiByE,EACrB,SAAqB,cAAVhD,EAAEoB,IAST,GARApB,EAAEK,kBACFrB,GAAU,GAGoBV,EAAcqB,KACvClD,GAASA,EAAKyG,UAGQ,CACvB,MAAMF,EAAuB1E,EAAcwB,OACtCrD,IAAUA,EAAKyG,UAEpB3E,EAAiByE,GACjBpE,EAAe,GACnB,MAAWN,EAAcgC,OAAS,GAAqB,KAAhB3B,GAEnCoB,GACIC,EACA1B,EAAcA,EAAcgC,OAAS,GAAG5D,QAKxD,CAAC4B,EAAeK,EAAagD,GAAa5B,KAGxCoD,GAAwBtD,EAAAA,YACzBG,IACG,GAAc,QAAVA,EAAEoB,IACEnC,EAAUK,UACVU,EAAE2C,iBACF3C,EAAEK,kBAEEL,EAAEoD,UAGF1E,GAAY,GACZO,EAAUK,QAAQC,iBAGT,YAAVS,EAAEoB,KACLO,GAAYrC,SAAWL,EAAUK,QAAS,CAE1C,MAAM+D,EAAe1B,GAAYrC,QAAQuD,cACrC,iCAGA7C,EAAEsD,cAAcvG,KAAOsG,GAActG,IACrCkC,EAAUK,SAEVL,EAAUK,QAAQC,OAE1B,GAGR,CAACoC,KAGC4B,GAAejF,EAAcgC,QAAU,EAEvCkD,GAAuB3D,EAAAA,YACxBH,GACG+D,EAAAA,IAACC,EAAAA,KAAA,CAEG,cAAY,WACZ,aAAY,SAAShE,EAAOiE,WAC5BhG,UAAW,iCACPoB,GAAU,0CAEd6E,QAAQ,QACRC,QAAU7D,IACFf,EAAUK,SACVL,EAAUK,QAAQC,QAEtBQ,GAAYC,EAAGN,EAAOhD,QAE1BU,OAAQ8E,GAEP4B,SAAApE,EAAOiE,SAAWjE,EAAOiE,SAAWjE,EAAO/C,OAfvC+C,EAAOhD,OAkBpB,CAACwF,GAAYnC,GAAahB,IAG9B,OACI0E,EAAAA,IAACM,EAAAA,WAAA,CACGpH,MAAAA,EACAI,GAAIsB,EACJ2D,IAAKC,GACL,cAAY,eACZ,YAAWnF,EACXa,UAAWqG,EAAAA,KAAK,eAAgBrG,EAAW,CACvC,0BAA2BH,GAAcI,EACzC,0BAA2Ba,EAC3B,6BAA8BA,GAAY8E,KAE9CjG,WAAY,CACRP,GAAIoB,KACDb,GAEPC,UAAAA,EACAC,WAAAA,EACAK,YAAAA,EACAE,QAAAA,EACAkG,OAASC,GACLC,EAAAA,KAAC,MAAA,CACGxG,UAAWqG,EAAAA,KAAK,wBAAyB,CACrC,sCAAuCT,KAE3Ca,MAAO,CAAE3G,MAAAA,GACT4G,YACAlH,QAASuE,GACTtE,OAAQ8E,GACR,iBAAgB1E,GAAcI,EAE9BkG,SAAA,CAAAK,EAAAA,KAAC,MAAA,CACGxG,UAAU,sBACV,cAAY,sBAEXmG,SAAA,CAAAxF,EACI2E,IAAIzG,GACJyG,IAAKvD,GACK5B,SACFwG,EAAAA,QAAA,CACGR,SAAA,CAAAL,EAAAA,IAACc,EAAAA,eAAA,CACIT,SAAAN,GAAqB9D,KAE1B+D,EAAAA,IAACe,EAAAA,eAAA,CACIV,SAAApE,EAAO/C,UALF+C,EAAOhD,OASrB8G,GAAqB9D,IAGjC+D,EAAAA,IAAC,QAAA,IACOS,EACJvG,UAAU,6BACVT,SAAUwD,GACV,cAAY,6BACZvD,QAASuE,GACTtE,OAAQ8E,GACRuC,UAAW/B,GACXhG,MAAOiC,EACPqD,IAAK/C,EACL,gBAAejB,EACf0G,KAAK,WACL,oBAAkB,OAClB,gBAAejG,EACfzB,YACIsB,EAAcgC,OAAS,EAAI,GAAKtD,EAEpC2H,aAAa,WAIrBR,EAAAA,KAAC,MAAA,CACGxG,UAAU,qBAEV+G,KAAK,UACL1C,IAAKL,GACL5E,GAAIiB,EACJ,kBAAiBG,EACjB,uBAAqB,OACrB,wBAAuB6C,GACvB7D,QAASuE,GACTtE,OAAQ8E,GACRmC,UAAU,EAETP,SAAA,CAAAnD,GAAQsC,IAAI,CAACvD,EAAQe,IAClB0D,EAAAA,KAAC,SAAA,CAEGjE,KAAK,SACLnD,GAAI,GAAGiB,MAAW0B,EAAOhD,QACzB,gBAAe+C,EAAWC,GAE1BgF,KAAK,SACLhI,MAAOgD,EAAOhD,MACdU,OAAQ8E,GACRvE,UAAW,wBACP8B,EAAWC,IACX,mCAEJ,cAAY,uBACZ,kBAAiB,wBAAwBe,IACzCtD,QAASuE,GACT+C,UAAWtB,GACXU,QAAU7D,IACNiB,GACI,GAAGjD,MAAW0B,EAAOhD,SAEzBsD,EAAEK,kBACFE,GAAYb,EAAOhD,OACnBkC,EAAe,KAEnBgG,YAAapC,GAEZsB,SAAA,CAAApE,EAAO7B,mBACH,OAAA,CACIiG,SAAA,CAAApE,EAAO/C,MACR8G,EAAAA,IAAC,OAAA,CAAK9F,UAAU,mCACXmG,WAAOjG,iBAIhB6B,EAAO/C,MAEV8C,EAAWC,GACRyE,EAAAA,KAAC,OAAA,CACGL,SAAA,CAAAL,EAAAA,IAACoB,EAAAA,UAAA,IAAa,OAElB,OAxCC,GAAG7G,KAAU0B,EAAOhD,UA2ChCmC,GACG4E,EAAAA,IAAC,MAAA,CAAI9F,UAAU,0BACVmG,SAAAzG,OAIboG,EAAAA,IAACqB,EAAAA,WAAA,CACG/H,GAAIqB,EACJjB,QAASuE,GACTtE,OAAQ8E,GACRvE,UAAU,+BACV,cAAY,uBACZ,aAAW,YACX,gBAAec,EACf,gBAAeT,EACf6F,QAAS,IAAMnF,EAAaqG,IAAcA,GAC1CC,YAAchF,IACVA,EAAE2C,iBACFxD,EAASG,SAASC,SAGtBuE,SAAAL,EAAAA,IAACwB,EAAAA,sBAAA,CAAsBC,aAAchE,aAO7DtE,EAASuI,YAAc"}

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

@@ -10,7 +10,7 @@ export type ExpandablePanelProps<ElementType extends React.ElementType> = Polymo
 export type ExpandablePanelComponent = {
     Content: ExpandablePanelContentComponent;
     Header: ExpanderComponent;
-} & (<ElementType extends React.ElementType = "div">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
+} & (<ElementType extends React.ElementType = "details">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
 export type ExpanderProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     icon?: React.ReactNode;
     open?: boolean;

package/build/cjs/components/help/Help.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs");require("react");const o=require("../button/Button.cjs"),r=require("../icon/Icon.cjs");exports.Help=({position:i="top",buttonText:s="Hjelp",showButtonText:l=!1,iconPosition:n="left",className:c,children:a,...p})=>e.jsxs("div",{className:t.clsx("jkl-help",c),children:[e.jsx(o.Button,{...p,title:s||p.title,iconPosition:n,variant:"ghost",className:"jkl-help-trigger",icon:e.jsx(r.Icon,{"aria-hidden":"true",children:"help"}),"data-testid":"jkl-help-trigger",popovertarget:`${s}-popover`,style:{anchorName:`${s}-popover`},children:l&&s}),e.jsx("output",{"aria-live":"assertive",children:e.jsx("div",{"data-position":i,popover:"auto",id:`${s}-popover`,className:"jkl-help-popover",children:a})})]});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../button/Button.cjs"),i=require("../icon/Icon.cjs");exports.Help=({position:s="top",buttonText:l="Hjelp",showButtonText:n=!1,iconPosition:c="left",className:a,children:p,...u})=>{const d=o.useId();return e.jsxs("div",{className:t.clsx("jkl-help",a),children:[e.jsx(r.Button,{...u,title:l||u.title,iconPosition:c,variant:"ghost",className:"jkl-help-trigger",icon:e.jsx(i.Icon,{"aria-hidden":"true",children:"help"}),"data-testid":"jkl-help-trigger",popovertarget:`${d}-popover`,children:n&&l}),e.jsx("output",{"aria-live":"assertive",children:e.jsx("div",{"data-position":s,popover:"auto",id:`${d}-popover`,className:"jkl-help-popover",children:p})})]})};
 //# sourceMappingURL=Help.cjs.map

package/build/cjs/components/help/Help.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const Help = ({\n    position = \"top\",\n    buttonText = \"Hjelp\",\n    showButtonText = false,\n    iconPosition = \"left\",\n    className,\n    children,\n    ...rest\n}: HelpProps) => {\n    return (\n        <div className={clsx(\"jkl-help\", className)}>\n            <Button\n                {...rest}\n                title={buttonText || rest.title}\n                iconPosition={iconPosition}\n                variant=\"ghost\"\n                className={\"jkl-help-trigger\"}\n                icon={<Icon aria-hidden=\"true\">help</Icon>}\n                data-testid=\"jkl-help-trigger\"\n                // @ts-ignore\n                popovertarget={`${buttonText}-popover`}\n                style={{ anchorName: `${buttonText}-popover` }}\n            >\n                {showButtonText && buttonText}\n            </Button>\n\n            <output aria-live=\"assertive\">\n                <div\n                    data-position={position}\n                    // @ts-ignore\n                    popover=\"auto\"\n                    id={`${buttonText}-popover`}\n                    className=\"jkl-help-popover\"\n                >\n                    {children}\n                </div>\n            </output>\n        </div>\n    );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","className","children","rest","clsx","jsx","Button","title","variant","icon","Icon","popovertarget","style","anchorName","popover","id"],"mappings":"iQAMoB,EAChBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,UAAAA,EACAC,SAAAA,KACGC,YAGE,MAAA,CAAIF,UAAWG,EAAAA,KAAK,WAAYH,GAC7BC,SAAA,CAAAG,EAAAA,IAACC,EAAAA,OAAA,IACOH,EACJI,MAAOT,GAAcK,EAAKI,MAC1BP,aAAAA,EACAQ,QAAQ,QACRP,UAAW,mBACXQ,KAAMJ,EAAAA,IAACK,OAAA,CAAK,cAAY,OAAOR,SAAA,SAC/B,cAAY,mBAEZS,cAAe,GAAGb,YAClBc,MAAO,CAAEC,WAAY,GAAGf,aAEvBI,SAAAH,GAAkBD,IAGvBO,EAAAA,IAAC,SAAA,CAAO,YAAU,YACdH,SAAAG,EAAAA,IAAC,MAAA,CACG,gBAAeR,EAEfiB,QAAQ,OACRC,GAAI,GAAGjB,YACPG,UAAU,mBAETC,SAAAA"}
+{"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const Help = ({\n    position = \"top\",\n    buttonText = \"Hjelp\",\n    showButtonText = false,\n    iconPosition = \"left\",\n    className,\n    children,\n    ...rest\n}: HelpProps) => {\n    const helpId = useId();\n\n    return (\n        <div className={clsx(\"jkl-help\", className)}>\n            <Button\n                {...rest}\n                title={buttonText || rest.title}\n                iconPosition={iconPosition}\n                variant=\"ghost\"\n                className={\"jkl-help-trigger\"}\n                icon={<Icon aria-hidden=\"true\">help</Icon>}\n                data-testid=\"jkl-help-trigger\"\n                // @ts-ignore\n                popovertarget={`${helpId}-popover`}\n            >\n                {showButtonText && buttonText}\n            </Button>\n\n            <output aria-live=\"assertive\">\n                <div\n                    data-position={position}\n                    // @ts-ignore\n                    popover=\"auto\"\n                    id={`${helpId}-popover`}\n                    className=\"jkl-help-popover\"\n                >\n                    {children}\n                </div>\n            </output>\n        </div>\n    );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","className","children","rest","helpId","useId","clsx","jsx","Button","title","variant","icon","Icon","popovertarget","popover","id"],"mappings":"6PAMoB,EAChBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAASC,EAAAA,QAEf,cACK,MAAA,CAAIJ,UAAWK,EAAAA,KAAK,WAAYL,GAC7BC,SAAA,CAAAK,EAAAA,IAACC,EAAAA,OAAA,IACOL,EACJM,MAAOX,GAAcK,EAAKM,MAC1BT,aAAAA,EACAU,QAAQ,QACRT,UAAW,mBACXU,KAAMJ,EAAAA,IAACK,OAAA,CAAK,cAAY,OAAOV,SAAA,SAC/B,cAAY,mBAEZW,cAAe,GAAGT,YAEjBF,SAAAH,GAAkBD,IAGvBS,EAAAA,IAAC,SAAA,CAAO,YAAU,YACdL,SAAAK,EAAAA,IAAC,MAAA,CACG,gBAAeV,EAEfiB,QAAQ,OACRC,GAAI,GAAGX,YACPH,UAAU,mBAETC,SAAAA"}

package/build/cjs/components/icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { IconVariant } from \"./types.js\";\n\ntype IconComponentProps<\n    ElementType extends \"span\" | \"div\",\n> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        \"data-testid\"?: string;\n        /**\n         * Størrelsesvarianten til ikonet. `\"small\"` er 16px med 20px bounding box, og `\"medium\"` er 20px med 24px bounding box.\n         * `\"inherit\"` setter størrelsen til ikonet (ikke bounding box) lik skriftstørrelsen (1em).\n         */\n        variant?: IconVariant;\n        /**\n         * Angir om ikonet skal vises i fet versjon\n         * @default false\n         */\n        bold?: boolean;\n        filled?: boolean;\n        className?: string;\n        style?: React.CSSProperties;\n    }\n>;\n\nexport type IconComponent = (<\n    ElementType extends \"span\" | \"div\" = \"span\",\n>(\n    props: IconComponentProps<ElementType>,\n) => React.ReactElement | null) & { displayName?: string };\n\nexport const Icon: IconComponent = React.forwardRef(function Icon<\n    ElementType extends \"span\" | \"div\" = \"span\",\n>(props: IconComponentProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"span\",\n        bold,\n        children,\n        className,\n        filled,\n        variant,\n        ...iconProps\n    } = props;\n    const iconClassName = clsx(\"jkl-icon\", className, {\n        \"jkl-icon--filled\": filled,\n        \"jkl-icon--bold\": bold,\n    });\n\n    if (as === \"div\") {\n        return (\n            <div\n                aria-hidden\n                ref={ref as PolymorphicRef<\"div\">}\n                className={iconClassName}\n                {...(iconProps as React.HTMLAttributes<HTMLDivElement>)}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <span\n            aria-hidden\n            ref={ref as PolymorphicRef<\"span\">}\n            className={iconClassName}\n            {...(iconProps as React.HTMLAttributes<HTMLSpanElement>)}\n        >\n            {children}\n        </span>\n    );\n}) as IconComponent;\n"],"names":["Icon","forwardRef","props","ref","as","bold","children","className","filled","variant","iconProps","iconClassName","clsx","jsx"],"mappings":"6JAoCaA,mBAA4BC,WAAW,SAElDC,EAAwCC,GACtC,MACIC,GAAAA,EAAK,OACLC,KAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GACHR,EACES,EAAgBC,EAAAA,KAAK,WAAYL,EAAW,CAC9C,mBAAoBC,EACpB,iBAAkBH,IAGtB,MAAW,QAAPD,EAEIS,EAAAA,IAAC,MAAA,CACG,eAAW,EACXV,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,IAMTO,EAAAA,IAAC,OAAA,CACG,eAAW,EACXV,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,GAGb"}
+{"version":3,"file":"Icon.cjs","sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { IconProps } from \"./types.js\";\n\ntype IconComponentProps<ElementType extends \"span\" | \"div\"> =\n    PolymorphicPropsWithRef<ElementType, IconProps>;\n\nexport type IconComponent = (<ElementType extends \"span\" | \"div\" = \"span\">(\n    props: IconComponentProps<ElementType>,\n) => React.ReactElement | null) & { displayName?: string };\n\nexport const Icon: IconComponent = React.forwardRef(function Icon<\n    ElementType extends \"span\" | \"div\" = \"span\",\n>(props: IconComponentProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"span\",\n        bold,\n        children,\n        className,\n        filled,\n        variant,\n        ...iconProps\n    } = props;\n    const iconClassName = clsx(\"jkl-icon\", className, {\n        \"jkl-icon--filled\": filled,\n        \"jkl-icon--bold\": bold,\n    });\n\n    if (as === \"div\") {\n        return (\n            <div\n                aria-hidden\n                ref={ref as PolymorphicRef<\"div\">}\n                className={iconClassName}\n                {...(iconProps as React.HTMLAttributes<HTMLDivElement>)}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <span\n            aria-hidden\n            ref={ref as PolymorphicRef<\"span\">}\n            className={iconClassName}\n            {...(iconProps as React.HTMLAttributes<HTMLSpanElement>)}\n        >\n            {children}\n        </span>\n    );\n}) as IconComponent;\n"],"names":["Icon","forwardRef","props","ref","as","bold","children","className","filled","variant","iconProps","iconClassName","clsx","jsx"],"mappings":"6JAeaA,mBAA4BC,WAAW,SAElDC,EAAwCC,GACtC,MACIC,GAAAA,EAAK,OACLC,KAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GACHR,EACES,EAAgBC,EAAAA,KAAK,WAAYL,EAAW,CAC9C,mBAAoBC,EACpB,iBAAkBH,IAGtB,MAAW,QAAPD,EAEIS,EAAAA,IAAC,MAAA,CACG,eAAW,EACXV,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,IAMTO,EAAAA,IAAC,OAAA,CACG,eAAW,EACXV,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,GAGb"}

package/build/cjs/components/icon/Icon.d.cts

@@ -1,22 +1,7 @@
 import { default as React } from 'react';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
-import { IconVariant } from './types.cjs';
-type IconComponentProps<ElementType extends "span" | "div"> = PolymorphicPropsWithRef<ElementType, {
-    "data-testid"?: string;
-    /**
-     * Størrelsesvarianten til ikonet. `"small"` er 16px med 20px bounding box, og `"medium"` er 20px med 24px bounding box.
-     * `"inherit"` setter størrelsen til ikonet (ikke bounding box) lik skriftstørrelsen (1em).
-     */
-    variant?: IconVariant;
-    /**
-     * Angir om ikonet skal vises i fet versjon
-     * @default false
-     */
-    bold?: boolean;
-    filled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}>;
+import { IconProps } from './types.cjs';
+type IconComponentProps<ElementType extends "span" | "div"> = PolymorphicPropsWithRef<ElementType, IconProps>;
 export type IconComponent = (<ElementType extends "span" | "div" = "span">(props: IconComponentProps<ElementType>) => React.ReactElement | null) & {
     displayName?: string;
 };

package/build/cjs/components/icon/icons/ErrorIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const e=require("../Icon.cjs"),o=o=>r.jsx(e.Icon,{bold:!0,filled:!0,...o,children:""});o.displayName="ErrorIcon",exports.ErrorIcon=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const e=require("../Icon.cjs"),o=o=>r.jsx(e.Icon,{...o,filled:!0,children:""});o.displayName="ErrorIcon",exports.ErrorIcon=o;
 //# sourceMappingURL=ErrorIcon.cjs.map

package/build/cjs/components/icon/icons/ErrorIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorIcon.cjs","sources":["../../../../../src/components/icon/icons/ErrorIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const ErrorIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\uf8b6\"}\n    </Icon>\n);\nErrorIcon.displayName = \"ErrorIcon\";\n"],"names":["ErrorIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA4BC,GACrCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAUO,YAAc"}
+{"version":3,"file":"ErrorIcon.cjs","sources":["../../../../../src/components/icon/icons/ErrorIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const ErrorIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\ue82a\"}\n    </Icon>\n);\nErrorIcon.displayName = \"ErrorIcon\";\n"],"names":["ErrorIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"qKAIaA,EAA4BC,GACrCC,EAAAA,IAACC,WAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAUM,YAAc"}

package/build/cjs/components/icon/icons/GreenCheckIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../clsx-E3yX_9sL.cjs");require("react");const r=require("../Icon.cjs"),s=s=>e.jsx(r.Icon,{...s,className:c.clsx("jkl-icon-green-check",s.className),children:""});s.displayName="GreenCheckIcon",exports.GreenCheckIcon=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../clsx-E3yX_9sL.cjs");require("react");const r=require("../Icon.cjs"),s=({className:s,...n})=>e.jsx(r.Icon,{...n,filled:!0,className:c.clsx("jkl-icon-green-check",s),children:""});s.displayName="GreenCheckIcon",exports.GreenCheckIcon=s;
 //# sourceMappingURL=GreenCheckIcon.cjs.map

package/build/cjs/components/icon/icons/GreenCheckIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GreenCheckIcon.cjs","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const GreenCheckIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} className={clsx(\"jkl-icon-green-check\", props.className)}>\n        {\"\\ue5ca\"}\n    </Icon>\n);\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","props","jsx","Icon","className","clsx","children","displayName"],"mappings":"gNAKaA,EAAiCC,GAC1CC,EAAAA,IAACC,EAAAA,KAAA,IAASF,EAAOG,UAAWC,EAAAA,KAAK,uBAAwBJ,EAAMG,WAC1DE,SAAA,MAGTN,EAAeO,YAAc"}
+{"version":3,"file":"GreenCheckIcon.cjs","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const GreenCheckIcon: IconComponent = ({\n    className,\n    ...props\n}: IconProps) => (\n    <Icon {...props} filled className={clsx(\"jkl-icon-green-check\", className)}>\n        {\"\\uf0be\"}\n    </Icon>\n);\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","className","props","jsx","Icon","filled","clsx","children","displayName"],"mappings":"gNAKaA,EAAgC,EACzCC,UAAAA,KACGC,KAEHC,EAAAA,IAACC,EAAAA,KAAA,IAASF,EAAOG,QAAM,EAACJ,UAAWK,EAAAA,KAAK,uBAAwBL,GAC3DM,SAAA,MAGTP,EAAeQ,YAAc"}

package/build/cjs/components/icon/icons/InfoIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),o=o=>e.jsx(r.Icon,{bold:!0,filled:!0,...o,children:""});o.displayName="InfoIcon",exports.InfoIcon=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),o=o=>e.jsx(r.Icon,{...o,filled:!0,children:""});o.displayName="InfoIcon",exports.InfoIcon=o;
 //# sourceMappingURL=InfoIcon.cjs.map

package/build/cjs/components/icon/icons/InfoIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoIcon.cjs","sources":["../../../../../src/components/icon/icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const InfoIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\ue88e\"}\n    </Icon>\n);\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["InfoIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA2BC,GACpCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAASO,YAAc"}
+{"version":3,"file":"InfoIcon.cjs","sources":["../../../../../src/components/icon/icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const InfoIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\ue88e\"}\n    </Icon>\n);\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["InfoIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"qKAIaA,EAA2BC,GACpCC,EAAAA,IAACC,WAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAASM,YAAc"}

package/build/cjs/components/icon/icons/RedCrossIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../../clsx-E3yX_9sL.cjs");require("react");const r=require("../Icon.cjs"),c=c=>e.jsx(r.Icon,{...c,className:s.clsx("jkl-icon-red-cross",c.className),children:""});c.displayName="RedCrossIcon",exports.RedCrossIcon=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../../clsx-E3yX_9sL.cjs");require("react");const r=require("../Icon.cjs"),c=({className:c,...o})=>e.jsx(r.Icon,{...o,filled:!0,className:s.clsx("jkl-icon-red-cross",c),children:""});c.displayName="RedCrossIcon",exports.RedCrossIcon=c;
 //# sourceMappingURL=RedCrossIcon.cjs.map

package/build/cjs/components/icon/icons/RedCrossIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RedCrossIcon.cjs","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const RedCrossIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} className={clsx(\"jkl-icon-red-cross\", props.className)}>\n        {\"\\ue5cd\"}\n    </Icon>\n);\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","props","jsx","Icon","className","clsx","children","displayName"],"mappings":"gNAKaA,EAA+BC,GACxCC,EAAAA,IAACC,EAAAA,KAAA,IAASF,EAAOG,UAAWC,EAAAA,KAAK,qBAAsBJ,EAAMG,WACxDE,SAAA,MAGTN,EAAaO,YAAc"}
+{"version":3,"file":"RedCrossIcon.cjs","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const RedCrossIcon: IconComponent = ({\n    className,\n    ...props\n}: IconProps) => (\n    <Icon {...props} filled className={clsx(\"jkl-icon-red-cross\", className)}>\n        {\"\\ue5c9\"}\n    </Icon>\n);\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","className","props","jsx","Icon","filled","clsx","children","displayName"],"mappings":"gNAKaA,EAA8B,EACvCC,UAAAA,KACGC,KAEHC,EAAAA,IAACC,EAAAA,KAAA,IAASF,EAAOG,QAAM,EAACJ,UAAWK,EAAAA,KAAK,qBAAsBL,GACzDM,SAAA,MAGTP,EAAaQ,YAAc"}

package/build/cjs/components/icon/icons/SuccessIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const c=require("../Icon.cjs"),r=r=>e.jsx(c.Icon,{bold:!0,filled:!0,...r,children:""});r.displayName="SuccessIcon",exports.SuccessIcon=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const c=require("../Icon.cjs"),r=r=>e.jsx(c.Icon,{...r,filled:!0,children:""});r.displayName="SuccessIcon",exports.SuccessIcon=r;
 //# sourceMappingURL=SuccessIcon.cjs.map

package/build/cjs/components/icon/icons/SuccessIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessIcon.cjs","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\uf0be\"}\n    </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA8BC,GACvCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAYO,YAAc"}
+{"version":3,"file":"SuccessIcon.cjs","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\uf0be\"}\n    </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"qKAIaA,EAA8BC,GACvCC,EAAAA,IAACC,WAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

package/build/cjs/components/icon/icons/WarningIcon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),n=n=>e.jsx(r.Icon,{bold:!0,filled:!0,...n,children:""});n.displayName="WarningIcon",exports.WarningIcon=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),n=n=>e.jsx(r.Icon,{...n,filled:!0,children:""});n.displayName="WarningIcon",exports.WarningIcon=n;
 //# sourceMappingURL=WarningIcon.cjs.map

package/build/cjs/components/icon/icons/WarningIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WarningIcon.cjs","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\uf083\"}\n    </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA8BC,GACvCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAYO,YAAc"}
+{"version":3,"file":"WarningIcon.cjs","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\uf083\"}\n    </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"qKAIaA,EAA8BC,GACvCC,EAAAA,IAACC,WAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

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

@@ -1,6 +1,5 @@
 export type IconVariant = "inherit" | "small" | "medium";
 export interface IconProps {
-    as?: "div" | "span";
     "data-testid"?: string;
     /**
      * @deprecated Størrelsen settes nå automatisk etter fontstørrelse.
@@ -10,7 +9,7 @@ export interface IconProps {
      */
     variant?: IconVariant;
     /**
-     * Angir om ikonet skal vises i fet versjon
+     * @deprecated Fra Jøkul 5.0 har ikonene alltid samme vekt, og bold har ingen effekt
      * @default false
      */
     bold?: boolean;

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"),n=require("./SupportLabel.cjs"),t=l.forwardRef((t,a)=>{const{className:o,children:p,errorLabel:d,helpLabel:u,inline:c,label:j,labelProps:b,render:h,supportLabelProps:x,description:m,tooltip:y,id:f,...g}=t,v=i.useId(f||"jkl-input",{generateSuffix:!f}),L=i.useId("jkl-support-label"),S=!!y,k=d||u,q=d?"error":u?"help":void 0,I={"aria-describedby":k?L:void 0,"aria-invalid":!!d||void 0,id:v},w=h?()=>h(I):()=>{const e=l.Children.toArray(t.children)[0];if(l.isValidElement(e))return l.cloneElement(e,{...I,...e.props})};return e.jsxs("div",{ref:a,className:r.clsx(o,"jkl-input-group",{"jkl-input-group--inline":c}),...g,children:[e.jsx(s.Label,{standAlone:!0,htmlFor:v,srOnly:c,...b,style:{whiteSpace:S?"nowrap":void 0,...b?.style},children:S?e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{whiteSpace:"normal"},children:j})," ",y]}):j}),m&&e.jsx("p",{className:"jkl-input-group-description",children:m}),w(),e.jsx(n.SupportLabel,{srOnly:c,...x,label:k,labelType:q,id:L})]})});t.displayName="InputGroup",exports.InputGroup=t;
+"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;
 //# 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\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 = supportText ? supportId : 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 className=\"jkl-input-group-description\">{description}</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","hasTooltip","supportText","supportTextType","inputProps","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,qBAElBG,IAAeP,EAEfQ,EAAchB,GAAcC,EAC5BgB,EAAkBjB,EAClB,QACAC,EACE,YACA,EAIFiB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBd,QAAoB,EACpCS,GAAIE,GAGFQ,EAAcd,EACd,IAAMA,EAAOa,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,SAIvB,OACI8B,EAAAA,KAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAAA,KAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAA6B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ9B,KACJE,EACJ6B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCX,GAAY6B,OAGlBlC,WACG2B,EAAAA,KAAAS,EAAAA,SAAA,CACIpC,SAAA,CAAA6B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGqB,EAAAA,IAAC,IAAA,CAAE9B,UAAU,8BAA+BC,SAAAQ,IAE/CY,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ9B,KACJI,EACJH,MAAOa,EACPqB,UAAWpB,EACXR,GAAIK,SAOxBpB,EAAW4C,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 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"}

package/build/cjs/components/radio-button/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n    (props, ref) => {\n        const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n        const { value: selectedValue, ...context } = useRadioGroupContext();\n        const supportId = useId(\"jkl-support-label\");\n\n        return (\n            <>\n                <BaseRadioButton\n                    {...context}\n                    {...rest}\n                    ref={ref}\n                    checked={\n                        typeof checked !== \"undefined\"\n                            ? checked\n                            : typeof selectedValue !== \"undefined\"\n                              ? value === selectedValue\n                              : undefined\n                    }\n                    value={value}\n                    aria-describedby={helpLabel ? supportId : undefined}\n                />\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={helpLabel}\n                    labelType={\"help\"}\n                    id={supportId}\n                />\n            </>\n        );\n    },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSAOaA,EAAcC,EAAAA,WACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,EAAAA,uBACvCC,EAAYC,EAAAA,MAAM,qBAExB,OACIC,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}
+{"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n    (props, ref) => {\n        const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n        const { value: selectedValue, ...context } = useRadioGroupContext();\n\n        const supportId = useId(\"jkl-support-label\");\n\n        return (\n            <>\n                <BaseRadioButton\n                    {...context}\n                    {...rest}\n                    ref={ref}\n                    checked={\n                        typeof checked !== \"undefined\"\n                            ? checked\n                            : typeof selectedValue !== \"undefined\"\n                              ? value === selectedValue\n                              : undefined\n                    }\n                    value={value}\n                    aria-describedby={helpLabel ? supportId : undefined}\n                />\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={helpLabel}\n                    labelType={\"help\"}\n                    id={supportId}\n                />\n            </>\n        );\n    },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSAOaA,EAAcC,EAAAA,WACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,EAAAA,uBAEvCC,EAAYC,EAAAA,MAAM,qBAExB,OACIC,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}

package/build/cjs/components/system-message/SystemMessage.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");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:l,maxContentWidth:r,paddingLeft:d,role:o="status",dismissed:c,dismissAction:g,children:u,...y})=>{const j=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:o,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,l,{"jkl-system-message--dismissed":c}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:r,paddingLeft:d},children:[s.jsx(i.MessageIcon,{variant:m||"info"}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"data-theme":"light","aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const l=m("error");l.displayName="ErrorSystemMessage";const r=m("warning");r.displayName="WarningSystemMessage";const d=m("success");d.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=l,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=d,exports.SystemMessage=({id:m,className:n,maxContentWidth:l,paddingLeft:r,role:d="status",dismissed:o,variant:c="info",dismissAction:g,children:u,...y})=>{const j=t.useId(m||"jkl-system-message",{generateSuffix:!m});return s.jsx("div",{role:d,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${c}`,n,{"jkl-system-message--dismissed":o}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:l,paddingLeft:r},children:[s.jsx(i.MessageIcon,{variant:c}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"data-theme":"light","aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})},exports.WarningSystemMessage=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,maxContentWidth:l,paddingLeft:o,role:c="status",dismissed:d,dismissAction:g,children:u,...y})=>{const j=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:c,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,r,{"jkl-system-message--dismissed":d}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:l,paddingLeft:o},children:[s.jsx(i.MessageIcon,{variant:m||"info"}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const l=m("warning");l.displayName="WarningSystemMessage";const o=m("success");o.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=o,exports.SystemMessage=({id:m,className:n,maxContentWidth:r,paddingLeft:l,role:o="status",dismissed:c,variant:d="info",dismissAction:g,children:u,...y})=>{const j=t.useId(m||"jkl-system-message",{generateSuffix:!m});return s.jsx("div",{role:o,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${d}`,n,{"jkl-system-message--dismissed":c}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:r,paddingLeft:l},children:[s.jsx(i.MessageIcon,{variant:d}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})},exports.WarningSystemMessage=l;
 //# sourceMappingURL=SystemMessage.cjs.map

package/build/cjs/components/system-message/SystemMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            data-theme=\"light\"\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            role={role}\n            {...rest}\n            id={systemId}\n            className={clsx(\n                \"jkl-system-message\",\n                `jkl-system-message--${variant}`,\n                className,\n                {\n                    \"jkl-system-message--dismissed\": dismissed,\n                },\n            )}\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                data-theme=\"light\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,GAyDA,MAvDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MA0DMK,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,qIA1EwB,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}
+{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            role={role}\n            {...rest}\n            id={systemId}\n            className={clsx(\n                \"jkl-system-message\",\n                `jkl-system-message--${variant}`,\n                className,\n                {\n                    \"jkl-system-message--dismissed\": dismissed,\n                },\n            )}\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,GAuDA,MArDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAwDMK,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,qIAxEwB,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}

package/build/cjs/components/typography/Text.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react").forwardRef(function({as:r,className:s,size:o="m",bold:a,short:l,srOnly:c,...i},d){const n=r||"p";return e.jsx(n,{className:t.clsx("jkl-text",c&&"jkl-sr-only",s),"data-text-size":o,"data-bold":a||void 0,"data-short":l||void 0,ref:d,...i})});exports.Text=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react").forwardRef(function({as:r,className:s,size:a="m",bold:o,short:d,srOnly:c,center:i,subdued:l,...u},n){const x=r||"p";return e.jsx(x,{className:t.clsx("jkl-text",c&&"jkl-sr-only",s),"data-text-size":a,"data-bold":o||void 0,"data-short":d||void 0,"data-center":i||void 0,"data-subdued":l||void 0,ref:n,...u})});exports.Text=r;
 //# sourceMappingURL=Text.cjs.map

package/build/cjs/components/typography/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    { as, className, size = \"m\", bold, short, srOnly, ...rest }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","rest","ref","Component","jsx","clsx"],"mappings":"6JASaA,mBAAsBC,WAAW,UAGxCC,GAAAA,EAAIC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,KAAAA,EAAMC,MAAAA,EAAOC,OAAAA,KAAWC,GACrDC,GAEA,MAAMC,EAAaR,GAAM,IACzB,OACIS,EAAAA,IAACD,EAAA,CACGP,UAAWS,EAAAA,KAAK,WAAYL,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrBG,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    {\n        as,\n        className,\n        size = \"m\",\n        bold,\n        short,\n        srOnly,\n        center,\n        subdued,\n        ...rest\n    }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            data-center={center || undefined}\n            data-subdued={subdued || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","center","subdued","rest","ref","Component","jsx","clsx"],"mappings":"6JASaA,mBAAsBC,WAAW,UAItCC,GAAAA,EACAC,UAAAA,EACAC,KAAAA,EAAO,IACPC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GAEPC,GAEA,MAAMC,EAAaV,GAAM,IACzB,OACIW,EAAAA,IAACD,EAAA,CACGT,UAAWW,EAAAA,KAAK,WAAYP,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrB,cAAaE,QAAU,EACvB,eAAcC,QAAW,EACzBE,IAAAA,KACID,GAGhB"}

package/build/cjs/components/typography/Title.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"),s=require("react").forwardRef(function({className:s,size:t="l",as:a,srOnly:c,...l},i){const o=a||"h2";return e.jsx(o,{className:r.clsx(c&&"jkl-sr-only",s),"data-text-size":t,ref:i,...l})});exports.Title=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react").forwardRef(function({className:t,size:s="l",as:a,srOnly:c,center:i,...l},n){const o=a||"h2";return e.jsx(o,{className:r.clsx(c&&"jkl-sr-only",t),"data-text-size":s,"data-center":i||void 0,ref:n,...l})});exports.Title=t;
 //# sourceMappingURL=Title.cjs.map

package/build/cjs/components/typography/Title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAKL,GAAU,cAAeH,GACzC,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, center, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-center={center || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","center","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,EAAQC,OAAAA,KAAWC,GAChDC,GAEA,MAAMC,EAAOL,GAAM,KACnB,OACIM,EAAAA,IAACD,EAAA,CACGP,UAAWS,EAAAA,KAAKN,GAAU,cAAeH,GACzC,iBAAgBC,EAChB,cAAaG,QAAU,EACvBE,IAAAA,KACID,GAGhB"}