@fremtind/jokul 1.2.4 → 1.4.0

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("./context.cjs"),s=Object.assign(n.forwardRef((function(a,s){const{children:l,as:i="details",variant:o="fill",open:c,defaultOpen:d,onOpenChange:u,className:p,...x}=a,[j,f]=n.useState(d||!1),[b,g]=n.useState(!1),[v,E]=n.useState(0),h=n.useRef();n.useImperativeHandle(s,(()=>h.current),[]);const m=i,S=typeof c<"u",k=S?c: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"===i?k||b:void 0,"data-visible-content":k||b,...x,children:e.jsx(r.ExpanderContext.Provider,{value:{open:k,onToggle:()=>{S||f((e=>(u?.(!e),!e)))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:l})})]})})),{Content:a.ExpandablePanelContent});exports.ExpandablePanel=s;
+"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("./context.cjs"),s=require("./Expander.cjs"),i=Object.assign(n.forwardRef((function(a,s){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(s,(()=>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(r.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S||f((e=>(u?.(!e),!e)))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:i})})]})})),{Content:a.ExpandablePanelContent,Header:s.Expander});exports.ExpandablePanel=i;
 //# 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 { 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                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 },\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"],"mappings":"qPAUaA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,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,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/Cc,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAAA,KAAC,MAAI,CAAAvB,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,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC,EAAuBA"}
+{"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 { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\nimport { Expander } from \"./Expander.jsx\";\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                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,YAAW,SAGbC,EACAC,GAEM,MACFC,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,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/Cc,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAAA,KAAC,MAAI,CAAAvB,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,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC,yBAAwBC,OAAQC,EAASA"}

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"),i=require("./context.cjs");exports.ExpandablePanelContent=({className:s,children:a,...o})=>{const{open:c,onTransitionStart:d,onTransitionEnd:u}=n.useContext(i.ExpanderContext),[l]=r.useAnimatedHeightBetween(c,{timing:"snappy",onTransitionStart:d,onTransitionEnd:u});return n.useEffect((()=>{const e=l.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")}),[c,l]),e.jsx("div",{ref:l,className:t.clsx("jkl-expandable__content",s),...o,"data-expanded":c,children:e.jsx("div",{className:"jkl-expandable__content-wrapper",children:a})})};
+"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;
 //# 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"],"names":["className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx"],"mappings":"kTASuE,EACnEA,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,WAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAAA,IAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAAA,KAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAAA,IAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD"}
+{"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,WAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAAA,IAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAAA,KAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAAA,IAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD,EAIRF,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"})]})}));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=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;
 //# 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"],"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"],"mappings":"qtDAiBaA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,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,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBA,cAAAC,EAAAA,gBAE3DC,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAE7D,OAAIX,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAAAA,KAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAAA,IAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAQ,CAAAf,UAAU,4BAG/B"}
+{"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,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,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,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBA,cAAAC,EAAAA,gBAE3DC,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAE7D,OAAIX,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAAAA,KAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAAA,IAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAQ,CAAAf,UAAU,4BAG/B,IAEAV,EAASwC,YAAc"}

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

@@ -9,13 +9,17 @@ export type ExpandablePanelProps<ElementType extends React.ElementType> = Polymo
 }>;
 export type ExpandablePanelComponent = {
     Content: ExpandablePanelContentComponent;
+    Header: ExpanderComponent;
 } & (<ElementType extends React.ElementType = "div">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
 export type ExpanderProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     icon?: React.ReactNode;
     open?: boolean;
     expandDirection?: "up" | "down";
 }>;
