@fremtind/jokul 0.37.9 → 0.37.11

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import t,{useState as a,useRef as o,useImperativeHandle as r,useEffect as s}from"react";import{ExpanderContext as l}from"./context.js";import{ExpandablePanelContent as i}from"./ExpandablePanelContent.js";const d=Object.assign(t.forwardRef((function(t,i){const{children:d,as:c="details",variant:p="fill",open:u,onOpenChange:f,...m}=t,[x,v]=a(!1),[j,g]=a(!1),E=o();r(i,(()=>E.current),[E]);const b=c,C=typeof u<"u",h=C?u:x;s((()=>{null==f||f(h)}),[h,f]);return s((()=>{const e=e=>{v("open"===e.newState)},n=E.current;return null==n||n.addEventListener("toggle",e),()=>null==n?void 0:n.removeEventListener("toggle",e)}),[g,v]),e(b,{ref:E,"data-testid":"jkl-expand-section",className:n("jkl-expandable",`jkl-expandable--${p}`),open:"details"===c?h||j:void 0,"data-visible-content":h||j,...m,children:e(l.Provider,{value:{open:h,onToggle:()=>{C||v((e=>!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)}},children:d})})})),{Content:i});export{d as ExpandablePanel};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import a,{useState as s,useRef as r,useImperativeHandle as o,useEffect as l}from"react";import{ExpanderContext as i}from"./context.js";import{ExpandablePanelContent as d}from"./ExpandablePanelContent.js";const c=Object.assign(a.forwardRef((function(a,d){const{children:c,as:p="details",variant:u="fill",open:x,onOpenChange:m,...f}=a,[j,v]=s(!1),[g,b]=s(!1),[E,h]=s(0),k=r();o(d,(()=>k.current),[k]);const C=p,P=typeof x<"u",_=P?x:j;l((()=>{null==m||m(_)}),[_,m]);return l((()=>{const e=e=>{v("open"===e.newState)},n=k.current;return null==n||n.addEventListener("toggle",e),()=>null==n?void 0:n.removeEventListener("toggle",e)}),[b,v]),e("div",{className:"jkl-expandable__wrapper",children:[n("div",{inert:"true",className:"jkl-expandable__focus-container",style:{height:E}}),n(C,{ref:k,"data-testid":"jkl-expand-section",className:t("jkl-expandable",`jkl-expandable--${u}`),open:"details"===p?_||g:void 0,"data-visible-content":_||g,...f,children:n(i.Provider,{value:{open:_,onToggle:()=>{P||v((e=>!e))},onTransitionEnd:b,onTransitionStart:e=>{e&&b(!0)},setExpanderHeight:h},children:c})})]})})),{Content:d});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 { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpandablePanelComponent, ExpandablePanelProps } 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            onOpenChange,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, [internalRef]);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        useEffect(() => {\n            onOpenChange?.(isOpen);\n        }, [isOpen, onOpenChange]);\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) => !previousValue);\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        }, [setContentIsVisible, setUncontrolledOpen]);\n\n        return (\n            <El\n                ref={internalRef}\n                data-testid={\"jkl-expand-section\"}\n                className={clsx(\"jkl-expandable\", `jkl-expandable--${variant}`)}\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\" ? isOpen || contentIsVisible : 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                    }}\n                >\n                    {children}\n                </ExpanderContext.Provider>\n            </El>\n        );\n    }),\n    { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","onOpenChange","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsx","className","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"kSAOO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,aAAAA,KACGC,GACHR,GAEGS,EAAkBC,GAAuBC,GAAS,IAClDC,EAAkBC,GAAuBF,GAAS,GAEnDG,EAAcC,IACpBC,EAAoBf,GAAK,IAAMa,EAAYG,SAAS,CAACH,IAE/CI,MAAAA,EAAKf,EACLgB,SAAsBb,EAAmB,IACzCc,EAASD,EAAeb,EAAiBG,EAE/CY,GAAU,KACN,MAAAd,GAAAA,EAAea,EAAAA,GAChB,CAACA,EAAQb,IAeZ,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMb,EAAe,SAAfa,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnBQ,OAAA,MAAAA,GAAAA,EAAAC,iBAAiB,SAAUJ,GAE7B,IACH,MAAAG,OAAA,EAAAA,EAASE,oBACL,SACAL,EAAA,GAET,CAACT,EAAqBH,IAGrBkB,EAACV,EAAA,CACGjB,IAAKa,EACL,cAAa,qBACbe,UAAWC,EAAK,iBAAkB,mBAAmB1B,KACrDC,KAGW,YAAPF,EAAmBiB,GAAUR,OAAmB,EAGpD,uBAAsBQ,GAAUR,KAC5BJ,EAEJN,SAAA0B,EAACG,EAAgBC,SAAhB,CACGC,MAAO,CACH5B,KAAMe,EACNc,SAxCc,KACtBf,GAGgBT,GAACyB,IAAmBA,GAAa,EAqCzCC,gBAAiBvB,EACjBwB,kBAhDaC,IACrBA,GACAzB,GAAoB,EAAI,GAiDnBX,SAAAA,KAET,IAGR,CAAEqC,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 { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpandablePanelComponent, ExpandablePanelProps } 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            onOpenChange,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, [internalRef]);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        useEffect(() => {\n            onOpenChange?.(isOpen);\n        }, [isOpen, onOpenChange]);\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) => !previousValue);\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        }, [setContentIsVisible, setUncontrolledOpen]);\n\n        return (\n            <div className=\"jkl-expandable__wrapper\">\n                <div\n                    // React typings don't include inert for some reason,\n                    // but destructuring lets us calm down the TS compiler\n                    {...{ inert: \"true\" }}\n                    className=\"jkl-expandable__focus-container\"\n                    style={{ height: expanderHeight }}\n                ></div>\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable\",\n                        `jkl-expandable--${variant}`,\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","onOpenChange","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","className","jsx","inert","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"4SAOO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,aAAAA,KACGC,GACHR,GAEGS,EAAkBC,GAAuBC,GAAS,IAClDC,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBjB,GAAK,IAAMe,EAAYG,SAAS,CAACH,IAE/CI,MAAAA,EAAKjB,EACLkB,SAAsBf,EAAmB,IACzCgB,EAASD,EAAef,EAAiBG,EAE/Cc,GAAU,KACN,MAAAhB,GAAAA,EAAee,EAAAA,GAChB,CAACA,EAAQf,IAeZ,OAAAgB,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnBQ,OAAA,MAAAA,GAAAA,EAAAC,iBAAiB,SAAUJ,GAE7B,IACH,MAAAG,OAAA,EAAAA,EAASE,oBACL,SACAL,EAAA,GAET,CAACX,EAAqBH,IAGrBoB,EAAC,MAAI,CAAAC,UAAU,0BACX7B,SAAA,CAAA8B,EAAC,MAAA,CAGSC,MAAO,OACbF,UAAU,kCACVG,MAAO,CAAEC,OAAQrB,KAErBkB,EAACZ,EAAA,CACGnB,IAAKe,EACL,cAAa,qBACbe,UAAWK,EACP,iBACA,mBAAmBhC,KAEvBC,KAGW,YAAPF,EACMmB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJN,SAAA8B,EAACK,EAAgBC,SAAhB,CACGC,MAAO,CACHlC,KAAMiB,EACNkB,SArDU,KACtBnB,GAGgBX,GAAC+B,IAAmBA,GAAa,EAkDrCC,gBAAiB7B,EACjB8B,kBA7DSC,IACrBA,GACA/B,GAAoB,EAAI,EA4DZE,kBAAAA,GAGHb,SAAAA,QAGb,IAGR,CAAE2C,QAASC"}

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useContext as t}from"react";import{useAnimatedHeightBetween as a}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as o}from"./context.js";const s=({className:s,children:r,...i})=>{const{open:m,onTransitionStart:d,onTransitionEnd:p}=t(o),[c]=a(m,{timing:"snappy",onTransitionStart:d,onTransitionEnd:p});return e("div",{ref:c,className:n("jkl-expandable__content",s),...i,"data-expanded":m,children:e("div",{className:"jkl-expandable__content-wrapper",children:r})})};export{s as ExpandablePanelContent};
+import{jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useContext as t}from"react";import{useAnimatedHeightBetween as a}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as r}from"./context.js";const o=({className:o,children:s,...i})=>{const{open:m,onTransitionStart:d,onTransitionEnd:p}=t(r),[c]=a(m,{timing:"snappy",onTransitionStart:d,onTransitionEnd:p});return e("div",{ref:c,className:n("jkl-expandable__content",o),...i,"data-expanded":m,...m?{}:{inert:"true"},children:e("div",{className:"jkl-expandable__content-wrapper",children:s})})};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 } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } 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    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","jsx","ref","clsx"],"mappings":"6QAMO,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,IAIA,OAAAM,EAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,EAEfF,SAACU,EAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}
+{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } 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    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n            {...(!open ? { inert: \"true\" } : {})}\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","jsx","ref","clsx","inert"],"mappings":"6QAMO,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,IAIA,OAAAM,EAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,KACTA,EAA2B,CAAC,EAArB,CAAEW,MAAO,QAEtBb,SAACU,EAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}

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

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import c,{useContext as s}from"react";import{ChevronDownIcon as r}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 t}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/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/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{ExpanderContext as e}from"./context.js";const m=c.forwardRef((function(c,m){const{children:p,as:a="summary",open:j,icon:I,className:l,onClick:d,expandDirection:h,...u}=c,C=a,{open:x,onToggle:f}=s(e),w="up"===h?t:r;return o(C,{ref:m,className:i("jkl-expander",{"jkl-expander--open":j||x},l),..."button"===a?{type:u.type||"button"}:{},onClick:o=>{o.preventDefault(),f(),null==d||d(o)},...u,children:[I||null,n("span",{className:"jkl-expander__label",children:p}),n(w,{className:"jkl-expander__chevron"})]})}));export{m 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 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/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/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.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),[k]);const b=u||v,D="up"===C?p:m;return t((()=>{const o=new ResizeObserver((function(){g(k.current.offsetHeight)}));return 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(),null==f||f(o)},...x,children:[d||null,n("span",{className:"jkl-expander__label",children:I}),n(D,{className:"jkl-expander__chevron"})]})}));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, { useContext } from \"react\";\nimport { 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 {\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 { open: contextOpen, onToggle } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    return (\n        <El\n            ref={ref}\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","useContext","ExpanderContext","Chevron","ChevronUpIcon","ChevronDownIcon","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"0iDAYO,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,GAEHC,KAAMQ,EAAaC,SAAAA,GACvBC,EAA8BC,GAI5BC,EAA8B,OAApBP,EAA2BQ,EAAgBC,EAGvD,OAAAC,EAACR,EAAA,CACGV,IAAAA,EACAM,UAAWa,EACP,eACA,CACI,qBAVDf,GAAkBO,GAYrBL,MAIQ,WAAPJ,EAAkB,CAAEkB,KAAMX,EAAKW,MAAQ,UAAa,CAAC,EAC1Db,QAAUc,IACNA,EAAEC,iBACOV,IACT,MAAAL,GAAAA,EAAUc,EAAAA,KAEVZ,EAEHR,SAAA,CAAQI,GAAA,KACRkB,EAAA,OAAA,CAAKjB,UAAU,sBAAuBL,SAAAA,IACvCsB,EAACR,EAAQ,CAAAT,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 { 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 {\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, [internalRef]);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        const observer = new ResizeObserver(function () {\n            setExpanderHeight(internalRef.current!.offsetHeight);\n        });\n        observer.observe(internalRef.current!);\n        return () => observer.disconnect();\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":"ylDAiBO,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,CAACH,IAErD,MAAMI,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,WACdb,EAAAG,EAAYG,QAASQ,aAAY,IAE9C,OAAAF,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,eACvB,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,IACT,MAAAL,GAAAA,EAAU0B,EAAAA,KAEVxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B"}

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

@@ -1,2 +1,2 @@
-import{createContext as n}from"react";const o=n({open:!1,onToggle:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}});export{o as ExpanderContext};
+import{createContext as t}from"react";const n=t({open:!1,onToggle:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{},setExpanderHeight:()=>{}});export{n as ExpanderContext};
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../../src/components/expander/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ExpandableContext } from \"./types.js\";\n\nexport const ExpanderContext = createContext<ExpandableContext>({\n    open: false,\n    onToggle: () => {},\n    onTransitionStart: () => {},\n    onTransitionEnd: () => {},\n});\n"],"names":["ExpanderContext","createContext","open","onToggle","onTransitionStart","onTransitionEnd"],"mappings":"sCAGO,MAAMA,EAAkBC,EAAiC,CAC5DC,MAAM,EACNC,SAAU,OACVC,kBAAmB,OACnBC,gBAAiB"}
+{"version":3,"file":"context.js","sources":["../../../../src/components/expander/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ExpandableContext } from \"./types.js\";\n\nexport const ExpanderContext = createContext<ExpandableContext>({\n    open: false,\n    onToggle: () => {},\n    onTransitionStart: () => {},\n    onTransitionEnd: () => {},\n    setExpanderHeight: () => {},\n});\n"],"names":["ExpanderContext","createContext","open","onToggle","onTransitionStart","onTransitionEnd","setExpanderHeight"],"mappings":"sCAGO,MAAMA,EAAkBC,EAAiC,CAC5DC,MAAM,EACNC,SAAU,OACVC,kBAAmB,OACnBC,gBAAiB,OACjBC,kBAAmB"}

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

