@fremtind/jokul 0.24.0 → 0.25.0

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("@react-aria/toast"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),c=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs"),require("../../hooks/useId/useId.cjs"),require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs");const r=require("../icon/icons/CloseIcon.cjs");require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs");const i=require("../icon/icons/ErrorIcon.cjs");require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs");const t=require("../icon/icons/InfoIcon.cjs");require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs");const a=require("../icon/icons/SuccessIcon.cjs"),u=require("../icon/icons/WarningIcon.cjs");require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const j=require("../icon-button/IconButton.cjs"),l=require("../progress-bar/Countdown.cjs"),q=e=>{switch(e){case"error":return o.jsx(i.ErrorIcon,{className:"jkl-toast__icon"});case"info":return o.jsx(t.InfoIcon,{className:"jkl-toast__icon"});case"success":return o.jsx(a.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return o.jsx(u.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:i,state:t,...a}){var u;let I=s.useRef(null),{toastProps:m,titleProps:d}=e.useToast(a,t,I);const k="string"==typeof a.toast.content?a.toast.content:a.toast.content.content,h="string"==typeof a.toast.content?void 0:a.toast.content.title,f=null==(null==(u=a.toast.timer)?void 0:u.timerId),{prefersReducedMotion:g}=c.useBrowserPreferences();return s.useEffect((()=>{g&&"exiting"===a.toast.animation&&t.remove(a.toast.key)}),[g,a.toast.animation,a.toast.key,t]),o.jsxs("div",{...m,ref:I,className:n.clsx("jkl-toast",{"jkl-toast--info":"info"===a.toast.variant,"jkl-toast--error":"error"===a.toast.variant,"jkl-toast--warning":"warning"===a.toast.variant,"jkl-toast--success":"success"===a.toast.variant},i),"data-animation":a.toast.animation,onAnimationEnd:()=>{"exiting"===a.toast.animation&&t.remove(a.toast.key)},children:[o.jsx("span",{className:"jkl-toast__progress",children:a.toast.timeout?o.jsx(l.Countdown,{from:a.toast.timeout,isPaused:f,onAnimationEnd:o=>{o.stopPropagation()}}):null}),q(a.toast.variant),o.jsxs("div",{...d,className:"jkl-toast__content",children:[h&&o.jsx("p",{className:"jkl-toast__title",children:h}),o.jsx("p",{className:"jkl-toast__message",children:k})]}),o.jsx(j.IconButton,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{t.close(a.toast.key)},children:o.jsx(r.CloseIcon,{})})]})};
+//# sourceMappingURL=Toast.cjs.map

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

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

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

@@ -0,0 +1,11 @@
+import { AriaToastProps } from '@react-aria/toast';
+import { QueuedToast, ToastState } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent, ToastOptions } from './types.cjs;'
+interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {
+    className?: string;
+    state: ToastState<T>;
+    toast: QueuedToast<T> & ToastOptions;
+}
+export declare function Toast<T extends ToastContent>({ className, state, ...props }: ToastProps<T>): React.JSX.Element;
+export {};

package/build/cjs/components/toast/ToastRegion.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@react-aria/toast"),s=require("@react-stately/toast"),r=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),o=require("react-dom"),i=require("./Toast.cjs");function l({placement:s,state:o,...l}){let n=a.useRef(null),{regionProps:u}=t.useToastRegion(l,o,n);return e.jsx("div",{className:r.clsx("jkl","jkl-toast-region",{"jkl-toast-region--left":"left"===s}),children:e.jsx("div",{...u,ref:n,className:"jkl-toast-region__toasts",children:[...o.visibleToasts].reverse().map((t=>e.jsx(i.Toast,{toast:t,state:o},t.key)))})})}exports.ToastRegion=function({queue:t,placement:r}){const a=s.useToastQueue(t);return a.visibleToasts.length>0?o.createPortal(e.jsx(l,{state:a,placement:r}),document.body):null};
+//# sourceMappingURL=ToastRegion.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastRegion.cjs","sources":["../../../../src/components/toast/ToastRegion.tsx"],"sourcesContent":["import { type AriaToastRegionProps, useToastRegion } from \"@react-aria/toast\";\nimport { useToastQueue, type ToastState, ToastQueue } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Toast } from \"./Toast.js\";\nimport { ToastContent } from \"./types.js\";\n\ninterface ToastRegionProps<T extends ToastContent = ToastContent> extends AriaToastRegionProps {\n    placement: \"center\" | \"left\";\n    state: ToastState<T>;\n}\n\nfunction Region<T extends ToastContent>({ placement, state, ...props }: ToastRegionProps<T>) {\n    let ref = React.useRef(null);\n    let { regionProps } = useToastRegion(props, state, ref);\n\n    return (\n        <div\n            className={clsx(\"jkl\", \"jkl-toast-region\", {\n                \"jkl-toast-region--left\": placement === \"left\",\n            })}\n        >\n            <div {...regionProps} ref={ref} className=\"jkl-toast-region__toasts\">\n                {[...state.visibleToasts].reverse().map((toast) => (\n                    <Toast key={toast.key} toast={toast} state={state} />\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport function ToastRegion({ queue, placement }: { queue: ToastQueue<ToastContent>; placement: \"center\" | \"left\" }) {\n    const state = useToastQueue<ToastContent>(queue);\n    return state.visibleToasts.length > 0\n        ? ReactDOM.createPortal(<Region state={state} placement={placement} />, document.body)\n        : null;\n}\n"],"names":["Region","placement","state","props","ref","React","useRef","regionProps","useToastRegion","jsx","className","clsx","children","visibleToasts","reverse","map","toast","Toast","key","queue","useToastQueue","length","ReactDOM","createPortal","document","body"],"mappings":"iSAaA,SAASA,GAAiCC,UAAAA,EAAWC,MAAAA,KAAUC,IACvD,IAAAC,EAAMC,EAAMC,OAAO,OACjBC,YAAAA,GAAgBC,EAAAA,eAAeL,EAAOD,EAAOE,GAG/C,OAAAK,EAAAA,IAAC,MAAA,CACGC,UAAWC,EAAAA,KAAK,MAAO,mBAAoB,CACvC,yBAAwC,SAAdV,IAG9BW,SAAAH,EAAAA,IAAC,MAAK,IAAGF,EAAaH,IAAAA,EAAUM,UAAU,2BACrCE,SAAA,IAAIV,EAAMW,eAAeC,UAAUC,KAAKC,GACpCP,EAAAA,IAAAQ,EAAAA,MAAA,CAAsBD,MAAAA,EAAcd,MAAAA,GAAzBc,EAAME,UAKtC,qBAEO,UAAuBC,MAAAA,EAAOlB,UAAAA,IAC3B,MAAAC,EAAQkB,gBAA4BD,GAC1C,OAAOjB,EAAMW,cAAcQ,OAAS,EAC9BC,EAASC,aAAcd,EAAAA,IAAAT,EAAA,CAAOE,MAAAA,EAAcD,UAAAA,IAA0BuB,SAASC,MAC/E,IACV"}

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

@@ -0,0 +1,7 @@
+import { ToastQueue } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent } from './types.cjs;'
+export declare function ToastRegion({ queue, placement }: {
+    queue: ToastQueue<ToastContent>;
+    placement: "center" | "left";
+}): React.ReactPortal | null;

package/build/cjs/components/toast/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './toastContext.cjs;'
+export { type ToastContent } from './types.cjs;'

