@fremtind/jokul 0.24.0 → 0.25.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingNode,\n    FloatingPortal,\n    FloatingTree,\n    offset,\n    type Placement,\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} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { type ButtonHTMLAttributes, forwardRef, type ReactNode, useEffect, useRef, useState } from \"react\";\nimport * as ReactIs from \"react-is\";\nimport { DataTestAutoId, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nexport interface MenuProps\n    extends DataTestAutoId,\n        WithChildren,\n        Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n    className?: string;\n    /**\n     * Initiell plassering av menyen. Dersom det ikke er plass på skjermen der du\n     * angir at den skal åpnes vil den slyttes automatisk.\n     * @default \"bottom-start\" på toppnivå, \"right-start\" for undermenyer\n     * */\n    initialPlacement?: Placement;\n    /**\n     * Angir om menyen skal åpnes ved hover (uten å måtte klikke)\n     * @default false\n     */\n    openOnHover?: boolean;\n    /**\n     * Angir om menyen skal holdes åpen når man klikker utenfor menyen\n     * @default false\n     */\n    keepOpenOnClickOutside?: boolean;\n    /**\n     * Elementet som fungerer som trigger for menyen. Dersom elementet ikke er en `<button>`\n     * eller en `forwardRef<HTMLButtonElement>` vil det bli lagt inne i en knapp\n     * med forhåndsdefinert stil. For å komme raskt i gang kan du bruke komponenten\n     * `MenuTriggerButton` fra denne pakken.\n     */\n    triggerElement: ReactNode;\n    /**\n     * Kan brukes til å styre utenfra om menyen skal være åpen eller ikke.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * Callback som kalles når menyen åpnes eller lukkes.\n     */\n    onToggle?: (isOpen: boolean) => void;\n}\n\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>((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 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 { allowHover, isOpen: isOpenDefault, setIsOpen } = useMenuWideEvents(tree, nodeId, parentId);\n\n    const isOpen = isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n    useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n    const { x, y, refs, placement, strategy, context } = useFloating({\n        nodeId,\n        open: isOpen,\n        onOpenChange: setIsOpen,\n        placement: 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 } = 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(refs.reference.current as HTMLElement);\n\n    return (\n        <FloatingNode id={nodeId}>\n            {React.isValidElement(triggerElement) &&\n            (triggerElement.type === \"button\" || ReactIs.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            <AnimatePresence>\n                {isOpen && (\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                            <motion.div\n                                className={clsx(\"jkl jkl-menu\", className)}\n                                data-theme={theme}\n                                data-layout-density={density}\n                                role=\"menu\"\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ ease: \"easeIn\", duration: 0.1 }}\n                                data-placement={placement}\n                                aria-live=\"assertive\"\n                                aria-hidden={!isOpen}\n                                ref={refs.setFloating}\n                                {...getFloatingProps({\n                                    id: MenuId,\n                                    style: {\n                                        position: strategy,\n                                        top: y ?? \"\",\n                                        left: x ?? \"\",\n                                    },\n                                })}\n                            >\n                                {React.Children.map(children, (child, index) => {\n                                    if (React.isValidElement(child) && ReactIs.isForwardRef(child)) {\n                                        return React.cloneElement(\n                                            child,\n                                            getItemProps({\n                                                ...child.props,\n                                                tabIndex: activeIndex === index ? 0 : -1,\n                                                role: \"menuitem\",\n                                                ref(node: HTMLButtonElement) {\n                                                    listItemsRef.current[index] = node;\n                                                },\n                                                onClick(event) {\n                                                    child.props.onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n                                                    if (event.defaultPrevented) {\n                                                        return;\n                                                    }\n                                                    tree?.events.emit(\"click\");\n                                                },\n                                                onKeyDown(event) {\n                                                    child.props.onKeyDown?.(event);\n                                                    if (event.defaultPrevented) {\n                                                        return;\n                                                    }\n                                                    tree?.events.emit(\"keydown\");\n                                                    if (\n                                                        event.currentTarget.role === \"menuitemcheckbox\" &&\n                                                        event.key === \"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 (allowHover && isOpen) {\n                                                        setActiveIndex(index);\n                                                    }\n                                                },\n                                            }),\n                                        );\n                                    }\n\n                                    return child;\n                                })}\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                )}\n            </AnimatePresence>\n        </FloatingNode>\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":["MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","x","y","refs","placement","strategy","context","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","jsxs","FloatingNode","id","React","isValidElement","type","ReactIs","isForwardRef","cloneElement","ref","onClick","stopPropagation","jsx","AnimatePresence","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","motion","div","clsx","initial","opacity","animate","exit","transition","ease","duration","setFloating","style","position","top","left","Children","map","child","index","tabIndex","node","_b","_a","call","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { Placement } from '@floating-ui/react';
+import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
+import { DataTestAutoId, WithChildren } from '../../core/types.cjs;'
+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 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/menu/MenuDivider.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs");exports.MenuDivider=s=>{const{className:t,...c}=s;return e.jsx("hr",{className:r.clsx("jkl-menu-divider",t),...c})};
+//# sourceMappingURL=MenuDivider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDivider.cjs","sources":["../../../../src/components/menu/MenuDivider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type HTMLAttributes, type FC } from \"react\";\n\nexport const MenuDivider: FC<HTMLAttributes<HTMLHRElement>> = (props) => {\n    const { className, ...hrProps } = props;\n\n    return <hr className={clsx(\"jkl-menu-divider\", className)} {...hrProps} />;\n};\n"],"names":["props","className","hrProps","jsx","clsx"],"mappings":"iLAG+DA,IAC3D,MAAQC,UAAAA,KAAcC,GAAYF,EAE3B,OAAAG,EAAAA,IAAC,MAAGF,UAAWG,EAAAA,KAAK,mBAAoBH,MAAgBC,GAAS"}

package/build/cjs/components/menu/MenuItem.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs");const e=require("../icon/icons/ArrowNorthEastIcon.cjs");require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs");const i=require("../icon/icons/ChevronRightIcon.cjs");require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const r=o.forwardRef((function(o,r){const{as:s="button",className:u,children:t,icon:j,expandable:a=!1,external:q=!1,...I}=o,l=s,m="button"===l?"button":void 0;return c.jsxs(l,{ref:r,type:m,role:"menuitem",className:n.clsx("jkl-menu-item",u),...I,children:[j&&c.jsx("span",{className:"jkl-menu-item__icon",children:j}),c.jsxs("div",{className:"jkl-menu-item__content",children:[t,q&&c.jsx("div",{className:"jkl-menu-item__arrow",children:c.jsx(e.ArrowNorthEastIcon,{})})]}),a&&c.jsx(i.ChevronRightIcon,{className:"jkl-menu-item__chevron",bold:!0})]})}));exports.MenuItem=r;
+//# sourceMappingURL=MenuItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.cjs","sources":["../../../../src/components/menu/MenuItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, ReactNode } from \"react\";\nimport { PolymorphicPropsWithRef, PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowNorthEastIcon, ChevronRightIcon } from \"../icon/index.js\";\n\nexport type MenuItemProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        /**\n         * Et ikon som vises før innholdet i menypunktet\n         */\n        icon?: ReactNode;\n    } & (\n        | {\n              expandable?: never;\n              /**\n               * Indikerer at menypunktet åpner noe i et nytt vindu eller tab\n               * @default false\n               */\n              external?: boolean;\n          }\n        | {\n              external?: never;\n              /**\n               * Indikerer at menypunktet er utvidbart ved å vise en chevron\n               * @default false\n               */\n              expandable?: boolean;\n          }\n    )\n>;\n\ntype MenuItemComponent = <ElementType extends React.ElementType = \"button\">(\n    props: MenuItemProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const MenuItem = forwardRef(function MenuItem<ElementType extends React.ElementType = \"button\">(\n    props: MenuItemProps<ElementType>,\n    ref: PolymorphicRef<ElementType>,\n) {\n    const { as = \"button\", className, children, icon, expandable = false, external = false, ...rest } = props;\n    const Component = as;\n    const type = Component === \"button\" ? \"button\" : undefined;\n\n    return (\n        <Component ref={ref} type={type} role=\"menuitem\" className={clsx(\"jkl-menu-item\", className)} {...rest}>\n            {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n            <div className=\"jkl-menu-item__content\">\n                {children}\n                {external && (\n                    <div className={\"jkl-menu-item__arrow\"}>\n                        <ArrowNorthEastIcon />\n                    </div>\n                )}\n            </div>\n            {expandable && <ChevronRightIcon className=\"jkl-menu-item__chevron\" bold />}\n        </Component>\n    );\n}) as MenuItemComponent;\n"],"names":["MenuItem","forwardRef","props","ref","as","className","children","icon","expandable","external","rest","Component","type","jsxs","role","clsx","jsx","ArrowNorthEastIcon","ChevronRightIcon","bold"],"mappings":"+oDAoCO,MAAMA,EAAWC,EAAAA,YAAW,SAC/BC,EACAC,GAEA,MAAQC,GAAAA,EAAK,SAAUC,UAAAA,EAAWC,SAAAA,EAAUC,KAAAA,EAAMC,WAAAA,GAAa,EAAOC,SAAAA,GAAW,KAAUC,GAASR,EAC9FS,EAAYP,EACZQ,EAAqB,WAAdD,EAAyB,cAAW,EAEjD,OACKE,EAAAA,KAAAF,EAAA,CAAUR,IAAAA,EAAUS,KAAAA,EAAYE,KAAK,WAAWT,UAAWU,EAAAA,KAAK,gBAAiBV,MAAgBK,EAC7FJ,SAAA,CAAAC,GAASS,EAAAA,IAAA,OAAA,CAAKX,UAAU,sBAAuBC,SAAKC,IACrDM,EAAAA,KAAC,MAAI,CAAAR,UAAU,yBACVC,SAAA,CAAAA,EACAG,GACIO,EAAAA,IAAA,MAAA,CAAIX,UAAW,uBACZC,SAAAU,MAACC,EAAAA,oBAAmB,QAI/BT,GAAeQ,EAAAA,IAAAE,mBAAA,CAAiBb,UAAU,yBAAyBc,MAAI,MAGpF"}

