@fremtind/jokul 0.37.10 → 0.37.11

package/build/cjs/components/button/Button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../hooks/useAriaLiveRegion/useAriaLiveRegion.cjs"),n=require("../loader/Loader.cjs"),s=o.forwardRef((function(s,i){const{as:a="button",children:c,className:l,density:u,onTouchStart:d,loader:x,icon:h,iconPosition:j="left",iconLeft:y,iconRight:g,variant:p="secondary",...v}=s,b=a,m=o.useCallback((t=>{d&&d(t);const e=t.target;if(e&&!e.disabled&&t.targetTouches.length){const o=t.targetTouches[0].clientX-e.getBoundingClientRect().x,r=t.targetTouches[0].clientY-e.getBoundingClientRect().y;e.style.setProperty("--jkl-touch-xcoord",o.toPrecision(4)+"px"),e.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),e.classList.add("jkl-button--pressed"),setTimeout((()=>{e.classList.remove("jkl-button--pressed"),e.style.removeProperty("--jkl-touch-xcoord"),e.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[d]),f=r.useAriaLiveRegion(null==x?void 0:x.showLoader),k=!!c&&!(null==x||!x.showLoader);return t.jsxs(b,{...f,"data-loading":k,"data-density":u,className:e.clsx("jkl-button","jkl-button--"+p,l),disabled:"button"===a?null==x?void 0:x.showLoader:void 0,onTouchStart:m,...v,ref:i,children:[t.jsxs("div",{className:"jkl-button__label",children:[y&&y,h&&"left"===j&&h,c&&t.jsx("span",{className:"jkl-button__text",children:c}),g&&g,h&&"right"===j&&h]}),c&&t.jsx(n.Loader,{className:"jkl-button__loader",variant:"medium",textDescription:(null==x?void 0:x.textDescription)||"Vennligst vent","aria-hidden":!(null!=x&&x.showLoader)})]})}));exports.Button=s,exports.GhostButton=function(e){const o={...e,variant:"ghost"};return t.jsx(s,{...o})},exports.PrimaryButton=function(e){const o={...e,variant:"primary"};return t.jsx(s,{...o})},exports.SecondaryButton=function(e){const o={...e,variant:"secondary"};return t.jsx(s,{...o})},exports.TertiaryButton=function(e){const o={...e,variant:"tertiary"};return t.jsx(s,{...o})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../hooks/useAriaLiveRegion/useAriaLiveRegion.cjs"),n=require("../loader/Loader.cjs"),s=o.forwardRef((function(s,i){const{as:a="button",children:l,className:c,density:u,onTouchStart:d,loader:h,icon:x,iconPosition:y="left",iconLeft:j,iconRight:g,variant:b="secondary",...p}=s,v=a;"production"!==process.env.NODE_ENV&&0===o.Children.count(l)&&!s["aria-label"]&&!s["aria-labelledby"]&&!s.title&&console.warn("Når du lager en Button uten synlig tekst må du huske å gi den et navn med enten aria-label, aria-labelledby eller title");const m=o.useCallback((e=>{d&&d(e);const t=e.target;if(t&&!t.disabled&&e.targetTouches.length){const o=e.targetTouches[0].clientX-t.getBoundingClientRect().x,r=e.targetTouches[0].clientY-t.getBoundingClientRect().y;t.style.setProperty("--jkl-touch-xcoord",o.toPrecision(4)+"px"),t.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),t.classList.add("jkl-button--pressed"),setTimeout((()=>{t.classList.remove("jkl-button--pressed"),t.style.removeProperty("--jkl-touch-xcoord"),t.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[d]),k=r.useAriaLiveRegion(null==h?void 0:h.showLoader),f=!!l&&!(null==h||!h.showLoader);return e.jsxs(v,{...k,"data-loading":f,"data-density":u,className:t.clsx("jkl-button","jkl-button--"+b,c),disabled:"button"===a?null==h?void 0:h.showLoader:void 0,onTouchStart:m,...p,ref:i,children:[e.jsxs("div",{className:"jkl-button__label",children:[j&&j,x&&"left"===y&&x,l&&e.jsx("span",{className:"jkl-button__text",children:l}),g&&g,x&&"right"===y&&x]}),l&&e.jsx(n.Loader,{className:"jkl-button__loader",variant:"medium",textDescription:(null==h?void 0:h.textDescription)||"Vennligst vent","aria-hidden":!(null!=h&&h.showLoader)})]})}));exports.Button=s,exports.GhostButton=function(t){const o={...t,variant:"ghost"};return e.jsx(s,{...o})},exports.PrimaryButton=function(t){const o={...t,variant:"primary"};return e.jsx(s,{...o})},exports.SecondaryButton=function(t){const o={...t,variant:"secondary"};return e.jsx(s,{...o})},exports.TertiaryButton=function(t){const o={...t,variant:"tertiary"};return e.jsx(s,{...o})};
 //# sourceMappingURL=Button.cjs.map

package/build/cjs/components/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    type TouchEvent,\n    useCallback,\n} from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { Loader } from \"../loader/Loader.js\";\nimport { ButtonComponent, ButtonProps } from \"./types.js\";\n\nexport const Button = React.forwardRef(function Button<\n    ElementType extends React.ElementType = \"button\",\n>(props: ButtonProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord =\n                    event.targetTouches[0].clientX -\n                    target.getBoundingClientRect().x;\n                const Ycoord =\n                    event.targetTouches[0].clientY -\n                    target.getBoundingClientRect().y;\n                target.style.setProperty(\n                    \"--jkl-touch-xcoord\",\n                    Xcoord.toPrecision(4) + \"px\",\n                );\n                target.style.setProperty(\n                    \"--jkl-touch-ycoord\",\n                    Ycoord.toPrecision(4) + \"px\",\n                );\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && (\n                    <span className=\"jkl-button__text\">{children}</span>\n                )}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={\n                        loader?.textDescription || \"Vennligst vent\"\n                    }\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"primary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"secondary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"tertiary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"ghost\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","buttonProps"],"mappings":"mRAWaA,EAASC,EAAMC,YAAW,SAErCC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAEZa,EAAcC,EAAAA,aACfC,IACGX,GAAgBA,EAAaW,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EACFL,EAAMG,cAAc,GAAGG,QACvBL,EAAOM,wBAAwBC,EAC7BC,EACFT,EAAMG,cAAc,GAAGO,QACvBT,EAAOM,wBAAwBI,EACnCV,EAAOW,MAAMC,YACT,qBACAR,EAAOS,YAAY,GAAK,MAE5Bb,EAAOW,MAAMC,YACT,qBACAJ,EAAOK,YAAY,GAAK,MAErBb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC9B,IAGC+B,EAAWC,EAAAA,kBAAkB,MAAA/B,SAAAA,EAAQgC,YACrCA,IAAqBpC,KAAqB,MAAAI,IAAAA,EAAQgC,YAGpD,OAAAC,EAAAA,KAAC1B,EAAA,IACOuB,EACJ,eAAcE,EACd,eAAclC,EACdD,UAAWqC,EAAAA,KAAG,aAAc,eAAiB7B,EAASR,GACtDe,SAAiB,WAAPjB,EAAkB,MAAAK,OAAA,EAAAA,EAAQgC,gBAAa,EACjDjC,aAAcS,KACVF,EACJZ,IAAAA,EAEAE,SAAA,CAACqC,EAAAA,KAAA,MAAA,CAAIpC,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GACGuC,EAAAA,IAAC,OAAK,CAAAtC,UAAU,mBAAoBD,SAAAA,IAEvCQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACGuC,EAAAA,IAACC,EAAAA,OAAA,CACGvC,UAAU,qBACVQ,QAAQ,SACRgC,iBACI,MAAArC,SAAAA,EAAQqC,kBAAmB,iBAE/B,gBAAc,MAAArC,GAAAA,EAAQgC,gBAK1C,yCAuCO,SACHvC,GAEA,MAAM6C,EAAc,IACb7C,EACHY,QAAS,SAEN,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,wBA7CO,SACH7C,GAGA,MAAM6C,EAAc,IACb7C,EACHY,QAAS,WAEN,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,0BAEO,SAGH7C,GAGA,MAAM6C,EAAc,IACb7C,EACHY,QAAS,aAEN,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,yBAEO,SAGH7C,GAGA,MAAM6C,EAAc,IACb7C,EACHY,QAAS,YAEN,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    type TouchEvent,\n    useCallback,\n} from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { Loader } from \"../loader/Loader.js\";\nimport { ButtonComponent, ButtonProps } from \"./types.js\";\n\nexport const Button = React.forwardRef(function Button<\n    ElementType extends React.ElementType = \"button\",\n>(props: ButtonProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    if (\n        process.env.NODE_ENV !== \"production\" &&\n        React.Children.count(children) === 0 &&\n        !props[\"aria-label\"] &&\n        !props[\"aria-labelledby\"] &&\n        !props.title\n    ) {\n        console.warn(\n            \"Når du lager en Button uten synlig tekst må du huske å gi den et navn med enten aria-label, aria-labelledby eller title\",\n        );\n    }\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord =\n                    event.targetTouches[0].clientX -\n                    target.getBoundingClientRect().x;\n                const Ycoord =\n                    event.targetTouches[0].clientY -\n                    target.getBoundingClientRect().y;\n                target.style.setProperty(\n                    \"--jkl-touch-xcoord\",\n                    Xcoord.toPrecision(4) + \"px\",\n                );\n                target.style.setProperty(\n                    \"--jkl-touch-ycoord\",\n                    Ycoord.toPrecision(4) + \"px\",\n                );\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && (\n                    <span className=\"jkl-button__text\">{children}</span>\n                )}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={\n                        loader?.textDescription || \"Vennligst vent\"\n                    }\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"primary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"secondary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"tertiary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"ghost\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","process","env","NODE_ENV","Children","count","title","console","warn","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","buttonProps"],"mappings":"mRAWaA,EAASC,EAAMC,YAAW,SAErCC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAGW,eAAzBa,QAAQC,IAAIC,UACuB,IAAnCnB,EAAMoB,SAASC,MAAMhB,KACpBH,EAAM,gBACNA,EAAM,qBACNA,EAAMoB,OAECC,QAAAC,KACJ,2HAIR,MAAMC,EAAcC,EAAAA,aACfC,IACGnB,GAAgBA,EAAamB,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EACFL,EAAMG,cAAc,GAAGG,QACvBL,EAAOM,wBAAwBC,EAC7BC,EACFT,EAAMG,cAAc,GAAGO,QACvBT,EAAOM,wBAAwBI,EACnCV,EAAOW,MAAMC,YACT,qBACAR,EAAOS,YAAY,GAAK,MAE5Bb,EAAOW,MAAMC,YACT,qBACAJ,EAAOK,YAAY,GAAK,MAErBb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAACtC,IAGCuC,EAAWC,EAAAA,kBAAkB,MAAAvC,OAAA,EAAAA,EAAQwC,YACrCA,IAAqB5C,KAAqB,MAAAI,IAAAA,EAAQwC,YAGpD,OAAAC,EAAAA,KAAClC,EAAA,IACO+B,EACJ,eAAcE,EACd,eAAc1C,EACdD,UAAW6C,EAAAA,KAAG,aAAc,eAAiBrC,EAASR,GACtDuB,SAAiB,WAAPzB,EAAkB,MAAAK,OAAA,EAAAA,EAAQwC,gBAAa,EACjDzC,aAAciB,KACVV,EACJZ,IAAAA,EAEAE,SAAA,CAAC6C,EAAAA,KAAA,MAAA,CAAI5C,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GACG+C,EAAAA,IAAC,OAAK,CAAA9C,UAAU,mBAAoBD,SAAAA,IAEvCQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACG+C,EAAAA,IAACC,EAAAA,OAAA,CACG/C,UAAU,qBACVQ,QAAQ,SACRwC,iBACI,MAAA7C,OAAAA,EAAAA,EAAQ6C,kBAAmB,iBAE/B,gBAAc,MAAA7C,GAAAA,EAAQwC,gBAK1C,yCAuCO,SACH/C,GAEA,MAAMqD,EAAc,IACbrD,EACHY,QAAS,SAEN,OAAAsC,EAAAA,IAACrD,EAAQ,IAAGwD,GACvB,wBA7CO,SACHrD,GAGA,MAAMqD,EAAc,IACbrD,EACHY,QAAS,WAEN,OAAAsC,EAAAA,IAACrD,EAAQ,IAAGwD,GACvB,0BAEO,SAGHrD,GAGA,MAAMqD,EAAc,IACbrD,EACHY,QAAS,aAEN,OAAAsC,EAAAA,IAACrD,EAAQ,IAAGwD,GACvB,yBAEO,SAGHrD,GAGA,MAAMqD,EAAc,IACbrD,EACHY,QAAS,YAEN,OAAAsC,EAAAA,IAACrD,EAAQ,IAAGwD,GACvB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpandablePanelComponent, ExpandablePanelProps } from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            variant = \"fill\",\n            open: controlledOpen,\n            onOpenChange,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, [internalRef]);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        useEffect(() => {\n            onOpenChange?.(isOpen);\n        }, [isOpen, onOpenChange]);\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                return;\n            }\n            setUncontrolledOpen((previousValue) => !previousValue);\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, [setContentIsVisible, setUncontrolledOpen]);\n\n        return (\n            <El\n                ref={internalRef}\n                data-testid={\"jkl-expand-section\"}\n                className={clsx(\"jkl-expandable\", `jkl-expandable--${variant}`)}\n                open={\n                    /* for the animation to work in Safari we must ensure that\n                     * the element is open *before* the transition starts */\n                    as === \"details\" ? isOpen || contentIsVisible : undefined\n                }\n                /* this attribute is used for styling purposes */\n                data-visible-content={isOpen || contentIsVisible}\n                {...rest}\n            >\n                <ExpanderContext.Provider\n                    value={{\n                        open: isOpen,\n                        onToggle: syncUncontrolledState,\n                        onTransitionEnd: setContentIsVisible,\n                        onTransitionStart: setVisibleIfOpening,\n                    }}\n                >\n                    {children}\n                </ExpanderContext.Provider>\n            </El>\n        );\n    }),\n    { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","onOpenChange","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsx","className","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"qPAOaA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,aAAAA,KACGC,GACHR,GAEGS,EAAkBC,GAAuBC,YAAS,IAClDC,EAAkBC,GAAuBF,YAAS,GAEnDG,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBf,GAAK,IAAMa,EAAYG,SAAS,CAACH,IAErD,MAAMI,EAAKf,EACLgB,SAAsBb,EAAmB,IACzCc,EAASD,EAAeb,EAAiBG,EAE/CY,EAAAA,WAAU,KACN,MAAAd,GAAAA,EAAea,EAAAA,GAChB,CAACA,EAAQb,IAeZc,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAYC,IACMb,EAAe,SAAfa,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAA,MAAAQ,GAAAA,EAAAC,iBAAiB,SAAUJ,GAE7B,IACH,MAAAG,OAAAA,EAAAA,EAASE,oBACL,SACAL,EACJ,GACL,CAACT,EAAqBH,IAGrBkB,EAAAA,IAACV,EAAA,CACGjB,IAAKa,EACL,cAAa,qBACbe,UAAWC,EAAAA,KAAK,iBAAkB,mBAAmB1B,KACrDC,KAGW,YAAPF,EAAmBiB,GAAUR,OAAmB,EAGpD,uBAAsBQ,GAAUR,KAC5BJ,EAEJN,SAAA0B,EAAAA,IAACG,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACH5B,KAAMe,EACNc,SAxCc,KACtBf,GAGgBT,GAACyB,IAAmBA,GAAa,EAqCzCC,gBAAiBvB,EACjBwB,kBAhDaC,IACrBA,GACAzB,GAAoB,EAAI,GAiDnBX,SAAAA,KAET,IAGR,CAAEqC,QAASC,EAAAA"}
+{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpandablePanelComponent, ExpandablePanelProps } from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            variant = \"fill\",\n            open: controlledOpen,\n            onOpenChange,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, [internalRef]);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        useEffect(() => {\n            onOpenChange?.(isOpen);\n        }, [isOpen, onOpenChange]);\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                return;\n            }\n            setUncontrolledOpen((previousValue) => !previousValue);\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, [setContentIsVisible, setUncontrolledOpen]);\n\n        return (\n            <div className=\"jkl-expandable__wrapper\">\n                <div\n                    // React typings don't include inert for some reason,\n                    // but destructuring lets us calm down the TS compiler\n                    {...{ inert: \"true\" }}\n                    className=\"jkl-expandable__focus-container\"\n                    style={{ height: expanderHeight }}\n                ></div>\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable\",\n                        `jkl-expandable--${variant}`,\n                    )}\n                    open={\n                        /* for the animation to work in Safari we must ensure that\n                         * the element is open *before* the transition starts */\n                        as === \"details\"\n                            ? isOpen || contentIsVisible\n                            : undefined\n                    }\n                    /* this attribute is used for styling purposes */\n                    data-visible-content={isOpen || contentIsVisible}\n                    {...rest}\n                >\n                    <ExpanderContext.Provider\n                        value={{\n                            open: isOpen,\n                            onToggle: syncUncontrolledState,\n                            onTransitionEnd: setContentIsVisible,\n                            onTransitionStart: setVisibleIfOpening,\n                            setExpanderHeight,\n                        }}\n                    >\n                        {children}\n                    </ExpanderContext.Provider>\n                </El>\n            </div>\n        );\n    }),\n    { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","onOpenChange","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","className","jsx","inert","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"qPAOaA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,aAAAA,KACGC,GACHR,GAEGS,EAAkBC,GAAuBC,YAAS,IAClDC,EAAkBC,GAAuBF,YAAS,IAClDG,EAAgBC,GAAqBJ,WAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBjB,GAAK,IAAMe,EAAYG,SAAS,CAACH,IAErD,MAAMI,EAAKjB,EACLkB,SAAsBf,EAAmB,IACzCgB,EAASD,EAAef,EAAiBG,EAE/Cc,EAAAA,WAAU,KACN,MAAAhB,GAAAA,EAAee,EAAM,GACtB,CAACA,EAAQf,IAeZgB,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAA,MAAAQ,GAAAA,EAAAC,iBAAiB,SAAUJ,GAE7B,IACH,MAAAG,OAAA,EAAAA,EAASE,oBACL,SACAL,EAAAA,GAET,CAACX,EAAqBH,IAGrBoB,EAAAA,KAAC,MAAI,CAAAC,UAAU,0BACX7B,SAAA,CAAA8B,EAAAA,IAAC,MAAA,CAGSC,MAAO,OACbF,UAAU,kCACVG,MAAO,CAAEC,OAAQrB,KAErBkB,EAAAA,IAACZ,EAAA,CACGnB,IAAKe,EACL,cAAa,qBACbe,UAAWK,EAAAA,KACP,iBACA,mBAAmBhC,KAEvBC,KAGW,YAAPF,EACMmB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJN,SAAA8B,EAAAA,IAACK,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHlC,KAAMiB,EACNkB,SArDU,KACtBnB,GAGgBX,GAAC+B,IAAmBA,GAAa,EAkDrCC,gBAAiB7B,EACjB8B,kBA7DSC,IACrBA,GACA/B,GAAoB,EAAI,EA4DZE,kBAAAA,GAGHb,SAAAA,QAGb,IAGR,CAAE2C,QAASC,EAAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","jsx","ref","clsx"],"mappings":"kTAMuE,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,IAIA,OAAAM,EAAAA,IAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAAA,KAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,EAEfF,SAACU,EAAAA,IAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}
+{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n            {...(!open ? { inert: \"true\" } : {})}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","jsx","ref","clsx","inert"],"mappings":"kTAMuE,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,IAIA,OAAAM,EAAAA,IAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAAA,KAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,KACTA,EAA2B,CAAC,EAArB,CAAEW,MAAO,QAEtBb,SAACU,EAAAA,IAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),e=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/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/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const i=require("./context.cjs"),s=o.forwardRef((function(s,u){const{children:t,as:j="summary",open:a,icon:q,className:I,onClick:l,expandDirection:p,...d}=s,h=j,{open:m,onToggle:x}=o.useContext(i.ExpanderContext),C=a||m,w="up"===p?r.ChevronUpIcon:e.ChevronDownIcon;return c.jsxs(h,{ref:u,className:n.clsx("jkl-expander",{"jkl-expander--open":C},I),..."button"===j?{type:d.type||"button"}:{},onClick:c=>{c.preventDefault(),x(),null==l||l(c)},...d,children:[q||null,c.jsx("span",{className:"jkl-expander__label",children:t}),c.jsx(w,{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/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/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.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),[f]);const v=j||m,w="up"===p?r.ChevronUpIcon:o.ChevronDownIcon;return c.useEffect((()=>{const e=new ResizeObserver((function(){C(f.current.offsetHeight)}));return e.observe(f.current),()=>e.disconnect()}),[C]),e.jsxs(h,{ref:f,className:n.clsx("jkl-expander",{"jkl-expander--open":v},I),..."button"===a?{type:d.type||"button"}:{},onClick:e=>{e.preventDefault(),x(),null==l||l(e)},...d,children:[q||null,e.jsx("span",{className:"jkl-expander__label",children:t}),e.jsx(w,{className:"jkl-expander__chevron"})]})}));exports.Expander=s;
 //# sourceMappingURL=Expander.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const { open: contextOpen, onToggle } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    return (\n        <El\n            ref={ref}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                onToggle();\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","useContext","ExpanderContext","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"0qDAYaA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAEHC,KAAMQ,EAAaC,SAAAA,GACvBC,EAAAA,WAA8BC,EAAAA,iBAE5BC,EAASX,GAAkBO,EAE3BK,EAA8B,OAApBR,EAA2BS,EAAAA,cAAgBC,EAAAA,gBAGvD,OAAAC,EAAAA,KAACT,EAAA,CACGV,IAAAA,EACAM,UAAWc,EAAAA,KACP,eACA,CACI,qBAAsBL,GAE1BT,MAIQ,WAAPJ,EAAkB,CAAEmB,KAAMZ,EAAKY,MAAQ,UAAa,CAAC,EAC1Dd,QAAUe,IACNA,EAAEC,iBACOX,IACT,MAAAL,GAAAA,EAAUe,EAAAA,KAEVb,EAEHR,SAAA,CAAQI,GAAA,KACRmB,EAAAA,IAAA,OAAA,CAAKlB,UAAU,sBAAuBL,SAAAA,IACvCuB,EAAAA,IAACR,EAAQ,CAAAV,UAAU,4BAG/B"}
+{"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const {\n        open: contextOpen,\n        onToggle,\n        setExpanderHeight,\n    } = useContext<ExpandableContext>(ExpanderContext);\n\n    const internalRef = useRef<HTMLElement>();\n    useImperativeHandle(ref, () => internalRef.current, [internalRef]);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        const observer = new ResizeObserver(function () {\n            setExpanderHeight(internalRef.current!.offsetHeight);\n        });\n        observer.observe(internalRef.current!);\n        return () => observer.disconnect();\n    }, [setExpanderHeight]);\n\n    return (\n        <El\n            ref={internalRef}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                onToggle();\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"0qDAiBaA,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,CAACH,IAErD,MAAMI,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAAA,cAAgBC,EAAAA,gBAE3DC,OAAAA,EAAAA,WAAU,KACA,MAAAC,EAAW,IAAIC,gBAAe,WACdb,EAAAG,EAAYG,QAASQ,aAAY,IAE9C,OAAAF,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,eACvB,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,IACT,MAAAL,GAAAA,EAAU0B,EAAAA,KAEVxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAAA,IAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAAAA,IAACd,EAAQ,CAAAf,UAAU,4BAG/B"}

package/build/cjs/components/expander/context.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react").createContext({open:!1,onToggle:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{}});exports.ExpanderContext=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react").createContext({open:!1,onToggle:()=>{},onTransitionStart:()=>{},onTransitionEnd:()=>{},setExpanderHeight:()=>{}});exports.ExpanderContext=e;
 //# sourceMappingURL=context.cjs.map

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

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

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

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

package/build/cjs/components/message/Message.cjs

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

package/build/cjs/components/message/Message.cjs.map

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

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

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

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

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

package/build/cjs/components/text-input/BaseTextInput.cjs

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

package/build/cjs/components/text-input/BaseTextInput.cjs.map

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

package/build/cjs/components/text-input/BaseTextInput.d.cts

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

package/build/cjs/components/toast/Toast.cjs

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

package/build/cjs/components/toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"8jBAoBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,gBAGG,UACHA,UAAAA,EACAI,MAAAA,KACGC,UAEC,IAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZD,EAAAA,EAAmBE,UAE5BC,qBAAAA,GAAyBC,EAAAA,wBAEjCC,OAAAA,EAAAA,WAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAAA,KAAC,MAAA,IACOhB,EACJF,IAAAA,EACAN,UAAWyB,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC1B,GAEJ,iBAAgBK,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA9B,MAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAvB,EAAMO,MAAMiB,QACT/B,EAAAA,IAACgC,EAAAA,UAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQS,EAAMO,MAAMc,SACpBF,EAAAA,KAAA,MAAA,IAAQf,EAAYT,UAAU,qBAC1B4B,SAAA,CAAAf,GAAUf,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMf,IAChDf,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQjB,OAE/Cb,EAAAA,IAACoC,EAAAA,WAAA,CACG,aAAW,cACXlC,UAAU,4BACVmC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,eAACS,EAAUA,UAAA,QAI3B"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"8jBAoBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,gBAGG,UACHA,UAAAA,EACAI,MAAAA,KACGC,UAEC,IAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,EAAAA,wBAEjCC,OAAAA,EAAAA,WAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAAA,KAAC,MAAA,IACOhB,EACJF,IAAAA,EACAN,UAAWyB,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC1B,GAEJ,iBAAgBK,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA9B,MAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAvB,EAAMO,MAAMiB,QACT/B,EAAAA,IAACgC,EAAAA,UAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQS,EAAMO,MAAMc,SACpBF,EAAAA,KAAA,MAAA,IAAQf,EAAYT,UAAU,qBAC1B4B,SAAA,CAAAf,GAAUf,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMf,IAChDf,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQjB,OAE/Cb,EAAAA,IAACoC,EAAAA,WAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX1B,UAAU,4BACVmC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,eAACS,EAAUA,UAAA,QAI3B"}

package/build/es/components/button/Button.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import r,{useCallback as n}from"react";import{useAriaLiveRegion as s}from"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{Loader as a}from"../loader/Loader.js";const i=r.forwardRef((function(r,i){const{as:c="button",children:l,className:u,density:d,onTouchStart:h,loader:m,icon:y,iconPosition:p="left",iconLeft:v,iconRight:f,variant:g="secondary",...j}=r,b=c,k=n((t=>{h&&h(t);const o=t.target;if(o&&!o.disabled&&t.targetTouches.length){const e=t.targetTouches[0].clientX-o.getBoundingClientRect().x,r=t.targetTouches[0].clientY-o.getBoundingClientRect().y;o.style.setProperty("--jkl-touch-xcoord",e.toPrecision(4)+"px"),o.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),o.classList.add("jkl-button--pressed"),setTimeout((()=>{o.classList.remove("jkl-button--pressed"),o.style.removeProperty("--jkl-touch-xcoord"),o.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[h]),x=s(null==m?void 0:m.showLoader),L=!!l&&!(null==m||!m.showLoader);return t(b,{...x,"data-loading":L,"data-density":d,className:e("jkl-button","jkl-button--"+g,u),disabled:"button"===c?null==m?void 0:m.showLoader:void 0,onTouchStart:k,...j,ref:i,children:[t("div",{className:"jkl-button__label",children:[v&&v,y&&"left"===p&&y,l&&o("span",{className:"jkl-button__text",children:l}),f&&f,y&&"right"===p&&y]}),l&&o(a,{className:"jkl-button__loader",variant:"medium",textDescription:(null==m?void 0:m.textDescription)||"Vennligst vent","aria-hidden":!(null!=m&&m.showLoader)})]})}));function c(t){const e={...t,variant:"primary"};return o(i,{...e})}function l(t){const e={...t,variant:"secondary"};return o(i,{...e})}function u(t){const e={...t,variant:"tertiary"};return o(i,{...e})}function d(t){const e={...t,variant:"ghost"};return o(i,{...e})}export{i as Button,d as GhostButton,c as PrimaryButton,l as SecondaryButton,u as TertiaryButton};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import n,{useCallback as r}from"react";import{useAriaLiveRegion as a}from"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js";import{Loader as s}from"../loader/Loader.js";const i=n.forwardRef((function(i,l){const{as:c="button",children:u,className:d,density:h,onTouchStart:m,loader:y,icon:g,iconPosition:p="left",iconLeft:v,iconRight:b,variant:f="secondary",...j}=i,k=c;"production"!==process.env.NODE_ENV&&0===n.Children.count(u)&&!i["aria-label"]&&!i["aria-labelledby"]&&!i.title&&console.warn("Når du lager en Button uten synlig tekst må du huske å gi den et navn med enten aria-label, aria-labelledby eller title");const x=r((t=>{m&&m(t);const e=t.target;if(e&&!e.disabled&&t.targetTouches.length){const o=t.targetTouches[0].clientX-e.getBoundingClientRect().x,n=t.targetTouches[0].clientY-e.getBoundingClientRect().y;e.style.setProperty("--jkl-touch-xcoord",o.toPrecision(4)+"px"),e.style.setProperty("--jkl-touch-ycoord",n.toPrecision(4)+"px"),e.classList.add("jkl-button--pressed"),setTimeout((()=>{e.classList.remove("jkl-button--pressed"),e.style.removeProperty("--jkl-touch-xcoord"),e.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[m]),L=a(null==y?void 0:y.showLoader),B=!!u&&!(null==y||!y.showLoader);return t(k,{...L,"data-loading":B,"data-density":h,className:o("jkl-button","jkl-button--"+f,d),disabled:"button"===c?null==y?void 0:y.showLoader:void 0,onTouchStart:x,...j,ref:l,children:[t("div",{className:"jkl-button__label",children:[v&&v,g&&"left"===p&&g,u&&e("span",{className:"jkl-button__text",children:u}),b&&b,g&&"right"===p&&g]}),u&&e(s,{className:"jkl-button__loader",variant:"medium",textDescription:(null==y?void 0:y.textDescription)||"Vennligst vent","aria-hidden":!(null!=y&&y.showLoader)})]})}));function l(t){const o={...t,variant:"primary"};return e(i,{...o})}function c(t){const o={...t,variant:"secondary"};return e(i,{...o})}function u(t){const o={...t,variant:"tertiary"};return e(i,{...o})}function d(t){const o={...t,variant:"ghost"};return e(i,{...o})}export{i as Button,d as GhostButton,l as PrimaryButton,c as SecondaryButton,u as TertiaryButton};
 //# sourceMappingURL=Button.js.map

package/build/es/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    type TouchEvent,\n    useCallback,\n} from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { Loader } from \"../loader/Loader.js\";\nimport { ButtonComponent, ButtonProps } from \"./types.js\";\n\nexport const Button = React.forwardRef(function Button<\n    ElementType extends React.ElementType = \"button\",\n>(props: ButtonProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord =\n                    event.targetTouches[0].clientX -\n                    target.getBoundingClientRect().x;\n                const Ycoord =\n                    event.targetTouches[0].clientY -\n                    target.getBoundingClientRect().y;\n                target.style.setProperty(\n                    \"--jkl-touch-xcoord\",\n                    Xcoord.toPrecision(4) + \"px\",\n                );\n                target.style.setProperty(\n                    \"--jkl-touch-ycoord\",\n                    Ycoord.toPrecision(4) + \"px\",\n                );\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && (\n                    <span className=\"jkl-button__text\">{children}</span>\n                )}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={\n                        loader?.textDescription || \"Vennligst vent\"\n                    }\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"primary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"secondary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"tertiary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"ghost\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","PrimaryButton","buttonProps","SecondaryButton","TertiaryButton","GhostButton"],"mappings":"2QAWO,MAAMA,EAASC,EAAMC,YAAW,SAErCC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAEZa,EAAcC,GACfC,IACGX,GAAgBA,EAAaW,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EACFL,EAAMG,cAAc,GAAGG,QACvBL,EAAOM,wBAAwBC,EAC7BC,EACFT,EAAMG,cAAc,GAAGO,QACvBT,EAAOM,wBAAwBI,EACnCV,EAAOW,MAAMC,YACT,qBACAR,EAAOS,YAAY,GAAK,MAE5Bb,EAAOW,MAAMC,YACT,qBACAJ,EAAOK,YAAY,GAAK,MAErBb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC9B,IAGC+B,EAAWC,EAAkB,MAAA/B,SAAAA,EAAQgC,YACrCA,IAAqBpC,KAAqB,MAAAI,IAAAA,EAAQgC,YAGpD,OAAAC,EAAC1B,EAAA,IACOuB,EACJ,eAAcE,EACd,eAAclC,EACdD,UAAWqC,EAAG,aAAc,eAAiB7B,EAASR,GACtDe,SAAiB,WAAPjB,EAAkB,MAAAK,OAAA,EAAAA,EAAQgC,gBAAa,EACjDjC,aAAcS,KACVF,EACJZ,IAAAA,EAEAE,SAAA,CAACqC,EAAA,MAAA,CAAIpC,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GACGuC,EAAC,OAAK,CAAAtC,UAAU,mBAAoBD,SAAAA,IAEvCQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACGuC,EAACC,EAAA,CACGvC,UAAU,qBACVQ,QAAQ,SACRgC,iBACI,MAAArC,OAAAA,EAAAA,EAAQqC,kBAAmB,iBAE/B,gBAAc,MAAArC,GAAAA,EAAQgC,gBAK1C,IAEO,SAASM,EACZ7C,GAGA,MAAM8C,EAAc,IACb9C,EACHY,QAAS,WAEN,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASC,EAGZ/C,GAGA,MAAM8C,EAAc,IACb9C,EACHY,QAAS,aAEN,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASE,EAGZhD,GAGA,MAAM8C,EAAc,IACb9C,EACHY,QAAS,YAEN,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASG,EACZjD,GAEA,MAAM8C,EAAc,IACb9C,EACHY,QAAS,SAEN,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    type TouchEvent,\n    useCallback,\n} from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { Loader } from \"../loader/Loader.js\";\nimport { ButtonComponent, ButtonProps } from \"./types.js\";\n\nexport const Button = React.forwardRef(function Button<\n    ElementType extends React.ElementType = \"button\",\n>(props: ButtonProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    if (\n        process.env.NODE_ENV !== \"production\" &&\n        React.Children.count(children) === 0 &&\n        !props[\"aria-label\"] &&\n        !props[\"aria-labelledby\"] &&\n        !props.title\n    ) {\n        console.warn(\n            \"Når du lager en Button uten synlig tekst må du huske å gi den et navn med enten aria-label, aria-labelledby eller title\",\n        );\n    }\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord =\n                    event.targetTouches[0].clientX -\n                    target.getBoundingClientRect().x;\n                const Ycoord =\n                    event.targetTouches[0].clientY -\n                    target.getBoundingClientRect().y;\n                target.style.setProperty(\n                    \"--jkl-touch-xcoord\",\n                    Xcoord.toPrecision(4) + \"px\",\n                );\n                target.style.setProperty(\n                    \"--jkl-touch-ycoord\",\n                    Ycoord.toPrecision(4) + \"px\",\n                );\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && (\n                    <span className=\"jkl-button__text\">{children}</span>\n                )}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={\n                        loader?.textDescription || \"Vennligst vent\"\n                    }\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"primary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"secondary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<\n    ElementType extends React.ElementType = \"button\",\n>(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"tertiary\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = {\n        ...props,\n        variant: \"ghost\",\n    } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","process","env","NODE_ENV","Children","count","title","console","warn","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","PrimaryButton","buttonProps","SecondaryButton","TertiaryButton","GhostButton"],"mappings":"2QAWO,MAAMA,EAASC,EAAMC,YAAW,SAErCC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAGW,eAAzBa,QAAQC,IAAIC,UACuB,IAAnCnB,EAAMoB,SAASC,MAAMhB,KACpBH,EAAM,gBACNA,EAAM,qBACNA,EAAMoB,OAECC,QAAAC,KACJ,2HAIR,MAAMC,EAAcC,GACfC,IACGnB,GAAgBA,EAAamB,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EACFL,EAAMG,cAAc,GAAGG,QACvBL,EAAOM,wBAAwBC,EAC7BC,EACFT,EAAMG,cAAc,GAAGO,QACvBT,EAAOM,wBAAwBI,EACnCV,EAAOW,MAAMC,YACT,qBACAR,EAAOS,YAAY,GAAK,MAE5Bb,EAAOW,MAAMC,YACT,qBACAJ,EAAOK,YAAY,GAAK,MAErBb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAACtC,IAGCuC,EAAWC,EAAkB,MAAAvC,SAAAA,EAAQwC,YACrCA,IAAqB5C,KAAqB,MAAAI,IAAAA,EAAQwC,YAGpD,OAAAC,EAAClC,EAAA,IACO+B,EACJ,eAAcE,EACd,eAAc1C,EACdD,UAAW6C,EAAG,aAAc,eAAiBrC,EAASR,GACtDuB,SAAiB,WAAPzB,EAAkB,MAAAK,OAAA,EAAAA,EAAQwC,gBAAa,EACjDzC,aAAciB,KACVV,EACJZ,IAAAA,EAEAE,SAAA,CAAC6C,EAAA,MAAA,CAAI5C,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GACG+C,EAAC,OAAK,CAAA9C,UAAU,mBAAoBD,SAAAA,IAEvCQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACG+C,EAACC,EAAA,CACG/C,UAAU,qBACVQ,QAAQ,SACRwC,iBACI,MAAA7C,OAAAA,EAAAA,EAAQ6C,kBAAmB,iBAE/B,gBAAc,MAAA7C,GAAAA,EAAQwC,gBAK1C,IAEO,SAASM,EACZrD,GAGA,MAAMsD,EAAc,IACbtD,EACHY,QAAS,WAEN,OAAAsC,EAACrD,EAAQ,IAAGyD,GACvB,CAEO,SAASC,EAGZvD,GAGA,MAAMsD,EAAc,IACbtD,EACHY,QAAS,aAEN,OAAAsC,EAACrD,EAAQ,IAAGyD,GACvB,CAEO,SAASE,EAGZxD,GAGA,MAAMsD,EAAc,IACbtD,EACHY,QAAS,YAEN,OAAAsC,EAACrD,EAAQ,IAAGyD,GACvB,CAEO,SAASG,EACZzD,GAEA,MAAMsD,EAAc,IACbtD,EACHY,QAAS,SAEN,OAAAsC,EAACrD,EAAQ,IAAGyD,GACvB"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","jsx","ref","clsx"],"mappings":"6QAMO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IAIA,OAAAM,EAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,EAEfF,SAACU,EAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}
+{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport { ExpandablePanelContentComponent, ExpandableContext } from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n            {...(!open ? { inert: \"true\" } : {})}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","jsx","ref","clsx","inert"],"mappings":"6QAMO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IAIA,OAAAM,EAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,KACTA,EAA2B,CAAC,EAArB,CAAEW,MAAO,QAEtBb,SAACU,EAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KAAS"}