package/build/cjs/components/toast/toastContext.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@react-stately/toast"),o=require("react"),r=require("./ToastRegion.cjs"),i=o.createContext({add:()=>"missing-provider"});exports.ToastProvider=({children:s,maxVisibleToasts:u=5,placement:a="center"})=>{const[n]=o.useState(new t.ToastQueue({maxVisibleToasts:u,hasExitAnimation:!0}));return e.jsxs(i.Provider,{value:{add:(e,t)=>{let o=5e3;return"number"==typeof(null==t?void 0:t.timeout)?o=t.timeout:(null===(null==t?void 0:t.timeout)||"off"===(null==t?void 0:t.timeout))&&(o=void 0),n.add(e,{...t,timeout:o})}},children:[s,e.jsx(r.ToastRegion,{queue:n,placement:a})]})},exports.useToast=()=>o.useContext(i);
+//# sourceMappingURL=toastContext.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toastContext.cjs","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastContextProviderProps extends WithChildren {\n    maxVisibleToasts?: number;\n    /**\n     * @default \"center\"\n     */\n    placement?: \"center\" | \"left\";\n}\n\ntype ToastContext = {\n    add: (toast: ToastContent, options?: ToastOptions) => string;\n};\n\nconst context = createContext<ToastContext>({\n    add: () => {\n        return \"missing-provider\";\n    },\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n    children,\n    maxVisibleToasts = 5,\n    placement = \"center\",\n}) => {\n    const [queue] = useState(new ToastQueue<ToastContent>({ maxVisibleToasts, hasExitAnimation: true }));\n\n    return (\n        <context.Provider\n            value={{\n                add: (toast: ToastContent, options?: ToastOptions) => {\n                    let timeout: number | undefined = 5000;\n\n                    if (typeof options?.timeout === \"number\") {\n                        timeout = options.timeout as number;\n                    } else if (options?.timeout === null || options?.timeout === \"off\") {\n                        timeout = undefined;\n                    }\n\n                    return queue.add(toast, {\n                        ...options,\n                        timeout,\n                    });\n                },\n            }}\n        >\n            {children}\n            <ToastRegion queue={queue} placement={placement} />\n        </context.Provider>\n    );\n};\n"],"names":["context","createContext","add","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion","useContext"],"mappings":"yMAkBMA,EAAUC,EAAAA,cAA4B,CACxCC,IAAK,IACM,2CAM6C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAAA,SAAS,IAAIC,EAAAA,WAAyB,CAAEJ,iBAAAA,EAAkBK,kBAAkB,KAGxF,OAAAC,EAAAA,KAACV,EAAQW,SAAR,CACGC,MAAO,CACHV,IAAK,CAACW,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SACU,QAArB,MAAAD,OAAAA,EAAAA,EAASC,UAAyC,SAArB,MAAAD,OAAAA,EAAAA,EAASC,YACnCA,OAAA,GAGPT,EAAMJ,IAAIW,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAAAA,IAACC,EAAYA,YAAA,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB,mBA7BrC,IAAoBa,EAAAA,WAAWlB"}

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { WithChildren } from '../../core/types.cjs;'
+import { ToastContent, ToastOptions } from './types.cjs;'
+interface ToastContextProviderProps extends WithChildren {
+    maxVisibleToasts?: number;
+    /**
+     * @default "center"
+     */
+    placement?: "center" | "left";
+}
+type ToastContext = {
+    add: (toast: ToastContent, options?: ToastOptions) => string;
+};
+export declare const useToast: () => ToastContext;
+export declare const ToastProvider: FC<ToastContextProviderProps>;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/toggle-switch/ToggleSlider.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../hooks/useId/useId.cjs"),i=require("../../hooks/useSwipeGesture/useSwipeGesture.cjs"),t=require("./usePillStyles.cjs");exports.ToggleSlider=({children:d,labels:a,className:o="",onToggle:n,defaultValue:c,hideLegend:g=!1,density:u,...j})=>{const[k,p]=s.useState(c||a[0]),h=r.useId("jkl-toggle-slider"),m=r.useId("jkl-toggle-slider-legend"),_=s.useRef(null),x=k===a[1],b=t.usePillStyles(_,x,[u]),{gestureHandlers:y}=i.useSwipeGesture({onClick:e=>{const{value:l}=e.currentTarget;p(l),n(l)},onChange:(e,l)=>{p(l?a[1]:a[0]),n(l?a[1]:a[0])}}),{onClick:N,...S}=y;return"production"!==process.env.NODE_ENV&&console.error("WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library"),e.jsxs("fieldset",{...j,className:l.clsx("jkl-toggle-slider",o),"aria-labelledby":m,"data-testid":"jkl-toggle-slider","data-density":u,children:[e.jsx("div",{id:m,className:l.clsx("jkl-toggle-slider__legend",{"jkl-toggle-slider__legend--sr-only":g}),children:d}),e.jsxs("div",{className:"jkl-toggle-slider__inputs",...S,children:[a.map((r=>e.jsxs(s.Fragment,{children:[e.jsx("input",{className:"jkl-toggle-slider__input",type:"radio",value:r,checked:r===k,name:h,id:`${r}-${h}`,onClick:N,onChange:()=>{}}),e.jsx("label",{className:l.clsx("jkl-toggle-slider__label",{"jkl-toggle-slider__label--selected":r===k}),ref:r===k?_:void 0,htmlFor:`${r}-${h}`,children:r})]},r))),e.jsx("span",{className:"jkl-toggle-slider__pill",style:b,"aria-hidden":!0})]})]})};
+//# sourceMappingURL=ToggleSlider.cjs.map

