@fremtind/jokul 0.44.7 → 0.45.0

package/build/es/components/menu/MenuItemCheckbox.d.ts

@@ -1,11 +1,3 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
-export interface MenuItemCheckboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-checked" | "onChange"> {
-    "aria-checked": boolean;
-    /**
-     * Et ikon som vises før innholdet i menypunktet
-     */
-    icon?: ReactNode;
-    onChange?: SwipeChangeHandler<HTMLDivElement> & ((event: React.KeyboardEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>, pressed: boolean) => void);
-}
+import { default as React } from 'react';
+import { MenuItemCheckboxProps } from './types.js';
 export declare const MenuItemCheckbox: React.ForwardRefExoticComponent<MenuItemCheckboxProps & React.RefAttributes<HTMLDivElement>>;

package/build/es/components/menu/MenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    type HTMLAttributes,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport {\n    SwipeChangeHandler,\n    useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport interface MenuItemCheckboxProps\n    extends Omit<HTMLAttributes<HTMLDivElement>, \"aria-checked\" | \"onChange\"> {\n    \"aria-checked\": boolean;\n    /**\n     * Et ikon som vises før innholdet i menypunktet\n     */\n    icon?: ReactNode;\n    onChange?: SwipeChangeHandler<HTMLDivElement> &\n        ((\n            event:\n                | React.KeyboardEvent<HTMLDivElement>\n                | React.PointerEvent<HTMLDivElement>,\n            pressed: boolean,\n        ) => void);\n}\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":"2QA8BO,MAAMA,EAAmBC,GAG9B,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,EAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAAA,EAwBVV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EACP,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,EAAAA,EA2BPZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAI1B,IAKZL,EAAiB8B,YAAc"}
+{"version":3,"file":"MenuItemCheckbox.js","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    SwipeChangeHandler,\n    useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { 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":"2QAaO,MAAMA,EAAmBC,GAG9B,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,EAAgB,CACxCR,QA1BoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAAA,EAwBVV,SArBqD,CACrDU,EACAE,KAEIA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EACP,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,EAAAA,EA2BPZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,mCACfqB,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJxB,UAAU,iDAI1B,IAKZL,EAAiB8B,YAAc"}

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

@@ -1,4 +1,5 @@
-export { Menu, type MenuProps } from './Menu.js';
-export { MenuItem, type MenuItemProps } from './MenuItem.js';
-export { MenuItemCheckbox, type MenuItemCheckboxProps, } from './MenuItemCheckbox.js';
+export { Menu } from './Menu.js';
+export { MenuItem } from './MenuItem.js';
+export { MenuItemCheckbox } from './MenuItemCheckbox.js';
 export { MenuDivider } from './MenuDivider.js';
+export type { MenuProps, MenuItemProps, MenuItemCheckboxProps, } from './types.js';

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

@@ -0,0 +1,68 @@
+import { Placement } from '@floating-ui/react';
+import { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { DataTestAutoId, WithChildren } from '../../core/types.js';
+import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export interface MenuProps extends DataTestAutoId, WithChildren, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    className?: string;
+    /**
+     * Initiell plassering av menyen. Dersom det ikke er plass på skjermen der du
+     * angir at den skal åpnes vil den slyttes automatisk.
+     * @default "bottom-start" på toppnivå, "right-start" for undermenyer
+     * */
+    initialPlacement?: Placement;
+    /**
+     * Angir om menyen skal åpnes ved hover (uten å måtte klikke)
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Angir om menyen skal holdes åpen når man klikker utenfor menyen
+     * @default false
+     */
+    keepOpenOnClickOutside?: boolean;
+    /**
+     * Elementet som fungerer som trigger for menyen. Dersom elementet ikke er en `<button>`
+     * eller en `forwardRef<HTMLButtonElement>` vil det bli lagt inne i en knapp
+     * med forhåndsdefinert stil. For å komme raskt i gang kan du bruke komponenten
+     * `MenuTriggerButton` fra denne pakken.
+     */
+    triggerElement: ReactNode;
+    /**
+     * Kan brukes til å styre utenfra om menyen skal være åpen eller ikke.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Callback som kalles når menyen åpnes eller lukkes.
+     */
+    onToggle?: (isOpen: boolean) => void;
+}
+export type MenuItemProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    /**
+     * Et ikon som vises før innholdet i menypunktet
+     */
+    icon?: ReactNode;
+} & ({
+    expandable?: never;
+    /**
+     * Indikerer at menypunktet åpner noe i et nytt vindu eller tab
+     * @default false
+     */
+    external?: boolean;
+} | {
+    external?: never;
+    /**
+     * Indikerer at menypunktet er utvidbart ved å vise en chevron
+     * @default false
+     */
+    expandable?: boolean;
+})>;
+export interface MenuItemCheckboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-checked" | "onChange"> {
+    "aria-checked": boolean;
+    /**
+     * Et ikon som vises før innholdet i menypunktet
+     */
+    icon?: ReactNode;
+    onChange?: SwipeChangeHandler<HTMLDivElement> & ((event: React.KeyboardEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>, pressed: boolean) => void);
+}

