npm - @fremtind/jokul - Versions diffs - 1.2.3 → 1.3.0 - Mend

@fremtind/jokul 1.2.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/build/cjs/components/expander/ExpandablePanel.cjs CHANGED Viewed

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

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

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

package/build/cjs/components/expander/ExpandablePanelContent.cjs CHANGED Viewed

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpanderComponent,\n ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n children,\n as = \"summary\",\n open: controlledOpen,\n icon,\n className,\n onClick,\n expandDirection,\n ...rest\n } = props;\n const El = as;\n\n const {\n open: contextOpen,\n onToggle,\n setExpanderHeight,\n } = useContext<ExpandableContext>(ExpanderContext);\n\n const internalRef = useRef<HTMLElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const isOpen = controlledOpen \|\| contextOpen;\n\n const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n // Default to 64 if the height can not be read because that is\n // the height of the default summary element. In a custom component\n // this means that the focus ring might be slightly misaligned but\n // in most cases we will be able to read the ref correctly.\n setExpanderHeight(internalRef.current?.offsetHeight \|\| 64);\n });\n if (internalRef.current) {\n observer.observe(internalRef.current);\n return () => observer.disconnect();\n }\n return () => {};\n }, [setExpanderHeight]);\n\n return (\n <El\n ref={internalRef}\n className={clsx(\n \"jkl-expander\",\n {\n \"jkl-expander--open\": isOpen,\n },\n className,\n )}\n // If the consumer uses the Expander as a button but does not\n // supply a type, then we set type to \"button\"\n {...(as === \"button\" ? { type: rest.type \|\| \"button\" } : {})}\n onClick={(e) => {\n e.preventDefault();\n onToggle();\n onClick?.(e);\n }}\n {...rest}\n >\n {icon \|\| null}\n <span className=\"jkl-expander__label\">{children}</span>\n <Chevron className=\"jkl-expander__chevron\" />\n </El>\n );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"qtDAiBaA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAAAA,WAA8BC,EAAAA,iBAE5BC,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBA,cAAAC,EAAAA,gBAE3DC,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAE7D,OAAIX,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAAAA,KAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAAA,IAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAQ,CAAAf,UAAU,4BAG/B"}
1	+ {"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpanderComponent,\n ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n children,\n as = \"summary\",\n open: controlledOpen,\n icon,\n className,\n onClick,\n expandDirection,\n ...rest\n } = props;\n const El = as;\n\n const {\n open: contextOpen,\n onToggle,\n setExpanderHeight,\n } = useContext<ExpandableContext>(ExpanderContext);\n\n const internalRef = useRef<HTMLElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const isOpen = controlledOpen \|\| contextOpen;\n\n const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n // Default to 64 if the height can not be read because that is\n // the height of the default summary element. In a custom component\n // this means that the focus ring might be slightly misaligned but\n // in most cases we will be able to read the ref correctly.\n setExpanderHeight(internalRef.current?.offsetHeight \|\| 64);\n });\n if (internalRef.current) {\n observer.observe(internalRef.current);\n return () => observer.disconnect();\n }\n return () => {};\n }, [setExpanderHeight]);\n\n return (\n <El\n ref={internalRef}\n className={clsx(\n \"jkl-expander\",\n {\n \"jkl-expander--open\": isOpen,\n },\n className,\n )}\n // If the consumer uses the Expander as a button but does not\n // supply a type, then we set type to \"button\"\n {...(as === \"button\" ? { type: rest.type \|\| \"button\" } : {})}\n onClick={(e) => {\n e.preventDefault();\n onToggle();\n onClick?.(e);\n }}\n {...rest}\n >\n {icon \|\| null}\n <span className=\"jkl-expander__label\">{children}</span>\n <Chevron className=\"jkl-expander__chevron\" />\n </El>\n );\n}) as ExpanderComponent;\n\nExpander.displayName = \"ExpandablePanel.Header\";\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx","displayName"],"mappings":"qtDAiBaA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAAAA,WAA8BC,EAAAA,iBAE5BC,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBA,cAAAC,EAAAA,gBAE3DC,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAE7D,OAAIX,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAAAA,KAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EAAAA,KACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAAA,IAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAQ,CAAAf,UAAU,4BAG/B,IAEAV,EAASwC,YAAc"}

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

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

