@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.2

package/build/es/components/nav-link/index.d.ts

@@ -1,4 +1,4 @@
 export { NavLink } from './NavLink.js';
 export type { NavLinkProps } from './types.js';
-export { NavLink as BETA_NavLink } from '../../components-beta/nav-link/NavLink.js';
-export type { NavLinkProps as BETA_NavLinkProps } from '../../components-beta/nav-link/types.js';
+export { NavLink as BETA_NavLink } from '../beta/nav-link/NavLink.jsx';
+export type { NavLinkProps as BETA_NavLinkProps } from '../beta/nav-link/types.js';

package/build/es/components/nav-link/index.js

@@ -1,2 +1,2 @@
-import{NavLink as a}from"./NavLink.js";import{NavLink as n}from"../../components-beta/nav-link/NavLink.js";export{n as BETA_NavLink,a as NavLink};
+import{NavLink as a}from"./NavLink.js";import{NavLink as i}from"../beta/nav-link/NavLink.js";export{i as BETA_NavLink,a as NavLink};
 //# sourceMappingURL=index.js.map

package/build/es/components/popover/Popover.js

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

package/build/es/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"ibAuBA,MAiEMA,EAAiBC,EAAMC,cAAkC,MAEzDC,EAAoB,KACtB,MAAMC,EAAUH,EAAMI,WAAWL,GAEjC,GAAe,MAAXI,EACA,MAAM,IAAIE,MACN,mEAIR,OAAOF,GAGEG,EAAU,EACnBC,SAAAA,KACGC,MAIH,MAAMC,EArFS,GACfC,KAAMC,EACNC,aAAcC,EACdC,UAAAA,EAAY,eACZC,SAAAA,EAAW,WACXC,MAAAA,GAAQ,EACRC,OAAQC,EAAU,EAClBC,kBAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,YAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAkBC,GAAuB1B,EAAM2B,SAAShB,GAEzDD,EAAOC,GAASc,EAChBb,EAAeC,GAAiBa,EAEhCE,EAAOC,EAAY,CACrBnB,KAAAA,EACAE,aAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAe,WAAY,CACRb,EAAOC,GACPa,EAAK,CAAEC,QAAS,EAAGC,mBAAoB,CAAC,SAAU,SAClDC,EAAM,CAAEF,QAAS,MAErBG,qBAAsBC,IAGpBjC,EAAUyB,EAAKzB,QAEfkC,EAAQC,EAASnC,EAAS,CAC5BoC,SAAS,KACNjB,IAEDkB,EAAQC,EAAStC,EAAS,CAAEoC,SAAS,KAAUnB,IAC/CsB,EAAQC,EAASxC,EAAS,CAAEoC,SAAS,KAAUlB,IAC/CuB,EAAUC,EAAW1C,EAASqB,GAC9BsB,EAAOC,EAAQ5C,EAASoB,GAExByB,EAAeC,EAAgB,CAACZ,EAAOO,EAASF,EAAOF,EAAOM,IAEpE,OAAA9C,EAAMkD,gBAAgB,KACd/B,GACAS,EAAKuB,KAAKC,qBAAqBjC,GAAmBkC,UAEvD,CAAClC,EAAmBS,EAAKuB,OAErBnD,EAAMsD,QACT,KAAA,CACI5C,KAAAA,EACAE,aAAAA,EACAI,MAAAA,KACGgC,KACApB,IAEP,CAAClB,EAAME,EAAcI,EAAOgC,EAAcpB,KA0B9B2B,CAAW,IAAK/C,IAChC,SACKT,EAAeyD,SAAf,CAAwBC,MAAOhD,EAC3BF,SAAAA,KAyBPmD,EAAiB1D,EAAM2D,WAG3B,UAA0BpD,SAAAA,EAAUqD,QAAAA,GAAU,KAAUC,GAASC,GAC/D,MAAQX,KAAAA,EAAMY,kBAAAA,EAAmBrD,KAAAA,EAAME,aAAAA,GAAiBV,IAClD8D,EAAezD,EAAiB0D,IAChCA,EAAMC,EAAa,CAACf,EAAKgB,aAAcL,EAASE,IAEtD,OAAIJ,GAAW5D,EAAMoE,eAAe7D,GACzBP,EAAMqE,aACT9D,EACAwD,EAAkB,CACdE,IAAAA,KACGJ,KACAtD,EAASsD,SAMpBS,EAAC,SAAA,CACGL,IAAAA,EACAM,QAAS,IAAM3D,KAAgBF,GAC/B,gBAAeA,KACXqD,EAAkBF,GAErBtD,SAAAA,GAGb,GAoCMiE,EAAiBxE,EAAM2D,WAG3B,UAEMc,MAAAA,EACAC,UAAAA,EACA1C,QAAAA,EAAU,EACV2C,aAAAA,EAAe,EACfC,YAAAA,GAAc,KACXf,GAEPC,GAEA,MAAQ3D,QAAAA,EAASa,MAAAA,EAAOmC,KAAAA,EAAMzC,KAAAA,EAAMmE,eAAAA,EAAgBC,iBAAAA,GAChD5E,IACE+D,EAAMC,EAAa,CAACf,EAAK4B,YAAajB,IAEtCkB,EAAmB7B,EAAK8B,UAAU5B,SAEhC6B,MAAAA,EAAOC,KAAAA,GACTC,GA5BNJ,EA2B2CA,IAvBpC,mBAAoBA,EAwBLA,EAAiBK,eACjBL,GAEhBM,EAAoBtF,EAAMuF,OAA2B,MAhCpC,IACvBP,EAyCA,OAPAhF,EAAMwF,UAAU,KACZF,EAAkBjC,QACdlD,EAAQsF,SAASC,cAAcC,QAC3B,kBACCC,SAASC,MACnB,CAAC1F,EAAQsF,SAASC,eAEhBhF,EAGD4D,EAACwB,EAAA,CAAeC,KAAMT,EAAkBjC,QACpC9C,SAAA+D,EAAC0B,EAAA,CACG7F,QAAAA,EACAa,MAAAA,EACA2D,aAAAA,EACAC,YAAAA,EAEArE,SAAA+D,EAAC,MAAA,CACG,aAAYY,EACZ,YAAWC,EACXT,UAAWuB,EAAK,kBAAmBvB,GACnCT,IAAAA,EACAQ,MACI,IACOA,KACAI,EACH,oBAAqB,qBAAqB7C,SAG9C8C,EAAiBjB,GAEpBtD,SAAAsD,EAAMtD,eAxBL,IA6BtB,GAEAD,EAAQ4F,QAAUxC,EAClBpD,EAAQ6F,QAAU3B"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","Trigger","Content"],"mappings":"ibAuBA,MAiEMA,EAAiBC,EAAMC,cAAkC,MAEzDC,EAAoB,KACtB,MAAMC,EAAUH,EAAMI,WAAWL,GAEjC,GAAe,MAAXI,EACA,MAAM,IAAIE,MACN,mEAIR,OAAOF,GAGEG,EAAU,EACnBC,SAAAA,KACGC,MAIH,MAAMC,EArFS,GACfC,KAAMC,EACNC,aAAcC,EACdC,UAAAA,EAAY,eACZC,SAAAA,EAAW,WACXC,MAAAA,GAAQ,EACRC,OAAQC,EAAU,EAClBC,kBAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,YAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAkBC,GAAuB1B,EAAM2B,SAAShB,GAEzDD,EAAOC,GAASc,EAChBb,EAAeC,GAAiBa,EAEhCE,EAAOC,EAAY,CACrBnB,KAAAA,EACAE,aAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAe,WAAY,CACRb,EAAOC,GACPa,EAAK,CAAEC,QAAS,EAAGC,mBAAoB,CAAC,SAAU,SAClDC,EAAM,CAAEF,QAAS,MAErBG,qBAAsBC,IAGpBjC,EAAUyB,EAAKzB,QAEfkC,EAAQC,EAASnC,EAAS,CAC5BoC,SAAS,KACNjB,IAEDkB,EAAQC,EAAStC,EAAS,CAAEoC,SAAS,KAAUnB,IAC/CsB,EAAQC,EAASxC,EAAS,CAAEoC,SAAS,KAAUlB,IAC/CuB,EAAUC,EAAW1C,EAASqB,GAC9BsB,EAAOC,EAAQ5C,EAASoB,GAExByB,EAAeC,EAAgB,CAACZ,EAAOO,EAASF,EAAOF,EAAOM,IAEpE,OAAA9C,EAAMkD,gBAAgB,KACd/B,GACAS,EAAKuB,KAAKC,qBAAqBjC,GAAmBkC,UAEvD,CAAClC,EAAmBS,EAAKuB,OAErBnD,EAAMsD,QACT,KAAA,CACI5C,KAAAA,EACAE,aAAAA,EACAI,MAAAA,KACGgC,KACApB,IAEP,CAAClB,EAAME,EAAcI,EAAOgC,EAAcpB,KA0B9B2B,CAAW,IAAK/C,IAChC,SACKT,EAAeyD,SAAf,CAAwBC,MAAOhD,EAC3BF,SAAAA,KAyBPmD,EAAiB1D,EAAM2D,WAG3B,UAA0BpD,SAAAA,EAAUqD,QAAAA,GAAU,KAAUC,GAASC,GAC/D,MAAQX,KAAAA,EAAMY,kBAAAA,EAAmBrD,KAAAA,EAAME,aAAAA,GAAiBV,IAClD8D,EAAezD,EAAiB0D,IAChCA,EAAMC,EAAa,CAACf,EAAKgB,aAAcL,EAASE,IAEtD,OAAIJ,GAAW5D,EAAMoE,eAAe7D,GACzBP,EAAMqE,aACT9D,EACAwD,EAAkB,CACdE,IAAAA,KACGJ,KACAtD,EAASsD,SAMpBS,EAAC,SAAA,CACGL,IAAAA,EACAM,QAAS,IAAM3D,KAAgBF,GAC/B,gBAAeA,KACXqD,EAAkB,IACfF,EACHW,UAAWC,EAAK,sBAAuBZ,EAAMW,aAGhDjE,SAAAA,GAGb,GAoCMmE,EAAiB1E,EAAM2D,WAG3B,UAEMgB,MAAAA,EACAH,UAAAA,EACAxC,QAAAA,EAAU,EACV4C,aAAAA,EAAe,EACfC,YAAAA,GAAc,KACXhB,GAEPC,GAEA,MAAQ3D,QAAAA,EAASa,MAAAA,EAAOmC,KAAAA,EAAMzC,KAAAA,EAAMoE,eAAAA,EAAgBC,iBAAAA,GAChD7E,IACE+D,EAAMC,EAAa,CAACf,EAAK6B,YAAalB,IAEtCmB,EAAmB9B,EAAK+B,UAAU7B,SAEhC8B,MAAAA,EAAOC,KAAAA,GACTC,GA5BNJ,EA2B2CA,IAvBpC,mBAAoBA,EAwBLA,EAAiBK,eACjBL,GAEhBM,EAAoBvF,EAAMwF,OAA2B,MAhCpC,IACvBP,EAyCA,OAPAjF,EAAMyF,UAAU,KACZF,EAAkBlC,QACdlD,EAAQuF,SAASC,cAAcC,QAC3B,kBACCC,SAASC,MACnB,CAAC3F,EAAQuF,SAASC,eAEhBjF,EAGD4D,EAACyB,EAAA,CAAeC,KAAMT,EAAkBlC,QACpC9C,SAAA+D,EAAC2B,EAAA,CACG9F,QAAAA,EACAa,MAAAA,EACA4D,aAAAA,EACAC,YAAAA,EAEAtE,SAAA+D,EAAC,MAAA,CACG,aAAYa,EACZ,YAAWC,EACXZ,UAAWC,EAAK,kBAAmBD,GACnCP,IAAAA,EACAU,MACI,IACOA,KACAG,EACH,oBAAqB,qBAAqB9C,SAG9C+C,EAAiBlB,GAEpBtD,SAAAsD,EAAMtD,eAxBL,IA6BtB,GAEAD,EAAQ4F,QAAUxC,EAClBpD,EAAQ6F,QAAUzB"}