@@ -20,4 +20,5 @@ export type ExpandableContext = {
     onToggle: () => void;
     onTransitionStart: (isOpening: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement>) => void;
     onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement>) => void;
+    setExpanderHeight: (height: number) => void;
 };

package/build/es/components/message/Message.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as i}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as o}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as l}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as t}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(o,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(l,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(o){const c=i(((i,c)=>{const{id:l,title:m,fullWidth:g,density:u,className:f="",dismissed:j,dismissAction:p,children:k,role:_,...I}=i,N=r(l||"jkl-message",{generateSuffix:!l}),h=n.Children.map(k,(s=>"string"==typeof s)),M=null!=h&&h[0]?s("p",{children:k}):k;return e("div",{...I,id:l,ref:c,className:a("jkl-message","jkl-message--"+o,f,{"jkl-message--full":g,"jkl-message--dismissed":j}),role:_,"data-density":u,children:[d(o),e("div",{className:"jkl-message__content","data-theme":"light",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:M})]}),(null==p?void 0:p.handleDismiss)&&s(t,{"aria-controls":N,className:"jkl-message__dismiss-button",label:p.buttonTitle||"Lukk",onClick:p.handleDismiss})]})}));return c.displayName="Message",c}const u=g("info");u.displayName="InfoMessage";const f=g("error");f.displayName="ErrorMessage";const j=g("warning");j.displayName="WarningMessage";const p=g("success");p.displayName="SuccessMessage";export{f as ErrorMessage,u as InfoMessage,p as SuccessMessage,j as WarningMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as i}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as o}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as l}from"../icon/icons/SuccessIcon.js";import{WarningIcon as t}from"../icon/icons/WarningIcon.js";import{DismissButton as m}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(o,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(l,{className:"jkl-message__icon"});case"warning":return s(t,{className:"jkl-message__icon"});default:return null}};function g(o){const c=i(((i,c)=>{const{id:l,title:t,fullWidth:g,density:u,className:f="",dismissed:j,dismissAction:p,children:k,role:h,..._}=i,I=r(l||"jkl-message",{generateSuffix:!l}),N=n.Children.map(k,(s=>"string"==typeof s)),M=null!=N&&N[0]?s("p",{children:k}):k;return e("div",{..._,id:l,ref:c,className:a("jkl-message","jkl-message--"+o,f,{"jkl-message--full":g,"jkl-message--dismissed":j}),role:h,"data-density":u,children:[d(o),e("div",{className:"jkl-message__content","data-theme":"light",children:[t&&s("p",{className:"jkl-message__title",children:t}),s("div",{className:"jkl-message__message",children:M})]}),(null==p?void 0:p.handleDismiss)&&s(m,{"data-theme":"light","aria-controls":I,className:"jkl-message__dismiss-button",label:p.buttonTitle||"Lukk",onClick:p.handleDismiss})]})}));return c.displayName="Message",c}const u=g("info");u.displayName="InfoMessage";const f=g("error");f.displayName="ErrorMessage";const j=g("warning");j.displayName="WarningMessage";const p=g("success");p.displayName="SuccessMessage";export{f as ErrorMessage,u as InfoMessage,p as SuccessMessage,j as WarningMessage};
 //# sourceMappingURL=Message.js.map