package/build/cjs/components/image/Image.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs");require("react");const a=require("../../hooks/useElementDimensions/useElementDimensions.cjs"),i=require("./useImageLoadingStatus.cjs");exports.Image=({className:t,placeholder:l,alt:r,...m})=>{const[c,n]=i.useImageLoadingStatus(),[o,g]=a.useElementDimensions(400);return e.jsxs("div",{ref:o,className:s.clsx("jkl-image",t,{"jkl-image--loading":!n}),children:[e.jsx("img",{className:"jkl-image__placeholder",alt:r,src:l||m.src}),e.jsx("img",{alt:r,className:"jkl-image__image","data-testid":"jkl-image__image",ref:c,sizes:`${g.width}px`,loading:"lazy",decoding:"async",...m})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs");require("react");const a=require("../../hooks/useElementDimensions/useElementDimensions.cjs"),i=require("./useImageLoadingStatus.cjs");exports.Image=({className:t,placeholder:l,alt:r,...m})=>{const[c,n]=i.useImageLoadingStatus(),[o,g]=a.useElementDimensions(400);return e.jsxs("div",{ref:o,className:s.clsx("jkl-image",t,{"jkl-image--loading":!n}),children:[e.jsx("img",{className:"jkl-image__placeholder",alt:n?"":r,src:l||m.src}),e.jsx("img",{alt:r,className:"jkl-image__image","data-testid":"jkl-image__image",ref:c,sizes:`${g.width}px`,loading:"lazy",decoding:"async",...m})]})};
 //# sourceMappingURL=Image.cjs.map