-export type ExpanderComponent = <ElementType extends React.ElementType = "button">(props: ExpanderProps<ElementType>) => React.ReactElement | null;
+type Expander = <ElementType extends React.ElementType = "button">(props: ExpanderProps<ElementType>) => React.ReactElement | null;
+export type ExpanderComponent = Expander & {
+    displayName?: string;
+};
 export type ExpandableContext = {
     open: boolean;
     onToggle: () => void;
@@ -23,3 +27,4 @@ export type ExpandableContext = {
     onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement | null>) => void;
     setExpanderHeight: (height: number) => void;
 };
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const BETA_Help = ({\n    position = \"top\",\n    buttonText = \"Hjelp\",\n    showButtonText = false,\n    iconPosition = \"left\",\n    children,\n    ...rest\n}: HelpProps) => {\n    return (\n        <>\n            <Button\n                {...rest}\n                title={buttonText || rest.title}\n                iconPosition={iconPosition}\n                variant=\"ghost\"\n                className={clsx(\"jkl-help-trigger\", rest.className)}\n                icon={<Icon aria-hidden=\"true\">help</Icon>}\n                data-testid=\"jkl-help-trigger\"\n                // @ts-ignore\n                popovertarget={`${buttonText}-popover`}\n                // @ts-ignore\n                style={{ anchorName: `${buttonText}-popover` }}\n            >\n                {showButtonText && buttonText}\n            </Button>\n\n            <output aria-live=\"assertive\">\n                <div\n                    data-position={position}\n                    data-theme=\"dark\"\n                    popover=\"auto\"\n                    id={`${buttonText}-popover`}\n                    className=\"jkl-help-popover\"\n                    // @ts-ignore\n                    style={{ positionAnchor: `${buttonText}-popover` }}\n                >\n                    {children}\n                </div>\n            </output>\n        </>\n    );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","children","rest","jsxs","Fragment","jsx","Button","title","variant","className","clsx","icon","Icon","popovertarget","style","anchorName","popover","id","positionAnchor"],"mappings":"sQAMyB,EACrBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,SAAAA,KACGC,KAIKC,EAAAA,KAAAC,WAAA,CAAAH,SAAA,CAAAI,EAAAA,IAACC,EAAAA,OAAA,IACOJ,EACJK,MAAOT,GAAcI,EAAKK,MAC1BP,aAAAA,EACAQ,QAAQ,QACRC,UAAWC,EAAAA,KAAK,mBAAoBR,EAAKO,WACzCE,KAAMN,EAAAA,IAACO,OAAK,CAAA,cAAY,OAAOX,SAAI,SACnC,cAAY,mBAEZY,cAAe,GAAGf,YAElBgB,MAAO,CAAEC,WAAY,GAAGjB,aAEvBG,SAAkBF,GAAAD,IAGvBO,EAAAA,IAAC,SAAO,CAAA,YAAU,YACdJ,SAAAI,EAAAA,IAAC,MAAA,CACG,gBAAeR,EACf,aAAW,OACXmB,QAAQ,OACRC,GAAI,GAAGnB,YACPW,UAAU,mBAEVK,MAAO,CAAEI,eAAgB,GAAGpB,aAE3BG,SAAAA"}

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { HelpProps } from './types.cjs';
+export declare const BETA_Help: ({ position, buttonText, showButtonText, iconPosition, children, ...rest }: HelpProps) => React.JSX.Element;

package/build/cjs/components/help/index.cjs

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

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

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

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

@@ -0,0 +1,2 @@
+export { BETA_Help } from './Help.cjs';
+export type { HelpProps } from './types.cjs';

package/build/cjs/components/help/types.cjs

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

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

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

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button/index.cjs';
+export type HelpProps = Omit<ButtonProps<"button">, "iconPosition" | "icon"> & {
+    /**
+     * Initiell plassering av popoveren i forhold til triggeren.
+     * @default "top"
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * @default "left"
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * Teksten på knappen som åpner help-popover.
+     */
+    buttonText: string;
+    /**
+     * @default false
+     */
+    showButtonText?: boolean;
+    /**
+     * Innholdet i tooltipen.
+     */
+    children: ReactNode;
+};

package/build/cjs/components/tooltip/PopupTip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport type { PopupTipProps } from \"./types.js\";\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isOpen} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n\n            <TooltipContent data-ispopup={true}>\n                {/* biome-ignore lint/a11y/noNoninteractiveTabindex: */}\n                <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n                    {content}\n                </div>\n            </TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"4UAQ2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,EAAAA,UAAS,GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACAd,GAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAAAA,IAACS,EAAeA,eAAA,CAAA,gBAAc,EAE1BV,SAAAC,EAAAA,IAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}
+{"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport type { PopupTipProps } from \"./types.js\";\n\n/**\n * @deprecated bruk heller Help\n */\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isOpen} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n\n            <TooltipContent data-ispopup={true}>\n                {/* biome-ignore lint/a11y/noNoninteractiveTabindex: */}\n                <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n                    {content}\n                </div>\n            </TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"4UAW2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,EAAAA,UAAS,GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACAd,GAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAAAA,IAACS,EAAeA,eAAA,CAAA,gBAAc,EAE1BV,SAAAC,EAAAA,IAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}

package/build/cjs/components/tooltip/PopupTip.d.cts

@@ -1,3 +1,6 @@
 import { FC } from 'react';
 import { PopupTipProps } from './types.cjs';
+/**
+ * @deprecated bruk heller Help
+ */
 export declare const PopupTip: FC<PopupTipProps>;