package/build/es/components/message/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\n\nexport interface MessageProps extends WithChildren {\n    id?: string;\n    title?: string;\n    fullWidth?: boolean;\n    density?: Density;\n    className?: string;\n    dismissed?: boolean;\n    dismissAction?: {\n        handleDismiss: () => void;\n        buttonTitle?: string;\n    };\n    role?: AriaRole;\n}\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nconst getIcon = (messageType: messageTypes) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: messageTypes) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            density,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    \"jkl-message--\" + messageType,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n                data-density={density}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","density","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","hasStringChild","React","Children","map","child","newChildren","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cA0BA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,sBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,sBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,sBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,sBAClC,QACW,OAAA,KACf,EAGJ,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,GAAyC,CAACC,EAAOC,KACvD,MACFC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAZ,UAAAA,EAAY,GACZa,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHV,EAEEW,EAAQC,EAAMV,GAAM,cAAe,CAAEW,gBAAiBX,IAEtDY,EAAiBC,EAAMC,SAASC,IAClCT,GACCU,GAA2B,iBAAVA,IAEhBC,EAAc,MAAAL,GAAAA,EAAiB,GAAMvB,EAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,OAAAY,EAAC,MAAA,IACOV,EACJR,GAAAA,EACAD,IAAAA,EACAR,UAAW4B,EACP,cACA,gBAAkB/B,EAClBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BE,IAGlCG,KAAAA,EACA,eAAcJ,EAEbG,SAAA,CAAAnB,EAAQC,GACR8B,EAAA,MAAA,CAAI3B,UAAU,uBAAuB,aAAW,QAC5Ce,SAAA,CAAAL,GAAUZ,EAAA,IAAA,CAAEE,UAAU,qBAAsBe,SAAML,IAClDZ,EAAA,MAAA,CAAIE,UAAU,uBAAwBe,SAAYW,QAEtD,MAAAZ,OAAA,EAAAA,EAAee,gBACZ/B,EAACgC,EAAA,CACG,gBAAeZ,EACflB,UAAU,8BACV+B,MAAOjB,EAAckB,aAAe,OACpCC,QAASnB,EAAce,kBAC3B,IAMhBxB,OAAAA,EAAQ6B,YAAc,UAEf7B,CACX,CAEa,MAAA8B,EAAc/B,EAAe,QAC1C+B,EAAYD,YAAc,cACb,MAAAE,EAAehC,EAAe,SAC3CgC,EAAaF,YAAc,eACd,MAAAG,EAAiBjC,EAAe,WAC7CiC,EAAeH,YAAc,iBAChB,MAAAI,EAAiBlC,EAAe,WAC7CkC,EAAeJ,YAAc"}
+{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\n\nexport interface MessageProps extends WithChildren {\n    id?: string;\n    title?: string;\n    fullWidth?: boolean;\n    density?: Density;\n    className?: string;\n    dismissed?: boolean;\n    dismissAction?: {\n        handleDismiss: () => void;\n        buttonTitle?: string;\n    };\n    role?: AriaRole;\n}\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nconst getIcon = (messageType: messageTypes) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: messageTypes) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            density,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    \"jkl-message--\" + messageType,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n                data-density={density}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","density","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","hasStringChild","React","Children","map","child","newChildren","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cA0BA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,sBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,sBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,sBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,sBAClC,QACW,OAAA,KACf,EAGJ,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,GAAyC,CAACC,EAAOC,KACvD,MACFC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAZ,UAAAA,EAAY,GACZa,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHV,EAEEW,EAAQC,EAAMV,GAAM,cAAe,CAAEW,gBAAiBX,IAEtDY,EAAiBC,EAAMC,SAASC,IAClCT,GACCU,GAA2B,iBAAVA,IAEhBC,EAAc,MAAAL,GAAAA,EAAiB,GAAMvB,EAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,OAAAY,EAAC,MAAA,IACOV,EACJR,GAAAA,EACAD,IAAAA,EACAR,UAAW4B,EACP,cACA,gBAAkB/B,EAClBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BE,IAGlCG,KAAAA,EACA,eAAcJ,EAEbG,SAAA,CAAAnB,EAAQC,GACR8B,EAAA,MAAA,CAAI3B,UAAU,uBAAuB,aAAW,QAC5Ce,SAAA,CAAAL,GAAUZ,EAAA,IAAA,CAAEE,UAAU,qBAAsBe,SAAML,IAClDZ,EAAA,MAAA,CAAIE,UAAU,uBAAwBe,SAAYW,QAEtD,MAAAZ,OAAA,EAAAA,EAAee,gBACZ/B,EAACgC,EAAA,CACG,aAAW,QACX,gBAAeZ,EACflB,UAAU,8BACV+B,MAAOjB,EAAckB,aAAe,OACpCC,QAASnB,EAAce,kBAC3B,IAMhBxB,OAAAA,EAAQ6B,YAAc,UAEf7B,CACX,CAEa,MAAA8B,EAAc/B,EAAe,QAC1C+B,EAAYD,YAAc,cACb,MAAAE,EAAehC,EAAe,SAC3CgC,EAAaF,YAAc,eACd,MAAAG,EAAiBjC,EAAe,WAC7CiC,EAAeH,YAAc,iBAChB,MAAAI,EAAiBlC,EAAe,WAC7CkC,EAAeJ,YAAc"}