package/build/cjs/components/image/Image.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"kTAMqC,EACjCA,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,KAGrC,OAAAC,EAAAA,KAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAAA,KAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGd,UAAU,yBACVE,~~IAAAA~~,~~EACAa~~,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAAA,IAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,MAEZ"}
1	+ {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={imageLoaded ? \"\" : alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"kTAMqC,EACjCA,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,KAGrC,OAAAC,EAAAA,KAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAAA,KAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGd,UAAU,yBACVE,IAAKG,EAAc,GAAKH,EACxBa,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAAA,IAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,MAEZ"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n variant = \"fill\",\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen \|\| false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable__wrapper\">\n <div\n /\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n /\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable\",\n `jkl-expandable--${variant}`,\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open before the transition starts /\n as === \"details\"\n ? isOpen \|\| contentIsVisible\n : undefined\n }\n / this attribute is used for styling purposes */\n data-visible-content={isOpen \|\| contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"~~4SAUO~~,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC"}
1	+ {"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\nimport { Expander } from \"./Expander.jsx\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n variant = \"fill\",\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen \|\| false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable__wrapper\">\n <div\n /\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n /\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable\",\n `jkl-expandable--${variant}`,\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open before the transition starts /\n as === \"details\"\n ? isOpen \|\| contentIsVisible\n : undefined\n }\n / this attribute is used for styling purposes */\n data-visible-content={isOpen \|\| contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"qVAWO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC,EAAwBC,OAAQC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n /\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-expandable__content\", className)}\n {...rest}\n data-expanded={open}\n >\n <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n </div>\n );\n};\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx"],"mappings":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,GAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD"}
1	+ {"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n /\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-expandable__content\", className)}\n {...rest}\n data-expanded={open}\n >\n <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n </div>\n );\n};\n\nExpandablePanelContent.displayName = \"ExpandablePanel.Content\";\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx","displayName"],"mappings":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,GAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD,EAIRF,EAAuBoB,YAAc"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpanderComponent,\n ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n children,\n as = \"summary\",\n open: controlledOpen,\n icon,\n className,\n onClick,\n expandDirection,\n ...rest\n } = props;\n const El = as;\n\n const {\n open: contextOpen,\n onToggle,\n setExpanderHeight,\n } = useContext<ExpandableContext>(ExpanderContext);\n\n const internalRef = useRef<HTMLElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const isOpen = controlledOpen \|\| contextOpen;\n\n const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n // Default to 64 if the height can not be read because that is\n // the height of the default summary element. In a custom component\n // this means that the focus ring might be slightly misaligned but\n // in most cases we will be able to read the ref correctly.\n setExpanderHeight(internalRef.current?.offsetHeight \|\| 64);\n });\n if (internalRef.current) {\n observer.observe(internalRef.current);\n return () => observer.disconnect();\n }\n return () => {};\n }, [setExpanderHeight]);\n\n return (\n <El\n ref={internalRef}\n className={clsx(\n \"jkl-expander\",\n {\n \"jkl-expander--open\": isOpen,\n },\n className,\n )}\n // If the consumer uses the Expander as a button but does not\n // supply a type, then we set type to \"button\"\n {...(as === \"button\" ? { type: rest.type \|\| \"button\" } : {})}\n onClick={(e) => {\n e.preventDefault();\n onToggle();\n onClick?.(e);\n }}\n {...rest}\n >\n {icon \|\| null}\n <span className=\"jkl-expander__label\">{children}</span>\n <Chevron className=\"jkl-expander__chevron\" />\n </El>\n );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAEzDX,OAAAA,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B"}
1	+ {"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpanderComponent,\n ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n children,\n as = \"summary\",\n open: controlledOpen,\n icon,\n className,\n onClick,\n expandDirection,\n ...rest\n } = props;\n const El = as;\n\n const {\n open: contextOpen,\n onToggle,\n setExpanderHeight,\n } = useContext<ExpandableContext>(ExpanderContext);\n\n const internalRef = useRef<HTMLElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const isOpen = controlledOpen \|\| contextOpen;\n\n const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n // Default to 64 if the height can not be read because that is\n // the height of the default summary element. In a custom component\n // this means that the focus ring might be slightly misaligned but\n // in most cases we will be able to read the ref correctly.\n setExpanderHeight(internalRef.current?.offsetHeight \|\| 64);\n });\n if (internalRef.current) {\n observer.observe(internalRef.current);\n return () => observer.disconnect();\n }\n return () => {};\n }, [setExpanderHeight]);\n\n return (\n <El\n ref={internalRef}\n className={clsx(\n \"jkl-expander\",\n {\n \"jkl-expander--open\": isOpen,\n },\n className,\n )}\n // If the consumer uses the Expander as a button but does not\n // supply a type, then we set type to \"button\"\n {...(as === \"button\" ? { type: rest.type \|\| \"button\" } : {})}\n onClick={(e) => {\n e.preventDefault();\n onToggle();\n onClick?.(e);\n }}\n {...rest}\n >\n {icon \|\| null}\n <span className=\"jkl-expander__label\">{children}</span>\n <Chevron className=\"jkl-expander__chevron\" />\n </El>\n );\n}) as ExpanderComponent;\n\nExpander.displayName = \"ExpandablePanel.Header\";\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx","displayName"],"mappings":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAEzDX,OAAAA,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B,IAEAV,EAASwC,YAAc"}

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

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

package/build/es/components/image/Image.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useElementDimensions as m}from"../../hooks/useElementDimensions/useElementDimensions.js";import{useImageLoadingStatus as i}from"./useImageLoadingStatus.js";const t=({className:t,placeholder:l,alt:o,...r})=>{const[n,g]=i(),[c,d]=m(400);return e("div",{ref:c,className:a("jkl-image",t,{"jkl-image--loading":!g}),children:[s("img",{className:"jkl-image__placeholder",alt:o,src:l||r.src}),s("img",{alt:o,className:"jkl-image__image","data-testid":"jkl-image__image",ref:n,sizes:`${d.width}px`,loading:"lazy",decoding:"async",...r})]})};export{t as Image};
+import{jsxs as s,jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useElementDimensions as m}from"../../hooks/useElementDimensions/useElementDimensions.js";import{useImageLoadingStatus as i}from"./useImageLoadingStatus.js";const t=({className:t,placeholder:l,alt:o,...r})=>{const[n,c]=i(),[g,d]=m(400);return s("div",{ref:g,className:a("jkl-image",t,{"jkl-image--loading":!c}),children:[e("img",{className:"jkl-image__placeholder",alt:c?"":o,src:l||r.src}),e("img",{alt:o,className:"jkl-image__image","data-testid":"jkl-image__image",ref:n,sizes:`${d.width}px`,loading:"lazy",decoding:"async",...r})]})};export{t as Image};
 //# sourceMappingURL=Image.js.map

