@fremtind/jokul 0.71.2 → 1.0.0

package/build/cjs/components/file/stories/File.stories.d.cts

@@ -23,7 +23,7 @@ declare const meta: {
         fileName: string;
         fileType: string;
         fileSize: number;
-        path: string;
+        path: any;
         variant: "list";
     };
 };

package/build/cjs/components/file-input/FileInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {forwardRef, useId} from \"react\";\nimport {FieldGroup} from \"../../components/input-group/FieldGroup.js\";\nimport {Dropzone} from \"./internal/Dropzone.js\";\nimport {Input} from \"./internal/Input.js\";\nimport {MaxSize} from \"./internal/MaxSize.js\";\nimport {FileInputContextProvider} from \"./internal/fileInputContext.js\";\nimport type {FileInputProps} from \"./types.js\";\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n    (props, ref) => {\n        const {\n            accept,\n            className,\n            children,\n            id,\n            value,\n            density,\n            multiple = true,\n            maxSizeBytes,\n            onChange,\n            variant,\n            ...rest\n        } = props;\n\n        const hasFiles = value.length > 0;\n\n        const maxSizeDescriptionId = useId();\n\n        if (variant === \"small\") {\n            return (\n                <FileInputContextProvider\n                    context={{ accept, onChange, maxSizeBytes, files: value }}\n                >\n                    <FieldGroup\n                        className={clsx(\n                            \"jkl-file-input\",\n                            \"jkl-file-input--small\",\n                            className,\n                            {\n                                \"jkl-file-input--has-files\": hasFiles,\n                            },\n                        )}\n                        data-layout-density={density ? density : \"compact\"}\n                        {...rest}\n                    >\n                        <Dropzone>\n                            <div className=\"jkl-file-input__call-to-action\">\n                                <Input\n                                    id={id}\n                                    label=\"Legg til fil\"\n                                    multiple={multiple}\n                                    ref={ref}\n                                    aria-describedby={maxSizeDescriptionId}\n                                />\n                            </div>\n                        </Dropzone>\n                        <MaxSize id={maxSizeDescriptionId} />\n                        {value.length > 0 && (\n                            <ul className=\"jkl-file-input__files\">\n                                {children}\n                            </ul>\n                        )}\n                    </FieldGroup>\n                </FileInputContextProvider>\n            );\n        }\n\n        return (\n            <FileInputContextProvider\n                context={{ accept, onChange, maxSizeBytes, files: value }}\n            >\n                <FieldGroup\n                    className={clsx(\"jkl-file-input\", className, {\n                        \"jkl-file-input--has-files\": hasFiles,\n                    })}\n                    data-layout-density={density}\n                    {...rest}\n                >\n                    <Dropzone>\n                        {value.length > 0 && (\n                            <ul className=\"jkl-file-input__files\">\n                                {children}\n                            </ul>\n                        )}\n                        <div className=\"jkl-file-input__call-to-action\">\n                            <Input\n                                id={id}\n                                label={\n                                    multiple && hasFiles\n                                        ? \"Legg til flere filer\"\n                                        : \"Legg til fil\"\n                                }\n                                multiple={multiple}\n                                ref={ref}\n                                aria-describedby={maxSizeDescriptionId}\n                            />\n                            <MaxSize id={maxSizeDescriptionId} />\n                        </div>\n                    </Dropzone>\n                </FieldGroup>\n            </FileInputContextProvider>\n        );\n    },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"mXASaA,EAAYC,EAAAA,YACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,EAAAA,QAE7B,MAAgB,UAAZL,EAEIM,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAAAA,KAACC,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,MAACO,EAAAA,SACG,CAAApB,SAAAa,EAAAA,IAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,SACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,SASrBa,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAAAA,IAACK,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,gBAACoB,WACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAAA,IAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAAA,KAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}
+{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputProps } from \"./types.js\";\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n    (props, ref) => {\n        const {\n            accept,\n            className,\n            children,\n            id,\n            value,\n            density,\n            multiple = true,\n            maxSizeBytes,\n            onChange,\n            variant,\n            ...rest\n        } = props;\n\n        const hasFiles = value.length > 0;\n\n        const maxSizeDescriptionId = useId();\n\n        if (variant === \"small\") {\n            return (\n                <FileInputContextProvider\n                    context={{ accept, onChange, maxSizeBytes, files: value }}\n                >\n                    <FieldGroup\n                        className={clsx(\n                            \"jkl-file-input\",\n                            \"jkl-file-input--small\",\n                            className,\n                            {\n                                \"jkl-file-input--has-files\": hasFiles,\n                            },\n                        )}\n                        data-layout-density={density ? density : \"compact\"}\n                        {...rest}\n                    >\n                        <Dropzone>\n                            <div className=\"jkl-file-input__call-to-action\">\n                                <Input\n                                    id={id}\n                                    label=\"Legg til fil\"\n                                    multiple={multiple}\n                                    ref={ref}\n                                    aria-describedby={maxSizeDescriptionId}\n                                />\n                            </div>\n                        </Dropzone>\n                        <MaxSize id={maxSizeDescriptionId} />\n                        {value.length > 0 && (\n                            <ul className=\"jkl-file-input__files\">\n                                {children}\n                            </ul>\n                        )}\n                    </FieldGroup>\n                </FileInputContextProvider>\n            );\n        }\n\n        return (\n            <FileInputContextProvider\n                context={{ accept, onChange, maxSizeBytes, files: value }}\n            >\n                <FieldGroup\n                    className={clsx(\"jkl-file-input\", className, {\n                        \"jkl-file-input--has-files\": hasFiles,\n                    })}\n                    data-layout-density={density}\n                    {...rest}\n                >\n                    <Dropzone>\n                        {value.length > 0 && (\n                            <ul className=\"jkl-file-input__files\">\n                                {children}\n                            </ul>\n                        )}\n                        <div className=\"jkl-file-input__call-to-action\">\n                            <Input\n                                id={id}\n                                label={\n                                    multiple && hasFiles\n                                        ? \"Legg til flere filer\"\n                                        : \"Legg til fil\"\n                                }\n                                multiple={multiple}\n                                ref={ref}\n                                aria-describedby={maxSizeDescriptionId}\n                            />\n                            <MaxSize id={maxSizeDescriptionId} />\n                        </div>\n                    </Dropzone>\n                </FieldGroup>\n            </FileInputContextProvider>\n        );\n    },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"mXASaA,EAAYC,EAAAA,YACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,EAAAA,QAE7B,MAAgB,UAAZL,EAEIM,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAAAA,KAACC,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,MAACO,EAAAA,SACG,CAAApB,SAAAa,EAAAA,IAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,SACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,SASrBa,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAAAA,IAACK,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,gBAACoB,WACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAAA,IAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAAA,KAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}

package/build/cjs/components/file-input/internal/Dropzone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.cjs","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {forwardRef, useState} from \"react\";\nimport type {WithChildren} from \"../../../core/types.js\";\nimport type {UploadedFile} from \"../types.js\";\nimport {useFileInputContext} from \"./fileInputContext.js\";\nimport {validateFileInputFiles} from \"./validateFileInputFiles.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n    (props, ref) => {\n        const { children, ...rest } = props;\n        const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n        const context = useFileInputContext();\n        if (!context) {\n            return (\n                <p>\n                    Dropzone must be placed inside a FileInputContextProvider.\n                </p>\n            );\n        }\n        const { maxSizeBytes, accept, onChange } = context;\n\n        return (\n            <div\n                {...rest}\n                ref={ref}\n                className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n                onDragEnter={(e) => {\n                    setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n                    e.preventDefault();\n                }}\n                onDragOver={(e) => {\n                    /* Prevent browser from opening file in a new tab */\n                    setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n                    e.preventDefault();\n                }}\n                onDrop={(e) => {\n                    e.preventDefault();\n                    setOnDragClassName(\"\");\n\n                    if (e.dataTransfer.files) {\n                        onChange(\n                            e,\n                            [...e.dataTransfer.files].map<UploadedFile>(\n                                (file) => ({\n                                    file,\n                                    state: undefined,\n                                    validation: validateFileInputFiles(\n                                        file,\n                                        accept,\n                                        maxSizeBytes,\n                                    ),\n                                    uploadProgress: 0,\n                                }),\n                            ),\n                        );\n                    }\n                }}\n                onDragLeave={(e) => {\n                    setOnDragClassName(\"\");\n                    e.preventDefault();\n                }}\n            >\n                {children}\n            </div>\n        );\n    },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFileInputFiles","uploadProgress","onDragLeave","displayName"],"mappings":"iQASaA,EAAWC,EAAAA,YACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAAA,SAAiB,IAEzDC,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAAA,IAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAAA,KAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAAA,CACGA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EAAAA,uBACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}
+{"version":3,"file":"Dropzone.cjs","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { UploadedFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFileInputFiles } from \"./validateFileInputFiles.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n    (props, ref) => {\n        const { children, ...rest } = props;\n        const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n        const context = useFileInputContext();\n        if (!context) {\n            return (\n                <p>\n                    Dropzone must be placed inside a FileInputContextProvider.\n                </p>\n            );\n        }\n        const { maxSizeBytes, accept, onChange } = context;\n\n        return (\n            <div\n                {...rest}\n                ref={ref}\n                className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n                onDragEnter={(e) => {\n                    setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n                    e.preventDefault();\n                }}\n                onDragOver={(e) => {\n                    /* Prevent browser from opening file in a new tab */\n                    setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n                    e.preventDefault();\n                }}\n                onDrop={(e) => {\n                    e.preventDefault();\n                    setOnDragClassName(\"\");\n\n                    if (e.dataTransfer.files) {\n                        onChange(\n                            e,\n                            [...e.dataTransfer.files].map<UploadedFile>(\n                                (file) => ({\n                                    file,\n                                    state: undefined,\n                                    validation: validateFileInputFiles(\n                                        file,\n                                        accept,\n                                        maxSizeBytes,\n                                    ),\n                                    uploadProgress: 0,\n                                }),\n                            ),\n                        );\n                    }\n                }}\n                onDragLeave={(e) => {\n                    setOnDragClassName(\"\");\n                    e.preventDefault();\n                }}\n            >\n                {children}\n            </div>\n        );\n    },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFileInputFiles","uploadProgress","onDragLeave","displayName"],"mappings":"iQASaA,EAAWC,EAAAA,YACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAAA,SAAiB,IAEzDC,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAAA,IAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAAA,KAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAAA,CACGA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EAAAA,uBACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}

package/build/cjs/components/file-input/internal/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, {forwardRef, useId} from \"react\";\nimport type {UploadedFile} from \"../types.js\";\nimport {useFileInputContext} from \"./fileInputContext.js\";\nimport {validateFileInputFiles} from \"./validateFileInputFiles.js\";\n\ninterface FileInputProps {\n    id?: string;\n    label: string;\n    multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n    (props, ref) => {\n        const { multiple, id, label, ...rest } = props;\n\n        const defaultId = useId();\n\n        const maxSizeDescriptionId = `${id}-description`;\n        const descriptor = multiple ? \"filer\" : \"fil\";\n\n        const context = useFileInputContext();\n        if (!context) {\n            return (\n                <p>Input must be placed inside a FileInputContextProvider.</p>\n            );\n        }\n        const { accept, maxSizeBytes, onChange } = context;\n\n        const elementId = id || defaultId;\n\n        return (\n            <>\n                <label\n                    className=\"jkl-button jkl-button--secondary\"\n                    htmlFor={elementId}\n                    id={`${elementId}__add-btn`}\n                >\n                    {label}\n                </label>\n                <input\n                    {...rest}\n                    ref={ref}\n                    id={elementId}\n                    accept={accept}\n                    aria-describedby={\n                        maxSizeBytes ? maxSizeDescriptionId : undefined\n                    }\n                    className=\"jkl-sr-only\"\n                    type=\"file\"\n                    multiple={multiple}\n                    value=\"\"\n                    onChange={(e) => {\n                        if (e.target.files) {\n                            onChange(\n                                e,\n                                [...e.target.files].map<UploadedFile>(\n                                    (file) => ({\n                                        file,\n                                        state: undefined,\n                                        validation: validateFileInputFiles(\n                                            file,\n                                            accept,\n                                            maxSizeBytes,\n                                        ),\n                                        uploadProgress: 0,\n                                    }),\n                                ),\n                            );\n                        }\n                    }}\n                />\n                <p className=\"jkl-file-input__dropzone-hint\">\n                    eller slipp {descriptor} her\n                </p>{\" \"}\n            </>\n        );\n    },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFileInputFiles","uploadProgress","displayName"],"mappings":"sNAWaA,EAAQC,EAAAA,YACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,EAAAA,QAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEC,SAAuD,4DAGlE,MAAQC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAA,KAAAC,WAAA,CAAAN,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAAA,IAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,KACGA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EAAAA,uBACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAAA,KAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}
+{"version":3,"file":"Input.cjs","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { UploadedFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFileInputFiles } from \"./validateFileInputFiles.js\";\n\ninterface FileInputProps {\n    id?: string;\n    label: string;\n    multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n    (props, ref) => {\n        const { multiple, id, label, ...rest } = props;\n\n        const defaultId = useId();\n\n        const maxSizeDescriptionId = `${id}-description`;\n        const descriptor = multiple ? \"filer\" : \"fil\";\n\n        const context = useFileInputContext();\n        if (!context) {\n            return (\n                <p>Input must be placed inside a FileInputContextProvider.</p>\n            );\n        }\n        const { accept, maxSizeBytes, onChange } = context;\n\n        const elementId = id || defaultId;\n\n        return (\n            <>\n                <label\n                    className=\"jkl-button jkl-button--secondary\"\n                    htmlFor={elementId}\n                    id={`${elementId}__add-btn`}\n                >\n                    {label}\n                </label>\n                <input\n                    {...rest}\n                    ref={ref}\n                    id={elementId}\n                    accept={accept}\n                    aria-describedby={\n                        maxSizeBytes ? maxSizeDescriptionId : undefined\n                    }\n                    className=\"jkl-sr-only\"\n                    type=\"file\"\n                    multiple={multiple}\n                    value=\"\"\n                    onChange={(e) => {\n                        if (e.target.files) {\n                            onChange(\n                                e,\n                                [...e.target.files].map<UploadedFile>(\n                                    (file) => ({\n                                        file,\n                                        state: undefined,\n                                        validation: validateFileInputFiles(\n                                            file,\n                                            accept,\n                                            maxSizeBytes,\n                                        ),\n                                        uploadProgress: 0,\n                                    }),\n                                ),\n                            );\n                        }\n                    }}\n                />\n                <p className=\"jkl-file-input__dropzone-hint\">\n                    eller slipp {descriptor} her\n                </p>{\" \"}\n            </>\n        );\n    },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFileInputFiles","uploadProgress","displayName"],"mappings":"sNAWaA,EAAQC,EAAAA,YACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,EAAAA,QAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEC,SAAuD,4DAGlE,MAAQC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAA,KAAAC,WAAA,CAAAN,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAAA,IAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,KACGA,KAAAA,EACAC,WAAO,EACPC,WAAYC,EAAAA,uBACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAAA,KAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}