package/build/es/components/system-message/SystemMessage.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:o,className:r,density:d,maxContentWidth:l,paddingLeft:c,role:g="status",dismissed:y,dismissAction:u,children:j,...p})=>{const f=t(o||"jkl-system-message",{generateSuffix:!o});return s("div",{role:g,...p,id:f,className:a("jkl-system-message","jkl-system-message--"+n,r,{"jkl-system-message--dismissed":y}),"data-density":d,children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:l,paddingLeft:c},children:[s(i,{messageType:n}),s("span",{className:"jkl-system-message__message",children:j}),(null==u?void 0:u.handleDismiss)&&s(m,{"aria-controls":f,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const o=n("info");o.displayName="InfoSystemMessage";const r=n("error");r.displayName="ErrorSystemMessage";const d=n("warning");d.displayName="WarningSystemMessage";const l=n("success");l.displayName="SuccessSystemMessage";export{r as ErrorSystemMessage,o as InfoSystemMessage,l as SuccessSystemMessage,d as WarningSystemMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:o,className:r,density:d,maxContentWidth:l,paddingLeft:c,role:g="status",dismissed:y,dismissAction:u,children:j,...p})=>{const f=t(o||"jkl-system-message",{generateSuffix:!o});return s("div",{role:g,...p,id:f,className:a("jkl-system-message","jkl-system-message--"+n,r,{"jkl-system-message--dismissed":y}),"data-density":d,children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:l,paddingLeft:c},children:[s(i,{messageType:n}),s("span",{className:"jkl-system-message__message",children:j}),(null==u?void 0:u.handleDismiss)&&s(m,{"data-theme":"light","aria-controls":f,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const o=n("info");o.displayName="InfoSystemMessage";const r=n("error");r.displayName="ErrorSystemMessage";const d=n("warning");d.displayName="WarningSystemMessage";const l=n("success");l.displayName="SuccessSystemMessage";export{r as ErrorSystemMessage,o as InfoSystemMessage,l as SuccessSystemMessage,d as WarningSystemMessage};
 //# sourceMappingURL=SystemMessage.js.map

package/build/es/components/system-message/SystemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nexport interface SystemMessageProps extends WithChildren {\n    id?: string;\n    className?: string;\n    density?: Density;\n    maxContentWidth?: string;\n    paddingLeft?: string;\n    /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n    role?: string;\n    dismissed?: boolean;\n    dismissAction?: {\n        handleDismiss: () => void;\n        buttonTitle?: string;\n    };\n}\n\nfunction systemFactory(\n    messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        density,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    \"jkl-system-message--\" + messageType,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n                data-density={density}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon messageType={messageType} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"qQAwBA,SAASA,EACLC,GA0DO,MAxD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAACO,EAAA,CACG,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
+{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nexport interface SystemMessageProps extends WithChildren {\n    id?: string;\n    className?: string;\n    density?: Density;\n    maxContentWidth?: string;\n    paddingLeft?: string;\n    /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n    role?: string;\n    dismissed?: boolean;\n    dismissAction?: {\n        handleDismiss: () => void;\n        buttonTitle?: string;\n    };\n}\n\nfunction systemFactory(\n    messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        density,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    \"jkl-system-message--\" + messageType,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n                data-density={density}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon messageType={messageType} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            data-theme=\"light\"\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"qQAwBA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAACO,EAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}

package/build/es/components/text-input/BaseTextInput.d.ts

@@ -36,7 +36,7 @@ export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
      */
-    actionButton?: React.ReactElement<IconProps>;
+    actionButton?: React.ReactElement;
     /**
      * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes
      *

package/build/es/components/text-input/BaseTextInput.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:h="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:h,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
+import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as o}from"../icon-button/IconButton.js";function s(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:h,type:x="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...h,...s(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:x,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className),"data-theme":u?"light":void 0}),c&&!y&&n(o,{"data-theme":u?"light":void 0,density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
 //# sourceMappingURL=BaseTextInput.js.map

package/build/es/components/text-input/BaseTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    HTMLProps,\n    InputHTMLAttributes,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        \"children\" | \"maxLength\"\n    > {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement<IconProps>;\n    /**\n     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n     *\n     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n     */\n    maxLength?: number | undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAaA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA0DO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}
+{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    HTMLProps,\n    InputHTMLAttributes,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        \"children\" | \"maxLength\"\n    > {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement;\n    /**\n     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n     *\n     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n     */\n    maxLength?: number | undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                        \"data-theme\": ariaInvalid ? \"light\" : undefined,\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        data-theme={ariaInvalid ? \"light\" : undefined}\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAaA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA0DO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,WAEvB,aAAcD,EAAc,aAAU,IAE7CF,IAAWQ,GACRI,EAACI,EAAA,CACG,aAAYd,EAAc,aAAU,EACpCE,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}

package/build/es/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as e}from"react";import{useBrowserPreferences as r}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{CloseIcon as i}from"../icon/icons/CloseIcon.js";import{ErrorIcon as c}from"../icon/icons/ErrorIcon.js";import{InfoIcon as l}from"../icon/icons/InfoIcon.js";import{SuccessIcon as m}from"../icon/icons/SuccessIcon.js";import{WarningIcon as u}from"../icon/icons/WarningIcon.js";import{IconButton as f}from"../icon-button/IconButton.js";import{Countdown as j}from"../progress-bar/Countdown.js";const p=t=>{switch(t){case"error":return o(c,{className:"jkl-toast__icon"});case"info":return o(l,{className:"jkl-toast__icon"});case"success":return o(m,{className:"jkl-toast__icon"});case"warning":return o(u,{className:"jkl-toast__icon"});default:return null}};function k({className:c,state:l,...m}){var u;let k=n(null),{toastProps:d,titleProps:_}=s(m,l,k);const I="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,g="string"==typeof m.toast.content?void 0:m.toast.content.title,v=null==(null==(u=m.toast.timer)?void 0:u.timerId),{prefersReducedMotion:N}=r();return e((()=>{N&&"exiting"===m.toast.animation&&l.remove(m.toast.key)}),[N,m.toast.animation,m.toast.key,l]),t("div",{...d,ref:k,className:a("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},c),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&l.remove(m.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:m.toast.timeout?o(j,{from:m.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null}),p(m.toast.variant),t("div",{..._,className:"jkl-toast__content",children:[g&&o("p",{className:"jkl-toast__title",children:g}),o("p",{className:"jkl-toast__message",children:I})]}),o(f,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{l.close(m.toast.key)},children:o(i,{})})]})}export{k as Toast};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as e}from"react";import{useBrowserPreferences as r}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{CloseIcon as i}from"../icon/icons/CloseIcon.js";import{ErrorIcon as c}from"../icon/icons/ErrorIcon.js";import{InfoIcon as l}from"../icon/icons/InfoIcon.js";import{SuccessIcon as m}from"../icon/icons/SuccessIcon.js";import{WarningIcon as u}from"../icon/icons/WarningIcon.js";import{IconButton as f}from"../icon-button/IconButton.js";import{Countdown as j}from"../progress-bar/Countdown.js";const p=t=>{switch(t){case"error":return o(c,{className:"jkl-toast__icon"});case"info":return o(l,{className:"jkl-toast__icon"});case"success":return o(m,{className:"jkl-toast__icon"});case"warning":return o(u,{className:"jkl-toast__icon"});default:return null}};function d({className:c,state:l,...m}){var u;let d=n(null),{toastProps:k,titleProps:_}=s(m,l,d);const v="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,I="string"==typeof m.toast.content?void 0:m.toast.content.title,g=null==(null==(u=m.toast.timer)?void 0:u.timerId),{prefersReducedMotion:N}=r();return e((()=>{N&&"exiting"===m.toast.animation&&l.remove(m.toast.key)}),[N,m.toast.animation,m.toast.key,l]),t("div",{...k,ref:d,className:a("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},c),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&l.remove(m.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:m.toast.timeout?o(j,{from:m.toast.timeout,isPaused:g,onAnimationEnd:t=>{t.stopPropagation()}}):null}),p(m.toast.variant),t("div",{..._,className:"jkl-toast__content",children:[I&&o("p",{className:"jkl-toast__title",children:I}),o("p",{className:"jkl-toast__message",children:v})]}),o(f,{"data-theme":m.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{l.close(m.toast.key)},children:o(i,{})})]})}export{d as Toast};
 //# sourceMappingURL=Toast.js.map