package/build/es/components/expander/ExpandablePanel.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import a,{useState as s,useRef as r,useImperativeHandle as o,useEffect as i}from"react";import{ExpandablePanelContent as l}from"./ExpandablePanelContent.js";import{ExpanderContext as d}from"./context.js";const c=Object.assign(a.forwardRef((function(a,l){const{children:c,as:p="details",variant:f="fill",open:m,defaultOpen:x,onOpenChange:u,className:j,...v}=a,[b,g]=s(x||!1),[E,h]=s(!1),[k,C]=s(0),N=r();o(l,(()=>N.current),[]);const P=p,_=typeof m<"u",w=_?m:b;return i((()=>{const e=e=>{g("open"===e.newState)},t=N.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)}),[]),e("div",{className:"jkl-expandable__wrapper",children:[t("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:k}}),t(P,{ref:N,"data-testid":"jkl-expand-section",className:n("jkl-expandable",`jkl-expandable--${f}`,j),open:"details"===p?w||E:void 0,"data-visible-content":w||E,...v,children:t(d.Provider,{value:{open:w,onToggle:()=>{_||g((e=>(u?.(!e),!e)))},onTransitionEnd:h,onTransitionStart:e=>{e&&h(!0)},setExpanderHeight:C},children:c})})]})})),{Content:l});export{c as ExpandablePanel};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import n,{useState as r,useRef as s,useImperativeHandle as o,useEffect as i}from"react";import{ExpandablePanelContent as l}from"./ExpandablePanelContent.js";import{ExpanderContext as d}from"./context.js";import{Expander as p}from"./Expander.js";const c=Object.assign(n.forwardRef((function(n,l){const{children:p,as:c="details",variant:m="fill",open:x,defaultOpen:f,onOpenChange:u,className:j,...v}=n,[E,b]=r(f||!1),[g,h]=r(!1),[k,C]=r(0),N=s();o(l,(()=>N.current),[]);const P=c,_=typeof x<"u",w=_?x:E;return i((()=>{const e=e=>{b("open"===e.newState)},t=N.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)}),[]),e("div",{className:"jkl-expandable__wrapper",children:[t("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:k}}),t(P,{ref:N,"data-testid":"jkl-expand-section",className:a("jkl-expandable",`jkl-expandable--${m}`,j),open:"details"===c?w||g:void 0,"data-visible-content":w||g,...v,children:t(d.Provider,{value:{open:w,onToggle:()=>{_||b((e=>(u?.(!e),!e)))},onTransitionEnd:h,onTransitionStart:e=>{e&&h(!0)},setExpanderHeight:C},children:p})})]})})),{Content:l,Header:p});export{c as ExpandablePanel};
 //# sourceMappingURL=ExpandablePanel.js.map

package/build/es/components/expander/ExpandablePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanel.js","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 { 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                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 },\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"],"mappings":"4SAUO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC"}
+{"version":3,"file":"ExpandablePanel.js","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 { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\nimport { Expander } from \"./Expander.jsx\";\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                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":"qVAWO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC,EAAwBC,OAAQC"}