package/build/cjs/components/menu/MenuItem.d.cts

@@ -0,0 +1,25 @@
+import { default as React, ReactNode } from 'react';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs;'
+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;
+})>;
+type MenuItemComponent = <ElementType extends React.ElementType = "button">(props: MenuItemProps<ElementType>) => React.ReactElement | null;
+export declare const MenuItem: MenuItemComponent;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),o=require("../../hooks/useSwipeGesture/useSwipeGesture.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs");const i=require("../icon/icons/CheckIcon.cjs");require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const r=c.forwardRef(((c,r)=>{const{"aria-checked":s,className:t,children:u,icon:l,onChange:a,onClick:j,onPointerCancel:q,onPointerDown:I,onPointerMove:d,onPointerUp:h,onKeyDown:m,...w}=c,{gestureHandlers:k}=o.useSwipeGesture({onClick:e=>{e.preventDefault(),null==a||a(e,!s),null==j||j(e)},onChange:(e,n)=>{n!==s&&(null==a||a(e,n))},onPointerCancel:q,onPointerDown:I,onPointerMove:d,onPointerUp:h});return e.jsxs("div",{ref:r,tabIndex:-1,...w,role:"menuitemcheckbox","aria-checked":s,className:n.clsx("jkl-menu-item","jkl-menu-item--checkbox",t),...k,onKeyDown:e=>{"Enter"===e.key?null==a||a(e,!s):" "===e.key&&(e.preventDefault(),null==a||a(e,!s)),null==m||m(e)},children:[l&&e.jsx("span",{className:"jkl-menu-item__icon",children:l}),e.jsx("div",{className:"jkl-menu-item__content",children:u}),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(i.CheckIcon,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));r.displayName="MenuItemCheckbox",exports.MenuItemCheckbox=r;
+//# sourceMappingURL=MenuItemCheckbox.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemCheckbox.cjs","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 { SwipeChangeHandler, useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/index.js\";\n\nexport interface MenuItemCheckboxProps 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        ((event: React.KeyboardEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>, pressed: boolean) => void);\n}\n\nexport const MenuItemCheckbox = forwardRef<HTMLDivElement, MenuItemCheckboxProps>((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> = (event, toggleTo) => {\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(\"jkl-menu-item\", \"jkl-menu-item--checkbox\", className)}\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 variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\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":"osDAqBO,MAAMA,EAAmBC,EAAAA,YAAkD,CAACC,EAAOC,KAChF,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GAwBIc,gBAAAA,GAAoBC,kBAAgB,CACxCR,QAvBoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAK,EAqBfV,SAlBqD,CAACU,EAAOE,KACzDA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,KAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAAA,KAAC,MAAA,CACGlB,IAAAA,EACAmB,UACC,KAAGP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EAAAA,KAAK,gBAAiB,0BAA2BnB,MACxDW,EACJF,UA5BqDI,IACvC,UAAdA,EAAMO,IACK,MAAAjB,GAAAA,EAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,IAEvB,MAAAU,GAAAA,EAAYI,EAAK,EAuBZZ,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,yCACdsB,EAAAA,UAAU,CAAAC,QAAQ,QAAQC,MAAI,EAACxB,UAAU,iDAGtD,IAKZL,EAAiB8B,YAAc"}

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

@@ -0,0 +1,11 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.cjs;'
+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);
+}
+export declare const MenuItemCheckbox: React.ForwardRefExoticComponent<MenuItemCheckboxProps & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/components/menu/index.cjs

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

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

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

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

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

package/build/cjs/components/menu/useMenuWideEvents.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useMenuWideEvents=(n,t,o)=>{const[r,i]=e.useState(!1),[s,u]=e.useState(!1);return e.useEffect((()=>{if(n)return n.events.on("click",e),n.events.on("menuopen",r),()=>{n.events.off("click",e),n.events.off("menuopen",r)};function e(){u(!1)}function r(e){e.nodeId!==t&&e.parentId===o&&u(!1)}}),[n,t,o,u]),e.useEffect((()=>{s&&n&&n.events.emit("menuopen",{parentId:o,nodeId:t})}),[n,s,t,o]),e.useEffect((()=>{function e({pointerType:e}){"touch"!==e&&i(!0)}function n(){i(!1)}return window.addEventListener("pointermove",e,{once:!0,capture:!0}),window.addEventListener("keydown",n,!0),()=>{window.removeEventListener("pointermove",e,{capture:!0}),window.removeEventListener("keydown",n,!0)}}),[r]),{allowHover:r,isOpen:s,setIsOpen:u}};
+//# sourceMappingURL=useMenuWideEvents.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuWideEvents.cjs","sources":["../../../../src/components/menu/useMenuWideEvents.ts"],"sourcesContent":["import { FloatingTreeType } from \"@floating-ui/react\";\nimport { useEffect, useState } from \"react\";\n\nexport const useMenuWideEvents = (\n    tree: FloatingTreeType | null,\n    nodeId: string,\n    parentId: string | null,\n): {\n    allowHover: boolean;\n    isOpen: boolean;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n} => {\n    const [allowHover, setAllowHover] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n\n    // Event emitter allows you to communicate across tree components.\n    // This effect closes all menus when an item gets clicked anywhere\n    // in the tree.\n    useEffect(() => {\n        if (!tree) return;\n\n        function handleTreeClick() {\n            setIsOpen(false);\n        }\n\n        function onSubMenuOpen(event: { nodeId: string; parentId: string }) {\n            if (event.nodeId !== nodeId && event.parentId === parentId) {\n                setIsOpen(false);\n            }\n        }\n\n        tree.events.on(\"click\", handleTreeClick);\n        tree.events.on(\"menuopen\", onSubMenuOpen);\n\n        return () => {\n            tree.events.off(\"click\", handleTreeClick);\n            tree.events.off(\"menuopen\", onSubMenuOpen);\n        };\n    }, [tree, nodeId, parentId, setIsOpen]);\n\n    useEffect(() => {\n        if (isOpen && tree) {\n            tree.events.emit(\"menuopen\", { parentId, nodeId });\n        }\n    }, [tree, isOpen, nodeId, parentId]);\n\n    // Determine if \"hover\" logic can run based on the modality of input. This\n    // prevents unwanted focus synchronization as menus open and close with\n    // keyboard navigation and the cursor is resting on the menu.\n    useEffect(() => {\n        function onPointerMove({ pointerType }: PointerEvent) {\n            if (pointerType !== \"touch\") {\n                setAllowHover(true);\n            }\n        }\n\n        function onKeyDown() {\n            setAllowHover(false);\n        }\n\n        window.addEventListener(\"pointermove\", onPointerMove, {\n            once: true,\n            capture: true,\n        });\n        window.addEventListener(\"keydown\", onKeyDown, true);\n        return () => {\n            window.removeEventListener(\"pointermove\", onPointerMove, {\n                capture: true,\n            });\n            window.removeEventListener(\"keydown\", onKeyDown, true);\n        };\n    }, [allowHover]);\n\n    return { allowHover, isOpen, setIsOpen };\n};\n"],"names":["tree","nodeId","parentId","allowHover","setAllowHover","useState","isOpen","setIsOpen","useEffect","events","on","handleTreeClick","onSubMenuOpen","off","event","emit","onPointerMove","pointerType","onKeyDown","addEventListener","once","capture","window","removeEventListener"],"mappings":"mIAGiC,CAC7BA,EACAC,EACAC,KAMA,MAAOC,EAAYC,GAAiBC,YAAS,IACtCC,EAAQC,GAAaF,YAAS,GAKrCG,OAAAA,EAAAA,WAAU,KACN,GAAKR,EAYA,OAAAA,EAAAS,OAAOC,GAAG,QAASC,GACnBX,EAAAS,OAAOC,GAAG,WAAYE,GAEpB,KACEZ,EAAAS,OAAOI,IAAI,QAASF,GACpBX,EAAAS,OAAOI,IAAI,WAAYD,EAAa,EAf7C,SAASD,IACLJ,GAAU,EACd,CAEA,SAASK,EAAcE,GACfA,EAAMb,SAAWA,GAAUa,EAAMZ,WAAaA,GAC9CK,GAAU,EAElB,CAO6C,GAE9C,CAACP,EAAMC,EAAQC,EAAUK,IAE5BC,EAAAA,WAAU,KACFF,GAAUN,GACVA,EAAKS,OAAOM,KAAK,WAAY,CAAEb,SAAAA,EAAUD,OAAAA,GAAQ,GAEtD,CAACD,EAAMM,EAAQL,EAAQC,IAK1BM,EAAAA,WAAU,KACG,SAAAQ,GAAgBC,YAAAA,IACD,UAAhBA,GACAb,GAAc,EAEtB,CAEA,SAASc,IACLd,GAAc,EAClB,CAEO,cAAAe,iBAAiB,cAAeH,EAAe,CAClDI,MAAM,EACNC,SAAS,IAENC,OAAAH,iBAAiB,UAAWD,GAAW,GACvC,KACII,OAAAC,oBAAoB,cAAeP,EAAe,CACrDK,SAAS,IAENC,OAAAC,oBAAoB,UAAWL,GAAW,EAAI,CAAA,GAE1D,CAACf,IAEG,CAAEA,WAAAA,EAAYG,OAAAA,EAAQC,UAAAA"}

package/build/cjs/components/message/DismissButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs");const n=require("../icon/icons/CloseIcon.cjs");require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const i=o.forwardRef((({label:o="Lukk",...i},e)=>c.jsxs("button",{ref:e,type:"button",title:o,...i,children:[c.jsx(n.CloseIcon,{variant:"small",bold:!0}),c.jsx("span",{className:"jkl-sr-only",children:o})]})));i.displayName="DismissButton",exports.DismissButton=i;
+//# sourceMappingURL=DismissButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DismissButton.cjs","sources":["../../../../src/components/message/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../icon/index.js\";\n\nexport interface DismissButtonProps extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(({ label = \"Lukk\", ...rest }, ref) => {\n    return (\n        <button ref={ref} type=\"button\" title={label} {...rest}>\n            <CloseIcon variant=\"small\" bold />\n            <span className=\"jkl-sr-only\">{label}</span>\n        </button>\n    );\n});\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"+lDAOa,MAAAA,EAAgBC,cAAkD,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAErGC,OAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAKjDF,EAAcc,YAAc"}

package/build/cjs/components/message/FormErrorMessage.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),t=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),i=require("./Message.cjs"),a={title:"Feil og mangler i skjemaet"},l=s.forwardRef(((l,o)=>{const{className:c,errors:n,isSubmitted:m,isValid:u,messageProps:d,...g}=l,j=m&&!u,[f]=t.useAnimatedHeight(j,{display:"grid"}),h=s.useRef(n);s.useEffect((()=>{h.current=n}),[n]);const p=n.length>h.current.length;return e.jsx("div",{ref:o,className:r.clsx("jkl-form-error-message",c),...g,children:e.jsx(i.ErrorMessage,{...a,...d,ref:f,role:p?"alert":"presentation",children:e.jsx("ul",{className:"jkl-list",children:n.filter((e=>typeof e<"u")).map((r=>e.jsx("li",{className:"jkl-list__item",children:r},r)))})})})}));l.displayName="FormErrorMessage",exports.FormErrorMessage=l;
+//# sourceMappingURL=FormErrorMessage.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormErrorMessage.cjs","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<HTMLDivElement, FormErrorMessageProps>(\n    (props, forwardedRef): JSX.Element | null => {\n        const { className, errors, isSubmitted, isValid, messageProps, ...rest } = props;\n\n        const showSummary = isSubmitted && !isValid;\n\n        const [messageRef] = useAnimatedHeight<HTMLDivElement>(showSummary, { display: \"grid\" });\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 ref={forwardedRef} className={clsx(\"jkl-form-error-message\", className)} {...rest}>\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);\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":"4QAiBMA,EAAsB,CACxBC,MAAO,8BAGEC,EAAmBC,EAAAA,YAC5B,CAACC,EAAOC,KACE,MAAEC,UAAAA,EAAWC,OAAAA,EAAQC,YAAAA,EAAaC,QAAAA,EAASC,aAAAA,KAAiBC,GAASP,EAErEQ,EAAcJ,IAAgBC,GAE7BI,GAAcC,EAAAA,kBAAkCF,EAAa,CAAEG,QAAS,SAEzEC,EAAiBC,SAAkCV,GACzDW,EAAAA,WAAU,KACNF,EAAeG,QAAUZ,IAC1B,CAACA,IACJ,MAAMa,EAAeb,EAAOc,OAASL,EAAeG,QAAQE,OAGxD,OAAAC,EAAAA,IAAC,MAAI,CAAAC,IAAKlB,EAAcC,UAAWkB,OAAK,yBAA0BlB,MAAgBK,EAC9Ec,SAAAH,EAAAA,IAACI,EAAAA,aAAA,IACO1B,KACAU,EACJa,IAAKV,EACLc,KAAMP,EAAe,QAAU,eAE/BK,SAAAH,EAAAA,IAAC,MAAGhB,UAAU,WACTmB,WACIG,QAAQC,UAAiBA,EAAU,MACnCC,KAAKD,GACDP,EAAAA,IAAA,KAAA,CAAGhB,UAAU,iBACTmB,SAAAI,GAD+BA,UAMxD,IAKZ3B,EAAiB6B,YAAc"}

package/build/cjs/components/message/FormErrorMessage.d.cts

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),n=require("../../hooks/useId/useId.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs");const i=require("../icon/icons/ErrorIcon.cjs");require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs");const o=require("../icon/icons/InfoIcon.cjs");require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs");const r=require("../icon/icons/SuccessIcon.cjs"),a=require("../icon/icons/WarningIcon.cjs");require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const u=require("./DismissButton.cjs"),t=e=>{switch(e){case"error":return s.jsx(i.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(o.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(r.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(a.WarningIcon,{className:"jkl-message__icon"});default:return null}};function l(i){const o=c.forwardRef(((o,r)=>{const{id:a,title:l,fullWidth:j,density:m,className:d="",dismissed:I,dismissAction:q,children:g,role:h,...k}=o,f=n.useId(a||"jkl-message",{generateSuffix:!a}),p=c.Children.map(g,(s=>"string"==typeof s)),x=null!=p&&p[0]?s.jsx("p",{children:g}):g;return s.jsxs("div",{...k,id:a,ref:r,className:e.clsx("jkl-message","jkl-message--"+i,d,{"jkl-message--full":j,"jkl-message--dismissed":I}),role:h,"data-density":m,children:[t(i),s.jsxs("div",{className:"jkl-message__content","data-theme":"light",children:[l&&s.jsx("p",{className:"jkl-message__title",children:l}),s.jsx("div",{className:"jkl-message__message",children:x})]}),(null==q?void 0:q.handleDismiss)&&s.jsx(u.DismissButton,{"aria-controls":f,className:"jkl-message__dismiss-button",label:q.buttonTitle||"Lukk",onClick:q.handleDismiss})]})}));return o.displayName="Message",o}const j=l("info");j.displayName="InfoMessage";const m=l("error");m.displayName="ErrorMessage";const d=l("warning");d.displayName="WarningMessage";const I=l("success");I.displayName="SuccessMessage",exports.ErrorMessage=m,exports.InfoMessage=j,exports.SuccessMessage=I,exports.WarningMessage=d;
+//# sourceMappingURL=Message.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.cjs","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, InfoIcon, SuccessIcon, WarningIcon } from \"../icon/index.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(children, (child) => typeof child === \"string\");\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(\"jkl-message\", \"jkl-message--\" + messageType, className, {\n                    \"jkl-message--full\": fullWidth,\n                    \"jkl-message--dismissed\": dismissed,\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                        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":"yuDAuBMA,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,KACf,EAGJ,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,QAAMV,GAAM,cAAe,CAAEW,gBAAiBX,IAEtDY,EAAiBC,EAAMC,SAASC,IAAIT,GAAWU,GAA2B,iBAAVA,IAChEC,EAAc,MAAAL,GAAAA,EAAiB,GAAMvB,EAAAA,IAAA,IAAA,CAAGiB,SAAAA,IAAgBA,EAG1D,OAAAY,EAAAA,KAAC,MAAA,IACOV,EACJR,GAAAA,EACAD,IAAAA,EACAR,UAAW4B,EAAAA,KAAK,cAAe,gBAAkB/B,EAAaG,EAAW,CACrE,oBAAqBW,EACrB,yBAA0BE,IAE9BG,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,OAAAA,EAAAA,EAAee,gBACZ/B,EAAAA,IAACgC,EAAAA,cAAA,CACG,gBAAeZ,EACflB,UAAU,8BACV+B,MAAOjB,EAAckB,aAAe,OACpCC,QAASnB,EAAce,kBAC3B,IAMhB,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"}

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

@@ -0,0 +1,19 @@
+import { default as React, AriaRole } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs;'
+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 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>>;
+export declare const SuccessMessage: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/components/message/index.cjs

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

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

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

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

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

package/build/cjs/components/modal/Modal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),e=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs");const s=require("../icon/icons/CloseIcon.cjs");require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const r=require("../icon-button/IconButton.cjs"),n=e.forwardRef((({className:e,...s},r)=>o.jsx("div",{className:c.clsx("jkl-modal-container",e),...s,ref:r})));n.displayName="ModalContainer";const i=e.forwardRef((({className:e,transparent:s,...r},n)=>o.jsx("div",{className:c.clsx("jkl-modal-overlay",e,{"jkl-modal-overlay--transparent":s}),...r,ref:n})));i.displayName="ModalOverlay";const a=e.forwardRef((({className:e,component:s,padding:r,style:n,...i},a)=>{const l=s||"div";return o.jsx(l,{className:c.clsx("jkl jkl-modal",e),style:{"--jkl-modal-padding":r?`var(--jkl-spacing-${r})`:void 0,...n},...i,ref:a})}));a.displayName="Modal";const l=e.forwardRef((({className:e,...s},r)=>o.jsx("div",{className:c.clsx("jkl-modal-header",e),...s,ref:r})));l.displayName="ModalHeader";const t=e.forwardRef((({className:e,...s},r)=>o.jsx("p",{className:c.clsx("jkl-modal-title",e),...s,ref:r})));t.displayName="ModalTitle";const d=e.forwardRef((({className:e,...n},i)=>o.jsx(r.IconButton,{className:c.clsx("jkl-modal-close",e),"data-testautoid":"jkl-modal-close",...n,ref:i,children:o.jsx(s.CloseIcon,{variant:"medium"})})));d.displayName="ModalCloseButton";const j=e.forwardRef((({className:e,...s},r)=>o.jsx("div",{className:c.clsx("jkl-modal-body",e),...s,ref:r})));j.displayName="ModalBody";const u=e.forwardRef((({className:e,...s},r)=>o.jsx("div",{className:c.clsx("jkl-modal-actions",e),...s,ref:r})));u.displayName="ModalActions",exports.Modal=a,exports.ModalActions=u,exports.ModalBody=j,exports.ModalCloseButton=d,exports.ModalContainer=n,exports.ModalHeader=l,exports.ModalOverlay=i,exports.ModalTitle=t;
+//# sourceMappingURL=Modal.cjs.map

package/build/cjs/components/modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","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/index.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\ntype BaseModalProps = Omit<ModalProps, \"padding\" | \"component\">;\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<HTMLDivElement, ModalConfig[\"container\"] & BaseModalProps>(\n    ({ className, ...rest }, ref) => {\n        return <div className={clsx(\"jkl-modal-container\", className)} {...rest} ref={ref} />;\n    },\n);\nModalContainer.displayName = \"ModalContainer\";\n\ntype 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 ? `var(--jkl-spacing-${padding})` : 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>(({ className, ...rest }, ref) => (\n    <div className={clsx(\"jkl-modal-header\", className)} {...rest} ref={ref} />\n));\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<HTMLParagraphElement, ModalConfig[\"title\"] & BaseModalProps>(\n    ({ className, ...rest }, ref) => <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\"> & BaseModalProps & IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton className={clsx(\"jkl-modal-close\", className)} data-testautoid=\"jkl-modal-close\" {...rest} ref={ref}>\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n    <div className={clsx(\"jkl-modal-body\", className)} {...rest} ref={ref} />\n));\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n    <div className={clsx(\"jkl-modal-actions\", className)} {...rest} ref={ref} />\n));\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"wrDAuBaA,EAAiBC,EAAAA,YAC1B,EAAGC,UAAAA,KAAcC,GAAQC,IACdC,MAAC,OAAIH,UAAWI,EAAAA,KAAK,sBAAuBJ,MAAgBC,EAAMC,IAAAA,MAGjFJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,EAAAA,YACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,YACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MAEnB,OAAAN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EAAU,qBAAqBA,UAAa,KAChEC,MAGPV,EACJC,IAAAA,GAAA,IAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAA2CA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UAC1F,MAAI,CAAAF,UAAWI,OAAK,mBAAoBJ,MAAgBC,EAAMC,IAAAA,MAEnEW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAAAA,YACtB,EAAGC,UAAAA,KAAcC,GAAQC,IAAQC,EAAAA,IAAC,IAAE,CAAAH,UAAWI,EAAAA,KAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEjGY,EAAWT,YAAc,aAKZ,MAAAU,EAAmBhB,EAG9BA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,IACtBC,EAAAA,IAAAa,EAAAA,WAAA,CAAWhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GAAY,kBAAgB,qBAAsBC,EAAMC,IAAAA,EACnGe,SAAAd,MAACe,EAAAA,UAAU,CAAAC,QAAQ,eAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAA2CA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UACxF,MAAI,CAAAF,UAAWI,OAAK,iBAAkBJ,MAAgBC,EAAMC,IAAAA,MAEjEkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAA2CA,YAAA,EAAGC,UAAAA,KAAcC,GAAQC,UAC3F,MAAI,CAAAF,UAAWI,OAAK,oBAAqBJ,MAAgBC,EAAMC,IAAAA,MAEpEmB,EAAahB,YAAc"}

package/build/cjs/components/modal/Modal.d.cts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { WithOptionalChildren } from '../../core/types.cjs;'
+import { IconButtonProps } from '../icon-button/IconButton.cjs;'
+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;
+}
+type BaseModalProps = Omit<ModalProps, "padding" | "component">;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
+    id: string;
+    ref: (node: React.ReactNode | HTMLElement) => void;
+    role: string;
+    'aria-modal': boolean;
+    'aria-hidden': boolean;
+    'aria-labelledby': string;
+} & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalOverlay: React.ForwardRefExoticComponent<{
+    onClick?: (() => void) | undefined;
+} & BaseModalProps & {
+    /**
+     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
+     */
+    transparent?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<{
+    role: "document";
+} & ModalProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalHeader: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalTitle: React.ForwardRefExoticComponent<{
+    role: "heading";
+    'aria-level': number;
+    id: string;
+} & BaseModalProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalCloseButton: React.ForwardRefExoticComponent<Omit<{
+    type: "button";
+    onClick: () => void;
+} & {
+    "aria-label": string;
+}, "onClick"> & BaseModalProps & IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalBody: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalActions: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/build/cjs/components/modal/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Modal.cjs"),e=require("./useModal.cjs");exports.Modal=o.Modal,exports.ModalActions=o.ModalActions,exports.ModalBody=o.ModalBody,exports.ModalCloseButton=o.ModalCloseButton,exports.ModalContainer=o.ModalContainer,exports.ModalHeader=o.ModalHeader,exports.ModalOverlay=o.ModalOverlay,exports.ModalTitle=o.ModalTitle,exports.useModal=e.useModal;
+//# sourceMappingURL=index.cjs.map

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

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

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

@@ -0,0 +1,4 @@
+export type { ModalProps } from './Modal.cjs;'
+export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.cjs;'
+export type { UseModalOptions, ModalInstance, ModalConfig } from './useModal.cjs;'
+export { useModal } from './useModal.cjs;'

package/build/cjs/components/modal/useModal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react-a11y-dialog"),o=require("../../hooks/useId/useId.cjs");exports.useModal=function(l){const{id:t,role:a="dialog",closeButtonLabel:r="Lukk",...u}=l,s=o.useId(t||"jkl-modal",{generateSuffix:!t}),[i,d]=e.useA11yDialog({id:s,role:a,...u}),{dialog:n,...c}=d;return[i,{modal:d.dialog,...c,closeButton:{...d.closeButton,"aria-label":r}}]};
+//# sourceMappingURL=useModal.cjs.map

package/build/cjs/components/modal/useModal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.cjs","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import { A11yDialogConfig, A11yDialogProps, useA11yDialog } from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks/useId/useId.js\";\n\nexport interface UseModalOptions 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 { id: idProp, role = \"dialog\", closeButtonLabel = \"Lukk\", ...rest } = 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":["props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"+KAyEO,SAAkBA,GACf,MAAEC,GAAIC,EAAQC,KAAAA,EAAO,SAAUC,iBAAAA,EAAmB,UAAWC,GAASL,EAEtEC,EAAKK,QAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,gBAAc,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/cjs/components/pagination/PageButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");exports.PageButton=({isActive:i,number:n,onClick:r,total:a})=>t.jsx("li",{"aria-setsize":a,"aria-posinset":n,children:t.jsx("button",{className:e.clsx("jkl-pagination-button",{"jkl-pagination-button--current":i}),"aria-current":i,type:"button",onClick:r,tabIndex:i?-1:0,"aria-disabled":i,title:`side ${n}`,children:t.jsx("span",{"aria-hidden":!0,children:n})})});
+//# sourceMappingURL=PageButton.cjs.map

package/build/cjs/components/pagination/PageButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageButton.cjs","sources":["../../../../src/components/pagination/PageButton.tsx"],"sourcesContent":["import React, { clsx } from \"clsx\";\nimport { FC, MouseEventHandler } from \"react\";\n\nexport const PageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n    total: number;\n}> = ({ isActive, number, onClick, total }) => (\n    <li aria-setsize={total} aria-posinset={number}>\n        <button\n            className={clsx(\"jkl-pagination-button\", {\n                \"jkl-pagination-button--current\": isActive,\n            })}\n            aria-current={isActive}\n            type=\"button\"\n            onClick={onClick}\n            tabIndex={isActive ? -1 : 0}\n            aria-disabled={isActive}\n            title={`side ${number}`}\n        >\n            <span aria-hidden={true}>{number}</span>\n        </button>\n    </li>\n);\n"],"names":["isActive","number","onClick","total","jsx","children","className","clsx","type","tabIndex","title"],"mappings":"gLAQK,EAAGA,SAAAA,EAAUC,OAAAA,EAAQC,QAAAA,EAASC,MAAAA,KAC9BC,EAAAA,IAAA,KAAA,CAAG,eAAcD,EAAO,gBAAeF,EACpCI,SAAAD,EAAAA,IAAC,SAAA,CACGE,UAAWC,OAAK,wBAAyB,CACrC,iCAAkCP,IAEtC,eAAcA,EACdQ,KAAK,SACLN,QAAAA,EACAO,SAAUT,GAAW,EAAK,EAC1B,gBAAeA,EACfU,MAAO,QAAQT,IAEfI,SAACD,EAAAA,IAAA,OAAA,CAAK,eAAa,EAAOC,SAAOJ"}