package/build/es/components/menu/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/menu/types.js.map

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

package/build/es/components/message/FormErrorMessage.d.ts

@@ -1,14 +1,3 @@
 import { default as React } from 'react';
-import { MessageProps } from './Message.js';
-export interface FormErrorMessageProps {
-    className?: string;
-    id?: string;
-    /**
-     * @default { title: "Feil og mangler i skjemaet" }
-     */
-    messageProps?: Partial<MessageProps>;
-    errors: (string | undefined)[];
-    isSubmitted: boolean;
-    isValid: boolean;
-}
+import { FormErrorMessageProps } from './types.js';
 export declare const FormErrorMessage: React.ForwardRefExoticComponent<FormErrorMessageProps & React.RefAttributes<HTMLDivElement>>;

package/build/es/components/message/FormErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormErrorMessage.js","sources":["../../../../src/components/message/FormErrorMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { MessageProps, ErrorMessage } from \"./Message.js\";\n\nexport interface FormErrorMessageProps {\n    className?: string;\n    id?: string;\n    /**\n     * @default { title: \"Feil og mangler i skjemaet\" }\n     */\n    messageProps?: Partial<MessageProps>;\n    errors: (string | undefined)[];\n    isSubmitted: boolean;\n    isValid: boolean;\n}\n\nconst defaultMessageProps = {\n    title: \"Feil og mangler i skjemaet\",\n};\n\nexport const FormErrorMessage = forwardRef<\n    HTMLDivElement,\n    FormErrorMessageProps\n>((props, forwardedRef): JSX.Element | null => {\n    const { className, errors, isSubmitted, isValid, messageProps, ...rest } =\n        props;\n\n    const showSummary = isSubmitted && !isValid;\n\n    const [messageRef] = useAnimatedHeight<HTMLDivElement>(showSummary, {\n        display: \"grid\",\n    });\n\n    const previousErrors = useRef<Array<string | undefined>>(errors);\n    useEffect(() => {\n        previousErrors.current = errors;\n    }, [errors]);\n    const hasNewErrors = errors.length > previousErrors.current.length;\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\"jkl-form-error-message\", className)}\n            {...rest}\n        >\n            <ErrorMessage\n                {...defaultMessageProps}\n                {...messageProps}\n                ref={messageRef}\n                role={hasNewErrors ? \"alert\" : \"presentation\"} // Unngå å repetere hele oppsummeringen etter hvert som feilene rettes\n            >\n                <ul className=\"jkl-list\">\n                    {errors\n                        .filter((error) => typeof error !== \"undefined\")\n                        .map((error) => (\n                            <li className=\"jkl-list__item\" key={error}>\n                                {error}\n                            </li>\n                        ))}\n                </ul>\n            </ErrorMessage>\n        </div>\n    );\n});\n\nFormErrorMessage.displayName = \"FormErrorMessage\";\n"],"names":["defaultMessageProps","title","FormErrorMessage","forwardRef","props","forwardedRef","className","errors","isSubmitted","isValid","messageProps","rest","showSummary","messageRef","useAnimatedHeight","display","previousErrors","useRef","useEffect","current","hasNewErrors","length","jsx","ref","clsx","children","ErrorMessage","role","filter","error","map","displayName"],"mappings":"uRAiBA,MAAMA,EAAsB,CACxBC,MAAO,8BAGEC,EAAmBC,GAG9B,CAACC,EAAOC,KACA,MAAEC,UAAAA,EAAWC,OAAAA,EAAQC,YAAAA,EAAaC,QAAAA,EAASC,aAAAA,KAAiBC,GAC9DP,EAEEQ,EAAcJ,IAAgBC,GAE7BI,GAAcC,EAAkCF,EAAa,CAChEG,QAAS,SAGPC,EAAiBC,EAAkCV,GACzDW,GAAU,KACNF,EAAeG,QAAUZ,CAAAA,GAC1B,CAACA,IACJ,MAAMa,EAAeb,EAAOc,OAASL,EAAeG,QAAQE,OAGxD,OAAAC,EAAC,MAAA,CACGC,IAAKlB,EACLC,UAAWkB,EAAK,yBAA0BlB,MACtCK,EAEJc,SAAAH,EAACI,EAAA,IACO1B,KACAU,EACJa,IAAKV,EACLc,KAAMP,EAAe,QAAU,eAE/BK,SAAAH,EAAC,MAAGhB,UAAU,WACTmB,WACIG,QAAQC,UAAiBA,EAAU,MACnCC,KAAKD,GACDP,EAAA,KAAA,CAAGhB,UAAU,iBACTmB,SAAAI,GAD+BA,UAKpD,IAKZ3B,EAAiB6B,YAAc"}
+{"version":3,"file":"FormErrorMessage.js","sources":["../../../../src/components/message/FormErrorMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { ErrorMessage } from \"./Message.js\";\nimport { FormErrorMessageProps } from \"./types.js\";\n\nconst defaultMessageProps = {\n    title: \"Feil og mangler i skjemaet\",\n};\n\nexport const FormErrorMessage = forwardRef<\n    HTMLDivElement,\n    FormErrorMessageProps\n>((props, forwardedRef): JSX.Element | null => {\n    const { className, errors, isSubmitted, isValid, messageProps, ...rest } =\n        props;\n\n    const showSummary = isSubmitted && !isValid;\n\n    const [messageRef] = useAnimatedHeight<HTMLDivElement>(showSummary, {\n        display: \"grid\",\n    });\n\n    const previousErrors = useRef<Array<string | undefined>>(errors);\n    useEffect(() => {\n        previousErrors.current = errors;\n    }, [errors]);\n    const hasNewErrors = errors.length > previousErrors.current.length;\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\"jkl-form-error-message\", className)}\n            {...rest}\n        >\n            <ErrorMessage\n                {...defaultMessageProps}\n                {...messageProps}\n                ref={messageRef}\n                role={hasNewErrors ? \"alert\" : \"presentation\"} // Unngå å repetere hele oppsummeringen etter hvert som feilene rettes\n            >\n                <ul className=\"jkl-list\">\n                    {errors\n                        .filter((error) => typeof error !== \"undefined\")\n                        .map((error) => (\n                            <li className=\"jkl-list__item\" key={error}>\n                                {error}\n                            </li>\n                        ))}\n                </ul>\n            </ErrorMessage>\n        </div>\n    );\n});\n\nFormErrorMessage.displayName = \"FormErrorMessage\";\n"],"names":["defaultMessageProps","title","FormErrorMessage","forwardRef","props","forwardedRef","className","errors","isSubmitted","isValid","messageProps","rest","showSummary","messageRef","useAnimatedHeight","display","previousErrors","useRef","useEffect","current","hasNewErrors","length","jsx","ref","clsx","children","ErrorMessage","role","filter","error","map","displayName"],"mappings":"uRAMA,MAAMA,EAAsB,CACxBC,MAAO,8BAGEC,EAAmBC,GAG9B,CAACC,EAAOC,KACA,MAAEC,UAAAA,EAAWC,OAAAA,EAAQC,YAAAA,EAAaC,QAAAA,EAASC,aAAAA,KAAiBC,GAC9DP,EAEEQ,EAAcJ,IAAgBC,GAE7BI,GAAcC,EAAkCF,EAAa,CAChEG,QAAS,SAGPC,EAAiBC,EAAkCV,GACzDW,GAAU,KACNF,EAAeG,QAAUZ,CAAAA,GAC1B,CAACA,IACJ,MAAMa,EAAeb,EAAOc,OAASL,EAAeG,QAAQE,OAGxD,OAAAC,EAAC,MAAA,CACGC,IAAKlB,EACLC,UAAWkB,EAAK,yBAA0BlB,MACtCK,EAEJc,SAAAH,EAACI,EAAA,IACO1B,KACAU,EACJa,IAAKV,EACLc,KAAMP,EAAe,QAAU,eAE/BK,SAAAH,EAAC,MAAGhB,UAAU,WACTmB,WACIG,QAAQC,UAAiBA,EAAU,MACnCC,KAAKD,GACDP,EAAA,KAAA,CAAGhB,UAAU,iBACTmB,SAAAI,GAD+BA,UAKpD,IAKZ3B,EAAiB6B,YAAc"}