package/build/es/components/radio-button/BaseRadioButton.js

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d}),e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]}),e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
 //# sourceMappingURL=BaseRadioButton.js.map

package/build/es/components/radio-button/BaseRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n    HTMLInputElement,\n    BaseRadioButtonProps\n>((props, ref) => {\n    const {\n        id,\n        className,\n        checked,\n        children,\n        label,\n        inline,\n        invalid,\n        name,\n        value,\n        onChange,\n        ...rest\n    } = props;\n\n    const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n    return (\n        <div\n            className={clsx(\"jkl-radio-button\", className, {\n                \"jkl-radio-button--inline\": inline,\n                \"jkl-radio-button--error\": invalid,\n            })}\n        >\n            <label\n                data-testid=\"jkl-radio-button__label-tag\"\n                htmlFor={inputId}\n                className=\"jkl-radio-button__label\"\n            >\n                {label || children}\n            </label>\n            <input\n                name={name}\n                ref={ref}\n                {...rest}\n                id={inputId}\n                className=\"jkl-radio-button__input\"\n                type=\"radio\"\n                onChange={onChange}\n                value={value}\n                checked={checked}\n                aria-invalid={invalid || rest[\"aria-invalid\"]}\n            />\n        </div>\n    );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACG,cAAY,8BACZC,QAASN,EACTV,UAAU,0BAETE,SAAAC,GAASD,IAEda,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACViB,KAAK,QACLT,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,uBAM9Cd,EAAgBuB,YAAc"}
+{"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n    HTMLInputElement,\n    BaseRadioButtonProps\n>((props, ref) => {\n    const {\n        id,\n        className,\n        checked,\n        children,\n        label,\n        inline,\n        invalid,\n        name,\n        value,\n        onChange,\n        ...rest\n    } = props;\n\n    const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n    return (\n        <div\n            className={clsx(\"jkl-radio-button\", className, {\n                \"jkl-radio-button--inline\": inline,\n                \"jkl-radio-button--error\": invalid,\n            })}\n        >\n            <input\n                name={name}\n                ref={ref}\n                {...rest}\n                id={inputId}\n                className=\"jkl-radio-button__input\"\n                type=\"radio\"\n                onChange={onChange}\n                value={value}\n                checked={checked}\n                aria-invalid={invalid || rest[\"aria-invalid\"]}\n            />\n            <label\n                data-testid=\"jkl-radio-button__label-tag\"\n                htmlFor={inputId}\n                className=\"jkl-radio-button__label\"\n            >\n                {label || children}\n            </label>\n        </div>\n    );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACVgB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,kBAElCM,EAAC,QAAA,CACG,cAAY,8BACZE,QAASP,EACTV,UAAU,0BAETE,SAAAC,GAASD,SAM1BP,EAAgBuB,YAAc"}

package/build/es/components/radio-button/radioGroupContext.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ChangeEventHandler } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 type RadioGroupContext = {
     name: string | undefined;
     value: string | undefined;

package/build/es/components/radio-button/radioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, {\n    createContext,\n    useContext,\n    type ChangeEventHandler,\n} from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext =>\n    useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n    state,\n    children,\n}) => (\n    <radioGroupContext.Provider value={state}>\n        {children}\n    </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"8FAeA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,SAAS,IAGAC,EAAuB,IAChCC,EAAWR,GAMFS,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECX,EAAkBY,SAAlB,CAA2BT,MAAOO,EAC9BC,SAAAA"}
+{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, {\n    createContext,\n    useContext,\n    type ChangeEventHandler,\n} from \"react\";\nimport type { WithChildren } from \"../../utilities/types.js\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext =>\n    useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n    state,\n    children,\n}) => (\n    <radioGroupContext.Provider value={state}>\n        {children}\n    </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"8FAeA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,SAAS,IAGAC,EAAuB,IAChCC,EAAWR,GAMFS,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECX,EAAkBY,SAAlB,CAA2BT,MAAOO,EAC9BC,SAAAA"}

package/build/es/components/screen-reader-only/types.d.ts

@@ -1,4 +1,4 @@
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface ScreenReaderOnlyProps extends WithChildren {
     showOnFocus?: boolean;
 }

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

@@ -1,5 +1,5 @@
 export { Select } from './Select.js';
 export { NativeSelect } from './NativeSelect.js';
 export type { SelectProps, SelectChangeEventHandler, SelectPartialChangeEvent, NativeSelectProps, } from './types.js';
-export { Select as BETA_Select } from '../../components-beta/select/Select.js';
-export type { SelectProps as BETA_SelectProps } from '../../components-beta/select/types.js';
+export { Select as BETA_Select } from '../beta/select/Select.jsx';
+export type { SelectProps as BETA_SelectProps } from '../beta/select/types.js';

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

@@ -1,2 +1,2 @@
-import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";import{Select as c}from"../../components-beta/select/Select.js";export{c as BETA_Select,t as NativeSelect,e as Select};
+import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";import{Select as a}from"../beta/select/Select.js";export{a as BETA_Select,t as NativeSelect,e as Select};
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, SelectHTMLAttributes } from 'react';
-import { DataTestAutoId } from '../../core/types.js';
+import { DataTestAutoId } from '../../utilities/types.js';
 import { ValuePair } from '../../utilities/valuePair.js';
 import { LabelProps, InputGroupProps } from '../input-group/types.js';
 export interface NativeSelectProps extends Omit<InputGroupProps, "children">, SelectHTMLAttributes<HTMLSelectElement> {

package/build/es/components/system-message/types.d.ts

@@ -1,4 +1,4 @@
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface SystemMessageProps extends WithChildren {
     id?: string;
     className?: string;

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

@@ -1,5 +1,5 @@
 import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 import { TableSortProps } from './utils.js';
 export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
     /** Beskrivelse av tabellen for skjermlesere */

package/build/es/components/table-of-contents/TableOfContents.d.ts

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

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

@@ -1,5 +1,5 @@
-import { WithChildren } from '../../core/types.js';
 import { PolymorphicPropsWithRef } from '../../utilities/index.js';
+import { WithChildren } from '../../utilities/types.js';
 export type NavTabProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     /**
      * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.

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

@@ -1,6 +1,6 @@
 import { ToastOptions as StatelyToastOptions } from '@react-stately/toast';
 import { ReactNode } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export type ToastContent = {
     content: ReactNode;
     title?: string;

package/build/es/components/toggle-switch/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
-import { WithChildren } from '../../core/types.js';
 import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface ToggleSliderProps extends WithChildren {
     labels: [string, string];
     onToggle: (value: string) => void;

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

@@ -1,6 +1,6 @@
 import { UseFloatingReturn, useInteractions } from '@floating-ui/react';
 import { default as React, FC } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 import { TooltipProps } from './types.js';
 type UseTooltipReturn = {
     triggerOn: NonNullable<TooltipProps["triggerOn"]>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, {\n    type FC,\n    createContext,\n    useContext,\n    useRef,\n    useState,\n} from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\nimport type { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) => {\n        description.current = element;\n    };\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"hover\",\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUAqCA,MA8DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KAC7B,MAAMC,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIR,OAAOF,GAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAKzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAEnE,MAAO,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA5CgBf,IACpBZ,EAAY4B,QAAUhB,OA6CnBY,IA0BSK,CAAWzC,GAE3B,OAAO0C,EAAClD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, {\n    type FC,\n    createContext,\n    useContext,\n    useRef,\n    useState,\n} from \"react\";\nimport type { WithChildren } from \"../../utilities/types.js\";\nimport type { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) => {\n        description.current = element;\n    };\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"hover\",\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUAqCA,MA8DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KAC7B,MAAMC,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIR,OAAOF,GAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAKzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAEnE,MAAO,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA5CgBf,IACpBZ,EAAY4B,QAAUhB,OA6CnBY,IA0BSK,CAAWzC,GAE3B,OAAO0C,EAAClD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA"}

package/build/es/hooks/useAnimatedHeight/types.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Easing, Timing } from '../../core/types.js';
+import { Easing, Timing } from '../../utilities/types.js';
 export interface UseAnimatedHeightOptions<T extends HTMLElement = HTMLElement> {
     display?: "block" | "grid" | "flex";
     /**

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,a){const u=s(o),l=a?.easing||"standard",c=a?.timing||"productive",m=a?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),p=e(null);function v(e){const t=p.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),a?.onTransitionEnd?.(o,p))}const g=t(()=>{const e=p.current;if(e&&void 0!==u){if(o){if(o&&u)return}else if(e.style.display="none",!u)return;if(a?.onTransitionStart?.(o,p),f)return e.removeAttribute("style"),o?a?.onFirstVisible?.(o,p):e.style.display="none",void a?.onTransitionEnd?.(o,p);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)a?.onFirstVisible?.(o,p),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame(()=>{h.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[o,a,u,d,f,m]);return r(()=>{g()},[o,g]),r(()=>{const e=p.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}},[o]),r(()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[p,g]}export{o as useAnimatedHeight};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,a){const u=s(o),l=a?.easing||"standard",c=a?.timing||"productive",m=a?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),p=e(null);function v(e){const t=p.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),a?.onTransitionEnd?.(o,p))}const g=t(()=>{const e=p.current;if(e&&void 0!==u){if(o){if(o&&u)return}else if(e.style.display="none",!u)return;if(a?.onTransitionStart?.(o,p),f)return e.removeAttribute("style"),o?a?.onFirstVisible?.(o,p):e.style.display="none",void a?.onTransitionEnd?.(o,p);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)a?.onFirstVisible?.(o,p),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame(()=>{h.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[o,a,u,d,f,m]);return r(()=>{g()},[o,g]),r(()=>{const e=p.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}},[o]),r(()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[p,g]}export{o as useAnimatedHeight};
 //# sourceMappingURL=useAnimatedHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n    isOpen: boolean,\n    options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n    const wasOpen = usePreviousValue(isOpen);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const display = options?.display || defaultDisplay;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    function handleTransitionEnd(event: TransitionEvent) {\n        const element = elementRef.current;\n\n        // Ignore bubbling transitions from within container\n        if (element && event.target === element) {\n            if (isOpen) {\n                element.removeAttribute(\"style\");\n            } else {\n                element.removeAttribute(\"style\");\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef);\n        }\n    }\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        // Ikke kjør animasjonen hvis elementet ikke er rendret,\n        // eller hvis det er første render.\n        if (!element || wasOpen === undefined) {\n            return;\n        }\n\n        if (!isOpen) {\n            element.style.display = \"none\";\n            if (!wasOpen) {\n                // Første render eller rerender med isOpen false\n                return;\n            }\n        } else if (isOpen && wasOpen) {\n            // Re-render etter å ha vært lukket, men forblitt åpen.\n            return;\n        }\n\n        options?.onTransitionStart?.(isOpen, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            if (isOpen) {\n                options?.onFirstVisible?.(isOpen, elementRef);\n            } else {\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        element.style.transition = transition;\n        element.style.display = display;\n        element.style.overflow = \"hidden\";\n\n        if (isOpen) {\n            options?.onFirstVisible?.(isOpen, elementRef);\n            element.style.height = \"0\";\n            element.style.height = `${element.scrollHeight}px`;\n        } else {\n            // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n            // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n            // style: height: 0; display: block; overflow:hidden\n            if (element.scrollHeight === 0) {\n                element.removeAttribute(\"style\");\n                return;\n            }\n\n            element.style.height = `${element.scrollHeight}px`;\n\n            raf1.current = requestAnimationFrame(() => {\n                raf2.current = requestAnimationFrame(() => {\n                    element.style.height = `${0}px`;\n                });\n            });\n        }\n    }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n    useEffect(() => {\n        runAnimation();\n    }, [isOpen, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isOpen]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n    isOpen: boolean,\n    options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n    const wasOpen = usePreviousValue(isOpen);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const display = options?.display || defaultDisplay;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    function handleTransitionEnd(event: TransitionEvent) {\n        const element = elementRef.current;\n\n        // Ignore bubbling transitions from within container\n        if (element && event.target === element) {\n            if (isOpen) {\n                element.removeAttribute(\"style\");\n            } else {\n                element.removeAttribute(\"style\");\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef);\n        }\n    }\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        // Ikke kjør animasjonen hvis elementet ikke er rendret,\n        // eller hvis det er første render.\n        if (!element || wasOpen === undefined) {\n            return;\n        }\n\n        if (!isOpen) {\n            element.style.display = \"none\";\n            if (!wasOpen) {\n                // Første render eller rerender med isOpen false\n                return;\n            }\n        } else if (isOpen && wasOpen) {\n            // Re-render etter å ha vært lukket, men forblitt åpen.\n            return;\n        }\n\n        options?.onTransitionStart?.(isOpen, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            if (isOpen) {\n                options?.onFirstVisible?.(isOpen, elementRef);\n            } else {\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        element.style.transition = transition;\n        element.style.display = display;\n        element.style.overflow = \"hidden\";\n\n        if (isOpen) {\n            options?.onFirstVisible?.(isOpen, elementRef);\n            element.style.height = \"0\";\n            element.style.height = `${element.scrollHeight}px`;\n        } else {\n            // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n            // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n            // style: height: 0; display: block; overflow:hidden\n            if (element.scrollHeight === 0) {\n                element.removeAttribute(\"style\");\n                return;\n            }\n\n            element.style.height = `${element.scrollHeight}px`;\n\n            raf1.current = requestAnimationFrame(() => {\n                raf2.current = requestAnimationFrame(() => {\n                    element.style.height = `${0}px`;\n                });\n            });\n        }\n    }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n    useEffect(() => {\n        runAnimation();\n    }, [isOpen, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isOpen]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiBO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
 //# sourceMappingURL=useAnimatedHeightBetween.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent kollapset høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n        element.dataset.expanded = \"true\";\n\n        // Sett høyde tilbake til utvidet høyde\n        element.style.setProperty(\"height\", `${expandedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til kollapset høyde og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${collapsedHeight}px`);\n            element.dataset.expanded = \"false\";\n        });\n    });\n}\n\nfunction expandElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent utvidet høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n\n        // Sett høyde tilbake til kollapset høyde\n        element.style.setProperty(\"height\", `${collapsedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til utvidet høyde  og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${expandedHeight}px`);\n            element.dataset.expanded = \"true\";\n        });\n    });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n    isExpanded: boolean,\n    options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n    const wasExpanded = usePreviousValue(isExpanded);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(isExpanded, elementRef);\n            }\n        },\n        [options, isExpanded],\n    );\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (wasExpanded === undefined) {\n            // Første render\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n        }\n\n        if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(isExpanded, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n            options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        if (isExpanded) {\n            expandElement(elementRef, transition, raf1, raf2);\n        } else {\n            collapseElement(elementRef, transition, raf1, raf2);\n        }\n    }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n    useEffect(() => {\n        runAnimation();\n    }, [isExpanded, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isExpanded]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiFO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent kollapset høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n        element.dataset.expanded = \"true\";\n\n        // Sett høyde tilbake til utvidet høyde\n        element.style.setProperty(\"height\", `${expandedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til kollapset høyde og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${collapsedHeight}px`);\n            element.dataset.expanded = \"false\";\n        });\n    });\n}\n\nfunction expandElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent utvidet høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n\n        // Sett høyde tilbake til kollapset høyde\n        element.style.setProperty(\"height\", `${collapsedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til utvidet høyde  og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${expandedHeight}px`);\n            element.dataset.expanded = \"true\";\n        });\n    });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n    isExpanded: boolean,\n    options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n    const wasExpanded = usePreviousValue(isExpanded);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(isExpanded, elementRef);\n            }\n        },\n        [options, isExpanded],\n    );\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (wasExpanded === undefined) {\n            // Første render\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n        }\n\n        if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(isExpanded, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n            options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        if (isExpanded) {\n            expandElement(elementRef, transition, raf1, raf2);\n        } else {\n            collapseElement(elementRef, transition, raf1, raf2);\n        }\n    }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n    useEffect(() => {\n        runAnimation();\n    }, [isExpanded, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isExpanded]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiFO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Easing, Timing } from '../../core/types.js';
+import { Easing, Timing } from '../../utilities/types.js';
 export type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {
     easing?: Easing;
     /**

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js

@@ -1,2 +1,2 @@
-import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../core/tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
+import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
 //# sourceMappingURL=useAutoAnimateHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport type { Easing, Timing } from \"../../core/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n    easing?: Easing;\n    /**\n     * Overstyr standard timing\n     * @default \"expressive\"\n     */\n    timing?: Timing;\n    onTransitionStart?: (ref: RefObject<T | null>) => void;\n    onTransitionEnd?: (ref: RefObject<T | null>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n    trigger: any,\n    options?: UseAutoAnimatedHeightOptions<T>,\n) {\n    const previousTriggerValue = usePreviousValue(trigger);\n    const [previousHeight, setPreviousHeight] = useState(0);\n\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(elementRef);\n            }\n        },\n        [options],\n    );\n\n    const animateElement = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        element.removeAttribute(\"style\");\n        const newHeight = element.scrollHeight;\n\n        raf1.current = requestAnimationFrame(() => {\n            // Sett høyde tilbake til forrige høyde\n            element.style.removeProperty(\"transition\");\n            element.style.setProperty(\"height\", `${previousHeight}px`);\n            element.style.setProperty(\"overflow-y\", \"hidden\");\n\n            raf2.current = requestAnimationFrame(() => {\n                // Sett høyde til kollapset høyde og start transition\n                element.style.setProperty(\"transition\", transition);\n                element.style.setProperty(\"height\", `${newHeight}px`);\n            });\n        });\n\n        setPreviousHeight(newHeight);\n    }, [transition, previousHeight]);\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (previousTriggerValue === undefined) {\n            // Første render\n            setPreviousHeight(element.scrollHeight);\n            return;\n        }\n\n        if (trigger === previousTriggerValue) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(elementRef);\n\n        if (prefersReducedMotion) {\n            options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        animateElement();\n    }, [\n        animateElement,\n        trigger,\n        previousTriggerValue,\n        options,\n        prefersReducedMotion,\n    ]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n    useEffect(() => {\n        runAnimation();\n    }, [trigger, runAnimation]);\n\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [handleTransitionEnd]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"sRAiCO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}
+{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport tokens from \"../../tokens.js\";\nimport type { Easing, Timing } from \"../../utilities/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n    easing?: Easing;\n    /**\n     * Overstyr standard timing\n     * @default \"expressive\"\n     */\n    timing?: Timing;\n    onTransitionStart?: (ref: RefObject<T | null>) => void;\n    onTransitionEnd?: (ref: RefObject<T | null>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n    trigger: any,\n    options?: UseAutoAnimatedHeightOptions<T>,\n) {\n    const previousTriggerValue = usePreviousValue(trigger);\n    const [previousHeight, setPreviousHeight] = useState(0);\n\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(elementRef);\n            }\n        },\n        [options],\n    );\n\n    const animateElement = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        element.removeAttribute(\"style\");\n        const newHeight = element.scrollHeight;\n\n        raf1.current = requestAnimationFrame(() => {\n            // Sett høyde tilbake til forrige høyde\n            element.style.removeProperty(\"transition\");\n            element.style.setProperty(\"height\", `${previousHeight}px`);\n            element.style.setProperty(\"overflow-y\", \"hidden\");\n\n            raf2.current = requestAnimationFrame(() => {\n                // Sett høyde til kollapset høyde og start transition\n                element.style.setProperty(\"transition\", transition);\n                element.style.setProperty(\"height\", `${newHeight}px`);\n            });\n        });\n\n        setPreviousHeight(newHeight);\n    }, [transition, previousHeight]);\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (previousTriggerValue === undefined) {\n            // Første render\n            setPreviousHeight(element.scrollHeight);\n            return;\n        }\n\n        if (trigger === previousTriggerValue) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(elementRef);\n\n        if (prefersReducedMotion) {\n            options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        animateElement();\n    }, [\n        animateElement,\n        trigger,\n        previousTriggerValue,\n        options,\n        prefersReducedMotion,\n    ]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n    useEffect(() => {\n        runAnimation();\n    }, [trigger, runAnimation]);\n\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [handleTransitionEnd]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"iRAiCO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}

package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.d.ts

@@ -11,5 +11,5 @@ export interface UseAriaLiveRegionOptions {
  * @returns
  */
 export declare function useAriaLiveRegion(watch: unknown | unknown[], options?: UseAriaLiveRegionOptions): {
-    "aria-live": "polite" | "assertive" | "off" | undefined;
+    "aria-live": "off" | "assertive" | "polite" | undefined;
 };

package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.d.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../core/types.js';
+import { ColorScheme } from '../../utilities/types.js';
 type BrowserPreferences = {
     prefersReducedMotion: boolean;
     prefersColorScheme: ColorScheme;

package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../core/types.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n    prefersReducedMotion: boolean;\n    prefersColorScheme: ColorScheme;\n    forcedColors: boolean;\n};\n\nconst ActionType = {\n    PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n    PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n    ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n    | {\n          type: typeof ActionType.PrefersColorScheme;\n          value: ColorScheme;\n      }\n    | {\n          type: typeof ActionType.PrefersReducedMotion;\n          value: boolean;\n      }\n    | {\n          type: typeof ActionType.ForcedColors;\n          value: boolean;\n      };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n    prefersReducedMotion: false,\n    prefersColorScheme: \"light\",\n    forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n    switch (action.type) {\n        case ActionType.PrefersColorScheme:\n            return {\n                ...state,\n                prefersColorScheme: action.value,\n            };\n        case ActionType.PrefersReducedMotion:\n            return {\n                ...state,\n                prefersReducedMotion: action.value,\n            };\n        case ActionType.ForcedColors:\n            return {\n                ...state,\n                forcedColors: action.value,\n            };\n        default:\n            return state;\n    }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [state, dispatch] = useReducer(reducer, initialState);\n\n    useEffect(() => {\n        setHasMounted(true);\n        const prefersReducedMotion = getInitialMediaQueryMatch(\n            PREFERS_REDUCED_MOTION,\n        );\n        const prefersColorScheme = getInitialMediaQueryMatch(\n            PREFERS_LIGHT_COLOR_SCHEME,\n        )\n            ? \"light\"\n            : \"dark\";\n        const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n        dispatch({\n            type: ActionType.PrefersReducedMotion,\n            value: prefersReducedMotion,\n        });\n        dispatch({\n            type: ActionType.PrefersColorScheme,\n            value: prefersColorScheme,\n        });\n        dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n    }, []);\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersReducedMotion,\n                value: e.matches,\n            });\n        };\n        const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersColorScheme,\n                value: e.matches ? \"light\" : \"dark\",\n            });\n        };\n        const onForcedColorsChange = (e: MediaQueryListEvent) => {\n            dispatch({ type: ActionType.ForcedColors, value: e.matches });\n        };\n\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_REDUCED_MOTION),\n            onPrefersReducedMotionChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n            onPrefersColorSchemeChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(FORCED_COLORS),\n            onForcedColorsChange,\n        );\n\n        return () => {\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_REDUCED_MOTION),\n                onPrefersReducedMotionChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n                onPrefersColorSchemeChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(FORCED_COLORS),\n                onForcedColorsChange,\n            );\n        };\n    }, [hasMounted]);\n\n    return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}
+{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../utilities/types.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n    prefersReducedMotion: boolean;\n    prefersColorScheme: ColorScheme;\n    forcedColors: boolean;\n};\n\nconst ActionType = {\n    PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n    PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n    ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n    | {\n          type: typeof ActionType.PrefersColorScheme;\n          value: ColorScheme;\n      }\n    | {\n          type: typeof ActionType.PrefersReducedMotion;\n          value: boolean;\n      }\n    | {\n          type: typeof ActionType.ForcedColors;\n          value: boolean;\n      };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n    prefersReducedMotion: false,\n    prefersColorScheme: \"light\",\n    forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n    switch (action.type) {\n        case ActionType.PrefersColorScheme:\n            return {\n                ...state,\n                prefersColorScheme: action.value,\n            };\n        case ActionType.PrefersReducedMotion:\n            return {\n                ...state,\n                prefersReducedMotion: action.value,\n            };\n        case ActionType.ForcedColors:\n            return {\n                ...state,\n                forcedColors: action.value,\n            };\n        default:\n            return state;\n    }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [state, dispatch] = useReducer(reducer, initialState);\n\n    useEffect(() => {\n        setHasMounted(true);\n        const prefersReducedMotion = getInitialMediaQueryMatch(\n            PREFERS_REDUCED_MOTION,\n        );\n        const prefersColorScheme = getInitialMediaQueryMatch(\n            PREFERS_LIGHT_COLOR_SCHEME,\n        )\n            ? \"light\"\n            : \"dark\";\n        const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n        dispatch({\n            type: ActionType.PrefersReducedMotion,\n            value: prefersReducedMotion,\n        });\n        dispatch({\n            type: ActionType.PrefersColorScheme,\n            value: prefersColorScheme,\n        });\n        dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n    }, []);\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersReducedMotion,\n                value: e.matches,\n            });\n        };\n        const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersColorScheme,\n                value: e.matches ? \"light\" : \"dark\",\n            });\n        };\n        const onForcedColorsChange = (e: MediaQueryListEvent) => {\n            dispatch({ type: ActionType.ForcedColors, value: e.matches });\n        };\n\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_REDUCED_MOTION),\n            onPrefersReducedMotionChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n            onPrefersColorSchemeChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(FORCED_COLORS),\n            onForcedColorsChange,\n        );\n\n        return () => {\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_REDUCED_MOTION),\n                onPrefersReducedMotionChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n                onPrefersColorSchemeChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(FORCED_COLORS),\n                onForcedColorsChange,\n            );\n        };\n    }, [hasMounted]);\n\n    return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}

package/build/es/hooks/useScreen/useScreen.js

@@ -1,2 +1,2 @@
-import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import r from"../../core/tokens.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=r,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[r,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,s(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!r||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),r=f(i);e.push([a,r]),o(a,r)}return()=>{for(const[i,t]of e)n(i,t)}},[f,r]),{...d}};export{f as useScreen};
+import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import s from"../../tokens.js";import{getInitialMediaQueryMatch as r,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=s,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[s,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,r(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!s||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),s=f(i);e.push([a,s]),o(a,s)}return()=>{for(const[i,t]of e)n(i,t)}},[f,s]),{...d}};export{f as useScreen};
 //# sourceMappingURL=useScreen.js.map

package/build/es/hooks/useScreen/useScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../core/index.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport {\n    ActionType,\n    type ScreenAction,\n    type ScreenState,\n    reducer,\n} from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    Number.parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px)`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        const initialMatches = Object.entries(MEDIA_RULES).map(\n            ([key, rule]) => [key, getInitialMediaQueryMatch(rule)],\n        );\n\n        for (const [key, value] of initialMatches) {\n            if (value) {\n                deviceDispatch(createAction(key as keyof ScreenState));\n            }\n        }\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        for (const [key, rule] of Object.entries(MEDIA_RULES)) {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        }\n\n        return () => {\n            for (const [queryList, listener] of eventListenerPairs) {\n                removeMediaQueryListener(queryList, listener);\n            }\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","Number","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","initialMatches","Object","entries","map","key","rule","getInitialMediaQueryMatch","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"qSAcA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,OAAOC,SAASJ,EAAWK,QAAQ,KAAM,KAEvCC,EAAiD,CACnDC,cAAe,eACXL,EAAoBF,EAAWQ,QAAU,OAE7CC,eAAgB,eAAeT,EAAWQ,2BACtCN,EAAoBF,EAAWU,OAAS,OAE5CC,cAAe,eAAeX,EAAWU,0BACrCR,EAAoBF,EAAWY,IAAM,OAEzCC,WAAY,eAAeb,EAAWY,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAAAA,CAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,EAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ3B,GAAa4B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeX,EAAamB,KAGrC,IAEH,MAAMI,EAAiBC,EAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeX,EAAamB,OAIxC,IAGJ,OAAAL,EAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ3B,GAAc,CACnD,MAAMyC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}
+{"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport {\n    ActionType,\n    type ScreenAction,\n    type ScreenState,\n    reducer,\n} from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n    Number.parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n    isSmallDevice: `(max-width: ${\n        breakpointsAsNumber(breakpoint.medium) - 1\n    }px)`,\n    isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.large) - 1\n    }px)`,\n    isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n        breakpointsAsNumber(breakpoint.xl) - 1\n    }px)`,\n    isXlDevice: `(min-width: ${breakpoint.xl})`,\n    isPortrait: \"(orientation: portrait)\",\n    isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n    type:\n        property === \"isLandscape\" || property === \"isPortrait\"\n            ? ActionType.orientation\n            : ActionType.deviceSize,\n    property,\n});\n\n/**\n * Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [device, deviceDispatch] = useReducer(reducer, {\n        isSmallDevice: false,\n        isMediumDevice: false,\n        isLargeDevice: false,\n        isXlDevice: false,\n        isLandscape: false,\n        isPortrait: false,\n    });\n\n    useEffect(() => {\n        setHasMounted(true);\n        const initialMatches = Object.entries(MEDIA_RULES).map(\n            ([key, rule]) => [key, getInitialMediaQueryMatch(rule)],\n        );\n\n        for (const [key, value] of initialMatches) {\n            if (value) {\n                deviceDispatch(createAction(key as keyof ScreenState));\n            }\n        }\n    }, []);\n\n    const createListener = useCallback(\n        (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n            requestAnimationFrame(() => {\n                if (e.matches) {\n                    deviceDispatch(createAction(key));\n                }\n            });\n        },\n        [],\n    );\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const eventListenerPairs: Array<\n            [MediaQueryList, (e: MediaQueryListEvent) => void]\n        > = [];\n\n        for (const [key, rule] of Object.entries(MEDIA_RULES)) {\n            const queryList = window.matchMedia(rule);\n            const listener = createListener(key as keyof ScreenState);\n            eventListenerPairs.push([queryList, listener]);\n            addMediaQueryListener(queryList, listener);\n        }\n\n        return () => {\n            for (const [queryList, listener] of eventListenerPairs) {\n                removeMediaQueryListener(queryList, listener);\n            }\n        };\n    }, [createListener, hasMounted]);\n\n    return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","Number","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","initialMatches","Object","entries","map","key","rule","getInitialMediaQueryMatch","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"gSAcA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,OAAOC,SAASJ,EAAWK,QAAQ,KAAM,KAEvCC,EAAiD,CACnDC,cAAe,eACXL,EAAoBF,EAAWQ,QAAU,OAE7CC,eAAgB,eAAeT,EAAWQ,2BACtCN,EAAoBF,EAAWU,OAAS,OAE5CC,cAAe,eAAeX,EAAWU,0BACrCR,EAAoBF,EAAWY,IAAM,OAEzCC,WAAY,eAAeb,EAAWY,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAAAA,CAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,EAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ3B,GAAa4B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeX,EAAamB,KAGrC,IAEH,MAAMI,EAAiBC,EAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeX,EAAamB,OAIxC,IAGJ,OAAAL,EAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ3B,GAAc,CACnD,MAAMyC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}

package/build/es/tailwind/plugins/jokulTypographyPlugin.js

@@ -1,2 +1,2 @@
-import{k as o}from"../../../index-DOHQmuhD.js";import t from"tailwindcss/plugin.js";import s from"../../core/tokens.js";const{breakpoint:e,typography:i}=s,m=t(({addComponents:t})=>{const s=Object.entries(i.style).map(([t,s])=>[`.${o(t)}`,{...s.small,[`@media (min-width: ${e.medium})`]:{...s.base}}]);t(Object.fromEntries(s))});export{m as jokulTypographyPlugin};
+import e from"tailwindcss/plugin.js";import t from"../../tokens.js";const n=new RegExp("([\\p{Ll}\\d])(\\p{Lu})","gu"),r=new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])","gu"),c=new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d","u"),o=/[^\p{L}\d]+/giu,i="$1\0$2";function s(e){let t=e.trim();t=t.replace(n,i).replace(r,i),t=t.replace(o,"\0");let c=0,s=t.length;for(;"\0"===t.charAt(c);)c++;if(c===s)return[];for(;"\0"===t.charAt(s-1);)s--;return t.slice(c,s).split(/\0/g)}function l(e){const t=s(e);for(let e=0;e<t.length;e++){const n=t[e],r=c.exec(n);if(r){const c=r.index+(r[1]??r[2]).length;t.splice(e,1,n.slice(0,c),n.slice(c))}}return t}function p(e,t){const[n,r,c]=function(e,t={}){const n=t.split??(t.separateNumbers?l:s),r=t.prefixCharacters??"",c=t.suffixCharacters??"";let o=0,i=e.length;for(;o<e.length;){const t=e.charAt(o);if(!r.includes(t))break;o++}for(;i>o;){const t=i-1,n=e.charAt(t);if(!c.includes(n))break;i=t}return[e.slice(0,o),n(e.slice(o,i)),e.slice(i)]}(e,t);return n+r.map(function(e){return!1===e?e=>e.toLowerCase():t=>t.toLocaleLowerCase(e)}(t?.locale)).join(t?.delimiter??" ")+c}function u(e,t){return p(e,{delimiter:"-",...t})}const{textStyle:a}=t,f=e(({addComponents:e})=>{const t=Object.entries(a).map(([e,t])=>[`.${u(e)}`,{font:t}]);e(Object.fromEntries(t))});export{f as jokulTypographyPlugin};
 //# sourceMappingURL=jokulTypographyPlugin.js.map