package/build/cjs/components/file-input/internal/fileInputContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"fileInputContext.cjs","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, {createContext, useContext} from \"react\";\nimport type {WithChildren} from \"../../../core/types.js\";\nimport type {UploadedFile} from \"../types.js\";\n\ntype FileInputContext = {\n    accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n    maxSizeBytes?: number;\n    files: UploadedFile[];\n    onChange: (\n        e:\n            | React.ChangeEvent<HTMLInputElement>\n            | React.DragEvent<HTMLDivElement>,\n        files: UploadedFile[],\n    ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext | null>(null);\n\nexport const useFileInputContext = (): FileInputContext | null =>\n    useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n    context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n    FileInputContextProviderProps\n> = ({ context, children }) => (\n    <fileInputContext.Provider value={context}>\n        {children}\n    </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","context","children","jsx","Provider","value","useContext"],"mappings":"wIAgBMA,EAAmBC,gBAAuC,uCAW5D,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAA,IAAAJ,EAAiBK,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA,gCAX0B,IAC/BI,EAAAA,WAAWP"}
+{"version":3,"file":"fileInputContext.cjs","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { UploadedFile } from \"../types.js\";\n\ntype FileInputContext = {\n    accept?: \"image/*\" | \".pdf\" | \"image/*,.pdf\" | HTMLInputElement[\"accept\"];\n    maxSizeBytes?: number;\n    files: UploadedFile[];\n    onChange: (\n        e:\n            | React.ChangeEvent<HTMLInputElement>\n            | React.DragEvent<HTMLDivElement>,\n        files: UploadedFile[],\n    ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext | null>(null);\n\nexport const useFileInputContext = (): FileInputContext | null =>\n    useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n    context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n    FileInputContextProviderProps\n> = ({ context, children }) => (\n    <fileInputContext.Provider value={context}>\n        {children}\n    </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","context","children","jsx","Provider","value","useContext"],"mappings":"wIAgBMA,EAAmBC,gBAAuC,uCAW5D,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAA,IAAAJ,EAAiBK,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA,gCAX0B,IAC/BI,EAAAA,WAAWP"}

package/build/cjs/components/file-input/internal/validateFileInputFiles.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../utilities/formatters/bytes/formatBytes.cjs");exports.validateFileInputFiles=function(t,s="",i){var a;const o=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let r=0===o.length;return r=o.some((e=>t.type.toLowerCase().includes(e)||t.name.toLowerCase().endsWith(e))),r?typeof i<"u"&&t.size>i?{type:"TOO_LARGE",message:`Filen er ${e.formatBytes(t.size)}, men kan maksimalt være ${e.formatBytes(i)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${(null==(a=t.name)?void 0:a.split(".")[1])||""} støttes ikke`}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../utilities/formatters/bytes/formatBytes.cjs");exports.validateFileInputFiles=function(t,s="",i){const a=s.split(",").map((e=>e.toLowerCase())).map((e=>e.replaceAll("*",""))).map((e=>e.trim()));let o=0===a.length;return o=a.some((e=>t.type.toLowerCase().includes(e)||t.name.toLowerCase().endsWith(e))),o?typeof i<"u"&&t.size>i?{type:"TOO_LARGE",message:`Filen er ${e.formatBytes(t.size)}, men kan maksimalt være ${e.formatBytes(i)}`}:void 0:{type:"WRONG_TYPE",message:`Filtypen ${t.name?.split(".")[1]||""} støttes ikke`}};
 //# sourceMappingURL=validateFileInputFiles.cjs.map

package/build/cjs/components/file-input/internal/validateFileInputFiles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validateFileInputFiles.cjs","sources":["../../../../../src/components/file-input/internal/validateFileInputFiles.ts"],"sourcesContent":["import {formatBytes} from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type {UploadedFile} from \"../types.js\";\n\nexport function validateFileInputFiles(\n    file: File,\n    accept = \"\",\n    maxSizeBytes?: number,\n): UploadedFile[\"validation\"] | undefined {\n    const acceptStrings = accept\n        .split(\",\")\n        .map((s) => s.toLowerCase())\n        .map((s) => s.replaceAll(\"*\", \"\"))\n        .map((s) => s.trim());\n\n    let isValidFormat = acceptStrings.length === 0;\n\n    isValidFormat = acceptStrings.some(\n        (acceptString) =>\n            file.type.toLowerCase().includes(acceptString) ||\n            file.name.toLowerCase().endsWith(acceptString),\n    );\n\n    if (!isValidFormat) {\n        return {\n            type: \"WRONG_TYPE\",\n            message: `Filtypen ${file.name?.split(\".\")[1] || \"\"} støttes ikke`,\n        };\n    }\n\n    if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n        return {\n            type: \"TOO_LARGE\",\n            message: `Filen er ${formatBytes(\n                file.size,\n            )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n        };\n    }\n\n    return undefined;\n}\n"],"names":["file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes","_a"],"mappings":"sLAGO,SACHA,EACAC,EAAS,GACTC,SAEM,MAAAC,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEd,IAAAC,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EAAAA,YACjBpB,EAAKkB,iCACoBE,cAAYlB,WALjD,EANW,CACHY,KAAM,aACNK,QAAS,aAAY,OAAAE,EAAArB,EAAKgB,WAALK,EAAAA,EAAWjB,MAAM,KAAK,KAAM,kBAc7D"}
+{"version":3,"file":"validateFileInputFiles.cjs","sources":["../../../../../src/components/file-input/internal/validateFileInputFiles.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { UploadedFile } from \"../types.js\";\n\nexport function validateFileInputFiles(\n    file: File,\n    accept = \"\",\n    maxSizeBytes?: number,\n): UploadedFile[\"validation\"] | undefined {\n    const acceptStrings = accept\n        .split(\",\")\n        .map((s) => s.toLowerCase())\n        .map((s) => s.replaceAll(\"*\", \"\"))\n        .map((s) => s.trim());\n\n    let isValidFormat = acceptStrings.length === 0;\n\n    isValidFormat = acceptStrings.some(\n        (acceptString) =>\n            file.type.toLowerCase().includes(acceptString) ||\n            file.name.toLowerCase().endsWith(acceptString),\n    );\n\n    if (!isValidFormat) {\n        return {\n            type: \"WRONG_TYPE\",\n            message: `Filtypen ${file.name?.split(\".\")[1] || \"\"} støttes ikke`,\n        };\n    }\n\n    if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n        return {\n            type: \"TOO_LARGE\",\n            message: `Filen er ${formatBytes(\n                file.size,\n            )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n        };\n    }\n\n    return undefined;\n}\n"],"names":["file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes"],"mappings":"sLAGO,SACHA,EACAC,EAAS,GACTC,GAEM,MAAAC,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEd,IAAAC,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EAAAA,YACjBpB,EAAKkB,iCACoBE,cAAYlB,WALjD,EANW,CACHY,KAAM,aACNK,QAAS,YAAYnB,EAAKgB,MAAMZ,MAAM,KAAK,IAAM,kBAc7D"}

package/build/cjs/components/file-input/stories/FileInput.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport {File} from \"../../file/File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {UploadedFile} from \"../types.js\";\n\nconst meta = {\n    title: \"Komponenter/File/FileInput\",\n    component: FileInput,\n    subcomponents: {File, Dropzone, MaxSize, Button},\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n        labelProps: {\n            variant: \"medium\",\n        },\n        accept: \"image/*,.pdf\",\n        maxSizeBytes: 8_000_000,\n    },\n    render: (args) => {\n        const [files, setFiles] = useState<UploadedFile[]>([]);\n\n        return (\n            <div>\n                <FileInput\n                    {...args}\n                    id=\"file-input-example\"\n                    className=\"jkl-spacing-16-24--bottom\"\n                    value={files}\n                    onChange={(_e, newFiles) => {\n                        setFiles((currentFiles) => [\n                            ...currentFiles,\n                            ...newFiles,\n                        ]);\n                    }}\n                >\n                    {files.map(({state, file, validation}, index) => {\n                        return (\n                            <File\n                                key={`${file.name}-${index}`}\n                                fileName={file.name}\n                                fileType={file.type}\n                                fileSize={file.size}\n                                path={`/path/fil-${index}`}\n                                file={file}\n                                state={state}\n                                onRemove={\n                                    state !== \"loading\" ? (e) => \"\" : undefined\n                                }\n                            />\n                        );\n                    })}\n                </FileInput>\n                <PrimaryButton\n                    className=\"jkl-spacing-16--top\"\n                    type=\"button\"\n                    onClick={async () => {\n                        const toUpload = files.filter(\n                            (fileState) =>\n                                typeof fileState.validation === \"undefined\",\n                        );\n\n                        const newFiles = files.map((file) =>\n                            toUpload.includes(file)\n                                ? {\n                                    ...file,\n                                }\n                                : file,\n                        );\n\n                        setFiles(\n                            newFiles.map((file) => {\n                                return {...file, state: \"loading\"};\n                            }),\n                        );\n\n                        await Promise.all(newFiles);\n                    }}\n                >\n                    Last opp\n                </PrimaryButton>\n            </div>\n        );\n    },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","fileName","fileType","type","fileSize","size","path","onRemove","e","PrimaryButton","onClick","async","toUpload","filter","fileState","includes","Promise","all"],"mappings":"oYAUMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EAAAA,UACXC,cAAe,CAAAC,KAACA,EAAMA,KAAAC,SAAAA,WAAUC,QAAAA,EAAAA,QAASC,OAAAA,EAAAA,QACzCC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAAA,SAAyB,IAEnD,cACK,MACG,CAAAC,SAAA,CAAAC,EAAAA,IAAC1B,EAAAA,UAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAEC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAaC,IAE/BV,EAAAA,IAACxB,EAAAA,KAAA,CAEGmC,SAAUH,EAAKxB,KACf4B,SAAUJ,EAAKK,KACfC,SAAUN,EAAKO,KACfC,KAAM,aAAaN,IACnBF,KAAAA,EACAD,MAAAA,EACAU,SACc,YAAVV,EAAuBW,GAAM,QAAK,GARjC,GAAGV,EAAKxB,QAAQ0B,SAcrCV,EAAAA,IAACmB,EAAAA,cAAA,CACGjB,UAAU,sBACVW,KAAK,SACLO,QAASC,UACL,MAAMC,EAAW1B,EAAM2B,QAClBC,UACUA,EAAUf,WAAe,MAGlCL,EAAWR,EAAMU,KAAKE,GACxBc,EAASG,SAASjB,GACZ,IACKA,GAELA,IAGVX,EACIO,EAASE,KAAKE,IAAAA,IACCA,EAAMD,MAAO,qBAI1BmB,QAAQC,IAAIvB,EAAQ,EAEjCL,SAAA,eAGL"}
+{"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport \"../styles/_index.scss\";\nimport { Button, PrimaryButton } from \"../../button/index.js\";\nimport { File } from \"../../file/File.js\";\nimport { FileInput } from \"../FileInput.js\";\nimport { Dropzone } from \"../internal/Dropzone.js\";\nimport { MaxSize } from \"../internal/MaxSize.js\";\nimport type { UploadedFile } from \"../types.js\";\n\nconst meta = {\n    title: \"Komponenter/File/FileInput\",\n    component: FileInput,\n    subcomponents: { File, Dropzone, MaxSize, Button },\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n        labelProps: {\n            variant: \"medium\",\n        },\n        accept: \"image/*,.pdf\",\n        maxSizeBytes: 8_000_000,\n    },\n    render: (args) => {\n        const [files, setFiles] = useState<UploadedFile[]>([]);\n\n        return (\n            <div>\n                <FileInput\n                    {...args}\n                    id=\"file-input-example\"\n                    className=\"jkl-spacing-16-24--bottom\"\n                    value={files}\n                    onChange={(_e, newFiles) => {\n                        setFiles((currentFiles) => [\n                            ...currentFiles,\n                            ...newFiles,\n                        ]);\n                    }}\n                >\n                    {files.map(({ state, file, validation }, index) => {\n                        return (\n                            <File\n                                key={`${file.name}-${index}`}\n                                fileName={file.name}\n                                fileType={file.type}\n                                fileSize={file.size}\n                                path={`/path/fil-${index}`}\n                                file={file}\n                                state={state}\n                                onRemove={\n                                    state !== \"loading\" ? (e) => \"\" : undefined\n                                }\n                            />\n                        );\n                    })}\n                </FileInput>\n                <PrimaryButton\n                    className=\"jkl-spacing-16--top\"\n                    type=\"button\"\n                    onClick={async () => {\n                        const toUpload = files.filter(\n                            (fileState) =>\n                                typeof fileState.validation === \"undefined\",\n                        );\n\n                        const newFiles = files.map((file) =>\n                            toUpload.includes(file)\n                                ? {\n                                      ...file,\n                                  }\n                                : file,\n                        );\n\n                        setFiles(\n                            newFiles.map((file) => {\n                                return { ...file, state: \"loading\" };\n                            }),\n                        );\n\n                        await Promise.all(newFiles);\n                    }}\n                >\n                    Last opp\n                </PrimaryButton>\n            </div>\n        );\n    },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","fileName","fileType","type","fileSize","size","path","onRemove","e","PrimaryButton","onClick","async","toUpload","filter","fileState","includes","Promise","all"],"mappings":"oYAUMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EAAAA,UACXC,cAAe,CAAAC,KAAEA,EAAMA,KAAAC,SAAAA,WAAUC,QAAAA,EAAAA,QAASC,OAAAA,EAAAA,QAC1CC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAAA,SAAyB,IAEnD,cACK,MACG,CAAAC,SAAA,CAAAC,EAAAA,IAAC1B,EAAAA,UAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAGC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAcC,IAEjCV,EAAAA,IAACxB,EAAAA,KAAA,CAEGmC,SAAUH,EAAKxB,KACf4B,SAAUJ,EAAKK,KACfC,SAAUN,EAAKO,KACfC,KAAM,aAAaN,IACnBF,KAAAA,EACAD,MAAAA,EACAU,SACc,YAAVV,EAAuBW,GAAM,QAAK,GARjC,GAAGV,EAAKxB,QAAQ0B,SAcrCV,EAAAA,IAACmB,EAAAA,cAAA,CACGjB,UAAU,sBACVW,KAAK,SACLO,QAASC,UACL,MAAMC,EAAW1B,EAAM2B,QAClBC,UACUA,EAAUf,WAAe,MAGlCL,EAAWR,EAAMU,KAAKE,GACxBc,EAASG,SAASjB,GACZ,IACOA,GAEPA,IAGVX,EACIO,EAASE,KAAKE,IAAAA,IACEA,EAAMD,MAAO,qBAI3BmB,QAAQC,IAAIvB,EAAQ,EAEjCL,SAAA,eAGL"}