package/build/es/components/message/Message.d.ts

@@ -1,18 +1,5 @@
-import { default as React, AriaRole } from 'react';
-import { Density, WithChildren } from '../../core/types.js';
-export interface MessageProps extends WithChildren {
-    id?: string;
-    title?: string;
-    fullWidth?: boolean;
-    density?: Density;
-    className?: string;
-    dismissed?: boolean;
-    dismissAction?: {
-        handleDismiss: () => void;
-        buttonTitle?: string;
-    };
-    role?: AriaRole;
-}
+import { default as React } from 'react';
+import { MessageProps } from './types.js';
 export declare const InfoMessage: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ErrorMessage: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 export declare const WarningMessage: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

package/build/es/components/message/Message.js.map

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

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

@@ -1,2 +1,3 @@
-export { InfoMessage, ErrorMessage, SuccessMessage, WarningMessage, type MessageProps, } from './Message.js';
-export { FormErrorMessage, type FormErrorMessageProps, } from './FormErrorMessage.js';
+export { InfoMessage, ErrorMessage, SuccessMessage, WarningMessage, } from './Message.js';
+export { FormErrorMessage } from './FormErrorMessage.js';
+export type { MessageProps, FormErrorMessageProps } from './types.js';

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

@@ -0,0 +1,26 @@
+import { AriaRole } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+export interface MessageProps extends WithChildren {
+    id?: string;
+    title?: string;
+    fullWidth?: boolean;
+    density?: Density;
+    className?: string;
+    dismissed?: boolean;
+    dismissAction?: {
+        handleDismiss: () => void;
+        buttonTitle?: string;
+    };
+    role?: AriaRole;
+}
+export interface FormErrorMessageProps {
+    className?: string;
+    id?: string;
+    /**
+     * @default { title: "Feil og mangler i skjemaet" }
+     */
+    messageProps?: Partial<MessageProps>;
+    errors: (string | undefined)[];
+    isSubmitted: boolean;
+    isValid: boolean;
+}