package/build/cjs/components/toggle-switch/ToggleSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSlider.cjs","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, Fragment, MouseEventHandler, useRef, useState } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\ninterface Props extends WithChildren {\n    labels: [string, string];\n    onToggle: (value: string) => void;\n    defaultValue?: string;\n    className?: string;\n    hideLegend?: boolean;\n    density?: Density;\n}\n\nexport const ToggleSlider: FC<Props> = ({\n    children,\n    labels,\n    className = \"\",\n    onToggle,\n    defaultValue,\n    hideLegend = false,\n    density,\n    ...rest\n}) => {\n    const [currentLabel, setCurrentLabel] = useState(defaultValue || labels[0]);\n    const id = useId(\"jkl-toggle-slider\");\n    const legendId = useId(\"jkl-toggle-slider-legend\");\n    const activeRef = useRef<HTMLLabelElement>(null);\n\n    const shouldTransform = currentLabel === labels[1];\n    const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n    const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n        setCurrentLabel(pressed ? labels[1] : labels[0]);\n        onToggle(pressed ? labels[1] : labels[0]);\n    };\n\n    const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n        const { value } = event.currentTarget;\n        setCurrentLabel(value);\n        onToggle(value);\n    };\n\n    const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({ onClick: handleClick, onChange: handleChange });\n    const { onClick, ...swipeHandlers } = gestureHandlers;\n\n    if (process.env.NODE_ENV !== \"production\") {\n        console.error(\n            \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n        );\n    }\n\n    return (\n        <fieldset\n            {...rest}\n            className={clsx(\"jkl-toggle-slider\", className)}\n            aria-labelledby={legendId}\n            data-testid=\"jkl-toggle-slider\"\n            data-density={density}\n        >\n            <div\n                id={legendId}\n                className={clsx(\"jkl-toggle-slider__legend\", {\n                    \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n                })}\n            >\n                {children}\n            </div>\n            <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n                {labels.map((label) => (\n                    <Fragment key={label}>\n                        <input\n                            className=\"jkl-toggle-slider__input\"\n                            type=\"radio\"\n                            value={label}\n                            checked={label === currentLabel}\n                            name={id}\n                            id={`${label}-${id}`}\n                            onClick={onClick}\n                            onChange={() => {}}\n                        />\n                        <label\n                            className={clsx(\"jkl-toggle-slider__label\", {\n                                \"jkl-toggle-slider__label--selected\": label === currentLabel,\n                            })}\n                            ref={label === currentLabel ? activeRef : undefined}\n                            htmlFor={`${label}-${id}`}\n                        >\n                            {label}\n                        </label>\n                    </Fragment>\n                ))}\n                <span className=\"jkl-toggle-slider__pill\" style={pillStyles} aria-hidden />\n            </div>\n        </fieldset>\n    );\n};\n"],"names":["children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"4UAiBuC,EACnCA,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAAAA,SAASN,GAAgBH,EAAO,IAClEU,EAAKC,QAAM,qBACXC,EAAWD,QAAM,4BACjBE,EAAYC,SAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,kBAAgC,CAAEC,QANJC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAGkEE,SAX7B,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAUpCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAAA,KAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,OAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAAA,KAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAAAA,KAACK,EAAAA,SACG,CAAAvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,OAAK,2BAA4B,CACxC,qCAAsCG,IAAU9B,IAEpDmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAlBMA,WAsBlB,OAAK,CAAApC,UAAU,0BAA0B2C,MAAO5B,EAAY,eAAW,SAC5E"}

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs;'
+interface Props extends WithChildren {
+    labels: [string, string];
+    onToggle: (value: string) => void;
+    defaultValue?: string;
+    className?: string;
+    hideLegend?: boolean;
+    density?: Density;
+}
+export declare const ToggleSlider: FC<Props>;
+export {};

package/build/cjs/components/toggle-switch/ToggleSwitch.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),o=require("react");require("../../hooks/useScreen/useScreen.cjs");const n=require("../../hooks/useId/useId.cjs"),i=require("../../hooks/useSwipeGesture/useSwipeGesture.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs");const r=require("../icon/icons/CheckIcon.cjs");require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const s=o.forwardRef((({"aria-pressed":s=!1,children:t,className:u,density:a,id:j,onChange:l,...d},q)=>{const I=n.useId(j||"jkl-toggle-switch",{generateSuffix:!j}),[h,g]=o.useState(s);o.useEffect((()=>{g(s)}),[s]);const{onClick:w,onPointerCancel:m,onPointerDown:C,onPointerMove:k,onPointerUp:p,...S}=d,{gestureHandlers:v}=i.useSwipeGesture({onClick:e=>{g(!h),null==l||l(e,!h),null==w||w(e)},onChange:(e,c)=>{c!==h&&(g(c),null==l||l(e,c))},onPointerCancel:m,onPointerDown:C,onPointerMove:k,onPointerUp:p});return e.jsxs("button",{className:c.clsx("jkl-toggle-switch",u),id:I,ref:q,"aria-pressed":h,"data-density":a,...S,...S.disabled?{}:v,children:[t,e.jsx("div",{"aria-hidden":!0,className:"jkl-toggle-switch-widget",children:e.jsxs("div",{className:"jkl-toggle-switch-widget__slider",children:[e.jsx("div",{className:"jkl-toggle-switch-widget__knob"}),e.jsx(r.CheckIcon,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})]})}));s.displayName="ToggleSwitch",exports.ToggleSwitch=s;
+//# sourceMappingURL=ToggleSwitch.cjs.map

package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.cjs","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ButtonHTMLAttributes, type MouseEventHandler, forwardRef } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { SwipeChangeHandler, useSwipeGesture } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { CheckIcon } from \"../icon/index.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n    density?: Density;\n    /**\n     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n     * @example\n     * ```js\n     * function handleChange(event, pressed) {\n     *    console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n     * }\n     * ```\n     */\n    onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleProps>(\n    ({ \"aria-pressed\": ariaPressed = false, children, className, density, id, onChange, ...rest }, ref) => {\n        const uid = useId(id || \"jkl-toggle-switch\", { generateSuffix: !id });\n        const [pressed, setPressed] = React.useState(ariaPressed);\n        React.useEffect(() => {\n            setPressed(ariaPressed);\n        }, [ariaPressed]);\n\n        const { onClick, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, ...buttonProps } = rest;\n\n        const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n            setPressed(!pressed);\n            onChange?.(event, !pressed);\n            onClick?.(event);\n        };\n\n        const handleChange: ToggleChangeHandler<HTMLButtonElement> = (event, toggleTo) => {\n            if (toggleTo !== pressed) {\n                setPressed(toggleTo);\n                onChange?.(event, toggleTo);\n            }\n        };\n\n        const { gestureHandlers } = useSwipeGesture({\n            onClick: handleClick,\n            onChange: handleChange,\n            onPointerCancel,\n            onPointerDown,\n            onPointerMove,\n            onPointerUp,\n        });\n\n        return (\n            <button\n                className={clsx(\"jkl-toggle-switch\", className)}\n                id={uid}\n                ref={ref}\n                aria-pressed={pressed}\n                data-density={density}\n                {...buttonProps}\n                {...(buttonProps.disabled ? {} : gestureHandlers)}\n            >\n                {children}\n                <div aria-hidden className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\n                    </div>\n                </div>\n            </button>\n        );\n    },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"kyDAwBO,MAAMA,EAAeC,EAAAA,YACxB,EAAG,eAAgBC,GAAc,EAAOC,SAAAA,EAAUC,UAAAA,EAAWC,QAAAA,EAASC,GAAAA,EAAIC,SAAAA,KAAaC,GAAQC,KACrF,MAAAC,EAAMC,QAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MAAEgB,QAAAA,EAASC,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,YAAAA,KAAgBC,GAAgBf,GAexFgB,gBAAAA,GAAoBC,kBAAgB,CACxCP,QAduDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAYVnB,SATyD,CAACmB,EAAOC,KAC7DA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAAA,KAAC,SAAA,CACGxB,UAAWyB,EAAAA,KAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAAA,IAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAAA,KAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAAA,IAAA,MAAA,CAAI3B,UAAU,yCACd4B,EAAAA,UAAU,CAAAC,QAAQ,QAAQC,MAAI,EAAC9B,UAAU,+CAElD,IAKhBJ,EAAamC,YAAc"}

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

@@ -0,0 +1,32 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+import { Density } from '../../core/types.cjs;'
+import { SwipeChangeHandler } from '../../hooks/index.cjs;'
+export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
+export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement>;
+};
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density | undefined;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/toggle-switch/index.cjs

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

package/build/cjs/components/toggle-switch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { ToggleSwitch, type ToggleChangeHandler } from './ToggleSwitch.cjs;'
+export { ToggleSlider } from './ToggleSlider.cjs;'

package/build/cjs/components/toggle-switch/usePillStyles.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.usePillStyles=(t,r,n)=>{const[i,u]=e.useState(0),[o,s]=e.useState(0),c=e.useCallback((()=>{if(t.current&&t.current.parentElement){u(t.current.clientWidth);const e=r?t.current.parentElement.clientWidth-t.current.clientWidth:0;s(e)}}),[t,r,...n]),l=e.useMemo((()=>function(e){let t=!1;return(...r)=>{if(t)return;const n=e(...r);return t=!0,window.setTimeout((()=>{t=!1}),200),n}}(c)),[c]);return e.useEffect((()=>(c(),typeof window<"u"&&window.addEventListener("resize",l),()=>{typeof window<"u"&&window.removeEventListener("resize",l)})),[c,l]),{width:i,transform:`translateX(${o}px)`}};
+//# sourceMappingURL=usePillStyles.cjs.map

package/build/cjs/components/toggle-switch/usePillStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePillStyles.cjs","sources":["../../../../src/components/toggle-switch/usePillStyles.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo, useState } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction throttle<R, A extends any[]>(fn: (...args: A) => R) {\n    let wait = false;\n\n    return (...args: A) => {\n        if (wait) return undefined;\n\n        const result = fn(...args);\n\n        wait = true;\n        window.setTimeout(() => {\n            wait = false;\n        }, 200);\n\n        return result;\n    };\n}\n\nexport const usePillStyles = (ref: RefObject<HTMLLabelElement>, shouldTransform: boolean, dependencies: unknown[]) => {\n    const [width, setWidth] = useState(0);\n    const [distance, setDistance] = useState(0);\n\n    const setStyles = useCallback(() => {\n        if (ref.current && ref.current.parentElement) {\n            setWidth(ref.current.clientWidth);\n\n            const translateDistance = shouldTransform\n                ? ref.current.parentElement.clientWidth - ref.current.clientWidth\n                : 0;\n\n            setDistance(translateDistance);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [ref, shouldTransform, ...dependencies]);\n\n    const throttledSetStyles = useMemo(() => throttle(setStyles), [setStyles]);\n\n    useEffect(() => {\n        setStyles();\n        typeof window !== \"undefined\" && window.addEventListener(\"resize\", throttledSetStyles);\n        return () => {\n            typeof window !== \"undefined\" && window.removeEventListener(\"resize\", throttledSetStyles);\n        };\n    }, [setStyles, throttledSetStyles]);\n\n    return {\n        width,\n        transform: `translateX(${distance}px)`,\n    };\n};\n"],"names":["ref","shouldTransform","dependencies","width","setWidth","useState","distance","setDistance","setStyles","useCallback","current","parentElement","clientWidth","translateDistance","throttledSetStyles","useMemo","fn","wait","args","result","window","setTimeout","throttle","useEffect","addEventListener","removeEventListener","transform"],"mappings":"+HAoB6B,CAACA,EAAkCC,EAA0BC,KACtF,MAAOC,EAAOC,GAAYC,WAAS,IAC5BC,EAAUC,GAAeF,WAAS,GAEnCG,EAAYC,EAAAA,aAAY,KAC1B,GAAIT,EAAIU,SAAWV,EAAIU,QAAQC,cAAe,CACjCP,EAAAJ,EAAIU,QAAQE,aAEf,MAAAC,EAAoBZ,EACpBD,EAAIU,QAAQC,cAAcC,YAAcZ,EAAIU,QAAQE,YACpD,EAENL,EAAYM,EAChB,IAED,CAACb,EAAKC,KAAoBC,IAEvBY,EAAqBC,EAAAA,SAAQ,IAlCvC,SAAsCC,GAClC,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEX,MAAAE,EAASH,KAAME,GAEd,OAAAD,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,IACR,KAEIE,EAEf,CAmB6CG,CAASd,IAAY,CAACA,IAE/De,OAAAA,EAAAA,WAAU,KACIf,WACHY,OAAW,KAAeA,OAAOI,iBAAiB,SAAUV,GAC5D,YACIM,OAAW,KAAeA,OAAOK,oBAAoB,SAAUX,EAAkB,IAE7F,CAACN,EAAWM,IAER,CACHX,MAAAA,EACAuB,UAAW,cAAcpB,OAAQ"}

package/build/cjs/components/tooltip/PopupTip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),n=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs");const i=require("../icon/icons/QuestionIcon.cjs");require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const e=require("./Tooltip.cjs"),r=require("./TooltipContent.cjs"),s=require("./TooltipTrigger.cjs");exports.PopupTip=({content:u,triggerProps:t,...j})=>{const[l,q]=n.useState(!1);return o.jsxs(e.Tooltip,{triggerOn:"click",...j,children:[o.jsx(s.TooltipTrigger,{children:o.jsxs("button",{...t,onFocus:o=>{var c;q(!0),null==(c=null==t?void 0:t.onFocus)||c.call(t,o)},onBlur:o=>{var c;q(!1),null==(c=null==t?void 0:t.onBlur)||c.call(t,o)},type:"button",className:c.clsx("jkl-tooltip-question-button",null==t?void 0:t.className),"data-testid":"jkl-tooltip-question-button",children:[o.jsx(i.QuestionIcon,{variant:"inherit",bold:l}),o.jsx("span",{className:"jkl-sr-only",children:"Vis hjelpetekst"})]})}),o.jsx(r.TooltipContent,{children:u})]})};
+//# sourceMappingURL=PopupTip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC, type ReactNode, HTMLProps, FocusEventHandler } from \"react\";\nimport { QuestionIcon } from \"../icon/index.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps extends Omit<TooltipProps, \"triggerOn\" | \"children\"> {\n    /**\n     * Innholdet i tooltipet som vises\n     */\n    content: ReactNode;\n    /**\n     * Eventuelle props du vil sette på trigger-knappen for tooltipet\n     */\n    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" | \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({ content, triggerProps, ...tooltipProps }) => {\n    const [isBold, setIsBold] = useState(false);\n\n    const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(true);\n        triggerProps?.onFocus?.(event);\n    };\n    const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(false);\n        triggerProps?.onBlur?.(event);\n    };\n\n    return (\n        <Tooltip triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    type=\"button\"\n                    className={clsx(\"jkl-tooltip-question-button\", triggerProps?.className)}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isBold} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n            <TooltipContent>{content}</TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["content","triggerProps","tooltipProps","isBold","setIsBold","useState","jsxs","Tooltip","triggerOn","children","jsx","TooltipTrigger","onFocus","event","_a","call","onBlur","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"6vDAkB2C,EAAGA,QAAAA,EAASC,aAAAA,KAAiBC,MACpE,MAAOC,EAAQC,GAAaC,YAAS,GAWrC,OACKC,EAAAA,KAAAC,EAAAA,QAAA,CAAQC,UAAU,WAAYN,EAC3BO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAH,EAAAA,KAAC,SAAA,IACOL,EACJW,QAd2CC,UACvDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAcW,UAAdE,EAAAC,KAAAd,EAAwBY,EAAK,EAajBG,OAX0CH,UACtDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAA,EAAAA,EAAce,SAAdF,EAAAC,KAAAd,EAAuBY,EAAAA,EAUXI,KAAK,SACLC,UAAWC,EAAAA,KAAK,8BAA+B,MAAAlB,OAAAA,EAAAA,EAAciB,WAC7D,cAAY,8BAEZT,SAAA,CAAAC,EAAAA,IAACU,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMnB,IACrCO,EAAAA,IAAA,OAAA,CAAKQ,UAAU,cAAcT,SAAe,yBAGrDC,EAAAA,IAACa,kBAAgBd,SAAQT,MAC7B"}

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode, HTMLProps } from 'react';
+import { TooltipProps } from './Tooltip.cjs;'
+export interface PopupTipProps extends Omit<TooltipProps, "triggerOn" | "children"> {
+    /**
+     * Innholdet i tooltipet som vises
+     */
+    content: ReactNode;
+    /**
+     * Eventuelle props du vil sette på trigger-knappen for tooltipet
+     */
+    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, "children" | "type">;
+}
+export declare const PopupTip: FC<PopupTipProps>;

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),o=({initialOpen:e=!1,placement:o="top",delay:r=250,triggerOn:i="hover"})=>{const[s,l]=n.useState(e),u=n.useRef(null),c=n.useRef(null),a=t.useFloating({open:s,onOpenChange:l,placement:o,whileElementsMounted:t.autoUpdate,middleware:[t.offset(16),t.flip(),t.shift({padding:16}),t.arrow({element:u,padding:20})]}),p=t.useRole(a.context,{role:"tooltip"}),d=t.useDismiss(a.context,{referencePress:!1}),x=t.useClick(a.context,{enabled:"click"===i&&!s}),f=t.useHover(a.context,{enabled:"hover"===i,delay:s?0:r}),g=t.useFocus(a.context,{enabled:"click"!==i||s}),m=t.useInteractions([d,g,p,x,f]);return{triggerOn:i,isOpen:s,setOpen:l,arrowElement:u,...a,refs:{...a.refs,description:c,setDescription:e=>c.current=e},...m}},r=n.createContext(null),i=r.Provider;exports.Tooltip=({children:t,...n})=>{const r=o(n);return e.jsx(i,{value:r,children:t})},exports.TooltipProvider=i,exports.useTooltip=o,exports.useTooltipContext=()=>{const e=n.useContext(r);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e};
+//# sourceMappingURL=Tooltip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type Placement,\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, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\n\nexport type TooltipPlacement = Extract<Placement, \"top-start\" | \"top-end\" | \"left\" | \"right\" | \"top\">;\n\nexport interface TooltipProps {\n    /**\n     * Sett til true dersom du ønsker at tooltipen skal være åpen som default\n     * @default false\n     */\n    initialOpen?: boolean;\n    /**\n     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n     * bytte posisjon dersom det ikke er plass.\n     * @default \"top\"\n     */\n    placement?: TooltipPlacement;\n    /**\n     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n     * @default 250\n     */\n    delay?: number;\n    /**\n     * Angir om tooltipen skal åpnes ved klikk eller hover\n     * @default \"hover\"\n     */\n    triggerOn?: \"click\" | \"hover\";\n}\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<HTMLElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nexport const useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<HTMLElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) => (description.current = element);\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: setOpen,\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [offset(16), flip(), shift({ padding: 16 }), arrow({ element: arrowElement, padding: 20 })],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context, { referencePress: false });\n    const click = useClick(data.context, { enabled: triggerOn === \"click\" && !isOpen });\n    const hover = useHover(data.context, { enabled: triggerOn === \"hover\", delay: isOpen ? 0 : delay });\n    const focus = useFocus(data.context, { enabled: triggerOn === \"click\" ? isOpen : true });\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(\"Tooltip-komponentene kan kun brukes inne i <Tooltip />\");\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({ children, ...options }) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["useTooltip","initialOpen","placement","delay","triggerOn","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","context","dismiss","useDismiss","referencePress","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","tooltipContext","createContext","TooltipProvider","Provider","children","options","tooltip","jsx","value","useContext","Error"],"mappings":"wKAyDaA,EAAa,EACtBC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,YAEZ,MAAOC,EAAQC,GAAWC,WAASN,GAC7BO,EAAeC,SAAoB,MACnCC,EAAcD,SAA2B,MAGzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACNS,aAAcR,EACdJ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CAACC,EAAAA,OAAO,IAAKC,EAAAA,OAAQC,QAAM,CAAEC,QAAS,KAAOC,QAAM,CAAEC,QAASf,EAAca,QAAS,QAG/FG,EAAOC,EAAAA,QAAQd,EAAKe,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWjB,EAAKe,QAAS,CAAEG,gBAAgB,IACrDC,EAAQC,EAAAA,SAASpB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,IAA0BC,IACpE4B,EAAQC,EAAAA,SAASvB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,EAAuBD,MAAOE,EAAS,EAAIF,IACrFgC,EAAQC,EAAAA,SAASzB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,GAAwBC,IAElEgC,EAAeC,kBAAgB,CAACX,EAASQ,EAAOX,EAAMM,EAAOG,IAE5D,MAAA,CACH7B,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH4B,KAAM,IACC5B,EAAK4B,KACR7B,YAAAA,EACA8B,eA3BgBjB,GAAiCb,EAAY+B,QAAUlB,MA6BxEc,EAAA,EAMLK,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAYU,EAAGC,SAAAA,KAAaC,MAC9D,MAAAC,EAAUhD,EAAW+C,GAE3B,OAAQE,EAAAA,IAAAL,EAAA,CAAgBM,MAAOF,EAAUF,SAAAA,GAAS,2EAbrB,KACvB,MAAApB,EAAUyB,aAAWT,GAE3B,GAAgB,OAAZhB,EACM,MAAA,IAAI0B,MAAM,0DAGb,OAAA1B"}

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

@@ -0,0 +1,43 @@
+import { Placement, UseFloatingReturn, useInteractions } from '@floating-ui/react';
+import { default as React, FC } from 'react';
+import { WithChildren } from '../../core/types.cjs;'
+export type TooltipPlacement = Extract<Placement, "top-start" | "top-end" | "left" | "right" | "top">;
+export interface TooltipProps {
+    /**
+     * Sett til true dersom du ønsker at tooltipen skal være åpen som default
+     * @default false
+     */
+    initialOpen?: boolean;
+    /**
+     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk
+     * bytte posisjon dersom det ikke er plass.
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til "click"
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Angir om tooltipen skal åpnes ved klikk eller hover
+     * @default "hover"
+     */
+    triggerOn?: "click" | "hover";
+}
+type UseTooltipReturn = {
+    triggerOn: NonNullable<TooltipProps["triggerOn"]>;
+    isOpen: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    arrowElement: React.RefObject<HTMLElement>;
+    refs: {
+        description: React.MutableRefObject<HTMLElement | null>;
+        setDescription: (element: HTMLElement | null) => void;
+    } & UseFloatingReturn["refs"];
+} & UseFloatingReturn & ReturnType<typeof useInteractions>;
+export declare const useTooltip: ({ initialOpen, placement, delay, triggerOn, }: TooltipProps) => UseTooltipReturn;
+export type TooltipContext = ReturnType<typeof useTooltip> | null;
+export declare const TooltipProvider: React.Provider<TooltipContext>;
+export declare const useTooltipContext: () => UseTooltipReturn;
+export declare const Tooltip: FC<TooltipProps & WithChildren>;
+export {};

package/build/cjs/components/tooltip/TooltipContent.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("../../../clsx-E3yX_9sL.cjs"),i=require("framer-motion"),s=require("react"),n=require("../../hooks/useId/useId.cjs"),a=require("../../utilities/getThemeAndDensity.cjs"),o=require("./Tooltip.cjs");function l(e,t=8){switch(!0){case e.startsWith("top"):return{top:t};case e.startsWith("left"):return{left:t,right:-t};case e.startsWith("bottom"):return{top:-t};case e.startsWith("right"):return{left:-t,right:t};default:return{top:t}}}const c=s.forwardRef((function({className:s,children:c,...u},d){const{triggerOn:p,arrowElement:h,isOpen:m,getFloatingProps:f,placement:g,isPositioned:j,middlewareData:{arrow:x},floatingStyles:y,refs:q}=o.useTooltipContext(),v=t.useMergeRefs([d,q.setFloating]),w=n.useId("jkl-tooltip-content"),{density:k,theme:T}=a.getThemeAndDensity(q.reference.current);return e.jsx(t.FloatingPortal,{children:e.jsx(i.LazyMotion,{features:i.domAnimation,children:e.jsxs(i.AnimatePresence,{children:["hover"===p&&e.jsx("span",{ref:q.setDescription,hidden:!0,children:c},`${w}-trigger`),m&&e.jsx("span",{className:"jkl",children:e.jsxs(i.m.span,{ref:v,initial:{opacity:0,...l(g,5)},animate:{opacity:1,...l(g,0)},exit:{opacity:0,...l(g,-5),transition:{ease:"easeIn",duration:.15}},transition:{ease:"easeOut",duration:.25},"data-placement":g,"aria-live":"click"===p?"assertive":void 0,className:r.clsx("jkl-tooltip-content",s),...f({...u,id:w}),style:{...y},"data-theme":T,"data-layout-density":k,children:[c,e.jsx("span",{"aria-hidden":!0,className:"jkl-tooltip-content__arrow",ref:h,style:{left:j?`${null==x?void 0:x.x}px`:"",top:j?`${null==x?void 0:x.y}px`:""}})]},w)},`${w}-wrapper`)]})})})}));exports.TooltipContent=c;
+//# sourceMappingURL=TooltipContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { type Placement, useMergeRefs, FloatingPortal } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, LazyMotion, domAnimation, m } from \"framer-motion\";\nimport React, { HTMLProps, forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getPositionAnimation(placement: Placement, value: number = 8) {\n    switch (true) {\n        case placement.startsWith(\"top\"):\n            return {\n                top: value,\n            };\n        case placement.startsWith(\"left\"):\n            return {\n                left: value,\n                right: -value,\n            };\n        case placement.startsWith(\"bottom\"):\n            return {\n                top: -value,\n            };\n        case placement.startsWith(\"right\"):\n            return {\n                left: -value,\n                right: value,\n            };\n\n        default:\n            return {\n                top: value,\n            };\n    }\n}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function TooltipContent(\n    { className, children, ...props },\n    forwardedRef,\n) {\n    const {\n        triggerOn,\n        arrowElement,\n        isOpen,\n        getFloatingProps,\n        placement,\n        isPositioned,\n        middlewareData: { arrow },\n        floatingStyles,\n        refs,\n    } = useTooltipContext();\n    const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n    const contentId = useId(\"jkl-tooltip-content\");\n\n    // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n    // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n    const { density, theme } = getThemeAndDensity(refs.reference.current as HTMLElement);\n\n    return (\n        <FloatingPortal>\n            <LazyMotion features={domAnimation}>\n                <AnimatePresence>\n                    {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n            tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n                    {triggerOn === \"hover\" && (\n                        <span ref={refs.setDescription} hidden key={`${contentId}-trigger`}>\n                            {children}\n                        </span>\n                    )}\n                    {isOpen && (\n                        <span className=\"jkl\" key={`${contentId}-wrapper`}>\n                            <m.span\n                                key={contentId}\n                                ref={ref}\n                                initial={{ opacity: 0, ...getPositionAnimation(placement, 5) }}\n                                animate={{ opacity: 1, ...getPositionAnimation(placement, 0) }}\n                                exit={{\n                                    opacity: 0,\n                                    ...getPositionAnimation(placement, -5),\n                                    transition: { ease: \"easeIn\", duration: 0.15 },\n                                }}\n                                transition={{ ease: \"easeOut\", duration: 0.25 }}\n                                data-placement={placement}\n                                aria-live={triggerOn === \"click\" ? \"assertive\" : undefined}\n                                className={clsx(\"jkl-tooltip-content\", className)}\n                                {...getFloatingProps({ ...props, id: contentId })}\n                                style={{ ...floatingStyles }}\n                                data-theme={theme}\n                                data-layout-density={density}\n                            >\n                                {children}\n                                <span\n                                    aria-hidden\n                                    className=\"jkl-tooltip-content__arrow\"\n                                    ref={arrowElement}\n                                    style={{\n                                        left: isPositioned ? `${arrow?.x}px` : \"\",\n                                        top: isPositioned ? `${arrow?.y}px` : \"\",\n                                    }}\n                                />\n                            </m.span>\n                        </span>\n                    )}\n                </AnimatePresence>\n            </LazyMotion>\n        </FloatingPortal>\n    );\n});\n"],"names":["getPositionAnimation","placement","value","startsWith","top","left","right","TooltipContent","forwardRef","className","children","props","forwardedRef","triggerOn","arrowElement","isOpen","getFloatingProps","isPositioned","middlewareData","arrow","floatingStyles","refs","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","density","theme","getThemeAndDensity","reference","current","FloatingPortal","jsx","LazyMotion","features","domAnimation","AnimatePresence","setDescription","hidden","jsxs","m","span","initial","opacity","animate","exit","transition","ease","duration","clsx","id","style","x","y"],"mappings":"mWAQA,SAASA,EAAqBC,EAAsBC,EAAgB,GAChE,QAAQ,GACJ,KAAKD,EAAUE,WAAW,OACf,MAAA,CACHC,IAAKF,GAEb,KAAKD,EAAUE,WAAW,QACf,MAAA,CACHE,KAAMH,EACNI,OAAQJ,GAEhB,KAAKD,EAAUE,WAAW,UACf,MAAA,CACHC,KAAMF,GAEd,KAAKD,EAAUE,WAAW,SACf,MAAA,CACHE,MAAOH,EACPI,MAAOJ,GAGf,QACW,MAAA,CACHE,IAAKF,GAGrB,CAEa,MAAAK,EAAiBC,EAAAA,YAAsD,UAC9EC,UAAAA,EAAWC,SAAAA,KAAaC,GAC1BC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,iBAAAA,EACAf,UAAAA,EACAgB,aAAAA,EACAC,gBAAkBC,MAAAA,GAClBC,eAAAA,EACAC,KAAAA,GACAC,EAAkBA,oBAChBC,EAAMC,EAAAA,aAAa,CAACZ,EAAcS,EAAKI,cACvCC,EAAYC,QAAM,wBAIhBC,QAAAA,EAASC,MAAAA,GAAUC,EAAmBA,mBAAAT,EAAKU,UAAUC,SAE7D,aACKC,EACGA,eAAA,CAAAvB,SAAAwB,EAAAA,IAACC,cAAWC,SAAUC,EAAAA,aAClB3B,gBAAC4B,EAGIA,gBAAA,CAAA5B,SAAA,CAAc,UAAAG,GACVqB,EAAAA,IAAA,OAAA,CAAKX,IAAKF,EAAKkB,eAAgBC,QAAM,EACjC9B,SAAAA,GADuC,GAAGgB,aAIlDX,GACGmB,EAAAA,IAAC,OAAK,CAAAzB,UAAU,MACZC,SAAA+B,EAAAA,KAACC,EAAAA,EAAEC,KAAF,CAEGpB,IAAAA,EACAqB,QAAS,CAAEC,QAAS,KAAM7C,EAAqBC,EAAW,IAC1D6C,QAAS,CAAED,QAAS,KAAM7C,EAAqBC,EAAW,IAC1D8C,KAAM,CACFF,QAAS,KACN7C,EAAqBC,GAAW,GACnC+C,WAAY,CAAEC,KAAM,SAAUC,SAAU,MAE5CF,WAAY,CAAEC,KAAM,UAAWC,SAAU,KACzC,iBAAgBjD,EAChB,YAAyB,UAAdY,EAAwB,iBAAc,EACjDJ,UAAW0C,EAAAA,KAAK,sBAAuB1C,MACnCO,EAAiB,IAAKL,EAAOyC,GAAI1B,IACrC2B,MAAO,IAAKjC,GACZ,aAAYS,EACZ,sBAAqBD,EAEpBlB,SAAA,CAAAA,EACDwB,EAAAA,IAAC,OAAA,CACG,eAAW,EACXzB,UAAU,6BACVc,IAAKT,EACLuC,MAAO,CACHhD,KAAMY,EAAe,GAAG,MAAAE,SAAAA,EAAOmC,MAAQ,GACvClD,IAAKa,EAAe,GAAG,MAAAE,SAAAA,EAAOoC,MAAQ,QAzBzC7B,IAFc,GAAGA,mBAqCtD"}

package/build/cjs/components/tooltip/TooltipTrigger.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@floating-ui/react"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),l=require("./Tooltip.cjs"),n=o.forwardRef((function({children:n,className:s,...i},c){var a,p;const{isOpen:u,setOpen:f,getReferenceProps:d,refs:g,triggerOn:x}=l.useTooltipContext(),m=n.ref,b=r.useMergeRefs([m,g.setReference,c]),j=()=>{"click"===x&&f(!1)},q=[null==(a=g.reference.current)?void 0:a.textContent,null==(p=g.description.current)?void 0:p.textContent].filter(Boolean).join(". ");return o.isValidElement(n)?o.cloneElement(n,d({ref:b,"aria-label":q,...n.props,...i,className:t.clsx(n.props.className,s),"data-tooltip-shown":u,style:{...n.props.style},tabIndex:"click"===x?0:void 0,onBlur:()=>{n.props.onBlur&&n.props.onBlur(),j()}})):e.jsx("button",{"data-tooltip-shown":u,...d({className:t.clsx(s,"jkl-tooltip-trigger"),type:"button",ref:b,onBlur:j,"aria-label":q,...i}),children:n})}));exports.TooltipTrigger=n;
+//# sourceMappingURL=TooltipTrigger.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTrigger.cjs","sources":["../../../../src/components/tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { useMergeRefs } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, type HTMLProps } from \"react\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nexport const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement>>(function TooltipTrigger(\n    { children, className, ...props },\n    forwardedRef,\n) {\n    const { isOpen, setOpen, getReferenceProps, refs, triggerOn } = useTooltipContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([childrenRef, refs.setReference, forwardedRef]);\n\n    const handleBlur = () => {\n        triggerOn === \"click\" && setOpen(false);\n    };\n\n    const ariaLabel = [\n        (refs.reference.current as HTMLElement | null)?.textContent,\n        refs.description.current?.textContent,\n    ]\n        .filter(Boolean)\n        .join(\". \");\n\n    if (React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                \"aria-label\": ariaLabel,\n                ...children.props,\n                ...props,\n                className: clsx(children.props.className, className),\n                \"data-tooltip-shown\": isOpen,\n                style: { ...children.props.style },\n                tabIndex: triggerOn === \"click\" ? 0 : undefined,\n                onBlur: () => {\n                    children.props.onBlur && children.props.onBlur();\n                    handleBlur();\n                },\n            }),\n        );\n    }\n\n    return (\n        <button\n            data-tooltip-shown={isOpen}\n            {...getReferenceProps({\n                className: clsx(className, \"jkl-tooltip-trigger\"),\n                // Sørg for at vi ikke sender inn skjemaer ved klikk på knappen\n                type: \"button\",\n                ref,\n                onBlur: handleBlur,\n                \"aria-label\": ariaLabel,\n                ...props,\n            })}\n        >\n            {children}\n        </button>\n    );\n});\n"],"names":["TooltipTrigger","forwardRef","children","className","props","forwardedRef","isOpen","setOpen","getReferenceProps","refs","triggerOn","useTooltipContext","childrenRef","ref","useMergeRefs","setReference","handleBlur","ariaLabel","_a","reference","current","textContent","_b","description","filter","Boolean","join","React","isValidElement","cloneElement","clsx","style","tabIndex","onBlur","jsx","type"],"mappings":"2OAKaA,EAAiBC,EAAAA,YAAgD,UACxEC,SAAAA,EAAUC,UAAAA,KAAcC,GAC1BC,WAEA,MAAQC,OAAAA,EAAQC,QAAAA,EAASC,kBAAAA,EAAmBC,KAAAA,EAAMC,UAAAA,GAAcC,EAAAA,oBAC1DC,EAAeV,EAAiBW,IAChCA,EAAMC,EAAAA,aAAa,CAACF,EAAaH,EAAKM,aAAcV,IAEpDW,EAAa,KACD,UAAAN,GAAWH,GAAQ,EAAK,EAGpCU,EAAY,CACb,OAAAC,EAAAT,EAAKU,UAAUC,cAAf,EAAAF,EAA+CG,YAChD,OAAAC,EAAAb,EAAKc,YAAYH,cAAjB,EAAAE,EAA0BD,aAEzBG,OAAOC,SACPC,KAAK,MAEN,OAAAC,EAAMC,eAAe1B,GACdyB,EAAME,aACT3B,EACAM,EAAkB,CACdK,IAAAA,EACA,aAAcI,KACXf,EAASE,SACTA,EACHD,UAAW2B,EAAAA,KAAK5B,EAASE,MAAMD,UAAWA,GAC1C,qBAAsBG,EACtByB,MAAO,IAAK7B,EAASE,MAAM2B,OAC3BC,SAAwB,UAAdtB,EAAwB,OAAI,EACtCuB,OAAQ,KACJ/B,EAASE,MAAM6B,QAAU/B,EAASE,MAAM6B,SAC7BjB,QAOvBkB,EAAAA,IAAC,SAAA,CACG,qBAAoB5B,KAChBE,EAAkB,CAClBL,UAAW2B,EAAAA,KAAK3B,EAAW,uBAE3BgC,KAAM,SACNtB,IAAAA,EACAoB,OAAQjB,EACR,aAAcC,KACXb,IAGNF,SAAAA,GAGb"}

package/build/cjs/components/tooltip/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+export { Tooltip, type TooltipPlacement, type TooltipProps } from './Tooltip.cjs;'
+export { TooltipContent } from './TooltipContent.cjs;'
+export { TooltipTrigger } from './TooltipTrigger.cjs;'
+export { PopupTip, type PopupTipProps } from './PopupTip.cjs;'

package/build/cjs/core/index.cjs

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

package/build/cjs/core/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/core/index.d.cts

@@ -0,0 +1,2 @@
+export type { ColorScheme, Density, Easing, Timing, DataTestAutoId, WithChildren, WithOptionalChildren, } from './types.cjs;'
+export { default as tokens } from './tokens.cjs;'

package/build/cjs/core/tokens.cjs

@@ -0,0 +1,2 @@
+"use strict";module.exports={breakpoint:{medium:"680px",large:"1200px",xl:"1600px"},color:{brand:{snohvit:"#F9F9F9",varde:"#E0DBD4",granitt:"#1B1917",hvit:"#FFFFFF",svart:"#000000",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#C8C5C3",dis:"#ECE9E5",sand:"#F4F2EF"},functional:{info:"#D3D3F6",infoDark:"#A9A9CA",success:"#ACD3B5",successDark:"#94B79B",warning:"#EFDD9E",warningDark:"#DECC8D",error:"#F6B3B3",errorDark:"#DE9E9E"},background:{page:{light:"#F4F2EF",dark:"#1B1917"},pageVariant:{light:"#F9F9F9",dark:"#1B1917"},container:{light:"#F9F9F9",dark:"#313030"},containerLow:{light:"#ECE9E5",dark:"#000000"},containerHigh:{light:"#FFFFFF",dark:"#313030"},containerInverted:{light:"#1B1917",dark:"#F9F9F9"},containerSubdued:{light:"#C8C5C3",dark:"#636060"},input:{base:{light:"transparent",dark:"transparent"},focus:{light:"#FFFFFF",dark:"#313030"}},action:{light:"#1B1917",dark:"#F9F9F9"},interactive:{light:"transparent",dark:"transparent"},interactiveHover:{light:"#ECE9E5",dark:"#444141"},interactiveSelected:{light:"#E0DBD4",dark:"#636060"},alert:{neutral:{light:"#E0DBD4",dark:"#E0DBD4"},info:{light:"#D3D3F6",dark:"#A9A9CA"},success:{light:"#ACD3B5",dark:"#94B79B"},warning:{light:"#EFDD9E",dark:"#DECC8D"},error:{light:"#F6B3B3",dark:"#DE9E9E"}}},text:{default:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#636060",dark:"#C8C5C3"},inverted:{light:"#F9F9F9",dark:"#1B1917"},onAction:{light:"#F9F9F9",dark:"#1B1917"},interactive:{light:"#1B1917",dark:"#F9F9F9"},interactiveHover:{light:"#636060",dark:"#C8C5C3"},onAlert:{light:"#1B1917",dark:"#1B1917"}},border:{action:{light:"#1B1917",dark:"#F9F9F9"},input:{light:"#636060",dark:"#C8C5C3"},inputFocus:{light:"#1B1917",dark:"#F9F9F9"},separator:{light:"#C8C5C3",dark:"#636060"},separatorStrong:{light:"#636060",dark:"#C8C5C3"},separatorHover:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#C8C5C3",dark:"#636060"}},svart:"#000",granitt:"#1b1917",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#c8c5c3",varde:"#e0dbd4",dis:"#ece9e5",sand:"#f4f2ef",snohvit:"#f9f9f9",hvit:"#fff",suksess:"#acd3b5",suksessDark:"#94b79b",feil:"#f6b3b3",feilDark:"#de9e9e",info:"#d3d3f6",infoDark:"#a9a9ca",advarsel:"#efdd9e",advarselDark:"#decc8d"},motion:{timing:{energetic:"75ms",snappy:"100ms",productive:"150ms",expressive:"250ms",lazy:"400ms"},easing:{standard:"ease",entrance:"ease-out",exit:"ease-in",easeInBounceOut:"cubic-bezier(0, 0, 0.375, 1.17)",focus:"cubic-bezier(0.6, 0.2, 0.35, 1)"}},spacing:{0:"0",2:"0.125rem",4:"0.25rem",8:"0.5rem",12:"0.75rem",16:"1rem",24:"1.5rem",32:"2rem",40:"2.5rem",64:"4rem",104:"6.5rem",168:"10.5rem"},icon:{weight:{normal:"300",bold:"500"}},typography:{weight:{normal:"400",bold:"700"},font:{size:{16:"1rem",18:"1.125rem",20:"1.25rem",21:"1.3125rem",23:"1.4375rem",25:"1.5625rem",26:"1.625rem",28:"1.75rem",30:"1.875rem",36:"2.25rem",44:"2.75rem",56:"3.5rem"}},line:{height:{24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",52:"3.25rem",64:"4rem"}},title:{small:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"},base:{fontSize:"3.5rem",lineHeight:"4rem",fontWeight:"400"}},titleSmall:{small:{fontSize:"1.875rem",lineHeight:"2.25rem",fontWeight:"400"},base:{fontSize:"2.75rem",lineHeight:"3.25rem",fontWeight:"400"}},heading_1:{small:{fontSize:"1.625rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"}},heading_2:{small:{fontSize:"1.4375rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"1.75rem",lineHeight:"2.5rem",fontWeight:"400"}},heading_3:{small:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"},base:{fontSize:"1.5625rem",lineHeight:"2rem",fontWeight:"700"}},heading_4:{small:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"}},heading_5:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"}},body:{small:{fontSize:"1.125rem",lineHeight:"1.75rem",fontWeight:"400"},base:{fontSize:"1.25rem",lineHeight:"2rem",fontWeight:"400"}},small:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"}}}};
+//# sourceMappingURL=tokens.cjs.map

package/build/cjs/core/tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.cjs","sources":["../../../src/core/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 23 Sep 2024 08:51:40 GMT\n */\n\nexport default {\n    breakpoint: {\n        medium: \"680px\",\n        large: \"1200px\",\n        xl: \"1600px\",\n    },\n    color: {\n        brand: {\n            snohvit: \"#F9F9F9\",\n            varde: \"#E0DBD4\",\n            granitt: \"#1B1917\",\n            hvit: \"#FFFFFF\",\n            svart: \"#000000\",\n            skifer: \"#313030\",\n            fjellgra: \"#444141\",\n            stein: \"#636060\",\n            svaberg: \"#C8C5C3\",\n            dis: \"#ECE9E5\",\n            sand: \"#F4F2EF\",\n        },\n        functional: {\n            info: \"#D3D3F6\",\n            infoDark: \"#A9A9CA\",\n            success: \"#ACD3B5\",\n            successDark: \"#94B79B\",\n            warning: \"#EFDD9E\",\n            warningDark: \"#DECC8D\",\n            error: \"#F6B3B3\",\n            errorDark: \"#DE9E9E\",\n        },\n        background: {\n            page: {\n                light: \"#F4F2EF\",\n                dark: \"#1B1917\",\n            },\n            pageVariant: {\n                light: \"#F9F9F9\",\n                dark: \"#1B1917\",\n            },\n            container: {\n                light: \"#F9F9F9\",\n                dark: \"#313030\",\n            },\n            containerLow: {\n                light: \"#ECE9E5\",\n                dark: \"#000000\",\n            },\n            containerHigh: {\n                light: \"#FFFFFF\",\n                dark: \"#313030\",\n            },\n            containerInverted: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            containerSubdued: {\n                light: \"#C8C5C3\",\n                dark: \"#636060\",\n            },\n            input: {\n                base: {\n                    light: \"transparent\",\n                    dark: \"transparent\",\n                },\n                focus: {\n                    light: \"#FFFFFF\",\n                    dark: \"#313030\",\n                },\n            },\n            action: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            interactive: {\n                light: \"transparent\",\n                dark: \"transparent\",\n            },\n            interactiveHover: {\n                light: \"#ECE9E5\",\n                dark: \"#444141\",\n            },\n            interactiveSelected: {\n                light: \"#E0DBD4\",\n                dark: \"#636060\",\n            },\n            alert: {\n                neutral: {\n                    light: \"#E0DBD4\",\n                    dark: \"#E0DBD4\",\n                },\n                info: {\n                    light: \"#D3D3F6\",\n                    dark: \"#A9A9CA\",\n                },\n                success: {\n                    light: \"#ACD3B5\",\n                    dark: \"#94B79B\",\n                },\n                warning: {\n                    light: \"#EFDD9E\",\n                    dark: \"#DECC8D\",\n                },\n                error: {\n                    light: \"#F6B3B3\",\n                    dark: \"#DE9E9E\",\n                },\n            },\n        },\n        text: {\n            default: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            subdued: {\n                light: \"#636060\",\n                dark: \"#C8C5C3\",\n            },\n            inverted: {\n                light: \"#F9F9F9\",\n                dark: \"#1B1917\",\n            },\n            onAction: {\n                light: \"#F9F9F9\",\n                dark: \"#1B1917\",\n            },\n            interactive: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            interactiveHover: {\n                light: \"#636060\",\n                dark: \"#C8C5C3\",\n            },\n            onAlert: {\n                light: \"#1B1917\",\n                dark: \"#1B1917\",\n            },\n        },\n        border: {\n            action: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            input: {\n                light: \"#636060\",\n                dark: \"#C8C5C3\",\n            },\n            inputFocus: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            separator: {\n                light: \"#C8C5C3\",\n                dark: \"#636060\",\n            },\n            separatorStrong: {\n                light: \"#636060\",\n                dark: \"#C8C5C3\",\n            },\n            separatorHover: {\n                light: \"#1B1917\",\n                dark: \"#F9F9F9\",\n            },\n            subdued: {\n                light: \"#C8C5C3\",\n                dark: \"#636060\",\n            },\n        },\n        svart: \"#000\",\n        granitt: \"#1b1917\",\n        skifer: \"#313030\",\n        fjellgra: \"#444141\",\n        stein: \"#636060\",\n        svaberg: \"#c8c5c3\",\n        varde: \"#e0dbd4\",\n        dis: \"#ece9e5\",\n        sand: \"#f4f2ef\",\n        snohvit: \"#f9f9f9\",\n        hvit: \"#fff\",\n        suksess: \"#acd3b5\",\n        suksessDark: \"#94b79b\",\n        feil: \"#f6b3b3\",\n        feilDark: \"#de9e9e\",\n        info: \"#d3d3f6\",\n        infoDark: \"#a9a9ca\",\n        advarsel: \"#efdd9e\",\n        advarselDark: \"#decc8d\",\n    },\n    motion: {\n        timing: {\n            energetic: \"75ms\",\n            snappy: \"100ms\",\n            productive: \"150ms\",\n            expressive: \"250ms\",\n            lazy: \"400ms\",\n        },\n        easing: {\n            standard: \"ease\",\n            entrance: \"ease-out\",\n            exit: \"ease-in\",\n            easeInBounceOut: \"cubic-bezier(0, 0, 0.375, 1.17)\",\n            focus: \"cubic-bezier(0.6, 0.2, 0.35, 1)\",\n        },\n    },\n    spacing: {\n        0: \"0\",\n        2: \"0.125rem\",\n        4: \"0.25rem\",\n        8: \"0.5rem\",\n        12: \"0.75rem\",\n        16: \"1rem\",\n        24: \"1.5rem\",\n        32: \"2rem\",\n        40: \"2.5rem\",\n        64: \"4rem\",\n        104: \"6.5rem\",\n        168: \"10.5rem\",\n    },\n    icon: {\n        weight: {\n            normal: \"300\",\n            bold: \"500\",\n        },\n    },\n    typography: {\n        weight: {\n            normal: \"400\",\n            bold: \"700\",\n        },\n        font: {\n            size: {\n                16: \"1rem\",\n                18: \"1.125rem\",\n                20: \"1.25rem\",\n                21: \"1.3125rem\",\n                23: \"1.4375rem\",\n                25: \"1.5625rem\",\n                26: \"1.625rem\",\n                28: \"1.75rem\",\n                30: \"1.875rem\",\n                36: \"2.25rem\",\n                44: \"2.75rem\",\n                56: \"3.5rem\",\n            },\n        },\n        line: {\n            height: {\n                24: \"1.5rem\",\n                28: \"1.75rem\",\n                32: \"2rem\",\n                36: \"2.25rem\",\n                40: \"2.5rem\",\n                44: \"2.75rem\",\n                52: \"3.25rem\",\n                64: \"4rem\",\n            },\n        },\n        title: {\n            small: {\n                fontSize: \"2.25rem\",\n                lineHeight: \"2.75rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"3.5rem\",\n                lineHeight: \"4rem\",\n                fontWeight: \"400\",\n            },\n        },\n        titleSmall: {\n            small: {\n                fontSize: \"1.875rem\",\n                lineHeight: \"2.25rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"2.75rem\",\n                lineHeight: \"3.25rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_1: {\n            small: {\n                fontSize: \"1.625rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"2.25rem\",\n                lineHeight: \"2.75rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_2: {\n            small: {\n                fontSize: \"1.4375rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"1.75rem\",\n                lineHeight: \"2.5rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_3: {\n            small: {\n                fontSize: \"1.3125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"700\",\n            },\n            base: {\n                fontSize: \"1.5625rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"700\",\n            },\n        },\n        heading_4: {\n            small: {\n                fontSize: \"1.125rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"700\",\n            },\n            base: {\n                fontSize: \"1.3125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"700\",\n            },\n        },\n        heading_5: {\n            small: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"700\",\n            },\n            base: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"700\",\n            },\n        },\n        body: {\n            small: {\n                fontSize: \"1.125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"1.25rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n        },\n        small: {\n            small: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"400\",\n            },\n        },\n    },\n};\n"],"names":["breakpoint","medium","large","xl","color","brand","snohvit","varde","granitt","hvit","svart","skifer","fjellgra","stein","svaberg","dis","sand","functional","info","infoDark","success","successDark","warning","warningDark","error","errorDark","background","page","light","dark","pageVariant","container","containerLow","containerHigh","containerInverted","containerSubdued","input","base","focus","action","interactive","interactiveHover","interactiveSelected","alert","neutral","text","default","subdued","inverted","onAction","onAlert","border","inputFocus","separator","separatorStrong","separatorHover","suksess","suksessDark","feil","feilDark","advarsel","advarselDark","motion","timing","energetic","snappy","productive","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","spacing","icon","weight","normal","bold","typography","font","size","line","height","title","small","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"AAKA,4BAAe,CACXA,WAAY,CACRC,OAAQ,QACRC,MAAO,SACPC,GAAI,UAERC,MAAO,CACHC,MAAO,CACHC,QAAS,UACTC,MAAO,UACPC,QAAS,UACTC,KAAM,UACNC,MAAO,UACPC,OAAQ,UACRC,SAAU,UACVC,MAAO,UACPC,QAAS,UACTC,IAAK,UACLC,KAAM,WAEVC,WAAY,CACRC,KAAM,UACNC,SAAU,UACVC,QAAS,UACTC,YAAa,UACbC,QAAS,UACTC,YAAa,UACbC,MAAO,UACPC,UAAW,WAEfC,WAAY,CACRC,KAAM,CACFC,MAAO,UACPC,KAAM,WAEVC,YAAa,CACTF,MAAO,UACPC,KAAM,WAEVE,UAAW,CACPH,MAAO,UACPC,KAAM,WAEVG,aAAc,CACVJ,MAAO,UACPC,KAAM,WAEVI,cAAe,CACXL,MAAO,UACPC,KAAM,WAEVK,kBAAmB,CACfN,MAAO,UACPC,KAAM,WAEVM,iBAAkB,CACdP,MAAO,UACPC,KAAM,WAEVO,MAAO,CACHC,KAAM,CACFT,MAAO,cACPC,KAAM,eAEVS,MAAO,CACHV,MAAO,UACPC,KAAM,YAGdU,OAAQ,CACJX,MAAO,UACPC,KAAM,WAEVW,YAAa,CACTZ,MAAO,cACPC,KAAM,eAEVY,iBAAkB,CACdb,MAAO,UACPC,KAAM,WAEVa,oBAAqB,CACjBd,MAAO,UACPC,KAAM,WAEVc,MAAO,CACHC,QAAS,CACLhB,MAAO,UACPC,KAAM,WAEVX,KAAM,CACFU,MAAO,UACPC,KAAM,WAEVT,QAAS,CACLQ,MAAO,UACPC,KAAM,WAEVP,QAAS,CACLM,MAAO,UACPC,KAAM,WAEVL,MAAO,CACHI,MAAO,UACPC,KAAM,aAIlBgB,KAAM,CACFC,QAAS,CACLlB,MAAO,UACPC,KAAM,WAEVkB,QAAS,CACLnB,MAAO,UACPC,KAAM,WAEVmB,SAAU,CACNpB,MAAO,UACPC,KAAM,WAEVoB,SAAU,CACNrB,MAAO,UACPC,KAAM,WAEVW,YAAa,CACTZ,MAAO,UACPC,KAAM,WAEVY,iBAAkB,CACdb,MAAO,UACPC,KAAM,WAEVqB,QAAS,CACLtB,MAAO,UACPC,KAAM,YAGdsB,OAAQ,CACJZ,OAAQ,CACJX,MAAO,UACPC,KAAM,WAEVO,MAAO,CACHR,MAAO,UACPC,KAAM,WAEVuB,WAAY,CACRxB,MAAO,UACPC,KAAM,WAEVwB,UAAW,CACPzB,MAAO,UACPC,KAAM,WAEVyB,gBAAiB,CACb1B,MAAO,UACPC,KAAM,WAEV0B,eAAgB,CACZ3B,MAAO,UACPC,KAAM,WAEVkB,QAAS,CACLnB,MAAO,UACPC,KAAM,YAGdnB,MAAO,OACPF,QAAS,UACTG,OAAQ,UACRC,SAAU,UACVC,MAAO,UACPC,QAAS,UACTP,MAAO,UACPQ,IAAK,UACLC,KAAM,UACNV,QAAS,UACTG,KAAM,OACN+C,QAAS,UACTC,YAAa,UACbC,KAAM,UACNC,SAAU,UACVzC,KAAM,UACNC,SAAU,UACVyC,SAAU,UACVC,aAAc,WAElBC,OAAQ,CACJC,OAAQ,CACJC,UAAW,OACXC,OAAQ,QACRC,WAAY,QACZC,WAAY,QACZC,KAAM,SAEVC,OAAQ,CACJC,SAAU,OACVC,SAAU,WACVC,KAAM,UACNC,gBAAiB,kCACjBnC,MAAO,oCAGfoC,QAAS,CACL,EAAG,IACH,EAAG,WACH,EAAG,UACH,EAAG,SACH,GAAI,UACJ,GAAI,OACJ,GAAI,SACJ,GAAI,OACJ,GAAI,SACJ,GAAI,OACJ,IAAK,SACL,IAAK,WAETC,KAAM,CACFC,OAAQ,CACJC,OAAQ,MACRC,KAAM,QAGdC,WAAY,CACRH,OAAQ,CACJC,OAAQ,MACRC,KAAM,OAEVE,KAAM,CACFC,KAAM,CACF,GAAI,OACJ,GAAI,WACJ,GAAI,UACJ,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,WACJ,GAAI,UACJ,GAAI,WACJ,GAAI,UACJ,GAAI,UACJ,GAAI,WAGZC,KAAM,CACFC,OAAQ,CACJ,GAAI,SACJ,GAAI,UACJ,GAAI,OACJ,GAAI,UACJ,GAAI,SACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SAGZC,MAAO,CACHC,MAAO,CACHC,SAAU,UACVC,WAAY,UACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,SACVC,WAAY,OACZC,WAAY,QAGpBC,WAAY,CACRJ,MAAO,CACHC,SAAU,WACVC,WAAY,UACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,UACVC,WAAY,UACZC,WAAY,QAGpBE,UAAW,CACPL,MAAO,CACHC,SAAU,WACVC,WAAY,OACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,UACVC,WAAY,UACZC,WAAY,QAGpBG,UAAW,CACPN,MAAO,CACHC,SAAU,YACVC,WAAY,OACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,UACVC,WAAY,SACZC,WAAY,QAGpBI,UAAW,CACPP,MAAO,CACHC,SAAU,YACVC,WAAY,UACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,YACVC,WAAY,OACZC,WAAY,QAGpBK,UAAW,CACPR,MAAO,CACHC,SAAU,WACVC,WAAY,SACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,YACVC,WAAY,UACZC,WAAY,QAGpBM,UAAW,CACPT,MAAO,CACHC,SAAU,OACVC,WAAY,SACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,OACVC,WAAY,SACZC,WAAY,QAGpBO,KAAM,CACFV,MAAO,CACHC,SAAU,WACVC,WAAY,UACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,UACVC,WAAY,OACZC,WAAY,QAGpBH,MAAO,CACHA,MAAO,CACHC,SAAU,OACVC,WAAY,SACZC,WAAY,OAEhBnD,KAAM,CACFiD,SAAU,OACVC,WAAY,SACZC,WAAY"}

package/build/cjs/core/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

package/build/cjs/core/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/core/types.d.cts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { default as tokens } from './tokens.cjs;'
+export interface DataTestAutoId {
+    "data-testautoid"?: string;
+}
+export type ColorScheme = "light" | "dark";
+export type Density = "comfortable" | "compact";
+export type Easing = keyof typeof tokens.motion.easing;
+export type Timing = keyof typeof tokens.motion.timing;
+/**
+ * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at
+ * TypeScript skal kunne oppdage når komponenten forventer children og ikke
+ * får det, eller at komponenten blir _gitt_ children men ikke forventer det.
+ *
+ * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du
+ * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.
+ * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du
+ * WithOptionalChildren.
+ *
+ * @see WithOptionalChildren
+ * @see https://solverfox.dev/writing/no-implicit-children/
+ */
+export interface WithChildren {
+    children: ReactNode | ReactNode[];
+}
+/**
+ * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at
+ * TypeScript skal kunne oppdage når komponenten forventer children og ikke
+ * får det, eller at komponenten blir _gitt_ children men ikke forventer det.
+ *
+ * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du
+ * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.
+ *
+ * Om du alltid forventer å få children, bruk WithChildren.
+ *
+ * @see WithChildren
+ * @see https://solverfox.dev/writing/no-implicit-children/
+ */
+export interface WithOptionalChildren {
+    children?: ReactNode | ReactNode[];
+}

package/build/cjs/hooks/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedDetails/useAnimatedDetails.cjs"),s=require("./useAnimatedHeight/useAnimatedHeight.cjs"),r=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),u=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),i=require("./useBrowserPreferences/useBrowserPreferences.cjs"),t=require("./useIntersectionObserver/useIntersectionObserver.cjs"),o=require("./useLocalStorage/useLocalStorage.cjs"),n=require("./useMutationObserver/useMutationObserver.cjs"),c=require("./usePreviousValue/usePreviousValue.cjs"),a=require("./useProgressiveImg/useProgressiveImg.cjs"),g=require("./useScreen/useScreen.cjs"),l=require("./useScrollIntoView/useScrollIntoView.cjs"),d=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),m=require("./useClickOutside/useClickOutside.cjs"),p=require("./useFocusOutside/useFocusOutside.cjs"),v=require("./useElementDimensions/useElementDimensions.cjs"),A=require("./useId/useId.cjs"),j=require("./useKeyListener/useKeyListener.cjs"),x=require("./useListNavigation/useListNavigation.cjs"),q=require("./useSwipeGesture/useSwipeGesture.cjs");exports.useAnimatedDetails=e.useAnimatedDetails,exports.useAnimatedHeight=s.useAnimatedHeight,exports.useAnimatedHeightBetween=r.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=u.useAutoAnimatedHeight,exports.useBrowserPreferences=i.useBrowserPreferences,exports.useIntersectionObserver=t.useIntersectionObserver,exports.useLocalStorage=o.useLocalStorage,exports.useMutationObserver=n.useMutationObserver,exports.usePreviousValue=c.usePreviousValue,exports.useProgressiveImg=a.useProgressiveImg,exports.useScreen=g.useScreen,exports.useScrollIntoView=l.useScrollIntoView,exports.useAriaLiveRegion=d.useAriaLiveRegion,exports.useClickOutside=m.useClickOutside,exports.useFocusOutside=p.useFocusOutside,exports.useElementDimensions=v.useElementDimensions,exports.useId=A.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=x.useListNavigation,exports.useSwipeGesture=q.useSwipeGesture;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/hooks/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,18 @@
+export { useAnimatedDetails } from './useAnimatedDetails/useAnimatedDetails.cjs;'
+export { useAnimatedHeight, useAnimatedHeightBetween, useAutoAnimatedHeight, type UseAutoAnimatedHeightOptions, type UseAnimatedHeightOptions, } from './useAnimatedHeight/index.cjs;'
+export { useBrowserPreferences } from './/useBrowserPreferences//useBrowserPreferences.cjs;'
+export { useIntersectionObserver } from './useIntersectionObserver/useIntersectionObserver.cjs;'
+export { useLocalStorage } from './useLocalStorage/useLocalStorage.cjs;'
+export { useMutationObserver } from './useMutationObserver/useMutationObserver.cjs;'
+export { usePreviousValue } from './usePreviousValue/usePreviousValue.cjs;'
+export { useProgressiveImg, type ProgressiveImageProps } from './useProgressiveImg/useProgressiveImg.cjs;'
+export { useScreen, type ScreenState } from './useScreen/index.cjs;'
+export { useScrollIntoView, type ScrollIntoViewProps } from './useScrollIntoView/useScrollIntoView.cjs;'
+export { useAriaLiveRegion, type UseAriaLiveRegionOptions } from './useAriaLiveRegion/useAriaLiveRegion.cjs;'
+export { useClickOutside } from './useClickOutside/useClickOutside.cjs;'
+export { useFocusOutside } from './useFocusOutside/useFocusOutside.cjs;'
+export { useElementDimensions, type Dimensions } from './useElementDimensions/useElementDimensions.cjs;'
+export { useId } from './useId/useId.cjs;'
+export { useKeyListener } from './useKeyListener/useKeyListener.cjs;'
+export { useListNavigation } from './useListNavigation/useListNavigation.cjs;'
+export { useSwipeGesture, type SwipeChangeHandler } from './useSwipeGesture/useSwipeGesture.cjs;'

package/build/cjs/hooks/mediaQueryUtils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.addMediaQueryListener=function(e,t){typeof e.addEventListener<"u"?e.addEventListener("change",t):e.addListener(t)},exports.getInitialMediaQueryMatch=function(e){return!!window.matchMedia&&window.matchMedia(e).matches},exports.removeMediaQueryListener=function(e,t){typeof e.removeEventListener<"u"?e.removeEventListener("change",t):e.removeListener(t)};
+//# sourceMappingURL=mediaQueryUtils.cjs.map