package/build/es/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"0qBAoBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEC,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"0qBAoBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEC,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX3B,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.37.9",
+    "version": "0.37.11",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -602,5 +602,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "82463c9c847258e6d1072ff0afb9ce82c3498930"
+    "gitHead": "6ccee5218b9cdfd6ccc542d6b9dd9f630422b2ff"
 }

package/styles/components/accordion/accordion.css

@@ -12,6 +12,8 @@
   --jkl-accordion-arrow-right: var(--jkl-spacing-12);
   --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
       var(--jkl-spacing-16);
+  --jkl-accordion-icon-opsz: 24;
+  --jkl-accordion-icon-size: 1.5rem;
   --title-font-size: var(--jkl-body-font-size);
   --title-line-height: var(--jkl-body-line-height);
   --title-font-weight: var(--jkl-body-font-weight);
@@ -40,6 +42,8 @@
   --jkl-accordion-arrow-top: var(--jkl-spacing-8);
   --jkl-accordion-arrow-right: var(--jkl-spacing-4);
   --jkl-accordion-content-padding: var(--jkl-spacing-8);
+  --jkl-accordion-icon-opsz: 20;
+  --jkl-accordion-icon-size: 1.25rem;
   --title-font-size: var(--jkl-small-font-size);
   --title-line-height: var(--jkl-small-line-height);
   --title-font-weight: var(--jkl-small-font-weight);