package/build/cjs/components/icon/stories/Icons.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),r=require("../../text-input/TextInput.cjs"),o=require("../Icon.cjs");require("../icons/animated/ArrowVerticalAnimated.cjs"),require("../icons/animated/ArrowHorizontalAnimated.cjs"),require("../icons/animated/PlusRemoveAnimated.cjs");const c=require("../icons/ArrowDownIcon.cjs"),s=require("../icons/ArrowLeftIcon.cjs"),i=require("../icons/ArrowNorthEastIcon.cjs"),t=require("../icons/ArrowRightIcon.cjs"),u=require("../icons/ArrowUpIcon.cjs"),I=require("../icons/CalendarIcon.cjs"),a=require("../icons/CheckIcon.cjs"),l=require("../icons/ChevronDownIcon.cjs"),j=require("../icons/ChevronLeftIcon.cjs"),q=require("../icons/ChevronRightIcon.cjs"),d=require("../icons/ChevronUpIcon.cjs"),h=require("../icons/CloseIcon.cjs"),m=require("../icons/CopyIcon.cjs"),p=require("../icons/DotsIcon.cjs"),w=require("../icons/DragIcon.cjs"),C=require("../icons/ErrorIcon.cjs"),g=require("../icons/GreenCheckIcon.cjs"),v=require("../icons/HamburgerIcon.cjs"),x=require("../icons/InfoIcon.cjs"),A=require("../icons/LinkIcon.cjs"),b=require("../icons/MinusIcon.cjs"),f=require("../icons/OpenInNewIcon.cjs"),k=require("../icons/PenIcon.cjs"),y=require("../icons/PlusIcon.cjs"),D=require("../icons/QuestionIcon.cjs"),T=require("../icons/RedCrossIcon.cjs"),S=require("../icons/SearchIcon.cjs"),N=require("../icons/SuccessIcon.cjs"),R=require("../icons/ThumbDownIcon.cjs"),L=require("../icons/ThumbUpIcon.cjs"),P=require("../icons/TrashCanIcon.cjs"),U=require("../icons/WarningIcon.cjs");;/* empty css                            */const E=({name:n,renderIcon:r,...o})=>e.jsx("div",{title:n||r.name,...o,children:r()}),M=({columns:n,children:r,...o})=>e.jsx("div",{className:`jkl-example-grid jkl-example-grid--${n}-columns`,...o,children:r}),H={title:"Komponenter/Ikoner",component:o.Icon,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:"radio",options:["inherit","medium","small"]}}},O=[c.ArrowDownIcon,s.ArrowLeftIcon,i.ArrowNorthEastIcon,t.ArrowRightIcon,u.ArrowUpIcon,I.CalendarIcon,a.CheckIcon,l.ChevronDownIcon,j.ChevronLeftIcon,q.ChevronRightIcon,d.ChevronUpIcon,h.CloseIcon,m.CopyIcon,p.DotsIcon,w.DragIcon,C.ErrorIcon,g.GreenCheckIcon,v.HamburgerIcon,x.InfoIcon,A.LinkIcon,b.MinusIcon,f.OpenInNewIcon,k.PenIcon,y.PlusIcon,D.QuestionIcon,T.RedCrossIcon,S.SearchIcon,N.SuccessIcon,R.ThumbDownIcon,L.ThumbUpIcon,P.TrashCanIcon,U.WarningIcon],_={args:{variant:"small",bold:!1},render:({variant:o,bold:c})=>{const[s,i]=n.useState("1rem");return e.jsxs("div",{style:{width:"50vw"},children:["inherit"===o&&e.jsx(r.TextInput,{label:"Fontstørrelse",className:"jkl-spacing-24--bottom",value:s,onChange:e=>i(e.target.value),width:"10ch"}),e.jsx(M,{style:{fontSize:s},columns:"four",children:O.map((n=>e.jsx(E,{style:{justifySelf:"center"},renderIcon:()=>e.jsx(n,{bold:c,variant:o}),name:n.displayName},n.displayName)))})]})}};exports.Ikoner=_,exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),r=require("../../text-input/TextInput.cjs"),o=require("../Icon.cjs");require("../icons/animated/ArrowVerticalAnimated.cjs"),require("../icons/animated/ArrowHorizontalAnimated.cjs"),require("../icons/animated/PlusRemoveAnimated.cjs");const c=require("../icons/ArrowDownIcon.cjs"),s=require("../icons/ArrowLeftIcon.cjs"),i=require("../icons/ArrowNorthEastIcon.cjs"),t=require("../icons/ArrowRightIcon.cjs"),u=require("../icons/ArrowUpIcon.cjs"),I=require("../icons/CalendarIcon.cjs"),a=require("../icons/CheckIcon.cjs"),l=require("../icons/ChevronDownIcon.cjs"),j=require("../icons/ChevronLeftIcon.cjs"),q=require("../icons/ChevronRightIcon.cjs"),d=require("../icons/ChevronUpIcon.cjs"),h=require("../icons/CloseIcon.cjs"),m=require("../icons/CopyIcon.cjs"),p=require("../icons/DotsIcon.cjs"),w=require("../icons/DragIcon.cjs"),C=require("../icons/ErrorIcon.cjs"),v=require("../icons/GreenCheckIcon.cjs"),g=require("../icons/HamburgerIcon.cjs"),x=require("../icons/InfoIcon.cjs"),A=require("../icons/LinkIcon.cjs"),b=require("../icons/MinusIcon.cjs"),f=require("../icons/OpenInNewIcon.cjs"),k=require("../icons/PenIcon.cjs"),y=require("../icons/PlusIcon.cjs"),D=require("../icons/QuestionIcon.cjs"),T=require("../icons/RedCrossIcon.cjs"),S=require("../icons/SearchIcon.cjs"),N=require("../icons/SuccessIcon.cjs"),R=require("../icons/ThumbDownIcon.cjs"),L=require("../icons/ThumbUpIcon.cjs"),P=require("../icons/TrashCanIcon.cjs"),U=require("../icons/WarningIcon.cjs");;/* empty css                            */const E=({name:n,renderIcon:r,...o})=>e.jsx("div",{title:n||r.name,...o,children:r()}),M=({columns:n,children:r,...o})=>e.jsx("div",{className:`jkl-example-grid jkl-example-grid--${n}-columns`,...o,children:r}),H={title:"Komponenter/Ikoner",component:o.Icon,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{variant:{control:"radio",options:["inherit","medium","small"]}}},O=[c.ArrowDownIcon,s.ArrowLeftIcon,i.ArrowNorthEastIcon,t.ArrowRightIcon,u.ArrowUpIcon,I.CalendarIcon,a.CheckIcon,l.ChevronDownIcon,j.ChevronLeftIcon,q.ChevronRightIcon,d.ChevronUpIcon,h.CloseIcon,m.CopyIcon,p.DotsIcon,w.DragIcon,C.ErrorIcon,v.GreenCheckIcon,g.HamburgerIcon,x.InfoIcon,A.LinkIcon,b.MinusIcon,f.OpenInNewIcon,k.PenIcon,y.PlusIcon,D.QuestionIcon,T.RedCrossIcon,S.SearchIcon,N.SuccessIcon,R.ThumbDownIcon,L.ThumbUpIcon,P.TrashCanIcon,U.WarningIcon],_={args:{variant:"small",bold:!1},render:({variant:o,bold:c})=>{const[s,i]=n.useState("1rem");return e.jsxs("div",{style:{width:"50vw"},children:["inherit"===o&&e.jsx(r.TextInput,{label:"Fontstørrelse",className:"jkl-spacing-24--bottom",value:s,onChange:e=>i(e.target.value),width:"10ch"}),e.jsx(M,{style:{fontSize:s},columns:"four",children:O.map((n=>e.jsx(E,{style:{justifySelf:"center"},renderIcon:()=>e.jsx(n,{bold:c,variant:o}),name:n.displayName},n.displayName)))})]})}};exports.Ikoner=_,exports.default=H;
 //# sourceMappingURL=Icons.stories.cjs.map