package/build/cjs/components/pagination/Pagination.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs");const o=require("../icon/icons/ChevronLeftIcon.cjs"),i=require("../icon/icons/ChevronRightIcon.cjs");require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const c=require("../icon-button/IconButton.cjs"),r=require("./PageButton.cjs"),s=e.forwardRef((function({onPageChange:s,currentPage:t,numberOfPages:a,labels:u={previous:"Forrige side",next:"Neste side"},as:l,...j},I){e.useEffect((()=>{t<1&&console.error("[Pagination]: currentPage prop should be set to a value larger than 0"),t>a&&console.error("[Pagination]: currentPage prop should not be set to a value larger than numberOfPages")}),[t,a]);const g=l||"nav";if(a<=7)return n.jsxs(g,{ref:I,...j,className:"jkl-pagination",children:[n.jsx(c.IconButton,{className:"jkl-pagination-button",title:u.previous,onClick:()=>s(t-1,t),"aria-disabled":1===t,tabIndex:1===t?-1:0,children:n.jsx(o.ChevronLeftIcon,{})}),n.jsx("ol",{className:"jkl-pagination__pages",children:Array.from({length:a}).map(((e,o)=>{const i=o+1;return n.jsx(r.PageButton,{isActive:t===i,number:i,total:a,onClick:()=>s(i,t)},o)}))}),n.jsx(c.IconButton,{className:"jkl-pagination-button",title:u.next,onClick:()=>s(t+1,t),"aria-disabled":t===a,tabIndex:t===a?-1:0,children:n.jsx(i.ChevronRightIcon,{})})]});const h=t>4,d=t<a-3,m=Math.min(Math.max(t-2,2),a-5),q=Math.min(m+1,a-4),b=Math.min(q+1,a-3),x=Math.min(q+2,a-2),p=Math.min(q+3,a-1);return n.jsxs(g,{ref:I,...j,className:"jkl-pagination",children:[n.jsx(c.IconButton,{className:"jkl-pagination-button",title:u.previous,onClick:()=>s(t-1,t),"aria-disabled":1===t,tabIndex:1===t?-1:0,children:n.jsx(o.ChevronLeftIcon,{})}),n.jsxs("ol",{className:"jkl-pagination__pages",children:[n.jsx(r.PageButton,{isActive:1===t,number:1,total:a,onClick:()=>s(1,t)}),h?n.jsx("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):n.jsx(r.PageButton,{isActive:t===m,number:m,total:a,onClick:()=>s(m,t)}),n.jsx(r.PageButton,{isActive:t===q,number:q,total:a,onClick:()=>s(q,t)}),n.jsx(r.PageButton,{isActive:t===b,number:b,total:a,onClick:()=>s(b,t)}),n.jsx(r.PageButton,{isActive:t===x,number:x,total:a,onClick:()=>s(x,t)}),d?n.jsx("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):n.jsx(r.PageButton,{isActive:t===p,number:p,total:a,onClick:()=>s(p,t)}),n.jsx(r.PageButton,{isActive:t===a,number:a,total:a,onClick:()=>s(a,t)})]}),n.jsx(c.IconButton,{className:"jkl-pagination-button",title:u.next,onClick:()=>s(t+1,t),"aria-disabled":t===a,tabIndex:t===a?-1:0,children:n.jsx(i.ChevronRightIcon,{})})]})}));exports.Pagination=s;
+//# sourceMappingURL=Pagination.cjs.map

package/build/cjs/components/pagination/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { PolymorphicPropsWithRef, PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> = 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\nexport type PaginationComponent = <ElementType extends React.ElementType = \"nav\">(\n    props: PaginationProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Pagination = React.forwardRef(function Pagination<ElementType extends React.ElementType = \"nav\">(\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(\"[Pagination]: currentPage prop should be set to a value larger than 0\");\n        }\n        if (currentPage > numberOfPages) {\n            console.error(\"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\");\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(Math.max(currentPage - 2, 2), numberOfPages - 5);\n    const centerPageNumberStart = Math.min(startEllipsis + 1, numberOfPages - 4);\n    const centerPageNumber = Math.min(centerPageNumberStart + 1, numberOfPages - 3);\n    const centerPageNumberEnd = Math.min(centerPageNumberStart + 2, numberOfPages - 2);\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 aria-hidden className=\"jkl-pagination-button--elipsis\">\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={() => onPageChange(centerPageNumberStart, currentPage)}\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={() => onPageChange(centerPageNumberEnd, currentPage)}\n                />\n                {showEndEllipsis ? (\n                    <span aria-hidden className=\"jkl-pagination-button--elipsis\">\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/cjs/components/pagination/Pagination.d.cts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs;'
+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;
+    };
+}>;
+export type PaginationComponent = <ElementType extends React.ElementType = "nav">(props: PaginationProps<ElementType>) => React.ReactElement | null;
+export declare const Pagination: PaginationComponent;