@@ -57,6 +61,8 @@
   --text-color: var(--jkl-color-text-default);
   --title-text-color: var(--jkl-color-text-interactive);
   --border-color: var(--jkl-color-border-separator);
+  --jkl-icon-opsz: var(--jkl-accordion-icon-opsz);
+  --jkl-icon-size: var(--jkl-accordion-icon-size);
   background-color: var(--background);
   color: var(--text-color);
   border-bottom: 0.0625rem solid var(--border-color);
@@ -126,7 +132,7 @@
   translate: 0 0.25rem;
 }
 .jkl-accordion-item__title:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 0;
 }
 .jkl-accordion-item__arrow {

package/styles/components/accordion/accordion.min.css

@@ -1,7 +1,7 @@
 :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-16) 3rem var(
           --jkl-spacing-16
-      ) var(--jkl-spacing-16);--jkl-accordion-arrow-top:1.25rem;--jkl-accordion-arrow-right:var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-12) 2.75rem var(
+      ) var(--jkl-spacing-16);--jkl-accordion-arrow-top:1.25rem;--jkl-accordion-arrow-right:var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--jkl-accordion-icon-opsz:24;--jkl-accordion-icon-size:1.5rem;--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-12) 2.75rem var(
             --jkl-spacing-12
         ) var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--jkl-accordion-arrow-top:1.4375rem}}[data-density=compact],[data-layout-density=compact]{--jkl-accordion-title-padding:var(--jkl-spacing-8) 2rem var(
           --jkl-spacing-8
-      ) var(--jkl-spacing-8);--jkl-accordion-arrow-top:var(--jkl-spacing-8);--jkl-accordion-arrow-right:var(--jkl-spacing-4);--jkl-accordion-content-padding:var(--jkl-spacing-8);--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion{width:100%}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--jkl-accordion-title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--jkl-accordion-arrow-right);top:var(--jkl-accordion-arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--jkl-accordion-content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}
+      ) var(--jkl-spacing-8);--jkl-accordion-arrow-top:var(--jkl-spacing-8);--jkl-accordion-arrow-right:var(--jkl-spacing-4);--jkl-accordion-content-padding:var(--jkl-spacing-8);--jkl-accordion-icon-opsz:20;--jkl-accordion-icon-size:1.25rem;--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion{width:100%}.jkl-accordion-item{--background:transparent;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);--jkl-icon-opsz:var(--jkl-accordion-icon-opsz);--jkl-icon-size:var(--jkl-accordion-icon-size);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:transparent;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;outline:0;outline-style:none;padding:var(--jkl-accordion-title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert;outline:revert;outline-style:revert}.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--jkl-accordion-arrow-right);top:var(--jkl-accordion-arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--jkl-accordion-content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n){border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover{border-top:.125rem solid ButtonText}.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child{border-bottom:.125rem solid ButtonText}.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}

