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

package/build/cjs/components/text-area/BaseTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const [counterCurrent, setCounterCurrent] = useState(() => {\n            if (typeof value === \"undefined\") {\n                return 0;\n            }\n\n            if (typeof value === \"number\") {\n                return String(value).length;\n            }\n\n            return value.length;\n        });\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || value) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaRef, value, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            setCounterCurrent(e.target.value.length);\n            if (onChange) {\n                onChange(e);\n            }\n        }\n\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n        const counterLabel =\n            counter && counterCurrent > counterTotal\n                ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n                : undefined;\n\n        const invalid = Boolean(ariaInvalid || counterLabel);\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    value={value}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAWaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,EAAAA,SAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,SAEVC,EAAiBC,GAAsBJ,EAAAA,UAAS,GACjDK,EAAcC,EAAAA,OAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,EAAAA,UAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,GACD,CAACzB,EAAYqB,EAAab,EAAOS,EAAiBL,IAuBrD,MAAMe,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAGvC,OACIiC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EAEf,EAsCYlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EAEhB,EA8CY3B,SArCZ,SAAwB2B,GACpBxB,EAAkBwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EAEjB,EAiCYtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACGgC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5C5D,IAA6BhB,EAAiBgB,IAyDtD5C,EAAa6C,YAAc"}
+{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState(defaultValue);\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [\n            autoExpand,\n            textAreaRef,\n            textAreaValue,\n            textAreaFocused,\n            counterCurrent,\n        ]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","textAreaElement","current","height","scrollHeight","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"mKAYaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GACtBC,EAAAA,SAASf,IACNgB,EAAiBC,GAAsBF,EAAAA,UAAS,GACjDG,EAAcC,EAAAA,OAA4B,MAC1CC,EACDvB,GAA0CqB,EAGzCG,EAAgBT,EAAeL,EAAQM,EACvCS,EAAqBV,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDuB,EAAiBC,EAAAA,gBAAgBH,EAAeV,GAChDc,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBpB,OADIT,GAAWwB,EAAiBE,IAIxDI,EAAAA,UAAU,KACN,MAAMC,EAAkBV,EAAYW,QACpC,GAAID,EAAiB,CACjB,IAAKhC,EAED,YADAgC,EAAgBxB,MAAM0B,OAAS,IAI/BhB,GAAmBK,GACnBS,EAAgBxB,MAAM0B,OAAS,OAC/BF,EAAgBxB,MAAM0B,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBxB,MAAM0B,OAAS,EAEvC,GACD,CACClC,EACAsB,EACAC,EACAL,EACAO,IAiCJ,MAAMW,EAAgB,CAClBC,UAAWrC,EAAa,cAAW,GAGvC,OACIsC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcT,EACd,mBAAkBL,EAAiB,EAEnCe,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcX,EACdS,UAAW,sDAAsDlC,SACjEF,OApCZ,SAAsBuC,GAClBvB,GAAmB,GACfhB,GACAA,EAAOuC,EAEf,EAgCYtC,QA5CZ,SAAuBsC,GACnBvB,GAAmB,GACff,GACAA,EAAQsC,EAEhB,EAwCY/B,SA/BZ,SAAwB+B,GACf5B,GACDE,EAAqB0B,EAAEC,OAAOlC,OAG9BE,GACAA,EAAS+B,EAEjB,EAwBY3C,IAAKuB,EACLd,MAAO,IAAKA,KAAU4B,GACtB9B,YAAAA,KACIkB,KACAZ,IAEPX,GACGqC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAf,EAAe,MAAcE,MAEhC1B,EAAQ2C,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV/B,MAAO,CACF,oBAtCAyB,EAuCGJ,EAvCcgB,EAwCdlB,EAvCxBM,GAAW,GAGE,IAAVY,EAFI,EAEyB,IAAVZ,EAAiBY,GAkCa,aAtC5D,IAA6BZ,EAAiBY,IAmDtDjD,EAAakD,YAAc"}

package/build/cjs/components/text-area/counter.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=new TextEncoder;exports.getCounterValue=function(t,r="characters"){if(typeof t>"u")return 0;const n="string"==typeof t?t:Array.isArray(t)?t.join(""):String(t);return"bytes"===r?e.encode(n).length:n.length};
+//# sourceMappingURL=counter.cjs.map

package/build/cjs/components/text-area/counter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.cjs","sources":["../../../../src/components/text-area/counter.ts"],"sourcesContent":["import type { CounterStrategy } from \"./types.js\";\n\nconst textEncoder = new TextEncoder();\n\nexport function getCounterValue(\n    value: string | number | readonly string[] | undefined,\n    strategy: CounterStrategy = \"characters\",\n): number {\n    if (typeof value === \"undefined\") {\n        return 0;\n    }\n\n    const normalizedValue =\n        typeof value === \"string\"\n            ? value\n            : Array.isArray(value)\n              ? value.join(\"\")\n              : String(value);\n\n    if (strategy === \"bytes\") {\n        return textEncoder.encode(normalizedValue).length;\n    }\n\n    return normalizedValue.length;\n}\n"],"names":["textEncoder","TextEncoder","value","strategy","normalizedValue","Array","isArray","join","String","encode","length"],"mappings":"gFAEA,MAAMA,EAAc,IAAIC,oCAEjB,SACHC,EACAC,EAA4B,cAE5B,UAAWD,EAAU,IACjB,OAAO,EAGX,MAAME,EACe,iBAAVF,EACDA,EACAG,MAAMC,QAAQJ,GACZA,EAAMK,KAAK,IACXC,OAAON,GAEnB,MAAiB,UAAbC,EACOH,EAAYS,OAAOL,GAAiBM,OAGxCN,EAAgBM,MAC3B"}

