@fremtind/jokul 5.0.0-next.9 → 5.0.0

package/build/cjs/components/expander/Accordion.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs");exports.Accordion=({children:r,outlined:s=!1,className:t,...o})=>e.jsx("section",{className:c.clsx("jkl-accordion",t),"data-outlined":s,...o,children:r});
+//# sourceMappingURL=Accordion.cjs.map

package/build/cjs/components/expander/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/expander/Accordion.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { AccordionProps } from \"./types.js\";\n\nexport const Accordion = ({\n    children,\n    outlined = false,\n    className,\n    ...rest\n}: AccordionProps) => (\n    <section\n        className={clsx(\"jkl-accordion\", className)}\n        data-outlined={outlined}\n        {...rest}\n    >\n        {children}\n    </section>\n);\n"],"names":["children","outlined","className","rest","jsx","clsx"],"mappings":"+KAGyB,EACrBA,SAAAA,EACAC,SAAAA,GAAW,EACXC,UAAAA,KACGC,KAEHC,EAAAA,IAAC,UAAA,CACGF,UAAWG,EAAAA,KAAK,gBAAiBH,GACjC,gBAAeD,KACXE,EAEHH,SAAAA"}

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

@@ -0,0 +1,2 @@
+import { AccordionProps } from './types.cjs';
+export declare const Accordion: ({ children, outlined, className, ...rest }: AccordionProps) => import("react").JSX.Element;

package/build/cjs/components/expander/ExpandablePanel.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"),n=require("react"),a=require("./ExpandablePanelContent.cjs"),r=require("./Expander.cjs"),s=require("./context.cjs"),i=Object.assign(n.forwardRef(function(a,r){const{children:i,as:l="details",variant:o="fill",open:d,defaultOpen:c,onOpenChange:u,className:p,...x}=a,[j,f]=n.useState(c||!1),[b,g]=n.useState(!1),[v,E]=n.useState(0),h=n.useRef();n.useImperativeHandle(r,()=>h.current,[]);const m=l,S=typeof d<"u",q=S?d:j;return n.useEffect(()=>{const e=e=>{f("open"===e.newState)},t=h.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)},[]),e.jsxs("div",{className:"jkl-expandable__wrapper",children:[e.jsx("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:v}}),e.jsx(m,{ref:h,"data-testid":"jkl-expand-section",className:t.clsx("jkl-expandable",`jkl-expandable--${o}`,p),open:"details"===l?q||b:void 0,"data-visible-content":q||b,...x,children:e.jsx(s.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S?u?.(!q):f(e=>(u?.(!e),!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:i})})]})}),{Content:a.ExpandablePanelContent,Header:r.Expander});exports.ExpandablePanel=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("./ExpandablePanelContent.cjs"),r=require("./Expander.cjs"),s=require("./context.cjs"),l=Object.assign(t.forwardRef(function(a,r){const{children:l,as:i="details",outlined:o,open:d,defaultOpen:c,onOpenChange:p,className:u,...x}=a,[j,b]=t.useState(c||!1),[f,g]=t.useState(!1),[v,E]=t.useState(0),h=t.useRef();t.useImperativeHandle(r,()=>h.current,[]);const m=i,S=typeof d<"u",q=S?d:j;return t.useEffect(()=>{const e=e=>{b("open"===e.newState)},n=h.current;return n?.addEventListener("toggle",e),()=>n?.removeEventListener("toggle",e)},[]),e.jsxs("div",{className:"jkl-expandable-panel__wrapper",children:[e.jsx("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable-panel__focus-container",style:{height:v}}),e.jsx(m,{ref:h,"data-testid":"jkl-expand-section",className:n.clsx("jkl-expandable-panel",o&&"jkl-expandable-panel--outlined",u),open:"details"===i?q||f:void 0,"data-visible-content":q||f,...x,children:e.jsx(s.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S?p?.(!q):b(e=>(p?.(!e),!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:l})})]})}),{Content:a.ExpandablePanelContent,Header:r.Expander});exports.ExpandablePanel=l;
 //# sourceMappingURL=ExpandablePanel.cjs.map