package/build/cjs/components/image/useImageLoadingStatus.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useImageLoadingStatus=t=>{const u=e.useRef(null),[r,n]=e.useState(!1);return e.useEffect((()=>{u.current&&((e,t)=>{let u;!function r(){if(e.complete)return clearTimeout(u),void(null==t||t());u=window.setTimeout(r,50)}()})(u.current,(()=>{n(!0),null==t||t()}))}),[t]),[u,r]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useImageLoadingStatus=t=>{const r=e.useRef(null),[u,o]=e.useState(!1);return e.useEffect((()=>{r.current&&((e,t)=>{let r;!function u(){if(e.complete)return clearTimeout(r),void t?.();r=window.setTimeout(u,50)}()})(r.current,(()=>{o(!0),t?.()}))}),[t]),[r,u]};
 //# sourceMappingURL=useImageLoadingStatus.cjs.map

package/build/cjs/components/image/useImageLoadingStatus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useImageLoadingStatus.cjs","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n    let timeout: number | undefined;\n\n    function checkLoaded() {\n        if (image.complete) {\n            clearTimeout(timeout);\n            callback?.();\n            return;\n        }\n        timeout = window.setTimeout(checkLoaded, 50);\n    }\n\n    checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n    callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n    const imageRef = useRef<HTMLImageElement>(null);\n    const [imageLoaded, setImageLoaded] = useState(false);\n\n    useEffect(() => {\n        imageRef.current &&\n            doWhenImageLoaded(imageRef.current, () => {\n                setImageLoaded(true);\n                callback?.();\n            });\n    }, [callback]);\n\n    return [imageRef, imageLoaded];\n};\n"],"names":["callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","clearTimeout","window","setTimeout","doWhenImageLoaded"],"mappings":"uIAkBIA,IAEM,MAAAC,EAAWC,SAAyB,OACnCC,EAAaC,GAAkBC,EAAAA,UAAS,GAE/CC,OAAAA,EAAAA,WAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5C,IAAAS,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFAC,aAAaH,QACF,MAAAT,GAAAA,KAGLS,EAAAI,OAAOC,WAAWJ,EAAa,GAAE,CAGnCA,EAAA,EAWJK,CAAkBd,EAASM,SAAS,KAChCH,GAAe,GACJ,MAAAJ,GAAAA,MACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}
+{"version":3,"file":"useImageLoadingStatus.cjs","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n    let timeout: number | undefined;\n\n    function checkLoaded() {\n        if (image.complete) {\n            clearTimeout(timeout);\n            callback?.();\n            return;\n        }\n        timeout = window.setTimeout(checkLoaded, 50);\n    }\n\n    checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n    callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n    const imageRef = useRef<HTMLImageElement>(null);\n    const [imageLoaded, setImageLoaded] = useState(false);\n\n    useEffect(() => {\n        imageRef.current &&\n            doWhenImageLoaded(imageRef.current, () => {\n                setImageLoaded(true);\n                callback?.();\n            });\n    }, [callback]);\n\n    return [imageRef, imageLoaded];\n};\n"],"names":["callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","clearTimeout","window","setTimeout","doWhenImageLoaded"],"mappings":"uIAkBIA,IAEM,MAAAC,EAAWC,SAAyB,OACnCC,EAAaC,GAAkBC,EAAAA,UAAS,GAE/CC,OAAAA,EAAAA,WAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5C,IAAAS,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFAC,aAAaH,QACFT,MAGLS,EAAAI,OAAOC,WAAWJ,EAAa,GAAE,CAGnCA,EAAA,EAWJK,CAAkBd,EAASM,SAAS,KAChCH,GAAe,GACJJ,KAAA,GACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}

package/build/cjs/components/input-group/InputGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),i=require("../../hooks/useId/useId.cjs"),s=require("./Label.cjs"),t=require("./SupportLabel.cjs"),n=l.forwardRef(((n,a)=>{const{className:o,children:d,density:p,errorLabel:u,helpLabel:c,inline:b,label:j,labelProps:y,render:h,supportLabelProps:x,tooltip:m,id:v,...f}=n,L=i.useId(v||"jkl-input",{generateSuffix:!v}),S=i.useId("jkl-support-label"),g=!!m,q=u||c,I=u?"error":c?"help":void 0,k={"aria-describedby":q?S:void 0,"aria-invalid":!!u||void 0,id:L},w=h?()=>h(k):()=>{const e=l.Children.toArray(n.children)[0];if(l.isValidElement(e))return l.cloneElement(e,{...k,...e.props})};return e.jsxs("div",{ref:a,className:r.clsx(o,"jkl-input-group",{"jkl-input-group--inline":b}),"data-density":p,...f,children:[e.jsx(s.Label,{standAlone:!0,htmlFor:L,srOnly:b,...y,style:{whiteSpace:g?"nowrap":void 0,...null==y?void 0:y.style},density:p,children:g?e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{whiteSpace:"normal"},children:j})," ",m]}):j}),w(),e.jsx(t.SupportLabel,{srOnly:b,...x,label:q,labelType:I,id:S,density:p})]})}));n.displayName="InputGroup",exports.InputGroup=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),i=require("../../hooks/useId/useId.cjs"),s=require("./Label.cjs"),t=require("./SupportLabel.cjs"),n=l.forwardRef(((n,a)=>{const{className:o,children:d,density:p,errorLabel:u,helpLabel:c,inline:b,label:j,labelProps:y,render:h,supportLabelProps:x,tooltip:m,id:f,...v}=n,L=i.useId(f||"jkl-input",{generateSuffix:!f}),S=i.useId("jkl-support-label"),g=!!m,q=u||c,I=u?"error":c?"help":void 0,k={"aria-describedby":q?S:void 0,"aria-invalid":!!u||void 0,id:L},w=h?()=>h(k):()=>{const e=l.Children.toArray(n.children)[0];if(l.isValidElement(e))return l.cloneElement(e,{...k,...e.props})};return e.jsxs("div",{ref:a,className:r.clsx(o,"jkl-input-group",{"jkl-input-group--inline":b}),"data-density":p,...v,children:[e.jsx(s.Label,{standAlone:!0,htmlFor:L,srOnly:b,...y,style:{whiteSpace:g?"nowrap":void 0,...y?.style},density:p,children:g?e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{whiteSpace:"normal"},children:j})," ",m]}):j}),w(),e.jsx(t.SupportLabel,{srOnly:b,...x,label:q,labelType:I,id:S,density:p})]})}));n.displayName="InputGroup",exports.InputGroup=n;
 //# sourceMappingURL=InputGroup.cjs.map

package/build/cjs/components/input-group/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy = supportText ? supportId : undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                data-density={density}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                    density={density}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,YACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAAA,KAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAAA,KAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjC,MAAAV,OAAAA,EAAAA,EAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAA,KAAAS,EAAAA,SAAA,CAAApC,SAAA,CAAA6B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MAER,IAKZN,EAAW4C,YAAc"}
+{"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy = supportText ? supportId : undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                data-density={density}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                    density={density}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,YACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAAA,KAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAAA,KAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCV,GAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAA,KAAAS,EAAAA,SAAA,CAAApC,SAAA,CAAA6B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MAER,IAKZN,EAAW4C,YAAc"}