package/styles/components/accordion/accordion.scss

@@ -9,6 +9,8 @@
     --jkl-accordion-arrow-right: var(--jkl-spacing-12);
     --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
         var(--jkl-spacing-16);
+    --jkl-accordion-icon-opsz: 24;
+    --jkl-accordion-icon-size: 1.5rem;
     @include jkl.declare-font-variables("title", "body");
     @include jkl.declare-font-variables("content", "body");
 
@@ -29,6 +31,8 @@
     --jkl-accordion-arrow-top: var(--jkl-spacing-8);
     --jkl-accordion-arrow-right: var(--jkl-spacing-4);
     --jkl-accordion-content-padding: var(--jkl-spacing-8);
+    --jkl-accordion-icon-opsz: 20;
+    --jkl-accordion-icon-size: 1.25rem;
     @include jkl.declare-font-variables("title", "small");
     @include jkl.declare-font-variables("content", "small");
 }
@@ -44,6 +48,8 @@
     --text-color: var(--jkl-color-text-default);
     --title-text-color: var(--jkl-color-text-interactive);
     --border-color: var(--jkl-color-border-separator);
+    --jkl-icon-opsz: var(--jkl-accordion-icon-opsz);
+    --jkl-icon-size: var(--jkl-accordion-icon-size);
 
     background-color: var(--background);
     color: var(--text-color);