package/build/cjs/components/pagination/index.cjs

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

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

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

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

@@ -0,0 +1 @@
+export * from './Pagination.cjs;'

package/build/cjs/components/popover/Popover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndDensity.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:p,dismissOptions:f})=>{const[g,m]=s.useState(e),h=e??g,x=n??m,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(l),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),v=b.context,j=t.useClick(v,{enabled:!1,...d}),y=t.useHover(v,{enabled:!1,...c}),O=t.useFocus(v,{enabled:!1,...u}),P=t.useDismiss(v,f),F=t.useRole(v,p),k=t.useInteractions([j,P,O,y,F]);return s.useLayoutEffect((()=>{a&&b.refs.setPositionReference(null==a?void 0:a.current)}),[a,b.refs]),s.useMemo((()=>({open:h,onOpenChange:x,modal:i,...k,...b})),[h,x,i,k,b])})({...o});return e.jsx(i.Provider,{value:r,children:n})},c=s.forwardRef((function({children:n,asChild:o=!1,...r},i){const{refs:a,getReferenceProps:c,open:u,onOpenChange:d}=l(),p=n.ref,f=t.useMergeRefs([a.setReference,i,p]);return o&&s.isValidElement(n)?s.cloneElement(n,c({ref:f,...r,...n.props})):e.jsx("button",{ref:f,onClick:()=>null==d?void 0:d(!u),"aria-expanded":u,...c(r),children:n})})),u=s.forwardRef((function({style:o,className:s,padding:i=0,initialFocus:a=0,returnFocus:c=!0,...u},d){const{context:p,modal:f,refs:g,open:m,floatingStyles:h,getFloatingProps:x}=l(),b=t.useMergeRefs([g.setFloating,d]),v=g.reference.current,{theme:j,density:y}=(O=v)&&"contextElement"in O?r.getThemeAndDensity(v.contextElement):r.getThemeAndDensity(v);var O;return m?e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:p,modal:f,initialFocus:a,returnFocus:c,children:e.jsx("div",{"data-theme":j,"data-layout-density":y,className:n.clsx("jkl jkl-popover",s),ref:b,style:{...o,...h,"--popover-padding":`var(--jkl-spacing-${i})`},...x(u),children:u.children})})}):null}));a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
+//# sourceMappingURL=Popover.cjs.map