package/build/cjs/components/input-group/stories/FieldGroup.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const r=require("../../checkbox/Checkbox.cjs"),o=require("../../tooltip/PopupTip.cjs"),t=require("../FieldGroup.cjs");/* empty css                             */;/* empty css                            */const i={title:"Komponenter/InputGroup/FieldGroup",component:t.FieldGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},l=e.jsx(o.PopupTip,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),n={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:o,...i})=>e.jsxs(t.FieldGroup,{...i,tooltip:o?l:void 0,children:[e.jsx(r.Checkbox,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),e.jsx(r.Checkbox,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),e.jsx(r.Checkbox,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};exports.FieldGroupStory=n,exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const r=require("../../checkbox/Checkbox.cjs"),o=require("../../tooltip/PopupTip.cjs"),t=require("../FieldGroup.cjs");/* empty css                             */;/* empty css                            */const l={title:"Komponenter/InputGroup/FieldGroup",component:t.FieldGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},i=e.jsx(o.PopupTip,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),n={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:o,...l})=>e.jsxs(t.FieldGroup,{...l,tooltip:o?i:void 0,children:[e.jsx(r.Checkbox,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),e.jsx(r.Checkbox,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),e.jsx(r.Checkbox,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};exports.FieldGroupStory=n,exports.default=l;
 //# sourceMappingURL=FieldGroup.stories.cjs.map

package/build/cjs/components/link/stories/Link.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const t=require("../Link.cjs"),r=require("../../flex/Flex.cjs"),s={title:"Komponenter/Link",component:t.Link,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text",defaultValue:"https://www.fremtind.no"}}},i={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:r=>e.jsx(t.Link,{style:{cursor:"pointer"},...r,as:r.as||"a"})},l={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no"},render:r=>e.jsxs("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e.jsx(t.Link,{...r,external:!1,style:{cursor:"pointer"},children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e.jsx(t.Link,{...r,external:!0,target:"_blank",style:{cursor:"pointer"},children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},n={name:"Mønster: Lenke i andre tekststiler",args:{children:"lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:s=>e.jsxs(r.Flex,{direction:"column",style:{gap:"1.5lh"},children:[e.jsxs("h1",{className:"jkl-title",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i titler"]}),e.jsxs("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i små titler"]}),e.jsx("hr",{style:{width:"100%",opacity:"0.1"}}),e.jsxs("h2",{className:"jkl-heading-1",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsx("hr",{style:{width:"100%",opacity:"0.1"}}),e.jsxs("p",{className:"jkl-body",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i avsnitt"]}),e.jsxs("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i små avsnitt"]})]})};exports.LinkInOtherStory=n,exports.LinkInParagraphStory=l,exports.LinkStory=i,exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const t=require("../Link.cjs");;/* empty css                            */const r=require("../../flex/Flex.cjs"),s={title:"Komponenter/Link",component:t.Link,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{href:{control:"text",defaultValue:"https://www.fremtind.no"}}},i={name:"Link",args:{children:"Lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:r=>e.jsx(t.Link,{style:{cursor:"pointer"},...r,as:r.as||"a"})},l={name:"Mønster: Lenke i avsnitt",args:{href:"https://www.fremtind.no"},render:r=>e.jsxs("p",{style:{maxWidth:"45ch"},children:["Vi bruker lenker for å lede brukeren til"," ",e.jsx(t.Link,{...r,external:!1,style:{cursor:"pointer"},children:"andre nettsider"}),", eller til andre steder på samme nettside."," ",e.jsx(t.Link,{...r,external:!0,target:"_blank",style:{cursor:"pointer"},children:"Lenker til eksterne nettsider"})," ","markeres med en pil opp og til høyre etter lenketeksten."]})},n={name:"Mønster: Lenke i andre tekststiler",args:{children:"lenke",external:!1,as:"a",target:"#",href:"https://www.fremtind.no"},render:s=>e.jsxs(r.Flex,{direction:"column",style:{gap:"1.5lh"},children:[e.jsxs("h1",{className:"jkl-title",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i titler"]}),e.jsxs("h2",{className:"jkl-title-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i små titler"]}),e.jsx("hr",{style:{width:"100%",opacity:"0.1"}}),e.jsxs("h2",{className:"jkl-heading-1",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h2",{className:"jkl-heading-2",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h3",{className:"jkl-heading-3",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h4",{className:"jkl-heading-4",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsxs("h5",{className:"jkl-heading-5",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i overskrifter"]}),e.jsx("hr",{style:{width:"100%",opacity:"0.1"}}),e.jsxs("p",{className:"jkl-body",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i avsnitt"]}),e.jsxs("small",{className:"jkl-small",style:{maxWidth:"55ch"},children:["Du står fritt til å bruke"," ",e.jsx(t.Link,{...s,style:{cursor:"pointer"}})," i små avsnitt"]})]})};exports.LinkInOtherStory=n,exports.LinkInParagraphStory=l,exports.LinkStory=i,exports.default=s;
 //# sourceMappingURL=Link.stories.cjs.map

package/build/cjs/components/link/stories/Link.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.cjs","sources":["../../../../../src/components/link/stories/Link.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React from \"react\";\nimport {Link} from \"../Link.js\";\nimport \"../styles/_index.scss\";\nimport {Flex} from \"../../flex/index.js\";\n\nconst meta: Meta = {\n    title: \"Komponenter/Link\",\n    component: Link,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n    argTypes: {\n        href: {\n            control: \"text\",\n            defaultValue: \"https://www.fremtind.no\",\n        },\n    },\n} satisfies Meta<typeof Link>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const LinkStory: Story = {\n    name: \"Link\",\n    args: {\n        children: \"Lenke\",\n        external: false,\n        as: \"a\",\n        target: \"#\",\n        href: \"https://www.fremtind.no\",\n    },\n    render: (props) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <Link style={{ cursor: \"pointer\" }} {...props} as={props.as || \"a\"} />\n    ),\n};\n\nexport const LinkInParagraphStory: Story = {\n    name: \"Mønster: Lenke i avsnitt\",\n    args: {\n        href: \"https://www.fremtind.no\",\n    },\n    render: (args) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <p style={{maxWidth: \"45ch\"}}>\n            Vi bruker lenker for å lede brukeren til{\" \"}\n            <Link {...args} external={false} style={{cursor: \"pointer\"}}>\n                andre nettsider\n            </Link>\n            , eller til andre steder på samme nettside.{\" \"}\n            <Link\n                {...args}\n                external={true}\n                target={\"_blank\"}\n                style={{cursor: \"pointer\"}}\n            >\n                Lenker til eksterne nettsider\n            </Link>{\" \"}\n            markeres med en pil opp og til høyre etter lenketeksten.\n        </p>\n    ),\n};\n\nexport const LinkInOtherStory: Story = {\n    name: \"Mønster: Lenke i andre tekststiler\",\n    args: {\n        children: \"lenke\",\n        external: false,\n        as: \"a\",\n        target: \"#\",\n        href: \"https://www.fremtind.no\",\n    },\n    render: (args) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <Flex direction={\"column\"} style={{gap: \"1.5lh\"}}>\n            <h1 className={\"jkl-title\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i titler\n            </h1>\n\n            <h2 className={\"jkl-title-small\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i små titler\n            </h2>\n\n            <hr style={{width: \"100%\", opacity: \"0.1\"}}/>\n\n            <h2 className={\"jkl-heading-1\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n            </h2>\n\n            <h2 className={\"jkl-heading-2\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n            </h2>\n\n            <h3 className={\"jkl-heading-3\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n            </h3>\n\n            <h4 className={\"jkl-heading-4\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n            </h4>\n\n            <h5 className={\"jkl-heading-5\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i overskrifter\n            </h5>\n\n            <hr style={{width: \"100%\", opacity: \"0.1\"}}/>\n\n            <p className={\"jkl-body\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i avsnitt\n            </p>\n\n            <small className={\"jkl-small\"} style={{maxWidth: \"55ch\"}}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{cursor: \"pointer\"}}/> i små avsnitt\n            </small>\n        </Flex>\n    ),\n};\n"],"names":["meta","title","component","Link","parameters","layout","tags","argTypes","href","control","defaultValue","LinkStory","name","args","children","external","as","target","render","props","jsx","style","cursor","LinkInParagraphStory","maxWidth","LinkInOtherStory","jsxs","Flex","direction","gap","className","width","opacity"],"mappings":"kOAMMA,EAAa,CACfC,MAAO,mBACPC,UAAWC,EAAAA,KACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,KAAM,CACFC,QAAS,OACTC,aAAc,6BASbC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASC,GAEJC,EAAAA,IAAAjB,EAAAA,KAAA,CAAKkB,MAAO,CAAEC,OAAQ,cAAiBH,EAAOH,GAAIG,EAAMH,IAAM,OAI1DO,EAA8B,CACvCX,KAAM,2BACNC,KAAM,CACFL,KAAM,2BAEVU,OAASL,UAEJ,IAAE,CAAAQ,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,2CACe,IACzCM,EAAAA,IAACjB,EAAAA,KAAM,IAAGU,EAAME,UAAU,EAAOM,MAAO,CAACC,OAAQ,WAAYR,SAE7D,oBAAO,8CACqC,IAC5CM,EAAAA,IAACjB,EAAAA,KAAA,IACOU,EACJE,UAAU,EACVE,OAAQ,SACRI,MAAO,CAACC,OAAQ,WACnBR,SAAA,kCAEO,IAAI,+DAMXW,EAA0B,CACnCb,KAAM,qCACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASL,GAELa,OAACC,EAAAA,MAAKC,UAAW,SAAUP,MAAO,CAACQ,IAAK,SACpCf,SAAA,CAAAY,OAAC,MAAGI,UAAW,YAAaT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BACzB,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,eAGjDI,OAAC,MAAGI,UAAW,kBAAmBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,mBAGjDF,MAAC,MAAGC,MAAO,CAACU,MAAO,OAAQC,QAAS,SAEpCN,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC7B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,qBAGjDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC7B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,qBAGjDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC7B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,qBAGjDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC7B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,qBAGjDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC7B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,qBAGjDF,MAAC,MAAGC,MAAO,CAACU,MAAO,OAAQC,QAAS,SAEpCN,OAAC,KAAEI,UAAW,WAAYT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BACvB,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa,gBAGjDI,OAAC,SAAMI,UAAW,YAAaT,MAAO,CAACG,SAAU,QAASV,SAAA,CAAA,4BAC5B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAACC,OAAQ,aAAa"}
+{"version":3,"file":"Link.stories.cjs","sources":["../../../../../src/components/link/stories/Link.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Link } from \"../Link.js\";\nimport \"../styles/_index.scss\";\nimport { Flex } from \"../../flex/index.js\";\n\nconst meta: Meta = {\n    title: \"Komponenter/Link\",\n    component: Link,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n    argTypes: {\n        href: {\n            control: \"text\",\n            defaultValue: \"https://www.fremtind.no\",\n        },\n    },\n} satisfies Meta<typeof Link>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const LinkStory: Story = {\n    name: \"Link\",\n    args: {\n        children: \"Lenke\",\n        external: false,\n        as: \"a\",\n        target: \"#\",\n        href: \"https://www.fremtind.no\",\n    },\n    render: (props) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <Link style={{ cursor: \"pointer\" }} {...props} as={props.as || \"a\"} />\n    ),\n};\n\nexport const LinkInParagraphStory: Story = {\n    name: \"Mønster: Lenke i avsnitt\",\n    args: {\n        href: \"https://www.fremtind.no\",\n    },\n    render: (args) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <p style={{ maxWidth: \"45ch\" }}>\n            Vi bruker lenker for å lede brukeren til{\" \"}\n            <Link {...args} external={false} style={{ cursor: \"pointer\" }}>\n                andre nettsider\n            </Link>\n            , eller til andre steder på samme nettside.{\" \"}\n            <Link\n                {...args}\n                external={true}\n                target={\"_blank\"}\n                style={{ cursor: \"pointer\" }}\n            >\n                Lenker til eksterne nettsider\n            </Link>{\" \"}\n            markeres med en pil opp og til høyre etter lenketeksten.\n        </p>\n    ),\n};\n\nexport const LinkInOtherStory: Story = {\n    name: \"Mønster: Lenke i andre tekststiler\",\n    args: {\n        children: \"lenke\",\n        external: false,\n        as: \"a\",\n        target: \"#\",\n        href: \"https://www.fremtind.no\",\n    },\n    render: (args) => (\n        // Setter style.cursor til pointer fordi Storybook overskriver default styles.\n        <Flex direction={\"column\"} style={{ gap: \"1.5lh\" }}>\n            <h1 className={\"jkl-title\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i titler\n            </h1>\n\n            <h2 className={\"jkl-title-small\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i små titler\n            </h2>\n\n            <hr style={{ width: \"100%\", opacity: \"0.1\" }} />\n\n            <h2 className={\"jkl-heading-1\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n            </h2>\n\n            <h2 className={\"jkl-heading-2\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n            </h2>\n\n            <h3 className={\"jkl-heading-3\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n            </h3>\n\n            <h4 className={\"jkl-heading-4\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n            </h4>\n\n            <h5 className={\"jkl-heading-5\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i overskrifter\n            </h5>\n\n            <hr style={{ width: \"100%\", opacity: \"0.1\" }} />\n\n            <p className={\"jkl-body\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i avsnitt\n            </p>\n\n            <small className={\"jkl-small\"} style={{ maxWidth: \"55ch\" }}>\n                Du står fritt til å bruke{\" \"}\n                <Link {...args} style={{ cursor: \"pointer\" }} /> i små avsnitt\n            </small>\n        </Flex>\n    ),\n};\n"],"names":["meta","title","component","Link","parameters","layout","tags","argTypes","href","control","defaultValue","LinkStory","name","args","children","external","as","target","render","props","jsx","style","cursor","LinkInParagraphStory","maxWidth","LinkInOtherStory","jsxs","Flex","direction","gap","className","width","opacity"],"mappings":"mRAMMA,EAAa,CACfC,MAAO,mBACPC,UAAWC,EAAAA,KACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,KAAM,CACFC,QAAS,OACTC,aAAc,6BASbC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASC,GAEJC,EAAAA,IAAAjB,EAAAA,KAAA,CAAKkB,MAAO,CAAEC,OAAQ,cAAiBH,EAAOH,GAAIG,EAAMH,IAAM,OAI1DO,EAA8B,CACvCX,KAAM,2BACNC,KAAM,CACFL,KAAM,2BAEVU,OAASL,UAEJ,IAAE,CAAAQ,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,2CACa,IACzCM,EAAAA,IAACjB,EAAAA,KAAM,IAAGU,EAAME,UAAU,EAAOM,MAAO,CAAEC,OAAQ,WAAaR,SAE/D,oBAAO,8CACqC,IAC5CM,EAAAA,IAACjB,EAAAA,KAAA,IACOU,EACJE,UAAU,EACVE,OAAQ,SACRI,MAAO,CAAEC,OAAQ,WACpBR,SAAA,kCAEO,IAAI,+DAMXW,EAA0B,CACnCb,KAAM,qCACNC,KAAM,CACFC,SAAU,QACVC,UAAU,EACVC,GAAI,IACJC,OAAQ,IACRT,KAAM,2BAEVU,OAASL,GAELa,OAACC,EAAAA,MAAKC,UAAW,SAAUP,MAAO,CAAEQ,IAAK,SACrCf,SAAA,CAAAY,OAAC,MAAGI,UAAW,YAAaT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC3B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,eAGpDI,OAAC,MAAGI,UAAW,kBAAmBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BACjC,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,mBAGpDF,MAAC,MAAGC,MAAO,CAAEU,MAAO,OAAQC,QAAS,SAErCN,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDI,OAAC,MAAGI,UAAW,gBAAiBT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC/B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,qBAGpDF,MAAC,MAAGC,MAAO,CAAEU,MAAO,OAAQC,QAAS,SAErCN,OAAC,KAAEI,UAAW,WAAYT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BACzB,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe,gBAGpDI,OAAC,SAAMI,UAAW,YAAaT,MAAO,CAAEG,SAAU,QAAUV,SAAA,CAAA,4BAC9B,IAC1BM,MAACjB,EAAAA,SAASU,EAAMQ,MAAO,CAAEC,OAAQ,aAAe"}

package/build/cjs/components/menu/Menu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../../index-C-qqMC-u.cjs"),o=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs");const i=require("../../hooks/useId/useId.cjs"),l=require("../../utilities/getThemeAndDensity.cjs"),a=require("./useMenuWideEvents.cjs");function u(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const c=s.forwardRef(((c,d)=>{const{children:p,className:m,initialPlacement:f,openOnHover:g=!1,keepOpenOnClickOutside:x=!1,triggerElement:h,isOpen:v,onToggle:y,...j}=c,k=i.useId("jkl-menu"),{prefersReducedMotion:P}=o.useBrowserPreferences(),F=t.useFloatingTree(),w=t.useFloatingNodeId(),I=t.useFloatingParentNodeId(),E=null!=I,M=s.useRef([]),[q,R]=s.useState(null),{allowHover:b,isOpen:N,setIsOpen:C}=a.useMenuWideEvents(F,w,I),O=void 0!==v?v:N;s.useEffect((()=>null==y?void 0:y(O)),[O,y]);const{refs:S,placement:T,context:D,floatingStyles:A}=t.useFloating({nodeId:w,open:O,onOpenChange:C,placement:f||(E?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:B,getFloatingProps:H,getItemProps:$}=t.useInteractions([t.useHover(D,{enabled:g&&b,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(D,{event:"mousedown"}),t.useDismiss(D,{outsidePress:!x}),t.useRole(D,{role:"menu"}),t.useListNavigation(D,{listRef:M,activeIndex:q,nested:E,onNavigate:R})]),K=t.useMergeRefs([S.setReference,d]),{theme:V,density:W}=l.getThemeAndDensity(S.reference.current),{isMounted:L,styles:U}=t.useTransitionStyles(D,{duration:{open:P?0:250,close:P?0:150},initial:({side:e})=>({opacity:0,translate:u(e,5)}),open:({side:e})=>({opacity:1,translate:u(e,0)}),close:({side:e})=>({opacity:0,translate:u(e,5)})});return e.jsxs(t.FloatingNode,{id:w,children:[s.isValidElement(h)&&("button"===h.type||r.reactIsExports.isForwardRef(h))?s.cloneElement(h,{...B({...j,ref:K,role:E?"menuitem":void 0,"aria-controls":k,onClick(e){e.stopPropagation()}})}):h,L&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:E?-1:0,returnFocus:!E,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",m),"data-theme":V,"data-layout-density":W,role:"menu","data-placement":T,"aria-live":"assertive","aria-hidden":!O,ref:S.setFloating,...H({id:k,style:{...A,...U}}),children:s.Children.map(p,((e,t)=>s.isValidElement(e)&&r.reactIsExports.isForwardRef(e)?s.cloneElement(e,$({...e.props,tabIndex:q===t?0:-1,role:"menuitem",ref(e){M.current[t]=e},onClick(t){var n,s;null==(s=(n=e.props).onClick)||s.call(n,t),!t.defaultPrevented&&(null==F||F.events.emit("click"))},onKeyDown(t){var n,s;null==(s=(n=e.props).onKeyDown)||s.call(n,t),!t.defaultPrevented&&(null==F||F.events.emit("keydown"),"menuitemcheckbox"===t.currentTarget.role&&"Enter"===t.key&&C(!1))},onMouseEnter(){b&&O&&R(t)}})):e))})})})]})}));c.displayName="MenuComponent";const d=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(c,{ref:s,...n})}):e.jsx(c,{ref:s,...n})));d.displayName="Menu",exports.Menu=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../../index-C-qqMC-u.cjs"),o=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs");const i=require("../../hooks/useId/useId.cjs"),a=require("../../utilities/getThemeAndDensity.cjs"),l=require("./useMenuWideEvents.cjs");function u(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const c=s.forwardRef(((c,d)=>{const{children:p,className:m,initialPlacement:f,openOnHover:g=!1,keepOpenOnClickOutside:x=!1,triggerElement:h,isOpen:y,onToggle:v,...j}=c,k=i.useId("jkl-menu"),{prefersReducedMotion:P}=o.useBrowserPreferences(),F=t.useFloatingTree(),w=t.useFloatingNodeId(),I=t.useFloatingParentNodeId(),E=null!=I,M=s.useRef([]),[q,R]=s.useState(null),{allowHover:b,isOpen:N,setIsOpen:C}=l.useMenuWideEvents(F,w,I),O=void 0!==y?y:N;s.useEffect((()=>v?.(O)),[O,v]);const{refs:S,placement:T,context:D,floatingStyles:A}=t.useFloating({nodeId:w,open:O,onOpenChange:C,placement:f||(E?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:B,getFloatingProps:H,getItemProps:$}=t.useInteractions([t.useHover(D,{enabled:g&&b,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(D,{event:"mousedown"}),t.useDismiss(D,{outsidePress:!x}),t.useRole(D,{role:"menu"}),t.useListNavigation(D,{listRef:M,activeIndex:q,nested:E,onNavigate:R})]),K=t.useMergeRefs([S.setReference,d]),{theme:V,density:W}=a.getThemeAndDensity(S.reference.current),{isMounted:L,styles:U}=t.useTransitionStyles(D,{duration:{open:P?0:250,close:P?0:150},initial:({side:e})=>({opacity:0,translate:u(e,5)}),open:({side:e})=>({opacity:1,translate:u(e,0)}),close:({side:e})=>({opacity:0,translate:u(e,5)})});return e.jsxs(t.FloatingNode,{id:w,children:[s.isValidElement(h)&&("button"===h.type||r.reactIsExports.isForwardRef(h))?s.cloneElement(h,{...B({...j,ref:K,role:E?"menuitem":void 0,"aria-controls":k,onClick(e){e.stopPropagation()}})}):h,L&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:D,modal:!1,initialFocus:E?-1:0,returnFocus:!E,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",m),"data-theme":V,"data-layout-density":W,role:"menu","data-placement":T,"aria-live":"assertive","aria-hidden":!O,ref:S.setFloating,...H({id:k,style:{...A,...U}}),children:s.Children.map(p,((e,t)=>s.isValidElement(e)&&r.reactIsExports.isForwardRef(e)?s.cloneElement(e,$({...e.props,tabIndex:q===t?0:-1,role:"menuitem",ref(e){M.current[t]=e},onClick(t){e.props.onClick?.(t),!t.defaultPrevented&&F?.events.emit("click")},onKeyDown(t){e.props.onKeyDown?.(t),!t.defaultPrevented&&(F?.events.emit("keydown"),"menuitemcheckbox"===t.currentTarget.role&&"Enter"===t.key&&C(!1))},onMouseEnter(){b&&O&&R(t)}})):e))})})})]})}));c.displayName="MenuComponent";const d=s.forwardRef(((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(c,{ref:s,...n})}):e.jsx(c,{ref:s,...n})));d.displayName="Menu",exports.Menu=d;
 //# sourceMappingURL=Menu.cjs.map