package/build/es/components/message/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/message/types.js.map

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

package/build/es/components/modal/Modal.d.ts

@@ -1,18 +1,6 @@
 import { default as React } from 'react';
-import { WithOptionalChildren } from '../../core/types.js';
-import { IconButtonProps } from '../icon-button/IconButton.js';
-import { ModalConfig } from './useModal.js';
-export interface ModalProps extends WithOptionalChildren {
-    id?: string;
-    className?: string;
-    component?: React.ElementType;
-    style?: React.CSSProperties;
-    /**
-     * Overstyrer padding på modalen via en CSS-variabel.
-     */
-    padding?: 16 | 24 | 40;
-}
-export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
+import { IconButtonProps } from '../icon-button/types.js';
+import { BaseModalProps, ModalProps } from './types.js';
 /**
  * Ment å brukes med `useModal`.
  */
@@ -24,21 +12,12 @@ export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
     'aria-hidden': boolean;
     'aria-labelledby': string;
 } & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
-    /**
-     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
-     */
-    transparent?: boolean;
-};
 /**
  * Ment å brukes med `useModal`.
  */
 export declare const ModalOverlay: React.ForwardRefExoticComponent<{
     onClick?: () => void;
 } & BaseModalProps & {
-    /**
-     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
-     */
     transparent?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 /**

package/build/es/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n    id?: string;\n    className?: string;\n    component?: React.ElementType;\n    style?: React.CSSProperties;\n    /**\n     * Overstyrer padding på modalen via en CSS-variabel.\n     */\n    padding?: 16 | 24 | 40;\n}\n\nexport type BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\nexport type ModalOverlayProps = ModalConfig[\"overlay\"] &\n    BaseModalProps & {\n        /**\n         * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n         */\n        transparent?: boolean;\n    };\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAuBa,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { IconButtonProps } from \"../icon-button/types.js\";\nimport {\n    BaseModalProps,\n    ModalConfig,\n    ModalOverlayProps,\n    ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAea,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAKtB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}

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

@@ -1,2 +1,3 @@
-export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, type ModalProps, type BaseModalProps, type ModalOverlayProps, } from './Modal.js';
-export { useModal, type UseModalOptions, type ModalInstance, type ModalConfig, } from './useModal.js';
+export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.js';
+export { useModal, type ModalInstance } from './useModal.js';
+export type { ModalProps, BaseModalProps, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.js';

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

@@ -0,0 +1,42 @@
+import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
+import { WithOptionalChildren } from '../../core/types.js';
+export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
+    id?: string;
+    /**
+     * @default "Lukk"
+     */
+    closeButtonLabel?: string;
+    /**
+     * Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.
+     *
+     * @default "dialog"
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.
+     */
+    title: string;
+}
+export interface ModalConfig extends Omit<A11yDialogConfig, "dialog"> {
+    modal: A11yDialogConfig["dialog"];
+    closeButton: A11yDialogConfig["closeButton"] & {
+        "aria-label": string;
+    };
+}
+export interface ModalProps extends WithOptionalChildren {
+    id?: string;
+    className?: string;
+    component?: React.ElementType;
+    style?: React.CSSProperties;
+    /**
+     * Overstyrer padding på modalen via en CSS-variabel.
+     */
+    padding?: 16 | 24 | 40;
+}
+export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
+export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
+    /**
+     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
+     */
+    transparent?: boolean;
+};

package/build/es/components/modal/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/modal/types.js.map

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

package/build/es/components/modal/useModal.d.ts

@@ -1,28 +1,5 @@
-import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
-export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
-    id?: string;
-    /**
-     * @default "Lukk"
-     */
-    closeButtonLabel?: string;
-    /**
-     * Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.
-     *
-     * @default "dialog"
-     */
-    role?: "dialog" | "alertdialog";
-    /**
-     * Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.
-     */
-    title: string;
-}
+import { ModalConfig, UseModalOptions } from './types.js';
 export type ModalInstance = ReturnType<typeof useModal>[0];