package/styles/components/breadcrumb/breadcrumb.css

@@ -12,6 +12,10 @@
   color: var(--jkl-color-text-interactive-hover);
   background-image: none;
 }
+.jkl-breadcrumb a:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
+}
 .jkl-breadcrumb__list {
   display: flex;
   flex-wrap: wrap;

package/styles/components/breadcrumb/breadcrumb.min.css

@@ -1 +1 @@
-.jkl-breadcrumb a[aria-current]{background-image:none;color:var(--jkl-color-text-interactive);text-decoration:none}.jkl-breadcrumb a[aria-current]:hover{background-image:none;color:var(--jkl-color-text-interactive-hover);cursor:default}.jkl-breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding-inline-start:0}.jkl-breadcrumb__item{margin-bottom:.5rem;white-space:nowrap}.jkl-breadcrumb__item-separator{padding-left:.5rem;padding-right:.5rem}
+.jkl-breadcrumb a[aria-current]{background-image:none;color:var(--jkl-color-text-interactive);text-decoration:none}.jkl-breadcrumb a[aria-current]:hover{background-image:none;color:var(--jkl-color-text-interactive-hover);cursor:default}.jkl-breadcrumb a:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding-inline-start:0}.jkl-breadcrumb__item{margin-bottom:.5rem;white-space:nowrap}.jkl-breadcrumb__item-separator{padding-left:.5rem;padding-right:.5rem}

package/styles/components/breadcrumb/breadcrumb.scss

@@ -14,6 +14,10 @@
         }
     }
 
+    a:focus-visible {
+        @include jkl.focus-outline;
+    }
+
     &__list {
         display: flex;
         flex-wrap: wrap;

package/styles/components/button/button.css

@@ -116,8 +116,8 @@
   opacity: 1;
 }
 .jkl-button:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-button::before {
   content: "";
@@ -135,7 +135,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-urypiyb;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u5p4jfj;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -179,7 +179,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-urypiyb {
+@keyframes jkl-tertiary-flash-u5p4jfj {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:1.5rem;--jkl-button-padding-icon:1rem;--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:0.25rem;--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:0.25rem;--jkl-button-padding-text:0.75rem;--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:0.25rem;--jkl-button-padding-tertiary-inline:0.125rem;--jkl-button-padding-ghost-inline:0.25rem;--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-urypiyb .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-urypiyb{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:1.5rem;--jkl-button-padding-icon:1rem;--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:0.25rem;--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:0.25rem;--jkl-button-padding-text:0.75rem;--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:0.25rem;--jkl-button-padding-tertiary-inline:0.125rem;--jkl-button-padding-ghost-inline:0.25rem;--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u5p4jfj .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u5p4jfj{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/card/card.css

@@ -317,8 +317,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --border-width: 0.125rem;
 }
 .jkl-card[data-clickable=true]:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 
 .jkl-card-image {