package/build/cjs/components/text-area/counter.d.cts

@@ -0,0 +1,2 @@
+import { CounterStrategy } from './types.cjs';
+export declare function getCounterValue(value: string | number | readonly string[] | undefined, strategy?: CounterStrategy): number;

package/build/cjs/components/text-area/types.d.cts

@@ -1,8 +1,28 @@
 import { TextareaHTMLAttributes } from 'react';
 import { InputGroupProps } from '../input-group/types.cjs';
+export type CounterStrategy = "characters" | "bytes";
 export type Counter = {
-    /** Antall tegn før telleren når maksimum og vi viser en feilmelding */
+    /**
+     * Maksverdi for telleren.
+     *
+     * Enheten avhenger av `strategy`:
+     * - `"characters"`: antall tegn
+     * - `"bytes"`: antall UTF-8-bytes
+     */
     maxLength: number;
+    /**
+     * Bestemmer hva telleren måler.
+     *
+     * - "characters" teller tekst på samme måte som i dag og er standard
+     * - "bytes" teller antall UTF-8-bytes, for usecaser der backend eller API
+     *   håndhever en bytegrense
+     *
+     * Unngå å kombinere `strategy="bytes"` med native `maxLength` på
+     * `<textarea>`, siden nettleseren fortsatt håndhever `maxLength` som tegn.
+     *
+     * @default "characters"
+     */
+    strategy?: CounterStrategy;
     /**
      * Med teller vises en progress-bar i bunnen av tekstfeltet som krymper
      * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).

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

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

package/build/cjs/components/toggle-switch/types.d.cts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","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","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","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKAmGMA,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAAAA,SAASP,GAC7BQ,EAAeC,EAAAA,OAAsB,MACrCC,EAAcD,EAAAA,OAA2B,MAKzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAGPgC,EAAeC,EAAAA,gBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAEnE,MAAO,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA5CgBhB,IACpBZ,EAAY6B,QAAUjB,OA6CnBa,IA0BSK,CAAW1C,GAE3B,OAAO2C,EAAAA,IAAC9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,yDAlBZ,KAC7B,MAAM4B,EAAUkB,EAAAA,WAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAIR,OAAOnB"}
+{"version":3,"file":"Tooltip.cjs","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","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","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKAmGMA,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAAAA,SAASP,GAC7BQ,EAAeC,EAAAA,OAAsB,MACrCC,EAAcD,EAAAA,OAA2B,MAKzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAGPgC,EAAeC,EAAAA,gBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAEnE,MAAO,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA5CgBhB,IACpBZ,EAAY6B,QAAUjB,OA6CnBa,IA0BSK,CAAW1C,GAE3B,OAAO2C,EAAAA,IAAC9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,yDAlBZ,KAC7B,MAAM4B,EAAUkB,EAAAA,WAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAIR,OAAOnB"}

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

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

package/build/cjs/components/typography/Text.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react").forwardRef(function({as:r,className:s,size:o="m",bold:a,short:l,srOnly:c,...i},d){const n=r||"p";return e.jsx(n,{className:t.clsx("jkl-text",c&&"jkl-sr-only",s),"data-text-size":o,"data-bold":a||void 0,"data-short":l||void 0,ref:d,...i})});exports.Text=r;
+//# sourceMappingURL=Text.cjs.map

package/build/cjs/components/typography/Text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    { as, className, size = \"m\", bold, short, srOnly, ...rest }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","rest","ref","Component","jsx","clsx"],"mappings":"6JASaA,mBAAsBC,WAAW,UAGxCC,GAAAA,EAAIC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,KAAAA,EAAMC,MAAAA,EAAOC,OAAAA,KAAWC,GACrDC,GAEA,MAAMC,EAAaR,GAAM,IACzB,OACIS,EAAAA,IAACD,EAAA,CACGP,UAAWS,EAAAA,KAAK,WAAYL,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrBG,IAAAA,KACID,GAGhB"}

package/build/cjs/components/typography/Text.d.cts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextElement, TextProps } from './types.cjs';
+type TextComponent = <As extends TextElement = "p">(props: TextProps<As>) => React.ReactElement | null;
+export declare const Text: TextComponent;
+export {};

package/build/cjs/components/typography/Title.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react").forwardRef(function({className:t,size:s="l",as:l,srOnly:a,...c},i){const o=l||"h2";return e.jsx(o,{className:r.clsx("jkl-title",a&&"jkl-sr-only",t),"data-text-size":s,ref:i,...c})});exports.Title=t;
+//# sourceMappingURL=Title.cjs.map

package/build/cjs/components/typography/Title.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(\"jkl-title\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAK,YAAaL,GAAU,cAAeH,GACtD,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}

package/build/cjs/components/typography/Title.d.cts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TitleElement, TitleProps } from './types.cjs';
+type TitleComponent = <As extends TitleElement = "h2">(props: TitleProps<As>) => React.ReactElement | null;
+export declare const Title: TitleComponent;
+export {};

package/build/cjs/components/typography/index.cjs

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

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

@@ -0,0 +1,3 @@
+export { Text } from './Text.cjs';
+export { Title } from './Title.cjs';
+export type { TextProps, TextSize, TitleProps, TitleSize } from './types.cjs';

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

@@ -0,0 +1,48 @@
+import { PolymorphicPropsWithRef } from '../../utilities/index.cjs';
+export type TextElement = "p" | "span" | "label" | "legend" | "small" | "strong" | "em" | "code" | "kbd" | "samp" | "var";
+export type TitleElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "legend";
+export type TextSize = "xs" | "s" | "m" | "l";
+export type TitleSize = "xs" | "s" | "m" | "l" | "xl";
+type TextOwnProps = {
+    /**
+     * Visuell størrelse på teksten. Tilsvarer font-size-tokens i Jøkul.
+     * @default "m"
+     */
+    size?: TextSize;
+    /**
+     * Uthever teksten (font-weight: bold).
+     * @default false
+     */
+    bold?: boolean;
+    /**
+     * Setter mindre linjehøyde — bruk når teksten i all hovedsak går over
+     * én linje (f.eks. i tabellceller eller knapper).
+     * @default false
+     */
+    short?: boolean;
+    /**
+     * Skjuler elementet visuelt, men beholder det for skjermlesere.
+     * Bruk for å gi ekstra kontekst til assistive teknologier uten å
+     * påvirke det visuelle.
+     * @default false
+     */
+    srOnly?: boolean;
+};
+type TitleOwnProps = {
+    /**
+     * Visuell størrelse på tittelen. Frakoblet fra `as` — velg semantisk
+     * nivå via `as`, og visuell størrelse via `size`.
+     * @default "l"
+     */
+    size?: TitleSize;
+    /**
+     * Skjuler elementet visuelt, men beholder det for skjermlesere.
+     * Bruk for å beholde riktig overskrifts-hierarki i skjermlesere
+     * uten å vise tittelen visuelt.
+     * @default false
+     */
+    srOnly?: boolean;
+};
+export type TextProps<As extends TextElement = "p"> = PolymorphicPropsWithRef<As, TextOwnProps>;
+export type TitleProps<As extends TitleElement = "h2"> = PolymorphicPropsWithRef<As, TitleOwnProps>;
+export {};