package/build/es/components/image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["Image","className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"iRAMO,MAAMA,EAAwB,EACjCC,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEG,MAACC,EAAUC,GAAeC,KACzBC,EAAcC,GACjBC,EAAqC,KAGrC,OAAAC,EAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAC,MAAA,CACGd,UAAU,yBACVE,~~IAAAA~~,~~EACAa~~,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,MAEZ"}
1	+ {"version":3,"file":"Image.js","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={imageLoaded ? \"\" : alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["Image","className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"iRAMO,MAAMA,EAAwB,EACjCC,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEG,MAACC,EAAUC,GAAeC,KACzBC,EAAcC,GACjBC,EAAqC,KAGrC,OAAAC,EAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAC,MAAA,CACGd,UAAU,yBACVE,IAAKG,EAAc,GAAKH,EACxBa,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,MAEZ"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/styles/components/checkbox/checkbox.css CHANGED Viewed

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

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

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

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

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

package/styles/components/checkbox-panel/checkbox-panel.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-~~u2ltstp~~{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-~~u2ltstp~~ .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}
1	+ .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-u1pl796{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u1pl796 .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}

package/styles/components/countdown/countdown.css CHANGED Viewed

@@ -26,11 +26,11 @@
   }
 }
 .jkl-countdown__tracker {
-  animation: jkl-downcount-usw2gdq var(--duration) linear forwards;
+  animation: jkl-downcount-uiwgino var(--duration) linear forwards;
   animation-play-state: var(--play-state, running);
 }
-@keyframes jkl-downcount-usw2gdq {
+@keyframes jkl-downcount-uiwgino {
   from {
     width: 100%;
   }

package/styles/components/countdown/countdown.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-~~usw2gdq~~ var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-~~usw2gdq~~{0%{width:100%}to{width:0}}
1	+ .jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-uiwgino var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uiwgino{0%{width:100%}to{width:0}}

package/styles/components/feedback/feedback.css CHANGED Viewed

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
-@keyframes jkl-show-u4a8o33 {
+@keyframes jkl-show-u6izdfo {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-u4a8o33 0.25s ease-out;
+  animation: jkl-show-u6izdfo 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;

package/styles/components/feedback/feedback.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- @keyframes jkl-show-~~u4a8o33~~{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-~~u4a8o33~~ .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}
1	+ @keyframes jkl-show-u6izdfo{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-u6izdfo .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}

package/styles/components/file-input/file-input.css CHANGED Viewed

@@ -369,15 +369,15 @@
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-u4qk3tc;
+  animation-name: jkl-loader-left-spin-uijvh16;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-u4qk3te;
+  animation-name: jkl-loader-middle-spin-uijvh1x;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-u4qk3th;
+  animation-name: jkl-loader-right-spin-uijvh2l;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -405,7 +405,7 @@
   margin-right: 0.3em;
 }
-@keyframes jkl-loader-left-spin-u4qk3tc {
+@keyframes jkl-loader-left-spin-uijvh16 {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -419,7 +419,7 @@
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-u4qk3te {
+@keyframes jkl-loader-middle-spin-uijvh1x {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -436,7 +436,7 @@
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-u4qk3th {
+@keyframes jkl-loader-right-spin-uijvh2l {
   0% {
     transform: rotate(40deg) scale(0);
   }
@@ -484,7 +484,7 @@
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u4qk3ud;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uijvh2z;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -515,7 +515,7 @@
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-u4qk3us;
+    animation: 2s ease infinite jkl-blink-uijvh38;
   }
 }
@@ -571,11 +571,11 @@
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-u4qk3us;
+    animation: 2s ease-in-out infinite jkl-blink-uijvh38;
   }
 }
-@keyframes jkl-sweep-u4qk3ud {
+@keyframes jkl-sweep-uijvh2z {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -583,7 +583,7 @@
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-u4qk3us {
+@keyframes jkl-blink-uijvh38 {
   0% {
     opacity: 1;
   }