-export interface ModalConfig extends Omit<A11yDialogConfig, "dialog"> {
-    modal: A11yDialogConfig["dialog"];
-    closeButton: A11yDialogConfig["closeButton"] & {
-        "aria-label": string;
-    };
-}
 /**
  * @example
  * ```jsx

package/build/es/components/modal/useModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModal.js","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import {\n    A11yDialogConfig,\n    A11yDialogProps,\n    useA11yDialog,\n} from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks/useId/useId.js\";\n\nexport interface UseModalOptions\n    extends Omit<A11yDialogProps, \"id\" | \"closeButtonPosition\"> {\n    id?: string;\n    /**\n     * @default \"Lukk\"\n     */\n    closeButtonLabel?: string;\n    /**\n     * Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.\n     *\n     * @default \"dialog\"\n     */\n    role?: \"dialog\" | \"alertdialog\";\n    /**\n     * Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.\n     */\n    title: string;\n}\n\nexport type ModalInstance = ReturnType<typeof useModal>[0];\n\nexport interface ModalConfig extends Omit<A11yDialogConfig, \"dialog\"> {\n    modal: A11yDialogConfig[\"dialog\"];\n    closeButton: A11yDialogConfig[\"closeButton\"] & {\n        \"aria-label\": string;\n    };\n}\n\n/**\n * @example\n * ```jsx\n * const heading = \"Bekreft sletting\";\n * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });\n *\n * useEffect(() => {\n *      if (!instance) {\n *          return;\n *      }\n *      instance.show();\n *  }, [instance]);\n *\n * return ReactDOM.createPortal(\n *      <ModalContainer {...container}>\n *          <ModalOverlay {...overlay} />\n *          <Modal {...modal}>\n *              <ModalHeader>\n *                  <ModalTitle {...title}>{heading}</ModalTitle>\n *                  <ModalCloseButton {...closeButton} />\n *              </ModalHeader>\n *              <ModalBody>\n *                  Er du sikker på at du vil slette Foo Bar Baz?\n *              </ModalBody>\n *              <ModalActions>\n *                  <PrimaryButton\n *                      onClick={() => {\n *                          // Do the thing\n *                          instance?.hide()\n *                      }}\n *                  >\n *                      Bekreft\n *                  </PrimaryButton>\n *                  <TertiaryButton onClick={() => instance?.hide()}>\n *                     Avbryt\n *                 </TertiaryButton>\n *              </ModalActions>\n *          </Modal>\n *      </ModalContainer>,\n *      document.body,\n *  );\n * ```\n */\nexport function useModal(props: UseModalOptions) {\n    const {\n        id: idProp,\n        role = \"dialog\",\n        closeButtonLabel = \"Lukk\",\n        ...rest\n    } = props;\n\n    const id = useId(idProp || \"jkl-modal\", { generateSuffix: !idProp });\n\n    const [instance, config] = useA11yDialog({\n        id,\n        role,\n        ...rest,\n    });\n\n    const { dialog, ...restConfig } = config;\n\n    const modalConfig: ModalConfig = {\n        modal: config.dialog,\n        ...restConfig,\n        closeButton: {\n            ...config.closeButton,\n            \"aria-label\": closeButtonLabel,\n        },\n    };\n\n    return [instance, modalConfig] as const;\n}\n"],"names":["useModal","props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"qGA8EO,SAASA,EAASC,GACf,MACFC,GAAIC,EACJC,KAAAA,EAAO,SACPC,iBAAAA,EAAmB,UAChBC,GACHL,EAEEC,EAAKK,EAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,EAAc,CACrCT,GAAAA,EACAE,KAAAA,KACGE,KAGCM,OAAAA,KAAWC,GAAeH,EAW3B,MAAA,CAACD,EATyB,CAC7BK,MAAOJ,EAAOE,UACXC,EACHE,YAAa,IACNL,EAAOK,YACV,aAAcV,IAK1B"}
+{"version":3,"file":"useModal.js","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import { useA11yDialog } from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ModalConfig, UseModalOptions } from \"./types.js\";\n\nexport type ModalInstance = ReturnType<typeof useModal>[0];\n\n/**\n * @example\n * ```jsx\n * const heading = \"Bekreft sletting\";\n * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });\n *\n * useEffect(() => {\n *      if (!instance) {\n *          return;\n *      }\n *      instance.show();\n *  }, [instance]);\n *\n * return ReactDOM.createPortal(\n *      <ModalContainer {...container}>\n *          <ModalOverlay {...overlay} />\n *          <Modal {...modal}>\n *              <ModalHeader>\n *                  <ModalTitle {...title}>{heading}</ModalTitle>\n *                  <ModalCloseButton {...closeButton} />\n *              </ModalHeader>\n *              <ModalBody>\n *                  Er du sikker på at du vil slette Foo Bar Baz?\n *              </ModalBody>\n *              <ModalActions>\n *                  <PrimaryButton\n *                      onClick={() => {\n *                          // Do the thing\n *                          instance?.hide()\n *                      }}\n *                  >\n *                      Bekreft\n *                  </PrimaryButton>\n *                  <TertiaryButton onClick={() => instance?.hide()}>\n *                     Avbryt\n *                 </TertiaryButton>\n *              </ModalActions>\n *          </Modal>\n *      </ModalContainer>,\n *      document.body,\n *  );\n * ```\n */\nexport function useModal(props: UseModalOptions) {\n    const {\n        id: idProp,\n        role = \"dialog\",\n        closeButtonLabel = \"Lukk\",\n        ...rest\n    } = props;\n\n    const id = useId(idProp || \"jkl-modal\", { generateSuffix: !idProp });\n\n    const [instance, config] = useA11yDialog({\n        id,\n        role,\n        ...rest,\n    });\n\n    const { dialog, ...restConfig } = config;\n\n    const modalConfig: ModalConfig = {\n        modal: config.dialog,\n        ...restConfig,\n        closeButton: {\n            ...config.closeButton,\n            \"aria-label\": closeButtonLabel,\n        },\n    };\n\n    return [instance, modalConfig] as const;\n}\n"],"names":["useModal","props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"qGAiDO,SAASA,EAASC,GACf,MACFC,GAAIC,EACJC,KAAAA,EAAO,SACPC,iBAAAA,EAAmB,UAChBC,GACHL,EAEEC,EAAKK,EAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,EAAc,CACrCT,GAAAA,EACAE,KAAAA,KACGE,KAGCM,OAAAA,KAAWC,GAAeH,EAW3B,MAAA,CAACD,EATyB,CAC7BK,MAAOJ,EAAOE,UACXC,EACHE,YAAa,IACNL,EAAOK,YACV,aAAcV,IAK1B"}

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { NavLinkProps } from './types.js';
+type LinkComponent = <ElementType extends React.ElementType = "a">(props: NavLinkProps<ElementType>) => React.ReactElement | null;
+export declare const NavLink: LinkComponent;
+export {};

package/build/es/components/nav-link/NavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.js","sources":["../../../../src/components/nav-link/NavLink.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowRightIcon } from \"../icon/icons/ArrowRightIcon.js\";\nimport { ArrowLeftIcon } from \"../icon/index.js\";\nimport { NavLinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavLinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavLink = React.forwardRef(function NavLink<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavLinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        active = false,\n        back = false,\n        className,\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\n                \"jkl-nav-link\",\n                {\n                    \"jkl-nav-link--active\": active,\n                    \"jkl-nav-link--back\": back,\n                },\n                className,\n            )}\n            {...rest}\n        >\n            {back && (\n                <ArrowLeftIcon variant=\"small\" className=\"jkl-nav-link__icon\" />\n            )}\n            {children}\n            {!back && (\n                <ArrowRightIcon\n                    variant=\"small\"\n                    className=\"jkl-nav-link__icon\"\n                />\n            )}\n        </Component>\n    );\n}) as LinkComponent;\n"],"names":["NavLink","React","forwardRef","props","ref","active","back","className","children","as","rest","jsxs","clsx","jsx","ArrowLeftIcon","variant","ArrowRightIcon"],"mappings":"ghDAWO,MAAMA,EAAUC,EAAMC,YAAW,SAEtCC,EAAkCC,GAC1B,MACFC,OAAAA,GAAS,EACTC,KAAAA,GAAO,EACPC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHP,EAIA,OAAAQ,EAHcF,EAGb,CACGL,IAAAA,EACAG,UAAWK,EACP,eACA,CACI,uBAAwBP,EACxB,qBAAsBC,GAE1BC,MAEAG,EAEHF,SAAA,CAAAF,GACIO,EAAAC,EAAA,CAAcC,QAAQ,QAAQR,UAAU,uBAE5CC,GACCF,GACEO,EAACG,EAAA,CACGD,QAAQ,QACRR,UAAU,yBAK9B"}

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