package/build/cjs/components/expander/ExpandablePanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            variant = \"fill\",\n            open: controlledOpen,\n            defaultOpen,\n            onOpenChange,\n            className,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(\n            defaultOpen || false,\n        );\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, []);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                onOpenChange?.(!isOpen);\n                return;\n            }\n            setUncontrolledOpen((previousValue) => {\n                onOpenChange?.(!previousValue);\n                return !previousValue;\n            });\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, []);\n\n        return (\n            <div className=\"jkl-expandable__wrapper\">\n                <div\n                    /*\n                        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n                        Dette unngår typefeil i React 18 og advarsler i React 19.\n                        Se: https://github.com/WICG/inert/issues/58\n                    */\n                    ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n                    className=\"jkl-expandable__focus-container\"\n                    style={{ height: expanderHeight }}\n                />\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable\",\n                        `jkl-expandable--${variant}`,\n                        className,\n                    )}\n                    open={\n                        /* for the animation to work in Safari we must ensure that\n                         * the element is open *before* the transition starts */\n                        as === \"details\"\n                            ? isOpen || contentIsVisible\n                            : undefined\n                    }\n                    /* this attribute is used for styling purposes */\n                    data-visible-content={isOpen || contentIsVisible}\n                    {...rest}\n                >\n                    <ExpanderContext.Provider\n                        value={{\n                            open: isOpen,\n                            onToggle: syncUncontrolledState,\n                            onTransitionEnd: setContentIsVisible,\n                            onTransitionStart: setVisibleIfOpening,\n                            setExpanderHeight,\n                        }}\n                    >\n                        {children}\n                    </ExpanderContext.Provider>\n                </El>\n            </div>\n        );\n    }),\n    { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"iRAWaA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAAAA,SAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,EAAAA,UAAS,IAClDG,EAAgBC,GAAqBJ,EAAAA,SAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAmB/Cc,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAAA,KAAC,MAAA,CAAIvB,UAAU,0BACXP,SAAA,CAAA+B,EAAAA,IAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAAAA,IAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EAAAA,KACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAAAA,IAACM,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA9DU,KACtBnB,EACAf,KAAgBgB,GAGpBZ,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBAtESC,IACrBA,GACA/B,GAAoB,IAqERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,yBAAwBC,OAAQC,EAAAA"}
+{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            outlined,\n            open: controlledOpen,\n            defaultOpen,\n            onOpenChange,\n            className,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(\n            defaultOpen || false,\n        );\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, []);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                onOpenChange?.(!isOpen);\n                return;\n            }\n            setUncontrolledOpen((previousValue) => {\n                onOpenChange?.(!previousValue);\n                return !previousValue;\n            });\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, []);\n\n        return (\n            <div className=\"jkl-expandable-panel__wrapper\">\n                <div\n                    /*\n                        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n                        Dette unngår typefeil i React 18 og advarsler i React 19.\n                        Se: https://github.com/WICG/inert/issues/58\n                    */\n                    ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n                    className=\"jkl-expandable-panel__focus-container\"\n                    style={{ height: expanderHeight }}\n                />\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable-panel\",\n                        outlined && \"jkl-expandable-panel--outlined\",\n                        className,\n                    )}\n                    open={\n                        /* for the animation to work in Safari we must ensure that\n                         * the element is open *before* the transition starts */\n                        as === \"details\"\n                            ? isOpen || contentIsVisible\n                            : undefined\n                    }\n                    /* this attribute is used for styling purposes */\n                    data-visible-content={isOpen || contentIsVisible}\n                    {...rest}\n                >\n                    <ExpanderContext.Provider\n                        value={{\n                            open: isOpen,\n                            onToggle: syncUncontrolledState,\n                            onTransitionEnd: setContentIsVisible,\n                            onTransitionStart: setVisibleIfOpening,\n                            setExpanderHeight,\n                        }}\n                    >\n                        {children}\n                    </ExpanderContext.Provider>\n                </El>\n            </div>\n        );\n    }),\n    { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","outlined","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"iRAWaA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,SAAAA,EACAC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAAAA,SAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,EAAAA,UAAS,IAClDG,EAAgBC,GAAqBJ,EAAAA,SAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAmB/Cc,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAAA,KAAC,MAAA,CAAIvB,UAAU,gCACXP,SAAA,CAAA+B,EAAAA,IAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,wCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAAAA,IAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EAAAA,KACP,uBACAlC,GAAY,iCACZK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAAAA,IAACM,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA9DU,KACtBnB,EACAf,KAAgBgB,GAGpBZ,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBAtESC,IACrBA,GACA/B,GAAoB,IAqERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,yBAAwBC,OAAQC,EAAAA"}

package/build/cjs/components/expander/ExpandablePanelContent.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"),n=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),a=require("./context.cjs"),i=({className:i,children:s,...o})=>{const{open:c,onTransitionStart:d,onTransitionEnd:l}=n.useContext(a.ExpanderContext),[u]=r.useAnimatedHeightBetween(c,{timing:"snappy",onTransitionStart:d,onTransitionEnd:l});return n.useEffect(()=>{const e=u.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")},[c,u]),e.jsx("div",{ref:u,className:t.clsx("jkl-expandable__content",i),...o,"data-expanded":c,children:e.jsx("div",{className:"jkl-expandable__content-wrapper",children:s})})};i.displayName="ExpandablePanel.Content",exports.ExpandablePanelContent=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),a=require("./context.cjs"),i=({className:i,children:s,...o})=>{const{open:c,onTransitionStart:l,onTransitionEnd:d}=n.useContext(a.ExpanderContext),[u]=r.useAnimatedHeightBetween(c,{timing:"snappy",onTransitionStart:l,onTransitionEnd:d});return n.useEffect(()=>{const e=u.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")},[c,u]),e.jsx("div",{ref:u,className:t.clsx("jkl-expandable-panel__content",i),...o,"data-expanded":c,children:e.jsx("div",{className:"jkl-expandable-panel__content-wrapper",children:s})})};i.displayName="ExpandablePanel.Content",exports.ExpandablePanelContent=i;
 //# sourceMappingURL=ExpandablePanelContent.cjs.map

package/build/cjs/components/expander/ExpandablePanelContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    /*\n        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n        Dette unngår typefeil i React 18 og advarsler i React 19.\n        Se: https://github.com/WICG/inert/issues/58\n    */\n    useEffect(() => {\n        const node = animationRef.current;\n\n        if (!open) {\n            node?.setAttribute(\"inert\", \"true\");\n        } else {\n            node?.removeAttribute(\"inert\");\n        }\n    }, [open, animationRef]);\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n\nExpandablePanelContent.displayName = \"ExpandablePanel.Content\";\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx","displayName"],"mappings":"mRASaA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAAAA,WAA8BC,EAAAA,kBAE3BC,GAAgBC,EAAAA,yBAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJM,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFtBF,GAAMG,aAAa,QAAS,SAIjC,CAACZ,EAAMK,IAGNQ,EAAAA,IAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAAA,KAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAAAe,EAAAA,IAAC,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,OAK9DF,EAAuBoB,YAAc"}
+{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    /*\n        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n        Dette unngår typefeil i React 18 og advarsler i React 19.\n        Se: https://github.com/WICG/inert/issues/58\n    */\n    useEffect(() => {\n        const node = animationRef.current;\n\n        if (!open) {\n            node?.setAttribute(\"inert\", \"true\");\n        } else {\n            node?.removeAttribute(\"inert\");\n        }\n    }, [open, animationRef]);\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable-panel__content\", className)}\n            {...rest}\n            data-expanded={open}\n        >\n            <div className=\"jkl-expandable-panel__content-wrapper\">\n                {children}\n            </div>\n        </div>\n    );\n};\n\nExpandablePanelContent.displayName = \"ExpandablePanel.Content\";\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx","displayName"],"mappings":"mRASaA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAAAA,WAA8BC,EAAAA,kBAE3BC,GAAgBC,EAAAA,yBAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJM,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFtBF,GAAMG,aAAa,QAAS,SAIjC,CAACZ,EAAMK,IAGNQ,EAAAA,IAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAAA,KAAK,gCAAiClB,MAC7CE,EACJ,gBAAeC,EAEfF,SAAAe,EAAAA,IAAC,MAAA,CAAIhB,UAAU,wCACVC,SAAAA,OAMjBF,EAAuBoB,YAAc"}

package/build/cjs/components/expander/Expander.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),o=require("../icon/icons/ChevronDownIcon.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs");const r=require("../icon/icons/ChevronUpIcon.cjs");require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs");const i=require("./context.cjs"),s=c.forwardRef(function(s,u){const{children:t,as:a="summary",open:j,icon:q,className:I,onClick:l,expandDirection:p,...d}=s,h=a,{open:m,onToggle:x,setExpanderHeight:C}=c.useContext(i.ExpanderContext),f=c.useRef();c.useImperativeHandle(u,()=>f.current,[]);const w=j||m,v="up"===p?r.ChevronUpIcon:o.ChevronDownIcon;return c.useEffect(()=>{const e=new ResizeObserver(()=>{C(f.current?.offsetHeight||64)});return f.current?(e.observe(f.current),()=>e.disconnect()):()=>{}},[C]),e.jsxs(h,{ref:f,className:n.clsx("jkl-expander",{"jkl-expander--open":w},I),..."button"===a?{type:d.type||"button"}:{},onClick:e=>{e.preventDefault(),x(),l?.(e)},...d,children:[q||null,e.jsx("span",{className:"jkl-expander__label",children:t}),e.jsx(v,{className:"jkl-expander__chevron"})]})});s.displayName="ExpandablePanel.Header",exports.Expander=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),o=require("../icon/icons/ChevronDownIcon.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs");const r=require("../icon/icons/ChevronUpIcon.cjs");require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs");const i=require("./context.cjs"),s=c.forwardRef(function(s,u){const{children:t,as:a="summary",open:j,icon:q,className:I,onClick:l,expandDirection:p,...d}=s,h=a,{open:m,onToggle:x,setExpanderHeight:C}=c.useContext(i.ExpanderContext),f=c.useRef();c.useImperativeHandle(u,()=>f.current,[]);const w="boolean"==typeof j,v=w?j:m,b="up"===p?r.ChevronUpIcon:o.ChevronDownIcon;return c.useEffect(()=>{if(w)return;const e=new ResizeObserver(()=>{C(f.current?.offsetHeight||64)});return f.current?(e.observe(f.current),()=>e.disconnect()):()=>{}},[w,C]),e.jsxs(h,{ref:f,className:n.clsx("jkl-expander",{"jkl-expander--open":v},I),..."button"===a?{type:d.type||"button"}:{},onClick:e=>{e.preventDefault(),w||x(),l?.(e)},...d,children:[q||null,e.jsx("span",{className:"jkl-expander__label",children:t}),e.jsx(b,{className:"jkl-expander__chevron"})]})});s.displayName="ExpandablePanel.Header",exports.Expander=s;
 //# sourceMappingURL=Expander.cjs.map

package/build/cjs/components/expander/Expander.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const {\n        open: contextOpen,\n        onToggle,\n        setExpanderHeight,\n    } = useContext<ExpandableContext>(ExpanderContext);\n\n    const internalRef = useRef<HTMLElement>();\n    useImperativeHandle(ref, () => internalRef.current, []);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        const observer = new ResizeObserver(() => {\n            // Default to 64 if the height can not be read because that is\n            // the height of the default summary element. In a custom component\n            // this means that the focus ring might be slightly misaligned but\n            // in most cases we will be able to read the ref correctly.\n            setExpanderHeight(internalRef.current?.offsetHeight || 64);\n        });\n        if (internalRef.current) {\n            observer.observe(internalRef.current);\n            return () => observer.disconnect();\n        }\n        return () => {};\n    }, [setExpanderHeight]);\n\n    return (\n        <El\n            ref={internalRef}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                onToggle();\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n\nExpander.displayName = \"ExpandablePanel.Header\";\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx","displayName"],"mappings":"qtDAiBaA,EAAWC,EAAMC,WAAW,SAEvCC,EAAmCC,GACjC,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAAAA,WAA8BC,EAAAA,iBAE5BC,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBlB,EAAK,IAAMgB,EAAYG,QAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAAA,cAAgBC,EAAAA,gBAE3DC,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAW,IAAIC,eAAe,KAKhCb,EAAkBG,EAAYG,SAASQ,cAAgB,MAE3D,OAAIX,EAAYG,SACZM,EAASG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,QACR,CAAChB,IAGAiB,EAAAA,KAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAA,EACzDzB,QAAU0B,IACNA,EAAEC,iBACFtB,IACAL,IAAU0B,OAEVxB,EAEHR,SAAA,CAAAI,GAAQ,KACT8B,EAAAA,IAAC,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAA,CAAQf,UAAU,4BAG/B,GAEAV,EAASwC,YAAc"}
+{"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const {\n        open: contextOpen,\n        onToggle,\n        setExpanderHeight,\n    } = useContext<ExpandableContext>(ExpanderContext);\n\n    const internalRef = useRef<HTMLElement>();\n    useImperativeHandle(ref, () => internalRef.current, []);\n\n    // Når `open`-propen er satt eier konsumenten state-en og Expander er\n    // kontrollert. Da skal vi ikke arve verken visning eller toggle-callback\n    // fra et omkringliggende ExpandablePanel — ellers ville klikk på en\n    // nestet Expander også togglet panelet.\n    const isControlled = typeof controlledOpen === \"boolean\";\n    const isOpen = isControlled ? controlledOpen : contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        // Kontrollert Expander skal være helt isolert fra et eventuelt\n        // omkringliggende ExpandablePanel — hverken state, klikk eller\n        // høyde-rapportering skal arve oppover. Hopp over måling slik at\n        // panel-headerens fokuscontainer ikke får raden sin høyde.\n        if (isControlled) return;\n\n        const observer = new ResizeObserver(() => {\n            // Default to 64 if the height can not be read because that is\n            // the height of the default summary element. In a custom component\n            // this means that the focus ring might be slightly misaligned but\n            // in most cases we will be able to read the ref correctly.\n            setExpanderHeight(internalRef.current?.offsetHeight || 64);\n        });\n        if (internalRef.current) {\n            observer.observe(internalRef.current);\n            return () => observer.disconnect();\n        }\n        return () => {};\n    }, [isControlled, setExpanderHeight]);\n\n    return (\n        <El\n            ref={internalRef}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                if (!isControlled) {\n                    onToggle();\n                }\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n\nExpander.displayName = \"ExpandablePanel.Header\";\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isControlled","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx","displayName"],"mappings":"qtDAiBaA,EAAWC,EAAMC,WAAW,SAEvCC,EAAmCC,GACjC,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAAAA,WAA8BC,EAAAA,iBAE5BC,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBlB,EAAK,IAAMgB,EAAYG,QAAS,IAMpD,MAAMC,EAAyC,kBAAnBhB,EACtBiB,EAASD,EAAehB,EAAiBO,EAEzCW,EAA8B,OAApBd,EAA2Be,EAAAA,cAAgBC,EAAAA,gBAE3DC,OAAAA,EAAAA,UAAU,KAKN,GAAIL,EAAc,OAElB,MAAMM,EAAW,IAAIC,eAAe,KAKhCd,EAAkBG,EAAYG,SAASS,cAAgB,MAE3D,OAAIZ,EAAYG,SACZO,EAASG,QAAQb,EAAYG,SACtB,IAAMO,EAASI,cAEnB,QACR,CAACV,EAAcP,IAGdkB,EAAAA,KAACrB,EAAA,CACGV,IAAKgB,EACLV,UAAW0B,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bf,MAIQ,WAAPJ,EAAkB,CAAE+B,KAAMxB,EAAKwB,MAAQ,UAAa,CAAA,EACzD1B,QAAU2B,IACNA,EAAEC,iBACGf,GACDR,IAEJL,IAAU2B,OAEVzB,EAEHR,SAAA,CAAAI,GAAQ,KACT+B,EAAAA,IAAC,OAAA,CAAK9B,UAAU,sBAAuBL,SAAAA,IACvCmC,EAAAA,IAACd,EAAA,CAAQhB,UAAU,4BAG/B,GAEAV,EAASyC,YAAc"}

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

@@ -1,3 +1,3 @@
 export { ExpandablePanel } from './ExpandablePanel.cjs';
 export { Expander } from './Expander.cjs';
-export type { ExpandablePanelProps, ExpanderProps } from './types.cjs';
+export type { ExpandablePanelProps, ExpanderProps, AccordionProps, } from './types.cjs';

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

@@ -1,8 +1,8 @@
-import { ComponentProps, FC, RefObject } from 'react';
+import { ComponentProps, FC, HTMLAttributes, RefObject } from 'react';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
 export type ExpandablePanelContentComponent = FC<ComponentProps<"div"> & {}>;
 export type ExpandablePanelProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
-    variant?: "fill" | "stroke";
+    outlined?: boolean;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -27,4 +27,7 @@ export type ExpandableContext = {
     onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement | null>) => void;
     setExpanderHeight: (height: number) => void;
 };
+export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
+    outlined?: boolean;
+};
 export {};

package/build/cjs/components/icon/Icon.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"),c=require("react").forwardRef(function(c,i){const{bold:l,children:n,className:o,filled:s,variant:t,...a}=c;return e.jsx("span",{"aria-hidden":!0,ref:i,className:r.clsx("jkl-icon",o,{"jkl-icon--filled":s,"jkl-icon--bold":l}),...a,children:n})});exports.Icon=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),i=require("react").forwardRef(function(i,s){const{as:a="span",bold:c,children:l,className:n,filled:d,variant:o,...t}=i,u=r.clsx("jkl-icon",n,{"jkl-icon--filled":d,"jkl-icon--bold":c});return"div"===a?e.jsx("div",{"aria-hidden":!0,ref:s,className:u,...t,children:l}):e.jsx("span",{"aria-hidden":!0,ref:s,className:u,...t,children:l})});exports.Icon=i;
 //# sourceMappingURL=Icon.cjs.map

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 Extract<React.ElementType, \"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 Extract<React.ElementType, \"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 Extract<React.ElementType, \"span\" | \"div\"> = \"span\",\n>(props: IconComponentProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const { bold, children, className, filled, variant, ...iconProps } = props;\n\n    return (\n        <span\n            aria-hidden\n            ref={ref}\n            className={clsx(\"jkl-icon\", className, {\n                \"jkl-icon--filled\": filled,\n                \"jkl-icon--bold\": bold,\n            })}\n            {...iconProps}\n        >\n            {children}\n        </span>\n    );\n}) as IconComponent;\n"],"names":["Icon","forwardRef","props","ref","bold","children","className","filled","variant","iconProps","jsx","clsx"],"mappings":"6JAoCaA,mBAA4BC,WAAW,SAElDC,EAAwCC,GACtC,MAAQC,KAAAA,EAAMC,SAAAA,EAAUC,UAAAA,EAAWC,OAAAA,EAAQC,QAAAA,KAAYC,GAAcP,EAErE,OACIQ,EAAAA,IAAC,OAAA,CACG,eAAW,EACXP,IAAAA,EACAG,UAAWK,EAAAA,KAAK,WAAYL,EAAW,CACnC,mBAAoBC,EACpB,iBAAkBH,OAElBK,EAEHJ,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 { 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"}

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
 import { IconVariant } from './types.cjs';
-type IconComponentProps<ElementType extends Extract<React.ElementType, "span" | "div">> = PolymorphicPropsWithRef<ElementType, {
+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.
@@ -17,7 +17,7 @@ type IconComponentProps<ElementType extends Extract<React.ElementType, "span" |
     className?: string;
     style?: React.CSSProperties;
 }>;
-export type IconComponent = (<ElementType extends Extract<React.ElementType, "span" | "div"> = "span">(props: IconComponentProps<ElementType>) => React.ReactElement | null) & {
+export type IconComponent = (<ElementType extends "span" | "div" = "span">(props: IconComponentProps<ElementType>) => React.ReactElement | null) & {
     displayName?: string;
 };
 export declare const Icon: IconComponent;

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"),t=require("../../../../clsx-E3yX_9sL.cjs");require("react");const c=({as:c="div",bold:r=!1,className:s,variant:i="inherit","data-testid":l,style:n,...o})=>{const a=c;return e.jsx(a,{className:t.clsx(s,"jkl-icon","jkl-icon-green-check",`jkl-icon--${i}`,{"jkl-icon--bold":r}),"aria-hidden":"true",style:n,"data-testid":l,...o,children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24px",height:"24px",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("path",{fillRule:"evenodd",d:"M17.52 9.54 10.7 16.2l-4.21-4.1 1.04-1.08 3.17 3.09 5.79-5.65 1.04 1.08Z",clipRule:"evenodd"})]})})};c.displayName="GreenCheckIcon",exports.GreenCheckIcon=c;
+"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;
 //# 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, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/*\n * NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n *       If you're here to change them, consider changing them there as well, or\n *       finding a technical solution to sharing the SVG markup\n */\nexport const GreenCheckIcon: FC<IconProps> = ({\n    as = \"div\",\n    bold = false,\n    className,\n    variant = \"inherit\",\n    \"data-testid\": testId,\n    style,\n    ...rest\n}) => {\n    const El = as;\n\n    return (\n        <El\n            className={clsx(\n                className,\n                \"jkl-icon\",\n                \"jkl-icon-green-check\",\n                `jkl-icon--${variant}`,\n                {\n                    \"jkl-icon--bold\": bold,\n                },\n            )}\n            aria-hidden=\"true\"\n            style={style}\n            data-testid={testId}\n            {...rest}\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n            >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <path\n                    fillRule=\"evenodd\"\n                    d=\"M17.52 9.54 10.7 16.2l-4.21-4.1 1.04-1.08 3.17 3.09 5.79-5.65 1.04 1.08Z\"\n                    clipRule=\"evenodd\"\n                />\n            </svg>\n        </El>\n    );\n};\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","fillRule","d","clipRule","displayName"],"mappings":"iLASO,MAAMA,EAAgC,EACzCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAEX,OACIQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,uBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAA,CACGW,SAAS,UACTC,EAAE,2EACFC,SAAS,kBAM7BtB,EAAeuB,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 = (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"}

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-import { IconProps } from '../types.cjs';
-export declare const GreenCheckIcon: FC<IconProps>;
+import { IconComponent } from '../Icon.cjs';
+export declare const GreenCheckIcon: IconComponent;

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 t=({as:t="div",bold:r=!1,className:i,variant:c="inherit","data-testid":o,style:a,...l})=>{const d=t;return e.jsx(d,{className:s.clsx(i,"jkl-icon","jkl-icon-red-cross",`jkl-icon--${c}`,{"jkl-icon--bold":r}),"aria-hidden":"true",style:a,"data-testid":o,...l,children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24px",height:"24px",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("path",{d:"m15.71 7.23 1.06 1.06-8.48 8.48-1.06-1.06 8.48-8.48Z"}),e.jsx("path",{d:"m8.29 7.23 8.48 8.48-1.06 1.06L7.23 8.3l1.06-1.06Z"})]})})};t.displayName="RedCrossIcon",exports.RedCrossIcon=t;
+"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;
 //# 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, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/*\n * NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n *       If you're here to change them, consider changing them there as well, or\n *       finding a technical solution to sharing the SVG markup\n */\nexport const RedCrossIcon: FC<IconProps> = ({\n    as = \"div\",\n    bold = false,\n    className,\n    variant = \"inherit\",\n    \"data-testid\": testId,\n    style,\n    ...rest\n}) => {\n    const El = as;\n\n    return (\n        <El\n            className={clsx(\n                className,\n                \"jkl-icon\",\n                \"jkl-icon-red-cross\",\n                `jkl-icon--${variant}`,\n                {\n                    \"jkl-icon--bold\": bold,\n                },\n            )}\n            aria-hidden=\"true\"\n            style={style}\n            data-testid={testId}\n            {...rest}\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n            >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <path d=\"m15.71 7.23 1.06 1.06-8.48 8.48-1.06-1.06 8.48-8.48Z\" />\n                <path d=\"m8.29 7.23 8.48 8.48-1.06 1.06L7.23 8.3l1.06-1.06Z\" />\n            </svg>\n        </El>\n    );\n};\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","d","displayName"],"mappings":"iLASO,MAAMA,EAA8B,EACvCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAEX,OACIQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,qBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAA,CAAKW,EAAE,yDACRX,EAAAA,IAAC,OAAA,CAAKW,EAAE,6DAKxBpB,EAAaqB,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 = (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"}

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-import { IconProps } from '../types.cjs';
-export declare const RedCrossIcon: FC<IconProps>;
+import { IconComponent } from '../Icon.cjs';
+export declare const RedCrossIcon: IconComponent;

package/build/cjs/components/link-list/LinkList.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("./LinkListLink.cjs"),t=({label:s,hideLabel:t=!0,className:r,...a})=>{const n=i.useId();return e.jsxs("nav",{className:l.clsx("jkl-link-list",r),"aria-labelledby":`list-${n}-label`,children:[e.jsx("p",{className:"jkl-link-list-title",id:`list-${n}-label`,hidden:t,children:s}),e.jsx("ul",{"aria-labelledby":`list-${n}-label`,...a})]})};t.Link=s.LinkListLink,exports.LinkList=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("./LinkListLink.cjs"),t=({label:s,hideLabel:t=!0,outlined:a=!1,className:r,...n})=>{const c=i.useId();return e.jsxs("nav",{className:l.clsx("jkl-link-list",r),"aria-labelledby":`list-${c}-label`,"data-outlined":a,children:[e.jsx("p",{className:"jkl-link-list-title",id:`list-${c}-label`,hidden:t,children:s}),e.jsx("ul",{"aria-labelledby":`list-${c}-label`,...n})]})};t.Link=s.LinkListLink,exports.LinkList=t;
 //# sourceMappingURL=LinkList.cjs.map

package/build/cjs/components/link-list/LinkList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n    label,\n    hideLabel = true,\n    className,\n    ...rest\n}: LinkListProps): React.JSX.Element => {\n    const id = useId();\n\n    return (\n        <nav\n            className={clsx(\"jkl-link-list\", className)}\n            aria-labelledby={`list-${id}-label`}\n        >\n            <p\n                className=\"jkl-link-list-title\"\n                id={`list-${id}-label`}\n                hidden={hideLabel}\n            >\n                {label}\n            </p>\n            <ul aria-labelledby={`list-${id}-label`} {...rest} />\n        </nav>\n    );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"gNAKaA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAAC,MAAA,CACGJ,UAAWK,EAAAA,KAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,UAEzBI,SAAA,CAAAC,EAAAA,IAAC,IAAA,CACGP,UAAU,sBACVE,GAAI,QAAQA,UACZM,OAAQT,EAEPO,SAAAR,UAEJ,KAAA,CAAG,kBAAiB,QAAQI,aAAgBD,QAKzDJ,EAASY,KAAOC,EAAAA"}
+{"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n    label,\n    hideLabel = true,\n    outlined = false,\n    className,\n    ...rest\n}: LinkListProps): React.JSX.Element => {\n    const id = useId();\n\n    return (\n        <nav\n            className={clsx(\"jkl-link-list\", className)}\n            aria-labelledby={`list-${id}-label`}\n            data-outlined={outlined}\n        >\n            <p\n                className=\"jkl-link-list-title\"\n                id={`list-${id}-label`}\n                hidden={hideLabel}\n            >\n                {label}\n            </p>\n            <ul aria-labelledby={`list-${id}-label`} {...rest} />\n        </nav>\n    );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","outlined","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"gNAKaA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,SAAAA,GAAW,EACXC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAAC,MAAA,CACGJ,UAAWK,EAAAA,KAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,UACzB,gBAAeH,EAEfO,SAAA,CAAAC,EAAAA,IAAC,IAAA,CACGP,UAAU,sBACVE,GAAI,QAAQA,UACZM,OAAQV,EAEPQ,SAAAT,UAEJ,KAAA,CAAG,kBAAiB,QAAQK,aAAgBD,QAKzDL,EAASa,KAAOC,EAAAA"}

package/build/cjs/components/link-list/LinkList.d.cts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { LinkListProps } from './types.cjs';
 export declare const LinkList: {
-    ({ label, hideLabel, className, ...rest }: LinkListProps): React.JSX.Element;
+    ({ label, hideLabel, outlined, className, ...rest }: LinkListProps): React.JSX.Element;
     Link: React.ForwardRefExoticComponent<Omit<import('../../utilities/index.js').PolymorphicPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 };

package/build/cjs/components/link-list/types.d.cts

@@ -3,5 +3,6 @@ import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphi
 export type LinkListProps = HTMLAttributes<HTMLUListElement> & {
     label: string;
     hideLabel?: boolean;
+    outlined?: boolean;
 };
 export type LinkListLinkComponent = <ElementType extends React.ElementType = "a">(props: PolymorphicPropsWithRef<ElementType>) => React.ReactElement | null;

package/build/cjs/components/number-input/NumberInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),r=require("../../utilities/mergeRefs.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs");const c=require("../icon/icons/MinusIcon.cjs");require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs");const o=require("../icon/icons/PlusIcon.cjs");require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs");const s=require("../input-group/InputGroup.cjs"),t={decrement:{label:"Senk verdien",Icon:c.MinusIcon},increment:{label:"Øk verdien",Icon:o.PlusIcon}};function u({direction:n,disabled:i,onClick:r}){const{label:c,Icon:o}=t[n];return e.jsx("button",{type:"button",className:"jkl-button jkl-button--ghost","aria-label":c,"data-direction":n,onPointerDown:e=>e.preventDefault(),onClick:r,disabled:i,children:e.jsx("span",{"aria-hidden":"true",children:e.jsx(o,{})})})}const a=i.forwardRef((c,o)=>{const{"data-size":t,"data-testautoid":a,"data-testid":l,align:d="left",id:p,label:j,className:m,style:b,errorLabel:I,helpLabel:q,inputClassName:h,labelProps:N,supportLabelProps:v,stepper:f=!1,tooltip:g,description:w,width:k,onChange:C,...x}=c,y=i.useRef(null),A=r.mergeRefs(y,o),[P,_]=i.useState(x.defaultValue),L=void 0!==x.value?x.value:P,D=e=>{void 0===x.value&&_(e.target.value),C?.(e)},R=function(e){return"number"==typeof e?e:"string"==typeof e&&""!==e.trim()?Number(e):Number.NaN}(L),S=void 0!==x.min?Number(x.min):Number.NaN,E=void 0!==x.max?Number(x.max):Number.NaN,F=Number.isFinite(R)&&Number.isFinite(S)&&R<=S,O=Number.isFinite(R)&&Number.isFinite(E)&&R>=E,T=b||k?{...b,...k?{width:k}:void 0}:void 0,U={id:p,label:j,errorLabel:I,helpLabel:q,labelProps:N,supportLabelProps:v,tooltip:g,description:w},z=e=>{const n=y.current;if(!n||n.disabled||n.readOnly)return;const i=n.value;n.focus();try{"increment"===e?n.stepUp():n.stepDown()}catch{return}n.value!==i&&n.dispatchEvent(new Event("input",{bubbles:!0}))},G=x.disabled||x.readOnly;return e.jsx(s.InputGroup,{...U,className:n.clsx(m,"jkl-number-input"),"data-size":t,"data-testid":l??"jkl-number-input",render:i=>e.jsxs("div",{className:n.clsx("jkl-number-input__wrapper",{"jkl-number-input__wrapper--stepper":f}),"data-invalid":i["aria-invalid"],style:T,children:[f&&e.jsx(u,{direction:"decrement",disabled:G||F,onClick:()=>z("decrement")}),e.jsx("input",{...i,...x,ref:A,type:"number",onChange:D,className:n.clsx("jkl-number-input__input",{"jkl-number-input__input--stepper":f,"jkl-number-input__input--align-right":!f&&"right"===d},h),"data-testautoid":a}),f&&e.jsx(u,{direction:"increment",disabled:G||O,onClick:()=>z("increment")})]})})});a.displayName="NumberInput",exports.NumberInput=a;
+//# sourceMappingURL=NumberInput.cjs.map

package/build/cjs/components/number-input/NumberInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.cjs","sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ComponentType,\n    forwardRef,\n    useRef,\n    useState,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { MinusIcon, PlusIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NumberInputProps } from \"./types.js\";\n\ntype NumberInputValue = string | number | readonly string[] | undefined;\n\ntype StepDirection = \"increment\" | \"decrement\";\n\nconst stepperConfig: Record<\n    StepDirection,\n    { label: string; Icon: ComponentType }\n> = {\n    decrement: { label: \"Senk verdien\", Icon: MinusIcon },\n    increment: { label: \"Øk verdien\", Icon: PlusIcon },\n};\n\nfunction toNumeric(value: NumberInputValue): number {\n    if (typeof value === \"number\") {\n        return value;\n    }\n    if (typeof value === \"string\" && value.trim() !== \"\") {\n        return Number(value);\n    }\n    return Number.NaN;\n}\n\ntype StepperButtonProps = {\n    direction: StepDirection;\n    disabled: boolean;\n    onClick: () => void;\n};\n\nfunction StepperButton({ direction, disabled, onClick }: StepperButtonProps) {\n    const { label, Icon } = stepperConfig[direction];\n\n    return (\n        <button\n            type=\"button\"\n            className=\"jkl-button jkl-button--ghost\"\n            aria-label={label}\n            data-direction={direction}\n            onPointerDown={(event) => event.preventDefault()}\n            onClick={onClick}\n            disabled={disabled}\n        >\n            <span aria-hidden=\"true\">\n                <Icon />\n            </span>\n        </button>\n    );\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n    (props, ref) => {\n        const {\n            \"data-size\": dataSize,\n            \"data-testautoid\": testAutoId,\n            \"data-testid\": dataTestId,\n            align = \"left\",\n            id,\n            label,\n            className,\n            style,\n            errorLabel,\n            helpLabel,\n            inputClassName,\n            labelProps,\n            supportLabelProps,\n            stepper = false,\n            tooltip,\n            description,\n            width,\n            onChange,\n            ...rest\n        } = props;\n        const internalRef = useRef<HTMLInputElement>(null);\n        const mergedRef = mergeRefs(internalRef, ref);\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState<NumberInputValue>(rest.defaultValue);\n\n        // I kontrollert bruk må vi lese direkte fra `value` for at disabled-\n        // state på stepper-knappene skal følge prop-en i samme render. Bruker\n        // intern state som fallback for ukontrollert bruk.\n        const effectiveValue =\n            rest.value !== undefined ? rest.value : uncontrolledValue;\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            if (rest.value === undefined) {\n                setUncontrolledValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        const numericValue = toNumeric(effectiveValue);\n        const minNumeric =\n            rest.min !== undefined ? Number(rest.min) : Number.NaN;\n        const maxNumeric =\n            rest.max !== undefined ? Number(rest.max) : Number.NaN;\n        const isAtOrBelowMin =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(minNumeric) &&\n            numericValue <= minNumeric;\n        const isAtOrAboveMax =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(maxNumeric) &&\n            numericValue >= maxNumeric;\n\n        const inputWrapperStyle =\n            style || width\n                ? {\n                      ...style,\n                      ...(width ? { width } : undefined),\n                  }\n                : undefined;\n        const inputGroupProps = {\n            id,\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const triggerStep = (direction: StepDirection) => {\n            const input = internalRef.current;\n\n            if (!input || input.disabled || input.readOnly) {\n                return;\n            }\n\n            const previousValue = input.value;\n            input.focus();\n\n            try {\n                if (direction === \"increment\") {\n                    input.stepUp();\n                } else {\n                    input.stepDown();\n                }\n            } catch {\n                return;\n            }\n\n            if (input.value === previousValue) {\n                return;\n            }\n\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        const stepperDisabled = rest.disabled || rest.readOnly;\n\n        return (\n            <InputGroup\n                {...inputGroupProps}\n                className={clsx(className, \"jkl-number-input\")}\n                data-size={dataSize}\n                data-testid={dataTestId ?? \"jkl-number-input\"}\n                render={(inputProps) => (\n                    <div\n                        className={clsx(\"jkl-number-input__wrapper\", {\n                            \"jkl-number-input__wrapper--stepper\": stepper,\n                        })}\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                        style={inputWrapperStyle}\n                    >\n                        {stepper && (\n                            <StepperButton\n                                direction=\"decrement\"\n                                disabled={stepperDisabled || isAtOrBelowMin}\n                                onClick={() => triggerStep(\"decrement\")}\n                            />\n                        )}\n                        <input\n                            {...inputProps}\n                            {...rest}\n                            ref={mergedRef}\n                            type=\"number\"\n                            onChange={handleChange}\n                            className={clsx(\n                                \"jkl-number-input__input\",\n                                {\n                                    \"jkl-number-input__input--stepper\": stepper,\n                                    \"jkl-number-input__input--align-right\":\n                                        !stepper && align === \"right\",\n                                },\n                                inputClassName,\n                            )}\n                            data-testautoid={testAutoId}\n                        />\n                        {stepper && (\n                            <StepperButton\n                                direction=\"increment\"\n                                disabled={stepperDisabled || isAtOrAboveMax}\n                                onClick={() => triggerStep(\"increment\")}\n                            />\n                        )}\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nNumberInput.displayName = \"NumberInput\";\n"],"names":["stepperConfig","decrement","label","Icon","MinusIcon","increment","PlusIcon","StepperButton","direction","disabled","onClick","jsx","type","className","onPointerDown","event","preventDefault","children","NumberInput","forwardRef","props","ref","dataSize","testAutoId","dataTestId","align","id","style","errorLabel","helpLabel","inputClassName","labelProps","supportLabelProps","stepper","tooltip","description","width","onChange","rest","internalRef","useRef","mergedRef","mergeRefs","uncontrolledValue","setUncontrolledValue","useState","defaultValue","effectiveValue","value","handleChange","target","numericValue","trim","Number","NaN","toNumeric","minNumeric","min","maxNumeric","max","isAtOrBelowMin","isFinite","isAtOrAboveMax","inputWrapperStyle","inputGroupProps","triggerStep","input","current","readOnly","previousValue","focus","stepUp","stepDown","dispatchEvent","Event","bubbles","stepperDisabled","InputGroup","clsx","render","inputProps","jsxs","displayName"],"mappings":"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"}

package/build/cjs/components/number-input/NumberInput.d.cts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "inline" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+    align?: "left" | "right";
+    width?: string;
+    inputClassName?: string;
+    stepper?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/number-input/index.cjs

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

package/build/cjs/components/number-input/index.cjs.map

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

package/build/cjs/components/number-input/index.d.cts

@@ -0,0 +1,2 @@
+export { NumberInput } from './NumberInput.cjs';
+export type { NumberInputProps } from './types.cjs';

package/build/cjs/components/number-input/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

package/build/cjs/components/number-input/types.cjs.map

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

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

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes } from 'react';
+import { InputGroupProps } from '../input-group/types.cjs';
+export type NumberInputProps = Omit<InputGroupProps, "children" | "inline" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+    /**
+     * Justerer teksten i inputfeltet.
+     * @default "left"
+     */
+    align?: "left" | "right";
+    /**
+     * CSS-verdi for bredden til input-feltet.
+     */
+    width?: string;
+    inputClassName?: string;
+    /**
+     * Viser knapper på hver side av feltet som bruker native stepping.
+     * Respekterer `min`, `max` og `step`.
+     * @default false
+     */
+    stepper?: boolean;
+};