package/build/cjs/components/menu/Menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingNode,\n    FloatingPortal,\n    FloatingTree,\n    type Side,\n    autoUpdate,\n    flip,\n    offset,\n    safePolygon,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFloatingNodeId,\n    useFloatingParentNodeId,\n    useFloatingTree,\n    useHover,\n    useInteractions,\n    useListNavigation,\n    useMergeRefs,\n    useRole,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n    switch (side) {\n        case \"top\":\n            return `0 ${value}px`;\n        case \"left\":\n            return `${value}px 0`;\n        case \"bottom\":\n            return `0 ${-value}px`;\n        case \"right\":\n            return `${-value}px 0`;\n\n        default:\n            return `0 ${value}px`;\n    }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n    (props, forwardedRef) => {\n        const {\n            children,\n            className,\n            initialPlacement,\n            openOnHover = false,\n            keepOpenOnClickOutside = false,\n            triggerElement,\n            isOpen: isOpenOverride,\n            onToggle,\n            ...triggerProps\n        } = props;\n\n        const MenuId = useId(\"jkl-menu\");\n\n        const { prefersReducedMotion } = useBrowserPreferences();\n\n        const tree = useFloatingTree();\n        const nodeId = useFloatingNodeId();\n        const parentId = useFloatingParentNodeId();\n        const isNested = parentId != null;\n\n        const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);\n        const [activeIndex, setActiveIndex] = useState<number | null>(null);\n        const {\n            allowHover,\n            isOpen: isOpenDefault,\n            setIsOpen,\n        } = useMenuWideEvents(tree, nodeId, parentId);\n\n        const isOpen =\n            isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n        useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n        const { refs, placement, context, floatingStyles } = useFloating({\n            nodeId,\n            open: isOpen,\n            onOpenChange: setIsOpen,\n            placement:\n                initialPlacement || (isNested ? \"right-start\" : \"bottom-start\"),\n            middleware: [\n                offset(2),\n                flip({\n                    fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n                    crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n                }),\n                shift({ padding: 8 }),\n            ],\n            whileElementsMounted: autoUpdate,\n        });\n\n        const { getReferenceProps, getFloatingProps, getItemProps } =\n            useInteractions([\n                useHover(context, {\n                    enabled: openOnHover && allowHover,\n                    delay: { open: 75 },\n                    handleClose: safePolygon({\n                        requireIntent: true,\n                        blockPointerEvents: true,\n                    }),\n                }),\n                useClick(context, {\n                    event: \"mousedown\",\n                }),\n                useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n                useRole(context, { role: \"menu\" }),\n                useListNavigation(context, {\n                    listRef: listItemsRef,\n                    activeIndex,\n                    nested: isNested,\n                    onNavigate: setActiveIndex,\n                }),\n            ]);\n\n        const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n        // Siden menyen 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 { theme, density } = getThemeAndDensity(\n            refs.reference.current as HTMLElement,\n        );\n\n        const { isMounted, styles: animationStyles } = useTransitionStyles(\n            context,\n            {\n                duration: {\n                    open: prefersReducedMotion ? 0 : 250,\n                    close: prefersReducedMotion ? 0 : 150,\n                },\n                initial: ({ side }) => ({\n                    opacity: 0,\n                    translate: getTranslation(side, 5),\n                }),\n                open: ({ side }) => ({\n                    opacity: 1,\n                    translate: getTranslation(side, 0),\n                }),\n                close: ({ side }) => ({\n                    opacity: 0,\n                    translate: getTranslation(side, 5),\n                }),\n            },\n        );\n\n        return (\n            <FloatingNode id={nodeId}>\n                {React.isValidElement(triggerElement) &&\n                (triggerElement.type === \"button\" ||\n                    isForwardRef(triggerElement))\n                    ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n                      React.cloneElement(triggerElement, {\n                          ...getReferenceProps({\n                              ...triggerProps,\n                              ref: referenceRef,\n                              role: isNested ? \"menuitem\" : undefined,\n                              \"aria-controls\": MenuId,\n                              onClick(event) {\n                                  event.stopPropagation();\n                              },\n                          }),\n                      })\n                    : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n                      triggerElement}\n                {isMounted && (\n                    <FloatingPortal>\n                        <FloatingFocusManager\n                            context={context}\n                            // Prevent outside content interference.\n                            modal={false}\n                            // Only initially focus the root floating menu.\n                            initialFocus={isNested ? -1 : 0}\n                            // Only return focus to the root menu's reference when menus close.\n                            returnFocus={!isNested}\n                        >\n                            <div\n                                className={clsx(\"jkl jkl-menu\", className)}\n                                data-theme={theme}\n                                data-layout-density={density}\n                                role=\"menu\"\n                                data-placement={placement}\n                                aria-live=\"assertive\"\n                                aria-hidden={!isOpen}\n                                ref={refs.setFloating}\n                                {...getFloatingProps({\n                                    id: MenuId,\n                                    style: {\n                                        ...floatingStyles,\n                                        ...animationStyles,\n                                    },\n                                })}\n                            >\n                                {React.Children.map(\n                                    children,\n                                    (child, index) => {\n                                        if (\n                                            React.isValidElement(child) &&\n                                            isForwardRef(child)\n                                        ) {\n                                            return React.cloneElement(\n                                                child,\n                                                getItemProps({\n                                                    ...child.props,\n                                                    tabIndex:\n                                                        activeIndex === index\n                                                            ? 0\n                                                            : -1,\n                                                    role: \"menuitem\",\n                                                    ref(\n                                                        node: HTMLButtonElement,\n                                                    ) {\n                                                        listItemsRef.current[\n                                                            index\n                                                        ] = node;\n                                                    },\n                                                    onClick(event) {\n                                                        child.props.onClick?.(\n                                                            event as React.MouseEvent<HTMLButtonElement>,\n                                                        );\n                                                        if (\n                                                            event.defaultPrevented\n                                                        ) {\n                                                            return;\n                                                        }\n                                                        tree?.events.emit(\n                                                            \"click\",\n                                                        );\n                                                    },\n                                                    onKeyDown(event) {\n                                                        child.props.onKeyDown?.(\n                                                            event,\n                                                        );\n                                                        if (\n                                                            event.defaultPrevented\n                                                        ) {\n                                                            return;\n                                                        }\n                                                        tree?.events.emit(\n                                                            \"keydown\",\n                                                        );\n                                                        if (\n                                                            event.currentTarget\n                                                                .role ===\n                                                                \"menuitemcheckbox\" &&\n                                                            event.key ===\n                                                                \"Enter\"\n                                                        ) {\n                                                            // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n                                                            setIsOpen(false);\n                                                        }\n                                                    },\n                                                    onMouseEnter() {\n                                                        if (\n                                                            allowHover &&\n                                                            isOpen\n                                                        ) {\n                                                            setActiveIndex(\n                                                                index,\n                                                            );\n                                                        }\n                                                    },\n                                                }),\n                                            );\n                                        }\n\n                                        return child;\n                                    },\n                                )}\n                            </div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                )}\n            </FloatingNode>\n        );\n    },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n    const parentId = useFloatingParentNodeId();\n\n    if (parentId === null) {\n        return (\n            <FloatingTree>\n                <MenuComponent ref={ref} {...props} />\n            </FloatingTree>\n        );\n    }\n\n    return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","type","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","reactIsExports","tabIndex","node","_b","_a","call","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"yfAiCA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEA,MAAMC,EAAgBC,EAAAA,YAClB,CAACC,EAAOC,KACE,MACFC,SAAAA,EACAC,UAAAA,EACAC,iBAAAA,EACAC,YAAAA,GAAc,EACdC,uBAAAA,GAAyB,EACzBC,eAAAA,EACAC,OAAQC,EACRC,SAAAA,KACGC,GACHX,EAEEY,EAASC,QAAM,aAEbC,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,kBACPC,EAASC,EAAAA,oBACTC,EAAWC,EAAAA,0BACXC,EAAuB,MAAZF,EAEXG,EAAeC,EAAwCA,OAAA,KACtDC,EAAaC,GAAkBC,EAAAA,SAAwB,OAE1DC,WAAAA,EACApB,OAAQqB,EACRC,UAAAA,GACAC,oBAAkBf,EAAME,EAAQE,GAE9BZ,OACiB,IAAnBC,EAA+BA,EAAiBoB,EAEpDG,EAAAA,WAAU,IAAM,MAAAtB,OAAAA,EAAAA,EAAWF,IAAS,CAACA,EAAQE,IAE7C,MAAQuB,KAAAA,EAAMC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAmBC,EAAAA,YAAY,CAC7DnB,OAAAA,EACAoB,KAAM9B,EACN+B,aAAcT,EACdI,UACI9B,IAAqBkB,EAAW,cAAgB,gBACpDkB,WAAY,CACRC,EAAAA,OAAO,GACPC,OAAK,CACDC,0BAA2B,MAC3BC,WAAW,IAEfC,QAAM,CAAEC,QAAS,KAErBC,qBAAsBC,EAAAA,cAGlBC,kBAAAA,EAAmBC,iBAAAA,EAAkBC,aAAAA,GACzCC,EAAAA,gBAAgB,CACZC,EAAAA,SAASlB,EAAS,CACdmB,QAASjD,GAAeuB,EACxB2B,MAAO,CAAEjB,KAAM,IACfkB,YAAaC,EAAAA,YAAY,CACrBC,eAAe,EACfC,oBAAoB,MAG5BC,EAAAA,SAASzB,EAAS,CACd0B,MAAO,cAEXC,EAAAA,WAAW3B,EAAS,CAAE4B,cAAezD,IACrC0D,EAAAA,QAAQ7B,EAAS,CAAE8B,KAAM,SACzBC,EAAAA,kBAAkB/B,EAAS,CACvBgC,QAAS5C,EACTE,YAAAA,EACA2C,OAAQ9C,EACR+C,WAAY3C,MAIlB4C,EAAeC,EAAAA,aAAa,CAACtC,EAAKuC,aAAcvE,KAI9CwE,MAAAA,EAAOC,QAAAA,GAAYC,EAAAA,mBACvB1C,EAAK2C,UAAUC,UAGXC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3C9C,EACA,CACI+C,SAAU,CACN5C,KAAMxB,EAAuB,EAAI,IACjCqE,MAAOrE,EAAuB,EAAI,KAEtCsE,QAAS,EAAGxF,KAAAA,OACRyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpC0C,KAAM,EAAG1C,KAAAA,MAAY,CACjByF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpCuF,MAAO,EAAGvF,KAAAA,OACNyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,OAMxC,OAAA2F,EAAAA,KAACC,EAAaA,aAAA,CAAAC,GAAIvE,EACbhB,SAAA,CAAAwF,EAAMC,eAAepF,KACG,WAAxBA,EAAeqF,MACZC,8BAAatF,IAEXmF,EAAMI,aAAavF,EAAgB,IAC5B0C,EAAkB,IACdtC,EACHoF,IAAKzB,EACLL,KAAM3C,EAAW,gBAAa,EAC9B,gBAAiBV,EACjBoF,QAAQnC,GACJA,EAAMoC,iBAAgB,MAKlC1F,EACLuE,SACIoB,iBACG,CAAAhG,SAAAiG,EAAAA,IAACC,EAAAA,qBAAA,CACGjE,QAAAA,EAEAkE,OAAO,EAEPC,aAAchF,GAAgB,EAAA,EAE9BiF,aAAcjF,EAEdpB,SAAAiG,EAAAA,IAAC,MAAA,CACGhG,UAAWqG,EAAAA,KAAK,eAAgBrG,GAChC,aAAYsE,EACZ,sBAAqBC,EACrBT,KAAK,OACL,iBAAgB/B,EAChB,YAAU,YACV,eAAc1B,EACduF,IAAK9D,EAAKwE,eACNvD,EAAiB,CACjBuC,GAAI7E,EACJ8F,MAAO,IACAtE,KACA4C,KAIV9E,WAAMyG,SAASC,IACZ1G,GACA,CAAC2G,EAAOC,IAEApB,EAAMC,eAAekB,IACrBhB,EAAAkB,eAAAlB,aAAagB,GAENnB,EAAMI,aACTe,EACA1D,EAAa,IACN0D,EAAM7G,MACTgH,SACIvF,IAAgBqF,EACV,KAEV7C,KAAM,WACN8B,IACIkB,GAEa1F,EAAAsD,QACTiC,GACAG,CACR,EACAjB,QAAQnC,WACJ,OAAAqD,GAAAC,EAAAN,EAAM7G,OAAMgG,UAAZkB,EAAAE,KAAAD,EACItD,IAGAA,EAAMwD,mBAIV,MAAArG,GAAAA,EAAMsG,OAAOC,KACT,SAER,EACAC,UAAU3D,WACN,OAAAqD,GAAAC,EAAAN,EAAM7G,OAAMwH,YAAZN,EAAAE,KAAAD,EACItD,IAGAA,EAAMwD,mBAIV,MAAArG,GAAAA,EAAMsG,OAAOC,KACT,WAKI,qBAFJ1D,EAAM4D,cACDxD,MAGD,UADJJ,EAAM6D,KAIN5F,GAAU,GAElB,EACA6F,eAEQ/F,GACApB,GAEAkB,EACIoF,EAER,KAMTD,YAOnC,IAIZ/G,EAAc8H,YAAc,gBAErB,MAAMC,EAAO9H,EAAAA,YAAyC,CAACC,EAAO+F,IAGhD,OAFA1E,EAAAA,gCAIRyG,EAAAA,aACG,CAAA5H,SAAAiG,EAAAA,IAACrG,GAAciG,IAAAA,KAAc/F,MAKjCmG,EAAAA,IAAArG,EAAA,CAAciG,IAAAA,KAAc/F,MAExC6H,EAAKD,YAAc"}
+{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingNode,\n    FloatingPortal,\n    FloatingTree,\n    type Side,\n    autoUpdate,\n    flip,\n    offset,\n    safePolygon,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFloatingNodeId,\n    useFloatingParentNodeId,\n    useFloatingTree,\n    useHover,\n    useInteractions,\n    useListNavigation,\n    useMergeRefs,\n    useRole,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { isForwardRef } from \"react-is\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n    switch (side) {\n        case \"top\":\n            return `0 ${value}px`;\n        case \"left\":\n            return `${value}px 0`;\n        case \"bottom\":\n            return `0 ${-value}px`;\n        case \"right\":\n            return `${-value}px 0`;\n\n        default:\n            return `0 ${value}px`;\n    }\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n    (props, forwardedRef) => {\n        const {\n            children,\n            className,\n            initialPlacement,\n            openOnHover = false,\n            keepOpenOnClickOutside = false,\n            triggerElement,\n            isOpen: isOpenOverride,\n            onToggle,\n            ...triggerProps\n        } = props;\n\n        const MenuId = useId(\"jkl-menu\");\n\n        const { prefersReducedMotion } = useBrowserPreferences();\n\n        const tree = useFloatingTree();\n        const nodeId = useFloatingNodeId();\n        const parentId = useFloatingParentNodeId();\n        const isNested = parentId != null;\n\n        const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);\n        const [activeIndex, setActiveIndex] = useState<number | null>(null);\n        const {\n            allowHover,\n            isOpen: isOpenDefault,\n            setIsOpen,\n        } = useMenuWideEvents(tree, nodeId, parentId);\n\n        const isOpen =\n            isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n        useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n        const { refs, placement, context, floatingStyles } = useFloating({\n            nodeId,\n            open: isOpen,\n            onOpenChange: setIsOpen,\n            placement:\n                initialPlacement || (isNested ? \"right-start\" : \"bottom-start\"),\n            middleware: [\n                offset(2),\n                flip({\n                    fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n                    crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n                }),\n                shift({ padding: 8 }),\n            ],\n            whileElementsMounted: autoUpdate,\n        });\n\n        const { getReferenceProps, getFloatingProps, getItemProps } =\n            useInteractions([\n                useHover(context, {\n                    enabled: openOnHover && allowHover,\n                    delay: { open: 75 },\n                    handleClose: safePolygon({\n                        requireIntent: true,\n                        blockPointerEvents: true,\n                    }),\n                }),\n                useClick(context, {\n                    event: \"mousedown\",\n                }),\n                useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n                useRole(context, { role: \"menu\" }),\n                useListNavigation(context, {\n                    listRef: listItemsRef,\n                    activeIndex,\n                    nested: isNested,\n                    onNavigate: setActiveIndex,\n                }),\n            ]);\n\n        const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n        // Siden menyen 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 { theme, density } = getThemeAndDensity(\n            refs.reference.current as HTMLElement,\n        );\n\n        const { isMounted, styles: animationStyles } = useTransitionStyles(\n            context,\n            {\n                duration: {\n                    open: prefersReducedMotion ? 0 : 250,\n                    close: prefersReducedMotion ? 0 : 150,\n                },\n                initial: ({ side }) => ({\n                    opacity: 0,\n                    translate: getTranslation(side, 5),\n                }),\n                open: ({ side }) => ({\n                    opacity: 1,\n                    translate: getTranslation(side, 0),\n                }),\n                close: ({ side }) => ({\n                    opacity: 0,\n                    translate: getTranslation(side, 5),\n                }),\n            },\n        );\n\n        return (\n            <FloatingNode id={nodeId}>\n                {React.isValidElement(triggerElement) &&\n                (triggerElement.type === \"button\" ||\n                    isForwardRef(triggerElement))\n                    ? // Dersom trigger-elementet er en knapp, sett riktige egenskaper på det\n                      React.cloneElement(triggerElement, {\n                          ...getReferenceProps({\n                              ...triggerProps,\n                              ref: referenceRef,\n                              role: isNested ? \"menuitem\" : undefined,\n                              \"aria-controls\": MenuId,\n                              onClick(event) {\n                                  event.stopPropagation();\n                              },\n                          }),\n                      })\n                    : // Ellers, rendre elementet as-is, uten interaktivitet. Krev en ferdig brukbar button for å åpne menyen.\n                      triggerElement}\n                {isMounted && (\n                    <FloatingPortal>\n                        <FloatingFocusManager\n                            context={context}\n                            // Prevent outside content interference.\n                            modal={false}\n                            // Only initially focus the root floating menu.\n                            initialFocus={isNested ? -1 : 0}\n                            // Only return focus to the root menu's reference when menus close.\n                            returnFocus={!isNested}\n                        >\n                            <div\n                                className={clsx(\"jkl jkl-menu\", className)}\n                                data-theme={theme}\n                                data-layout-density={density}\n                                role=\"menu\"\n                                data-placement={placement}\n                                aria-live=\"assertive\"\n                                aria-hidden={!isOpen}\n                                ref={refs.setFloating}\n                                {...getFloatingProps({\n                                    id: MenuId,\n                                    style: {\n                                        ...floatingStyles,\n                                        ...animationStyles,\n                                    },\n                                })}\n                            >\n                                {React.Children.map(\n                                    children,\n                                    (child, index) => {\n                                        if (\n                                            React.isValidElement(child) &&\n                                            isForwardRef(child)\n                                        ) {\n                                            return React.cloneElement(\n                                                child,\n                                                getItemProps({\n                                                    ...child.props,\n                                                    tabIndex:\n                                                        activeIndex === index\n                                                            ? 0\n                                                            : -1,\n                                                    role: \"menuitem\",\n                                                    ref(\n                                                        node: HTMLButtonElement,\n                                                    ) {\n                                                        listItemsRef.current[\n                                                            index\n                                                        ] = node;\n                                                    },\n                                                    onClick(event) {\n                                                        child.props.onClick?.(\n                                                            event as React.MouseEvent<HTMLButtonElement>,\n                                                        );\n                                                        if (\n                                                            event.defaultPrevented\n                                                        ) {\n                                                            return;\n                                                        }\n                                                        tree?.events.emit(\n                                                            \"click\",\n                                                        );\n                                                    },\n                                                    onKeyDown(event) {\n                                                        child.props.onKeyDown?.(\n                                                            event,\n                                                        );\n                                                        if (\n                                                            event.defaultPrevented\n                                                        ) {\n                                                            return;\n                                                        }\n                                                        tree?.events.emit(\n                                                            \"keydown\",\n                                                        );\n                                                        if (\n                                                            event.currentTarget\n                                                                .role ===\n                                                                \"menuitemcheckbox\" &&\n                                                            event.key ===\n                                                                \"Enter\"\n                                                        ) {\n                                                            // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n                                                            setIsOpen(false);\n                                                        }\n                                                    },\n                                                    onMouseEnter() {\n                                                        if (\n                                                            allowHover &&\n                                                            isOpen\n                                                        ) {\n                                                            setActiveIndex(\n                                                                index,\n                                                            );\n                                                        }\n                                                    },\n                                                }),\n                                            );\n                                        }\n\n                                        return child;\n                                    },\n                                )}\n                            </div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                )}\n            </FloatingNode>\n        );\n    },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n    const parentId = useFloatingParentNodeId();\n\n    if (parentId === null) {\n        return (\n            <FloatingTree>\n                <MenuComponent ref={ref} {...props} />\n            </FloatingTree>\n        );\n    }\n\n    return <MenuComponent ref={ref} {...props} />;\n});\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","density","getThemeAndDensity","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","type","isForwardRef","cloneElement","ref","onClick","stopPropagation","FloatingPortal","jsx","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","reactIsExports","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"yfAiCA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEA,MAAMC,EAAgBC,EAAAA,YAClB,CAACC,EAAOC,KACE,MACFC,SAAAA,EACAC,UAAAA,EACAC,iBAAAA,EACAC,YAAAA,GAAc,EACdC,uBAAAA,GAAyB,EACzBC,eAAAA,EACAC,OAAQC,EACRC,SAAAA,KACGC,GACHX,EAEEY,EAASC,QAAM,aAEbC,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,kBACPC,EAASC,EAAAA,oBACTC,EAAWC,EAAAA,0BACXC,EAAuB,MAAZF,EAEXG,EAAeC,EAAwCA,OAAA,KACtDC,EAAaC,GAAkBC,EAAAA,SAAwB,OAE1DC,WAAAA,EACApB,OAAQqB,EACRC,UAAAA,GACAC,oBAAkBf,EAAME,EAAQE,GAE9BZ,OACiB,IAAnBC,EAA+BA,EAAiBoB,EAEpDG,EAAAA,WAAU,IAAMtB,IAAWF,IAAS,CAACA,EAAQE,IAE7C,MAAQuB,KAAAA,EAAMC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAmBC,EAAAA,YAAY,CAC7DnB,OAAAA,EACAoB,KAAM9B,EACN+B,aAAcT,EACdI,UACI9B,IAAqBkB,EAAW,cAAgB,gBACpDkB,WAAY,CACRC,EAAAA,OAAO,GACPC,OAAK,CACDC,0BAA2B,MAC3BC,WAAW,IAEfC,QAAM,CAAEC,QAAS,KAErBC,qBAAsBC,EAAAA,cAGlBC,kBAAAA,EAAmBC,iBAAAA,EAAkBC,aAAAA,GACzCC,EAAAA,gBAAgB,CACZC,EAAAA,SAASlB,EAAS,CACdmB,QAASjD,GAAeuB,EACxB2B,MAAO,CAAEjB,KAAM,IACfkB,YAAaC,EAAAA,YAAY,CACrBC,eAAe,EACfC,oBAAoB,MAG5BC,EAAAA,SAASzB,EAAS,CACd0B,MAAO,cAEXC,EAAAA,WAAW3B,EAAS,CAAE4B,cAAezD,IACrC0D,EAAAA,QAAQ7B,EAAS,CAAE8B,KAAM,SACzBC,EAAAA,kBAAkB/B,EAAS,CACvBgC,QAAS5C,EACTE,YAAAA,EACA2C,OAAQ9C,EACR+C,WAAY3C,MAIlB4C,EAAeC,EAAAA,aAAa,CAACtC,EAAKuC,aAAcvE,KAI9CwE,MAAAA,EAAOC,QAAAA,GAAYC,EAAAA,mBACvB1C,EAAK2C,UAAUC,UAGXC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3C9C,EACA,CACI+C,SAAU,CACN5C,KAAMxB,EAAuB,EAAI,IACjCqE,MAAOrE,EAAuB,EAAI,KAEtCsE,QAAS,EAAGxF,KAAAA,OACRyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpC0C,KAAM,EAAG1C,KAAAA,OACLyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpCuF,MAAO,EAAGvF,KAAAA,MAAY,CAClByF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,OAMxC,OAAA2F,EAAAA,KAACC,EAAaA,aAAA,CAAAC,GAAIvE,EACbhB,SAAA,CAAAwF,EAAMC,eAAepF,KACG,WAAxBA,EAAeqF,MACZC,8BAAatF,IAEXmF,EAAMI,aAAavF,EAAgB,IAC5B0C,EAAkB,IACdtC,EACHoF,IAAKzB,EACLL,KAAM3C,EAAW,gBAAa,EAC9B,gBAAiBV,EACjBoF,QAAQnC,GACJA,EAAMoC,iBAAgB,MAKlC1F,EACLuE,SACIoB,iBACG,CAAAhG,SAAAiG,EAAAA,IAACC,EAAAA,qBAAA,CACGjE,QAAAA,EAEAkE,OAAO,EAEPC,aAAchF,GAAW,EAAK,EAE9BiF,aAAcjF,EAEdpB,SAAAiG,EAAAA,IAAC,MAAA,CACGhG,UAAWqG,EAAAA,KAAK,eAAgBrG,GAChC,aAAYsE,EACZ,sBAAqBC,EACrBT,KAAK,OACL,iBAAgB/B,EAChB,YAAU,YACV,eAAc1B,EACduF,IAAK9D,EAAKwE,eACNvD,EAAiB,CACjBuC,GAAI7E,EACJ8F,MAAO,IACAtE,KACA4C,KAIV9E,WAAMyG,SAASC,IACZ1G,GACA,CAAC2G,EAAOC,IAEApB,EAAMC,eAAekB,IACrBhB,EAAAkB,eAAAlB,aAAagB,GAENnB,EAAMI,aACTe,EACA1D,EAAa,IACN0D,EAAM7G,MACTgH,SACIvF,IAAgBqF,EACV,GAEV,EAAA7C,KAAM,WACN8B,IACIkB,GAEa1F,EAAAsD,QACTiC,GACAG,CACR,EACAjB,QAAQnC,GACJgD,EAAM7G,MAAMgG,UACRnC,IAGAA,EAAMqD,kBAIVlG,GAAMmG,OAAOC,KACT,QAER,EACAC,UAAUxD,GACNgD,EAAM7G,MAAMqH,YACRxD,IAGAA,EAAMqD,mBAIVlG,GAAMmG,OAAOC,KACT,WAKI,qBAFJvD,EAAMyD,cACDrD,MAGD,UADJJ,EAAM0D,KAINzF,GAAU,GAElB,EACA0F,eAEQ5F,GACApB,GAEAkB,EACIoF,EAER,KAMTD,YAOnC,IAIZ/G,EAAc2H,YAAc,gBAErB,MAAMC,EAAO3H,EAAAA,YAAyC,CAACC,EAAO+F,IAGhD,OAFA1E,EAAAA,gCAIRsG,EAAAA,aACG,CAAAzH,SAAAiG,EAAAA,IAACrG,GAAciG,IAAAA,KAAc/F,MAKjCmG,EAAAA,IAAArG,EAAA,CAAciG,IAAAA,KAAc/F,MAExC0H,EAAKD,YAAc"}

package/build/cjs/components/menu/MenuItemCheckbox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),l=require("../../hooks/useSwipeGesture/useSwipeGesture.cjs"),o=require("../icon/icons/CheckIcon.cjs"),s=i.forwardRef(((i,s)=>{const{"aria-checked":t,className:c,children:r,icon:a,onChange:u,onClick:d,onPointerCancel:m,onPointerDown:h,onPointerMove:k,onPointerUp:j,onKeyDown:g,...x}=i,{gestureHandlers:w}=l.useSwipeGesture({onClick:e=>{e.preventDefault(),null==u||u(e,!t),null==d||d(e)},onChange:(e,n)=>{n!==t&&(null==u||u(e,n))},onPointerCancel:m,onPointerDown:h,onPointerMove:k,onPointerUp:j});return e.jsxs("div",{ref:s,tabIndex:-1,...x,role:"menuitemcheckbox","aria-checked":t,className:n.clsx("jkl-menu-item","jkl-menu-item--checkbox",c),...w,onKeyDown:e=>{"Enter"===e.key?null==u||u(e,!t):" "===e.key&&(e.preventDefault(),null==u||u(e,!t)),null==g||g(e)},children:[a&&e.jsx("span",{className:"jkl-menu-item__icon",children:a}),e.jsx("div",{className:"jkl-menu-item__content",children:r}),e.jsx("div",{className:"jkl-toggle-switch",children:e.jsx("div",{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(o.CheckIcon,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));s.displayName="MenuItemCheckbox",exports.MenuItemCheckbox=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),o=require("../../hooks/useSwipeGesture/useSwipeGesture.cjs"),s=require("../icon/icons/CheckIcon.cjs"),t=i.forwardRef(((i,t)=>{const{"aria-checked":c,className:r,children:l,icon:a,onChange:d,onClick:u,onPointerCancel:m,onPointerDown:h,onPointerMove:k,onPointerUp:j,onKeyDown:g,...x}=i,{gestureHandlers:w}=o.useSwipeGesture({onClick:e=>{e.preventDefault(),d?.(e,!c),u?.(e)},onChange:(e,n)=>{n!==c&&d?.(e,n)},onPointerCancel:m,onPointerDown:h,onPointerMove:k,onPointerUp:j});return e.jsxs("div",{ref:t,tabIndex:-1,...x,role:"menuitemcheckbox","aria-checked":c,className:n.clsx("jkl-menu-item","jkl-menu-item--checkbox",r),...w,onKeyDown:e=>{"Enter"===e.key?d?.(e,!c):" "===e.key&&(e.preventDefault(),d?.(e,!c)),g?.(e)},children:[a&&e.jsx("span",{className:"jkl-menu-item__icon",children:a}),e.jsx("div",{className:"jkl-menu-item__content",children:l}),e.jsx("div",{className:"jkl-toggle-switch",children:e.jsx("div",{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(s.CheckIcon,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));t.displayName="MenuItemCheckbox",exports.MenuItemCheckbox=t;
 //# sourceMappingURL=MenuItemCheckbox.cjs.map

package/build/cjs/components/menu/MenuItemCheckbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.cjs","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n} from \"react\";\nimport {\n    type SwipeChangeHandler,\n    useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport type { MenuItemCheckboxProps } from \"./types.js\";\n\nexport const MenuItemCheckbox = forwardRef<\n    HTMLDivElement,\n    MenuItemCheckboxProps\n>((props, ref) => {\n    const {\n        \"aria-checked\": checked,\n        className,\n        children,\n        icon,\n        onChange,\n        onClick,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n        onKeyDown,\n        ...rest\n    } = props;\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n        event.preventDefault(); // Prevents the menu from closing on toggle\n        onChange?.(event, !checked);\n        onClick?.(event);\n    };\n\n    const handleChange: SwipeChangeHandler<HTMLDivElement> = (\n        event,\n        toggleTo,\n    ) => {\n        if (toggleTo !== checked) {\n            onChange?.(event, toggleTo);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n        if (event.key === \"Enter\") {\n            onChange?.(event, !checked);\n        } else if (event.key === \" \") {\n            event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n            onChange?.(event, !checked);\n        }\n        onKeyDown?.(event);\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        <div\n            ref={ref}\n            tabIndex={-1}\n            {...rest}\n            role=\"menuitemcheckbox\"\n            aria-checked={checked}\n            className={clsx(\n                \"jkl-menu-item\",\n                \"jkl-menu-item--checkbox\",\n                className,\n            )}\n            {...gestureHandlers}\n            onKeyDown={handleKeyDown}\n        >\n            {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n            <div className=\"jkl-menu-item__content\">{children}</div>\n            <div className=\"jkl-toggle-switch\">\n                <div className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon\n                            variant=\"small\"\n                            bold\n                            className=\"jkl-toggle-switch-widget__indicator\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"sRAaaA,EAAmBC,EAAAA,YAG9B,CAACC,EAAOC,KACA,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GA2BIc,gBAAAA,GAAoBC,kBAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EACd,EAuBIV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAAA,KAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EAAAA,KACP,gBACA,0BACAnB,MAEAW,EACJF,UAhCqDI,IACvC,UAAdA,EAAMO,IACK,MAAAjB,GAAAA,EAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,IAEvB,MAAAU,GAAAA,EAAYI,EAChB,EA0BSZ,SAAA,CAAAC,GAASmB,EAAAA,IAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAAA,IAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAAA,IAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,OAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAK9B,IAIRL,EAAiB8B,YAAc"}
+{"version":3,"file":"MenuItemCheckbox.cjs","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n} from \"react\";\nimport {\n    type SwipeChangeHandler,\n    useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport type { MenuItemCheckboxProps } from \"./types.js\";\n\nexport const MenuItemCheckbox = forwardRef<\n    HTMLDivElement,\n    MenuItemCheckboxProps\n>((props, ref) => {\n    const {\n        \"aria-checked\": checked,\n        className,\n        children,\n        icon,\n        onChange,\n        onClick,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n        onKeyDown,\n        ...rest\n    } = props;\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n        event.preventDefault(); // Prevents the menu from closing on toggle\n        onChange?.(event, !checked);\n        onClick?.(event);\n    };\n\n    const handleChange: SwipeChangeHandler<HTMLDivElement> = (\n        event,\n        toggleTo,\n    ) => {\n        if (toggleTo !== checked) {\n            onChange?.(event, toggleTo);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n        if (event.key === \"Enter\") {\n            onChange?.(event, !checked);\n        } else if (event.key === \" \") {\n            event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n            onChange?.(event, !checked);\n        }\n        onKeyDown?.(event);\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        <div\n            ref={ref}\n            tabIndex={-1}\n            {...rest}\n            role=\"menuitemcheckbox\"\n            aria-checked={checked}\n            className={clsx(\n                \"jkl-menu-item\",\n                \"jkl-menu-item--checkbox\",\n                className,\n            )}\n            {...gestureHandlers}\n            onKeyDown={handleKeyDown}\n        >\n            {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n            <div className=\"jkl-menu-item__content\">{children}</div>\n            <div className=\"jkl-toggle-switch\">\n                <div className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon\n                            variant=\"small\"\n                            bold\n                            className=\"jkl-toggle-switch-widget__indicator\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"sRAaaA,EAAmBC,EAAAA,YAG9B,CAACC,EAAOC,KACA,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GA2BIc,gBAAAA,GAAoBC,kBAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACKX,IAAAU,GAAQd,GACnBK,IAAUS,EAAK,EAwBfV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,GACbI,IAAWU,EAAOE,EAAQ,EAiB9BV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAAA,KAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EAAAA,KACP,gBACA,0BACAnB,MAEAW,EACJF,UAhCqDI,IACvC,UAAdA,EAAMO,IACKjB,IAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACKX,IAAAU,GAAQd,IAEvBU,IAAYI,EAAK,EA2BZZ,SAAA,CAAAC,GAASmB,EAAAA,IAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAAA,IAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAAA,IAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,OAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAK9B,IAIRL,EAAiB8B,YAAc"}

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

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

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

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

package/build/cjs/components/modal/stories/ModalCloseButton.stories.d.cts

@@ -7,7 +7,7 @@ declare const meta: {
         onClick: () => void;
     } & {
         "aria-label": string;
-    }, "onClick"> & import('../types.js').BaseModalProps & import('../../index.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    }, "onClick"> & import('../types.js').BaseModalProps & import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };

package/build/cjs/components/modal/stories/ModalOverlay.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/* empty css                             */const e={title:"Komponenter/Modal/ModalOverlay",component:require("../Modal.cjs").ModalOverlay,parameters:{layout:"centered"},tags:["autodocs"]};let l=null;const o={args:{dialogRef:e=>{l=e},onCancel:()=>{console.log("❌ Cancel"),null==l||l.hide()},onClick:()=>{var e,l;null==(l=null==(e=o.args)?void 0:e.onCancel)||l.call(e)}}};exports.ModalOverlay=o,exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/* empty css                             */const e={title:"Komponenter/Modal/ModalOverlay",component:require("../Modal.cjs").ModalOverlay,parameters:{layout:"centered"},tags:["autodocs"]};let o=null;const l={args:{dialogRef:e=>{o=e},onCancel:()=>{console.log("❌ Cancel"),o?.hide()},onClick:()=>{l.args?.onCancel?.()}}};exports.ModalOverlay=l,exports.default=e;
 //# sourceMappingURL=ModalOverlay.stories.cjs.map