package/build/es/components/expander/ExpandablePanelContent.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useContext as n,useEffect as a}from"react";import{useAnimatedHeightBetween as r}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as s}from"./context.js";const o=({className:o,children:i,...m})=>{const{open:c,onTransitionStart:d,onTransitionEnd:p}=n(s),[l]=r(c,{timing:"snappy",onTransitionStart:d,onTransitionEnd:p});return a((()=>{const e=l.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")}),[c,l]),e("div",{ref:l,className:t("jkl-expandable__content",o),...m,"data-expanded":c,children:e("div",{className:"jkl-expandable__content-wrapper",children:i})})};export{o as ExpandablePanelContent};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useContext as n,useEffect as a}from"react";import{useAnimatedHeightBetween as r}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as s}from"./context.js";const o=({className:o,children:i,...m})=>{const{open:d,onTransitionStart:c,onTransitionEnd:p}=n(s),[l]=r(d,{timing:"snappy",onTransitionStart:c,onTransitionEnd:p});return a((()=>{const e=l.current;d?e?.removeAttribute("inert"):e?.setAttribute("inert","true")}),[d,l]),e("div",{ref:l,className:t("jkl-expandable__content",o),...m,"data-expanded":d,children:e("div",{className:"jkl-expandable__content-wrapper",children:i})})};o.displayName="ExpandablePanel.Content";export{o as ExpandablePanelContent};
 //# sourceMappingURL=ExpandablePanelContent.js.map

package/build/es/components/expander/ExpandablePanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanelContent.js","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"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx"],"mappings":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,GAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD"}
+{"version":3,"file":"ExpandablePanelContent.js","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":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,GAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD,EAIRF,EAAuBoB,YAAc"}

package/build/es/components/expander/Expander.js

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

package/build/es/components/expander/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","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"],"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"],"mappings":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,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,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAEzDX,OAAAA,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B"}
+{"version":3,"file":"Expander.js","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":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,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,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAEzDX,OAAAA,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B,IAEAV,EAASwC,YAAc"}

package/build/es/components/expander/types.d.ts

@@ -9,13 +9,17 @@ export type ExpandablePanelProps<ElementType extends React.ElementType> = Polymo
 }>;
 export type ExpandablePanelComponent = {
     Content: ExpandablePanelContentComponent;
+    Header: ExpanderComponent;
 } & (<ElementType extends React.ElementType = "div">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
 export type ExpanderProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     icon?: React.ReactNode;
     open?: boolean;
     expandDirection?: "up" | "down";
 }>;
-export type ExpanderComponent = <ElementType extends React.ElementType = "button">(props: ExpanderProps<ElementType>) => React.ReactElement | null;
+type Expander = <ElementType extends React.ElementType = "button">(props: ExpanderProps<ElementType>) => React.ReactElement | null;
+export type ExpanderComponent = Expander & {
+    displayName?: string;
+};
 export type ExpandableContext = {
     open: boolean;
     onToggle: () => void;
@@ -23,3 +27,4 @@ export type ExpandableContext = {
     onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement | null>) => void;
     setExpanderHeight: (height: number) => void;
 };
+export {};

package/build/es/components/help/Help.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { HelpProps } from './types.js';
+export declare const BETA_Help: ({ position, buttonText, showButtonText, iconPosition, children, ...rest }: HelpProps) => React.JSX.Element;

package/build/es/components/help/Help.js

@@ -0,0 +1,2 @@
+import{jsxs as o,Fragment as t,jsx as e}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import"react";import{Button as i}from"../button/Button.js";import{Icon as a}from"../icon/Icon.js";const s=({position:s="top",buttonText:p="Hjelp",showButtonText:n=!1,iconPosition:l="left",children:c,...h})=>o(t,{children:[e(i,{...h,title:p||h.title,iconPosition:l,variant:"ghost",className:r("jkl-help-trigger",h.className),icon:e(a,{"aria-hidden":"true",children:"help"}),"data-testid":"jkl-help-trigger",popovertarget:`${p}-popover`,style:{anchorName:`${p}-popover`},children:n&&p}),e("output",{"aria-live":"assertive",children:e("div",{"data-position":s,"data-theme":"dark",popover:"auto",id:`${p}-popover`,className:"jkl-help-popover",style:{positionAnchor:`${p}-popover`},children:c})})]});export{s as BETA_Help};
+//# sourceMappingURL=Help.js.map

package/build/es/components/help/Help.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Help.js","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const BETA_Help = ({\n    position = \"top\",\n    buttonText = \"Hjelp\",\n    showButtonText = false,\n    iconPosition = \"left\",\n    children,\n    ...rest\n}: HelpProps) => {\n    return (\n        <>\n            <Button\n                {...rest}\n                title={buttonText || rest.title}\n                iconPosition={iconPosition}\n                variant=\"ghost\"\n                className={clsx(\"jkl-help-trigger\", rest.className)}\n                icon={<Icon aria-hidden=\"true\">help</Icon>}\n                data-testid=\"jkl-help-trigger\"\n                // @ts-ignore\n                popovertarget={`${buttonText}-popover`}\n                // @ts-ignore\n                style={{ anchorName: `${buttonText}-popover` }}\n            >\n                {showButtonText && buttonText}\n            </Button>\n\n            <output aria-live=\"assertive\">\n                <div\n                    data-position={position}\n                    data-theme=\"dark\"\n                    popover=\"auto\"\n                    id={`${buttonText}-popover`}\n                    className=\"jkl-help-popover\"\n                    // @ts-ignore\n                    style={{ positionAnchor: `${buttonText}-popover` }}\n                >\n                    {children}\n                </div>\n            </output>\n        </>\n    );\n};\n"],"names":["BETA_Help","position","buttonText","showButtonText","iconPosition","children","rest","jsxs","Fragment","jsx","Button","title","variant","className","clsx","icon","Icon","popovertarget","style","anchorName","popover","id","positionAnchor"],"mappings":"gNAMO,MAAMA,EAAY,EACrBC,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,SAAAA,KACGC,KAIKC,EAAAC,EAAA,CAAAH,SAAA,CAAAI,EAACC,EAAA,IACOJ,EACJK,MAAOT,GAAcI,EAAKK,MAC1BP,aAAAA,EACAQ,QAAQ,QACRC,UAAWC,EAAK,mBAAoBR,EAAKO,WACzCE,KAAMN,EAACO,EAAK,CAAA,cAAY,OAAOX,SAAI,SACnC,cAAY,mBAEZY,cAAe,GAAGf,YAElBgB,MAAO,CAAEC,WAAY,GAAGjB,aAEvBG,SAAkBF,GAAAD,IAGvBO,EAAC,SAAO,CAAA,YAAU,YACdJ,SAAAI,EAAC,MAAA,CACG,gBAAeR,EACf,aAAW,OACXmB,QAAQ,OACRC,GAAI,GAAGnB,YACPW,UAAU,mBAEVK,MAAO,CAAEI,eAAgB,GAAGpB,aAE3BG,SAAAA"}

package/build/es/components/help/index.d.ts

@@ -0,0 +1,2 @@
+export { BETA_Help } from './Help.js';
+export type { HelpProps } from './types.js';

package/build/es/components/help/index.js

@@ -0,0 +1,2 @@
+import{BETA_Help as p}from"./Help.js";export{p as BETA_Help};
+//# sourceMappingURL=index.js.map

package/build/es/components/help/index.js.map

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

package/build/es/components/help/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button/index.js';
+export type HelpProps = Omit<ButtonProps<"button">, "iconPosition" | "icon"> & {
+    /**
+     * Initiell plassering av popoveren i forhold til triggeren.
+     * @default "top"
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * @default "left"
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * Teksten på knappen som åpner help-popover.
+     */
+    buttonText: string;
+    /**
+     * @default false
+     */
+    showButtonText?: boolean;
+    /**
+     * Innholdet i tooltipen.
+     */
+    children: ReactNode;
+};

package/build/es/components/help/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/help/types.js.map

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

package/build/es/components/tooltip/PopupTip.d.ts

@@ -1,3 +1,6 @@
 import { FC } from 'react';
 import { PopupTipProps } from './types.js';
+/**
+ * @deprecated bruk heller Help
+ */
 export declare const PopupTip: FC<PopupTipProps>;

package/build/es/components/tooltip/PopupTip.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport type { PopupTipProps } from \"./types.js\";\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isOpen} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n\n            <TooltipContent data-ispopup={true}>\n                {/* biome-ignore lint/a11y/noNoninteractiveTabindex: */}\n                <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n                    {content}\n                </div>\n            </TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"+UAQO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,YAGhCC,EAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAG,EAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EACP,8BACAd,GAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAACM,EAAa,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAACS,EAAe,CAAA,gBAAc,EAE1BV,SAAAC,EAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}
+{"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport type { PopupTipProps } from \"./types.js\";\n\n/**\n * @deprecated bruk heller Help\n */\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isOpen} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n\n            <TooltipContent data-ispopup={true}>\n                {/* biome-ignore lint/a11y/noNoninteractiveTabindex: */}\n                <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n                    {content}\n                </div>\n            </TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"+UAWO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,YAGhCC,EAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAG,EAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EACP,8BACAd,GAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAACM,EAAa,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAACS,EAAe,CAAA,gBAAc,EAE1BV,SAAAC,EAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -593,6 +593,17 @@
         "default": "./build/cjs/components/tooltip/index.cjs"
       }
     },
+    "./styles/components/help": "./styles/components/help/_index.scss",
+    "./help": {
+      "import": {
+        "types": "./build/es/components/help/index.d.ts",
+        "default": "./build/es/components/help/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/components/help/index.d.cts",
+        "default": "./build/cjs/components/help/index.cjs"
+      }
+    },
     "./screen-reader-only": {
       "import": {
         "types": "./build/es/components/screen-reader-only/index.d.ts",

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-ujrsgt9 {
+@keyframes jkl-checkbox-checked-uswmap4 {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-ujrsgtp {
+@keyframes jkl-checkbox-indeterminate-uswmap9 {
   0% {
     width: 0;
   }
@@ -75,11 +75,11 @@
   left: calc(-0.5 * var(--jkl-checkbox-box-size));
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-ujrsgt9 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uswmap4 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-ujrsgtp 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-uswmap9 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-ujrsgt9{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-ujrsgtp{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-ujrsgt9 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-ujrsgtp .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uswmap4{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uswmap9{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uswmap4 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uswmap9 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/styles/components/checkbox-panel/checkbox-panel.css

@@ -62,7 +62,7 @@
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-checkbox-checked-uej84i9 {
+@keyframes jkl-checkbox-checked-ufxir8q {
   0% {
     width: 0;
     height: 0;
@@ -125,7 +125,7 @@
   }
 }
 .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-uej84i9 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-ufxir8q 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox-panel:has([aria-invalid=true]) {