@@ -0,0 +1,2 @@
+export { NavLink } from './NavLink.js';
+export type { NavLinkProps } from './types.js';

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

@@ -0,0 +1,2 @@
+import{NavLink as a}from"./NavLink.js";export{a as NavLink};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,5 @@
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export type NavLinkProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    active?: boolean;
+    back?: boolean;
+}>;

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/nav-link/types.js.map

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

package/build/es/components/pagination/Pagination.d.ts

@@ -1,19 +1,5 @@
 import { default as React } from 'react';
-import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
-export type PaginationProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
-    currentPage: number;
-    numberOfPages: number;
-    onPageChange: (toPage: number, fromPage: number) => void;
-    /**
-     * Dersom du ønsker å ha custom labels kan du sende inn disse. "next" og "previous"
-     * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side
-     * @default { previous: "Forrige side", next: "Neste side" }
-     */
-    labels?: {
-        previous: string;
-        next: string;
-    };
-}>;
+import { PaginationProps } from './types.js';
 type PaginationComponent = <ElementType extends React.ElementType = "nav">(props: PaginationProps<ElementType>) => React.ReactElement | null;
 export declare const Pagination: PaginationComponent;
 export {};

package/build/es/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n    PolymorphicPropsWithRef,\n    PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> =\n    PolymorphicPropsWithRef<\n        ElementType,\n        {\n            currentPage: number;\n            numberOfPages: number;\n            onPageChange: (toPage: number, fromPage: number) => void;\n            /**\n             * Dersom du ønsker å ha custom labels kan du sende inn disse. \"next\" og \"previous\"\n             * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side\n             * @default { previous: \"Forrige side\", next: \"Neste side\" }\n             */\n            labels?: {\n                previous: string;\n                next: string;\n            };\n        }\n    >;\n\ntype PaginationComponent = <ElementType extends React.ElementType = \"nav\">(\n    props: PaginationProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n    ElementType extends React.ElementType = \"nav\",\n>(\n    {\n        onPageChange,\n        currentPage,\n        numberOfPages,\n        labels = {\n            previous: \"Forrige side\",\n            next: \"Neste side\",\n        },\n        as,\n        ...rest\n    }: PaginationProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    useEffect(() => {\n        if (currentPage < 1) {\n            console.error(\n                \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n            );\n        }\n        if (currentPage > numberOfPages) {\n            console.error(\n                \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n            );\n        }\n    }, [currentPage, numberOfPages]);\n\n    const Component = as || \"nav\";\n\n    if (numberOfPages <= 7) {\n        return (\n            <Component ref={ref} {...rest} className=\"jkl-pagination\">\n                <IconButton\n                    className=\"jkl-pagination-button\"\n                    title={labels.previous}\n                    onClick={() => onPageChange(currentPage - 1, currentPage)}\n                    aria-disabled={currentPage === 1}\n                    tabIndex={currentPage === 1 ? -1 : 0}\n                >\n                    <ChevronLeftIcon />\n                </IconButton>\n                <ol className=\"jkl-pagination__pages\">\n                    {Array.from({ length: numberOfPages }).map((_, index) => {\n                        const page = index + 1;\n                        return (\n                            <PageButton\n                                key={index}\n                                isActive={currentPage === page}\n                                number={page}\n                                total={numberOfPages}\n                                onClick={() => onPageChange(page, currentPage)}\n                            />\n                        );\n                    })}\n                </ol>\n                <IconButton\n                    className=\"jkl-pagination-button\"\n                    title={labels.next}\n                    onClick={() => onPageChange(currentPage + 1, currentPage)}\n                    aria-disabled={currentPage === numberOfPages}\n                    tabIndex={currentPage === numberOfPages ? -1 : 0}\n                >\n                    <ChevronRightIcon />\n                </IconButton>\n            </Component>\n        );\n    }\n\n    const showStartEllipsis = currentPage > 4;\n    const showEndEllipsis = currentPage < numberOfPages - 3;\n\n    const startEllipsis = Math.min(\n        Math.max(currentPage - 2, 2),\n        numberOfPages - 5,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 3,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 2,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n    return (\n        <Component ref={ref} {...rest} className=\"jkl-pagination\">\n            <IconButton\n                className=\"jkl-pagination-button\"\n                title={labels.previous}\n                onClick={() => onPageChange(currentPage - 1, currentPage)}\n                aria-disabled={currentPage === 1}\n                tabIndex={currentPage === 1 ? -1 : 0}\n            >\n                <ChevronLeftIcon />\n            </IconButton>\n            <ol className=\"jkl-pagination__pages\">\n                <PageButton\n                    isActive={currentPage === 1}\n                    number={1}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(1, currentPage)}\n                />\n                {showStartEllipsis ? (\n                    <span\n                        aria-hidden\n                        className=\"jkl-pagination-button--elipsis\"\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PageButton\n                        isActive={currentPage === startEllipsis}\n                        number={startEllipsis}\n                        total={numberOfPages}\n                        onClick={() => onPageChange(startEllipsis, currentPage)}\n                    />\n                )}\n                <PageButton\n                    isActive={currentPage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    total={numberOfPages}\n                    onClick={() =>\n                        onPageChange(centerPageNumberStart, currentPage)\n                    }\n                />\n                <PageButton\n                    isActive={currentPage === centerPageNumber}\n                    number={centerPageNumber}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(centerPageNumber, currentPage)}\n                />\n                <PageButton\n                    isActive={currentPage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    total={numberOfPages}\n                    onClick={() =>\n                        onPageChange(centerPageNumberEnd, currentPage)\n                    }\n                />\n                {showEndEllipsis ? (\n                    <span\n                        aria-hidden\n                        className=\"jkl-pagination-button--elipsis\"\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PageButton\n                        isActive={currentPage === endEllipsis}\n                        number={endEllipsis}\n                        total={numberOfPages}\n                        onClick={() => onPageChange(endEllipsis, currentPage)}\n                    />\n                )}\n                <PageButton\n                    isActive={currentPage === numberOfPages}\n                    number={numberOfPages}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(numberOfPages, currentPage)}\n                />\n            </ol>\n            <IconButton\n                className=\"jkl-pagination-button\"\n                title={labels.next}\n                onClick={() => onPageChange(currentPage + 1, currentPage)}\n                aria-disabled={currentPage === numberOfPages}\n                tabIndex={currentPage === numberOfPages ? -1 : 0}\n            >\n                <ChevronRightIcon />\n            </IconButton>\n        </Component>\n    );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\nimport { PaginationProps } from \"./types.js\";\n\ntype PaginationComponent = <ElementType extends React.ElementType = \"nav\">(\n    props: PaginationProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n    ElementType extends React.ElementType = \"nav\",\n>(\n    {\n        onPageChange,\n        currentPage,\n        numberOfPages,\n        labels = {\n            previous: \"Forrige side\",\n            next: \"Neste side\",\n        },\n        as,\n        ...rest\n    }: PaginationProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    useEffect(() => {\n        if (currentPage < 1) {\n            console.error(\n                \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n            );\n        }\n        if (currentPage > numberOfPages) {\n            console.error(\n                \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n            );\n        }\n    }, [currentPage, numberOfPages]);\n\n    const Component = as || \"nav\";\n\n    if (numberOfPages <= 7) {\n        return (\n            <Component ref={ref} {...rest} className=\"jkl-pagination\">\n                <IconButton\n                    className=\"jkl-pagination-button\"\n                    title={labels.previous}\n                    onClick={() => onPageChange(currentPage - 1, currentPage)}\n                    aria-disabled={currentPage === 1}\n                    tabIndex={currentPage === 1 ? -1 : 0}\n                >\n                    <ChevronLeftIcon />\n                </IconButton>\n                <ol className=\"jkl-pagination__pages\">\n                    {Array.from({ length: numberOfPages }).map((_, index) => {\n                        const page = index + 1;\n                        return (\n                            <PageButton\n                                key={index}\n                                isActive={currentPage === page}\n                                number={page}\n                                total={numberOfPages}\n                                onClick={() => onPageChange(page, currentPage)}\n                            />\n                        );\n                    })}\n                </ol>\n                <IconButton\n                    className=\"jkl-pagination-button\"\n                    title={labels.next}\n                    onClick={() => onPageChange(currentPage + 1, currentPage)}\n                    aria-disabled={currentPage === numberOfPages}\n                    tabIndex={currentPage === numberOfPages ? -1 : 0}\n                >\n                    <ChevronRightIcon />\n                </IconButton>\n            </Component>\n        );\n    }\n\n    const showStartEllipsis = currentPage > 4;\n    const showEndEllipsis = currentPage < numberOfPages - 3;\n\n    const startEllipsis = Math.min(\n        Math.max(currentPage - 2, 2),\n        numberOfPages - 5,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 3,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 2,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n    return (\n        <Component ref={ref} {...rest} className=\"jkl-pagination\">\n            <IconButton\n                className=\"jkl-pagination-button\"\n                title={labels.previous}\n                onClick={() => onPageChange(currentPage - 1, currentPage)}\n                aria-disabled={currentPage === 1}\n                tabIndex={currentPage === 1 ? -1 : 0}\n            >\n                <ChevronLeftIcon />\n            </IconButton>\n            <ol className=\"jkl-pagination__pages\">\n                <PageButton\n                    isActive={currentPage === 1}\n                    number={1}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(1, currentPage)}\n                />\n                {showStartEllipsis ? (\n                    <span\n                        aria-hidden\n                        className=\"jkl-pagination-button--elipsis\"\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PageButton\n                        isActive={currentPage === startEllipsis}\n                        number={startEllipsis}\n                        total={numberOfPages}\n                        onClick={() => onPageChange(startEllipsis, currentPage)}\n                    />\n                )}\n                <PageButton\n                    isActive={currentPage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    total={numberOfPages}\n                    onClick={() =>\n                        onPageChange(centerPageNumberStart, currentPage)\n                    }\n                />\n                <PageButton\n                    isActive={currentPage === centerPageNumber}\n                    number={centerPageNumber}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(centerPageNumber, currentPage)}\n                />\n                <PageButton\n                    isActive={currentPage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    total={numberOfPages}\n                    onClick={() =>\n                        onPageChange(centerPageNumberEnd, currentPage)\n                    }\n                />\n                {showEndEllipsis ? (\n                    <span\n                        aria-hidden\n                        className=\"jkl-pagination-button--elipsis\"\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PageButton\n                        isActive={currentPage === endEllipsis}\n                        number={endEllipsis}\n                        total={numberOfPages}\n                        onClick={() => onPageChange(endEllipsis, currentPage)}\n                    />\n                )}\n                <PageButton\n                    isActive={currentPage === numberOfPages}\n                    number={numberOfPages}\n                    total={numberOfPages}\n                    onClick={() => onPageChange(numberOfPages, currentPage)}\n                />\n            </ol>\n            <IconButton\n                className=\"jkl-pagination-button\"\n                title={labels.next}\n                onClick={() => onPageChange(currentPage + 1, currentPage)}\n                aria-disabled={currentPage === numberOfPages}\n                tabIndex={currentPage === numberOfPages ? -1 : 0}\n            >\n                <ChevronRightIcon />\n            </IconButton>\n        </Component>\n    );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"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"}

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

@@ -1 +1,2 @@
-export { Pagination, type PaginationProps } from './Pagination.js';
+export { Pagination } from './Pagination.js';
+export type { PaginationProps } from './types.js';

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

@@ -0,0 +1,15 @@
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export type PaginationProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    currentPage: number;
+    numberOfPages: number;
+    onPageChange: (toPage: number, fromPage: number) => void;
+    /**
+     * Dersom du ønsker å ha custom labels kan du sende inn disse. "next" og "previous"
+     * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side
+     * @default { previous: "Forrige side", next: "Neste side" }
+     */
+    labels?: {
+        previous: string;
+        next: string;
+    };
+}>;

package/build/es/components/pagination/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/pagination/types.js.map

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