package/build/cjs/hooks/useAnimatedHeight/types.d.cts

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

package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../core/tokens.cjs"),r=require("../useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../usePreviousValue/usePreviousValue.cjs");exports.useAnimatedHeight=function(i,s){const o=n.usePreviousValue(i),u=s?.easing||"standard",l=s?.timing||"productive",c=s?.display||"block",a=`${t.motion.timing[l]} height ${t.motion.easing[u]}`,{prefersReducedMotion:d}=r.useBrowserPreferences(),f=e.useRef(),y=e.useRef(),m=e.useRef(null);function g(e){const t=m.current;t&&e.target===t&&(i?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),s?.onTransitionEnd?.(i,m))}const v=e.useCallback(()=>{const e=m.current;if(e&&void 0!==o){if(i){if(i&&o)return}else if(e.style.display="none",!o)return;if(s?.onTransitionStart?.(i,m),d)return e.removeAttribute("style"),i?s?.onFirstVisible?.(i,m):e.style.display="none",void s?.onTransitionEnd?.(i,m);if(e.style.transition=a,e.style.display=c,e.style.overflow="hidden",i)s?.onFirstVisible?.(i,m),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`,f.current=requestAnimationFrame(()=>{y.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[i,s,o,a,d,c]);return e.useEffect(()=>{v()},[i,v]),e.useEffect(()=>{const e=m.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),e.useEffect(()=>{const e=f.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[m,v]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../tokens.cjs"),r=require("../useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../usePreviousValue/usePreviousValue.cjs");exports.useAnimatedHeight=function(i,s){const o=n.usePreviousValue(i),u=s?.easing||"standard",l=s?.timing||"productive",c=s?.display||"block",a=`${t.motion.timing[l]} height ${t.motion.easing[u]}`,{prefersReducedMotion:d}=r.useBrowserPreferences(),f=e.useRef(),y=e.useRef(),m=e.useRef(null);function g(e){const t=m.current;t&&e.target===t&&(i?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),s?.onTransitionEnd?.(i,m))}const v=e.useCallback(()=>{const e=m.current;if(e&&void 0!==o){if(i){if(i&&o)return}else if(e.style.display="none",!o)return;if(s?.onTransitionStart?.(i,m),d)return e.removeAttribute("style"),i?s?.onFirstVisible?.(i,m):e.style.display="none",void s?.onTransitionEnd?.(i,m);if(e.style.transition=a,e.style.display=c,e.style.overflow="hidden",i)s?.onFirstVisible?.(i,m),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`,f.current=requestAnimationFrame(()=>{y.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[i,s,o,a,d,c]);return e.useEffect(()=>{v()},[i,v]),e.useEffect(()=>{const e=m.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),e.useEffect(()=>{const e=f.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[m,v]};
 //# sourceMappingURL=useAnimatedHeight.cjs.map

package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeight.cjs","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":["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":"4RAiBO,SACHA,EACAC,GAEA,MAAMC,EAAUC,EAAAA,iBAAiBH,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,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,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,EAAAA,YAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,IAAKF,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,IAGhE0B,OAAAA,EAAAA,UAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAAA,UAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAAA,UAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeight.cjs","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":["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":"uRAiBO,SACHA,EACAC,GAEA,MAAMC,EAAUC,EAAAA,iBAAiBH,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,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,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,EAAAA,YAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,IAAKF,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,IAGhE0B,OAAAA,EAAAA,UAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAAA,UAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAAA,UAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}

package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../core/tokens.cjs"),r=require("../useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../usePreviousValue/usePreviousValue.cjs");exports.useAnimatedHeightBetween=function(s,i){const o=n.usePreviousValue(s),a=i?.easing||"standard",u=i?.timing||"productive",c=`${t.motion.timing[u]} height ${t.motion.easing[a]}`,{prefersReducedMotion:d}=r.useBrowserPreferences(),l=e.useRef(),f=e.useRef(),y=e.useRef(null),p=e.useCallback(e=>{const t=y.current;t&&e.target===t&&(t.removeAttribute("style"),i?.onTransitionEnd?.(s,y))},[i,s]),m=e.useCallback(()=>{const e=y.current;if(e&&(void 0===o&&(e.dataset.expanded=s?"true":"false"),!(!s&&!o||s&&o))){if(i?.onTransitionStart?.(s,y),d)return e.removeAttribute("style"),e.dataset.expanded=s?"true":"false",void i?.onTransitionEnd?.(s,y);s?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const i=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",`${i}px`),s.dataset.expanded="true"})})}(y,c,l,f):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const i=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",`${i}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"})})}(y,c,l,f)}},[o,s,i,d,c]);return e.useEffect(()=>{m()},[s,m]),e.useEffect(()=>{const e=y.current;return e&&e.addEventListener("transitionend",p),()=>{e&&e.removeEventListener("transitionend",p)}},[s]),e.useEffect(()=>{const e=l.current,t=f.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[y,m]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../tokens.cjs"),r=require("../useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../usePreviousValue/usePreviousValue.cjs");exports.useAnimatedHeightBetween=function(s,i){const o=n.usePreviousValue(s),a=i?.easing||"standard",u=i?.timing||"productive",c=`${t.motion.timing[u]} height ${t.motion.easing[a]}`,{prefersReducedMotion:d}=r.useBrowserPreferences(),l=e.useRef(),f=e.useRef(),y=e.useRef(null),p=e.useCallback(e=>{const t=y.current;t&&e.target===t&&(t.removeAttribute("style"),i?.onTransitionEnd?.(s,y))},[i,s]),m=e.useCallback(()=>{const e=y.current;if(e&&(void 0===o&&(e.dataset.expanded=s?"true":"false"),!(!s&&!o||s&&o))){if(i?.onTransitionStart?.(s,y),d)return e.removeAttribute("style"),e.dataset.expanded=s?"true":"false",void i?.onTransitionEnd?.(s,y);s?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const i=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",`${i}px`),s.dataset.expanded="true"})})}(y,c,l,f):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const i=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",`${i}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"})})}(y,c,l,f)}},[o,s,i,d,c]);return e.useEffect(()=>{m()},[s,m]),e.useEffect(()=>{const e=y.current;return e&&e.addEventListener("transitionend",p),()=>{e&&e.removeEventListener("transitionend",p)}},[s]),e.useEffect(()=>{const e=l.current,t=f.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[y,m]};
 //# sourceMappingURL=useAnimatedHeightBetween.cjs.map

package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeightBetween.cjs","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":["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":"mSAiFO,SACHA,EACAC,GAEA,MAAMC,EAAcC,EAAAA,iBAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,MAEvBG,EAAsBC,EAAAA,YACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAAA,YAAY,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,IAG5DgC,OAAAA,EAAAA,UAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAAA,UAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAAA,UAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeightBetween.cjs","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":["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":"8RAiFO,SACHA,EACAC,GAEA,MAAMC,EAAcC,EAAAA,iBAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,MAEvBG,EAAsBC,EAAAA,YACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAAA,YAAY,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,IAG5DgC,OAAAA,EAAAA,UAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAAA,UAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAAA,UAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}

package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs

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

package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoAnimateHeight.cjs","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":["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":"gSAiCO,SACHA,EACAC,GAEA,MAAMC,EAAuBC,EAAAA,iBAAiBH,IACvCI,EAAgBC,GAAqBC,EAAAA,SAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,MAEvBG,EAAsBC,EAAAA,YACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAAA,YAAY,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,EAAAA,YAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,IAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJuB,OAAAA,EAAAA,UAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAAA,UAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAAA,UAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}
+{"version":3,"file":"useAutoAnimateHeight.cjs","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":["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":"2RAiCO,SACHA,EACAC,GAEA,MAAMC,EAAuBC,EAAAA,iBAAiBH,IACvCI,EAAgBC,GAAqBC,EAAAA,SAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,EAAAA,OAAU,MAEvBG,EAAsBC,EAAAA,YACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAAA,YAAY,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,EAAAA,YAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,IAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJuB,OAAAA,EAAAA,UAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAAA,UAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAAA,UAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}

package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.d.cts

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

package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.d.cts

@@ -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/cjs/hooks/useBrowserPreferences/useBrowserPreferences.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBrowserPreferences.cjs","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","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"6IAcMA,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,kCAQkB,KACjC,MAAOI,EAAYC,GAAiBC,EAAAA,UAAS,IAEtCN,EAAOO,GAAYC,EAAAA,WAAWT,EAASJ,GAE9Cc,OAAAA,EAAAA,UAAU,KACNJ,GAAc,GACd,MAAMT,EAAuBc,EAAAA,0BACzBlB,GAEEK,EAAqBa,EAAAA,0BACvBjB,GAEE,QACA,OACAK,EAAeY,EAAAA,0BAA0BhB,GAC/Ca,EAAS,CACLL,KAAMX,EACNY,MAAOP,IAEXW,EAAS,CACLL,KAAMX,EACNY,MAAON,IAEXU,EAAS,CAAEL,KAAMX,EAAyBY,MAAOL,KAClD,IAEHW,EAAAA,UAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLL,KAAMX,EACNY,MAAOW,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLL,KAAMX,EACNY,MAAOW,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEL,KAAMX,EAAyBY,MAAOW,EAAEC,WAGvDG,OAAAA,EAAAA,sBACIP,OAAOC,WAAWpB,GAClBqB,GAEJK,EAAAA,sBACIP,OAAOC,WAAWnB,GAClBuB,GAEJE,EAAAA,sBACIP,OAAOC,WAAWlB,GAClBuB,GAGG,KACHE,EAAAA,yBACIR,OAAOC,WAAWpB,GAClBqB,GAEJM,EAAAA,yBACIR,OAAOC,WAAWnB,GAClBuB,GAEJG,EAAAA,yBACIR,OAAOC,WAAWlB,GAClBuB,KAGT,CAACb,IAEG,IAAKJ"}
+{"version":3,"file":"useBrowserPreferences.cjs","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","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"6IAcMA,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,kCAQkB,KACjC,MAAOI,EAAYC,GAAiBC,EAAAA,UAAS,IAEtCN,EAAOO,GAAYC,EAAAA,WAAWT,EAASJ,GAE9Cc,OAAAA,EAAAA,UAAU,KACNJ,GAAc,GACd,MAAMT,EAAuBc,EAAAA,0BACzBlB,GAEEK,EAAqBa,EAAAA,0BACvBjB,GAEE,QACA,OACAK,EAAeY,EAAAA,0BAA0BhB,GAC/Ca,EAAS,CACLL,KAAMX,EACNY,MAAOP,IAEXW,EAAS,CACLL,KAAMX,EACNY,MAAON,IAEXU,EAAS,CAAEL,KAAMX,EAAyBY,MAAOL,KAClD,IAEHW,EAAAA,UAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLL,KAAMX,EACNY,MAAOW,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLL,KAAMX,EACNY,MAAOW,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEL,KAAMX,EAAyBY,MAAOW,EAAEC,WAGvDG,OAAAA,EAAAA,sBACIP,OAAOC,WAAWpB,GAClBqB,GAEJK,EAAAA,sBACIP,OAAOC,WAAWnB,GAClBuB,GAEJE,EAAAA,sBACIP,OAAOC,WAAWlB,GAClBuB,GAGG,KACHE,EAAAA,yBACIR,OAAOC,WAAWpB,GAClBqB,GAEJM,EAAAA,yBACIR,OAAOC,WAAWnB,GAClBuB,GAEJG,EAAAA,yBACIR,OAAOC,WAAWlB,GAClBuB,KAGT,CAACb,IAEG,IAAKJ"}

package/build/cjs/hooks/useBrowserPreferences/useBrowserPreferences.d.cts

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

package/build/cjs/hooks/useScreen/useScreen.cjs

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

package/build/cjs/hooks/useScreen/useScreen.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScreen.cjs","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","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":"0MAcQA,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,aAAWC,YACXD,EAAAA,WAAWE,WACrBJ,SAAAA,sBAOqB,KACrB,MAAOK,EAAYC,GAAiBC,EAAAA,UAAS,IAEtCC,EAAQC,GAAkBC,EAAAA,WAAWC,EAAAA,QAAS,CACjDrB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBe,EAAAA,UAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ1B,GAAa2B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAAAA,0BAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeV,EAAakB,KAGrC,IAEH,MAAMI,EAAiBC,EAAAA,YAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeV,EAAakB,OAIxC,IAGJL,OAAAA,EAAAA,UAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ1B,GAAc,CACnD,MAAMwC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAAA,sBAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAAA,yBAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}
+{"version":3,"file":"useScreen.cjs","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","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":"qMAcQA,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,aAAWC,YACXD,EAAAA,WAAWE,WACrBJ,SAAAA,sBAOqB,KACrB,MAAOK,EAAYC,GAAiBC,EAAAA,UAAS,IAEtCC,EAAQC,GAAkBC,EAAAA,WAAWC,EAAAA,QAAS,CACjDrB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBe,EAAAA,UAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ1B,GAAa2B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAAAA,0BAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeV,EAAakB,KAGrC,IAEH,MAAMI,EAAiBC,EAAAA,YAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeV,EAAakB,OAIxC,IAGJL,OAAAA,EAAAA,UAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ1B,GAAc,CACnD,MAAMwC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAAA,sBAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAAA,yBAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}

package/build/cjs/tailwind/plugins/jokulTypographyPlugin.cjs

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

package/build/cjs/tailwind/plugins/jokulTypographyPlugin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"jokulTypographyPlugin.cjs","sources":["../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["import { kebabCase } from \"change-case\";\nimport plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../core/tokens.js\";\n\nconst { breakpoint, typography } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n    const mappedTextStyles = Object.entries(typography.style).map(\n        ([name, style]) => [\n            `.${kebabCase(name)}`,\n            {\n                ...style.small,\n                [`@media (min-width: ${breakpoint.medium})`]: {\n                    ...style.base,\n                },\n            },\n        ],\n    );\n\n    addComponents(Object.fromEntries(mappedTextStyles));\n});\n"],"names":["breakpoint","typography","tokens","jokulTypographyPlugin","plugin","addComponents","mappedTextStyles","Object","entries","style","map","name","kebabCase","small","medium","base","fromEntries"],"mappings":"sMAIQA,WAAAA,EAAYC,WAAAA,GAAeC,EAEtBC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3C,MAAMC,EAAmBC,OAAOC,QAAQP,EAAWQ,OAAOC,IACtD,EAAEC,EAAMF,KAAW,CACf,IAAIG,EAAAA,UAAUD,KACd,IACOF,EAAMI,MACT,CAAC,sBAAsBb,EAAWc,WAAY,IACvCL,EAAMM,SAMzBV,EAAcE,OAAOS,YAAYV"}
+{"version":3,"file":"jokulTypographyPlugin.cjs","sources":["../../../../../../node_modules/.pnpm/change-case@5.4.4/node_modules/change-case/dist/index.js","../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["// Regexps involved with splitting words in various case formats.\nconst SPLIT_LOWER_UPPER_RE = /([\\p{Ll}\\d])(\\p{Lu})/gu;\nconst SPLIT_UPPER_UPPER_RE = /(\\p{Lu})([\\p{Lu}][\\p{Ll}])/gu;\n// Used to iterate over the initial split result and separate numbers.\nconst SPLIT_SEPARATE_NUMBER_RE = /(\\d)\\p{Ll}|(\\p{L})\\d/u;\n// Regexp involved with stripping non-word characters from the result.\nconst DEFAULT_STRIP_REGEXP = /[^\\p{L}\\d]+/giu;\n// The replacement value for splits.\nconst SPLIT_REPLACE_VALUE = \"$1\\0$2\";\n// The default characters to keep after transforming case.\nconst DEFAULT_PREFIX_SUFFIX_CHARACTERS = \"\";\n/**\n * Split any cased input strings into an array of words.\n */\nexport function split(value) {\n    let result = value.trim();\n    result = result\n        .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)\n        .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);\n    result = result.replace(DEFAULT_STRIP_REGEXP, \"\\0\");\n    let start = 0;\n    let end = result.length;\n    // Trim the delimiter from around the output string.\n    while (result.charAt(start) === \"\\0\")\n        start++;\n    if (start === end)\n        return [];\n    while (result.charAt(end - 1) === \"\\0\")\n        end--;\n    return result.slice(start, end).split(/\\0/g);\n}\n/**\n * Split the input string into an array of words, separating numbers.\n */\nexport function splitSeparateNumbers(value) {\n    const words = split(value);\n    for (let i = 0; i < words.length; i++) {\n        const word = words[i];\n        const match = SPLIT_SEPARATE_NUMBER_RE.exec(word);\n        if (match) {\n            const offset = match.index + (match[1] ?? match[2]).length;\n            words.splice(i, 1, word.slice(0, offset), word.slice(offset));\n        }\n    }\n    return words;\n}\n/**\n * Convert a string to space separated lower case (`foo bar`).\n */\nexport function noCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    return (prefix +\n        words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? \" \") +\n        suffix);\n}\n/**\n * Convert a string to camel case (`fooBar`).\n */\nexport function camelCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    const lower = lowerFactory(options?.locale);\n    const upper = upperFactory(options?.locale);\n    const transform = options?.mergeAmbiguousCharacters\n        ? capitalCaseTransformFactory(lower, upper)\n        : pascalCaseTransformFactory(lower, upper);\n    return (prefix +\n        words\n            .map((word, index) => {\n            if (index === 0)\n                return lower(word);\n            return transform(word, index);\n        })\n            .join(options?.delimiter ?? \"\") +\n        suffix);\n}\n/**\n * Convert a string to pascal case (`FooBar`).\n */\nexport function pascalCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    const lower = lowerFactory(options?.locale);\n    const upper = upperFactory(options?.locale);\n    const transform = options?.mergeAmbiguousCharacters\n        ? capitalCaseTransformFactory(lower, upper)\n        : pascalCaseTransformFactory(lower, upper);\n    return prefix + words.map(transform).join(options?.delimiter ?? \"\") + suffix;\n}\n/**\n * Convert a string to pascal snake case (`Foo_Bar`).\n */\nexport function pascalSnakeCase(input, options) {\n    return capitalCase(input, { delimiter: \"_\", ...options });\n}\n/**\n * Convert a string to capital case (`Foo Bar`).\n */\nexport function capitalCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    const lower = lowerFactory(options?.locale);\n    const upper = upperFactory(options?.locale);\n    return (prefix +\n        words\n            .map(capitalCaseTransformFactory(lower, upper))\n            .join(options?.delimiter ?? \" \") +\n        suffix);\n}\n/**\n * Convert a string to constant case (`FOO_BAR`).\n */\nexport function constantCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    return (prefix +\n        words.map(upperFactory(options?.locale)).join(options?.delimiter ?? \"_\") +\n        suffix);\n}\n/**\n * Convert a string to dot case (`foo.bar`).\n */\nexport function dotCase(input, options) {\n    return noCase(input, { delimiter: \".\", ...options });\n}\n/**\n * Convert a string to kebab case (`foo-bar`).\n */\nexport function kebabCase(input, options) {\n    return noCase(input, { delimiter: \"-\", ...options });\n}\n/**\n * Convert a string to path case (`foo/bar`).\n */\nexport function pathCase(input, options) {\n    return noCase(input, { delimiter: \"/\", ...options });\n}\n/**\n * Convert a string to path case (`Foo bar`).\n */\nexport function sentenceCase(input, options) {\n    const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n    const lower = lowerFactory(options?.locale);\n    const upper = upperFactory(options?.locale);\n    const transform = capitalCaseTransformFactory(lower, upper);\n    return (prefix +\n        words\n            .map((word, index) => {\n            if (index === 0)\n                return transform(word);\n            return lower(word);\n        })\n            .join(options?.delimiter ?? \" \") +\n        suffix);\n}\n/**\n * Convert a string to snake case (`foo_bar`).\n */\nexport function snakeCase(input, options) {\n    return noCase(input, { delimiter: \"_\", ...options });\n}\n/**\n * Convert a string to header case (`Foo-Bar`).\n */\nexport function trainCase(input, options) {\n    return capitalCase(input, { delimiter: \"-\", ...options });\n}\nfunction lowerFactory(locale) {\n    return locale === false\n        ? (input) => input.toLowerCase()\n        : (input) => input.toLocaleLowerCase(locale);\n}\nfunction upperFactory(locale) {\n    return locale === false\n        ? (input) => input.toUpperCase()\n        : (input) => input.toLocaleUpperCase(locale);\n}\nfunction capitalCaseTransformFactory(lower, upper) {\n    return (word) => `${upper(word[0])}${lower(word.slice(1))}`;\n}\nfunction pascalCaseTransformFactory(lower, upper) {\n    return (word, index) => {\n        const char0 = word[0];\n        const initial = index > 0 && char0 >= \"0\" && char0 <= \"9\" ? \"_\" + char0 : upper(char0);\n        return initial + lower(word.slice(1));\n    };\n}\nfunction splitPrefixSuffix(input, options = {}) {\n    const splitFn = options.split ?? (options.separateNumbers ? splitSeparateNumbers : split);\n    const prefixCharacters = options.prefixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;\n    const suffixCharacters = options.suffixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;\n    let prefixIndex = 0;\n    let suffixIndex = input.length;\n    while (prefixIndex < input.length) {\n        const char = input.charAt(prefixIndex);\n        if (!prefixCharacters.includes(char))\n            break;\n        prefixIndex++;\n    }\n    while (suffixIndex > prefixIndex) {\n        const index = suffixIndex - 1;\n        const char = input.charAt(index);\n        if (!suffixCharacters.includes(char))\n            break;\n        suffixIndex = index;\n    }\n    return [\n        input.slice(0, prefixIndex),\n        splitFn(input.slice(prefixIndex, suffixIndex)),\n        input.slice(suffixIndex),\n    ];\n}\n//# sourceMappingURL=index.js.map","import { kebabCase } from \"change-case\";\nimport plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../tokens.js\";\n\nconst { textStyle } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n    const mappedTextStyles = Object.entries(textStyle).map(([name, style]) => [\n        `.${kebabCase(name)}`,\n        {\n            font: style,\n        },\n    ]);\n\n    addComponents(Object.fromEntries(mappedTextStyles));\n});\n"],"names":["SPLIT_LOWER_UPPER_RE","RegExp","SPLIT_UPPER_UPPER_RE","SPLIT_SEPARATE_NUMBER_RE","DEFAULT_STRIP_REGEXP","SPLIT_REPLACE_VALUE","split","value","result","trim","replace","start","end","length","charAt","slice","splitSeparateNumbers","words","i","word","match","exec","offset","index","splice","noCase","input","options","prefix","suffix","splitFn","separateNumbers","prefixCharacters","suffixCharacters","prefixIndex","suffixIndex","char","includes","splitPrefixSuffix","map","locale","toLowerCase","toLocaleLowerCase","lowerFactory","join","delimiter","kebabCase","textStyle","tokens","jokulTypographyPlugin","plugin","addComponents","mappedTextStyles","Object","entries","name","style","font","fromEntries"],"mappings":"uJACMA,EAAuB,IAAAC,OAAA,0BAAA,MACvBC,EAAuB,IAAAD,OAAA,gCAAA,MAEvBE,EAA2B,WAAA,2BAAA,KAE3BC,EAAuB,iBAEvBC,EAAsB,SAMrB,SAASC,EAAMC,GAClB,IAAIC,EAASD,EAAME,OACnBD,EAASA,EACJE,QAAQV,EAAsBK,GAC9BK,QAAQR,EAAsBG,GACnCG,EAASA,EAAOE,QAAQN,EAAsB,MAC9C,IAAIO,EAAQ,EACRC,EAAMJ,EAAOK,OAEjB,KAAgC,OAAzBL,EAAOM,OAAOH,IACjBA,IACJ,GAAIA,IAAUC,EACV,MAAO,GACX,KAAkC,OAA3BJ,EAAOM,OAAOF,EAAM,IACvBA,IACJ,OAAOJ,EAAOO,MAAMJ,EAAOC,GAAKN,MAAM,MAC1C,CAIO,SAASU,EAAqBT,GACjC,MAAMU,EAAQX,EAAMC,GACpB,QAASW,EAAI,EAAGA,EAAID,EAAMJ,OAAQK,IAAK,CACnC,MAAMC,EAAOF,EAAMC,GACbE,EAAQjB,EAAyBkB,KAAKF,GAC5C,GAAIC,EAAO,CACP,MAAME,EAASF,EAAMG,OAASH,EAAM,IAAMA,EAAM,IAAIP,OACpDI,EAAMO,OAAON,EAAG,EAAGC,EAAKJ,MAAM,EAAGO,GAASH,EAAKJ,MAAMO,GACzD,CACJ,CACA,OAAOL,CACX,CAIO,SAASQ,EAAOC,EAAOC,GAC1B,MAAOC,EAAQX,EAAOY,GAqI1B,SAA2BH,EAAOC,EAAU,IACxC,MAAMG,EAAUH,EAAQrB,QAAUqB,EAAQI,gBAAkBf,EAAuBV,GAC7E0B,EAAmBL,EAAQK,kBA/KI,GAgL/BC,EAAmBN,EAAQM,kBAhLI,GAiLrC,IAAIC,EAAc,EACdC,EAAcT,EAAMb,OACxB,KAAOqB,EAAcR,EAAMb,QAAQ,CAC/B,MAAMuB,EAAOV,EAAMZ,OAAOoB,GAC1B,IAAKF,EAAiBK,SAASD,GAC3B,MACJF,GACJ,CACA,KAAOC,EAAcD,GAAa,CAC9B,MAAMX,EAAQY,EAAc,EACtBC,EAAOV,EAAMZ,OAAOS,GAC1B,IAAKU,EAAiBI,SAASD,GAC3B,MACJD,EAAcZ,CAClB,CACA,MAAO,CACHG,EAAMX,MAAM,EAAGmB,GACfJ,EAAQJ,EAAMX,MAAMmB,EAAaC,IACjCT,EAAMX,MAAMoB,GAEpB,CA7JoCG,CAAkBZ,EAAOC,GACzD,OAAQC,EACJX,EAAMsB,IA+Gd,SAAsBC,GAClB,OAAkB,IAAXA,EACAd,GAAUA,EAAMe,cAChBf,GAAUA,EAAMgB,kBAAkBF,EAC7C,CAnHkBG,CAAahB,GAASa,SAASI,KAAKjB,GAASkB,WAAa,KACpEhB,CACR,CAsEO,SAASiB,EAAUpB,EAAOC,GAC7B,OAAOF,EAAOC,EAAO,CAAEmB,UAAW,OAAQlB,GAC9C,CC1HA,MAAQoB,UAAAA,GAAcC,EAETC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3C,MAAMC,EAAmBC,OAAOC,QAAQP,GAAWR,IAAI,EAAEgB,EAAMC,KAAW,CACtE,IAAIV,EAAUS,KACd,CACIE,KAAMD,KAIdL,EAAcE,OAAOK,YAAYN","x_google_ignoreList":[0]}