package/build/cjs/components/popover/Popover.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,x=n??g,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=b.context,v=t.useClick(j,{enabled:!1,...d}),O=t.useHover(j,{enabled:!1,...c}),P=t.useFocus(j,{enabled:!1,...u}),R=t.useDismiss(j,p),k=t.useRole(j,f),y=t.useInteractions([v,R,P,O,k]);return s.useLayoutEffect(()=>{a&&b.refs.setPositionReference(a?.current)},[a,b.refs]),s.useMemo(()=>({open:h,onOpenChange:x,modal:l,...y,...b}),[h,x,l,y,b])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...l},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=i(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...l,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...l,className:n.clsx("jkl-popover-trigger",l.className)}),children:o})}),u=s.forwardRef(function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b}=i(),j=t.useMergeRefs([g.setFloating,f]),v=g.reference.current,{theme:O,size:P}=(k=v)&&"contextElement"in k?r.getThemeAndSize(v.contextElement):r.getThemeAndSize(v),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":O,"data-size":P,className:n.clsx("jkl jkl-popover",l),ref:j,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...b(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,onPlacementChange:c,hoverOptions:u,focusOptions:d,clickOptions:f,roleOptions:p,dismissOptions:m})=>{const[g,h]=s.useState(e),b=e??g,x=n??h,v=t.useFloating({open:b,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(l),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=v.context,O=t.useClick(j,{enabled:!1,...f}),P=t.useHover(j,{enabled:!1,...u}),y=t.useFocus(j,{enabled:!1,...d}),R=t.useDismiss(j,m),k=t.useRole(j,p),C=t.useInteractions([O,R,y,P,k]);return s.useLayoutEffect(()=>{a&&v.refs.setPositionReference(a?.current)},[a,v.refs]),s.useLayoutEffect(()=>{b&&c?.(v.placement)},[b,v.placement,c]),s.useMemo(()=>({open:b,onOpenChange:x,modal:i,...C,...v}),[b,x,i,C,v])})({...o});return e.jsx(i.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...i},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=l(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...i,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...i,className:n.clsx("jkl-popover-trigger",i.className)}),children:o})}),u=s.forwardRef(function({style:o,className:i,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:b,getFloatingProps:x,isPositioned:v}=l(),j=t.useMergeRefs([g.setFloating,f]),O=g.reference.current,{theme:P,size:y}=(k=O)&&"contextElement"in k?r.getThemeAndSize(O.contextElement):r.getThemeAndSize(O),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":P,"data-size":y,className:n.clsx("jkl jkl-popover",i),ref:j,style:{...o,...b,"--popover-padding":`var(--jkl-spacing-${a})`,visibility:m||v?"visible":"hidden"},...x(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
 //# sourceMappingURL=Popover.cjs.map

package/build/cjs/components/popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    onPlacementChange,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    // useLayoutEffect (i stedet for useEffect) sikrer at konsumenter får\n    // riktig placement før paint — ellers ville første frame bruke default\n    // placement og deretter snappe over til den faktiske, noe som gir et\n    // synlig \"glitch\" på styling som er placement-avhengig (f.eks. flat side\n    // / border-radius på Select-listboxen ved flip).\n    React.useLayoutEffect(() => {\n        if (!open) return;\n        onPlacementChange?.(data.placement);\n    }, [open, data.placement, onPlacementChange]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const {\n        context,\n        modal,\n        refs,\n        open,\n        floatingStyles,\n        getFloatingProps,\n        isPositioned,\n    } = usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                            // Skjul popoveren inntil floating-ui har regnet\n                            // ut første posisjon — ellers blinker den\n                            // kort i (0,0) før den hopper på plass.\n                            // Bare for ikke-modale popovere; modale bruker\n                            // umiddelbar fokus-trap som forutsetter at\n                            // innholdet er fokuserbart fra første render.\n                            visibility:\n                                modal || isPositioned ? \"visible\" : \"hidden\",\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","onPlacementChange","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","isPositioned","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","visibility","Trigger","Content"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ReferenceType, UseFloatingOptions, useClick, useDismiss, useFocus, useHover, useRole } from '@floating-ui/react';
+import { Placement, ReferenceType, UseFloatingOptions, useClick, useDismiss, useFocus, useHover, useRole } from '@floating-ui/react';
 export type ClickOptions = Parameters<typeof useClick>[1];
 export type DismissOptions = Parameters<typeof useDismiss>[1];
 export type FocusOptions = Parameters<typeof useFocus>[1];
@@ -58,6 +58,13 @@ export interface PopoverOptions {
      * @default Popover.Trigger
      */
     positionReference?: React.RefObject<ReferenceType>;
+    /**
+     * Trigges når popoverens faktiske plassering endrer seg, f.eks. når
+     * `flip`-middlewaren snur popoveren over triggeren fordi det ikke er
+     * plass under. Kan brukes til å justere styling avhengig av om
+     * popoveren ligger over eller under referansen.
+     */
+    onPlacementChange?: (placement: Placement) => void;
     /**
      * Options for hover-interaksjoner.
      *