@fremtind/jokul 0.27.4 → 0.27.5

package/build/es/components/table/ExpandableTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTableRow.js","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n    ExpandableTableRowController,\n    ExpandableTableRowControllerProps,\n} from \"./ExpandableTableRowController.js\";\nimport { TableRow, TableRowProps } from \"./TableRow.js\";\n\nexport interface ExpandableTableRowProps extends TableRowProps {\n    expandedChildren: React.ReactNode;\n    /**\n     * Setter bredden på raden som blir åpnet\n     * @default 100\n     */\n    colSpan?: number;\n    /**\n     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.\n     */\n    isOpen?: boolean;\n    onToggle?: (isOpen: boolean) => void;\n}\n\nconst ExpandableTableRow = forwardRef<\n    HTMLTableRowElement,\n    ExpandableTableRowProps\n>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLDivElement>(isOpen, {\n        timing: \"expressive\",\n    });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\n        \"jkl-expandable-table-row__expanded-row\",\n        {\n            [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n        },\n    );\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\n        \"jkl-expandable-table-row-controller\",\n    );\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(\n                            child,\n                        ) &&\n                        child.type == ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(\n                            child,\n                            {\n                                isOpen,\n                                onClick: () => toggleOpen(),\n                                \"aria-controls\": tableRowId,\n                                id: expandableTableRowControllerId,\n                            },\n                        );\n                    } else {\n                        return child;\n                    }\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <div\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                        role=\"group\"\n                    >\n                        {expandedChildren}\n                    </div>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","role","displayName"],"mappings":"geAwBA,MAAMA,EAAqBC,GAGzB,CAACC,EAAOC,KACA,MACFC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAASH,IAAc,GACnDI,GAAU,YACKJ,EAAe,KAG1BE,EAAUF,EAAU,GACrB,CAACA,IAEJ,MAAOK,GAAgBC,EAAkCP,EAAQ,CAC7DQ,OAAQ,eAGNC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,EAAS,EAGjBC,EAAoBC,EAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAC1B,yCACA,CACK,mDAAqDZ,IAIxDc,EAAaC,EAAM,4BACnBC,EAAiCD,EACnC,uCAGJ,OAEQE,EAAAC,EAAA,CAAAtB,SAAA,CAAAuB,EAACC,EAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAM0B,EAAAC,SAASC,IAAI5B,GAAW6B,GAEvBH,EAAMI,eACFD,IAEJA,EAAME,MAAQC,EAEPN,EAAMO,aACTJ,EACA,CACIzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAILS,QAQlB,KAAG,CAAA,eAAczB,EACdJ,SAAAuB,EAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAC,MAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EACTgC,KAAK,QAEJpC,SAAAC,UAIjB,IAIRP,EAAmB2C,YAAc"}
+{"version":3,"file":"ExpandableTableRow.js","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n    ExpandableTableRowController,\n    ExpandableTableRowControllerProps,\n} from \"./ExpandableTableRowController.js\";\nimport { TableRow, TableRowProps } from \"./TableRow.js\";\n\nexport interface ExpandableTableRowProps extends TableRowProps {\n    expandedChildren: React.ReactNode;\n    /**\n     * Setter bredden på raden som blir åpnet\n     * @default 100\n     */\n    colSpan?: number;\n    /**\n     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.\n     */\n    isOpen?: boolean;\n    onToggle?: (isOpen: boolean) => void;\n}\n\nconst ExpandableTableRow = forwardRef<\n    HTMLTableRowElement,\n    ExpandableTableRowProps\n>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLDivElement>(isOpen, {\n        timing: \"expressive\",\n    });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\n        \"jkl-expandable-table-row__expanded-row\",\n        {\n            [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n        },\n    );\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\n        \"jkl-expandable-table-row-controller\",\n    );\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(\n                            child,\n                        ) &&\n                        child.type == ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(\n                            child,\n                            {\n                                isOpen,\n                                onClick: () => toggleOpen(),\n                                \"aria-controls\": tableRowId,\n                                id: expandableTableRowControllerId,\n                            },\n                        );\n                    } else {\n                        return child;\n                    }\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <div\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                        role=\"group\"\n                    >\n                        {expandedChildren}\n                    </div>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","role","displayName"],"mappings":"qbAwBA,MAAMA,EAAqBC,GAGzB,CAACC,EAAOC,KACA,MACFC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAASH,IAAc,GACnDI,GAAU,YACKJ,EAAe,KAG1BE,EAAUF,EAAU,GACrB,CAACA,IAEJ,MAAOK,GAAgBC,EAAkCP,EAAQ,CAC7DQ,OAAQ,eAGNC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,EAAS,EAGjBC,EAAoBC,EAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAC1B,yCACA,CACK,mDAAqDZ,IAIxDc,EAAaC,EAAM,4BACnBC,EAAiCD,EACnC,uCAGJ,OAEQE,EAAAC,EAAA,CAAAtB,SAAA,CAAAuB,EAACC,EAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAM0B,EAAAC,SAASC,IAAI5B,GAAW6B,GAEvBH,EAAMI,eACFD,IAEJA,EAAME,MAAQC,EAEPN,EAAMO,aACTJ,EACA,CACIzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAILS,QAQlB,KAAG,CAAA,eAAczB,EACdJ,SAAAuB,EAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAC,MAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EACTgC,KAAK,QAEJpC,SAAAC,UAIjB,IAIRP,EAAmB2C,YAAc"}

package/build/es/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as c}from"react";import"../icon/Icon.js";import{ArrowVerticalAnimated as r}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{useTableContext as s}from"./tableContext.js";const e=c(((c,e)=>{const{bold:t=!0,density:a,sortable:m,className:l,scope:p="col",srOnly:j,align:d="left",children:I,onClick:h,...b}=c,{density:C}=s();return o("th",{className:i("jkl-table-header",l,{"jkl-table-header--bold":t,"jkl-table-header--align-right":"right"===d,"jkl-table-header--align-center":"center"===d,"jkl-table-header--sr-only":j,"jkl-table-header--sortable":typeof m<"u"}),scope:p,onClick:o=>{null==h||h(o),null==m||m.onClick()},...b,"data-density":a||C,ref:e,children:[I,m&&n("div",{className:i("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!m.direction}),children:m.direction&&n(r,{pointingDown:"desc"===m.direction,bold:!0})})]})}));e.displayName="TableHeader";export{e as TableHeader};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{ArrowVerticalAnimated as t}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{useTableContext as o}from"./tableContext.js";const i=l(((l,i)=>{const{bold:s=!0,density:n,sortable:d,className:c,scope:m="col",srOnly:b,align:h="left",children:j,onClick:k,...p}=l,{density:f}=o();return e("th",{className:r("jkl-table-header",c,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===h,"jkl-table-header--align-center":"center"===h,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof d<"u"}),scope:m,onClick:e=>{null==k||k(e),null==d||d.onClick()},...p,"data-density":n||f,ref:i,children:[j,d&&a("div",{className:r("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!d.direction}),children:d.direction&&a(t,{pointingDown:"desc"===d.direction,bold:!0})})]})}));i.displayName="TableHeader";export{i as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/build/es/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/index.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSortProps } from \"./utils.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport interface TableHeaderProps\n    extends ThHTMLAttributes<HTMLTableCellElement> {\n    bold?: boolean;\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Si om headeren gjelder for en kolonne eller en rad\n     * @default \"col\"\n     */\n    scope?: \"col\" | \"row\";\n    srOnly?: boolean;\n    sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"0hDA2BA,MAAMA,EAAcC,GAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAA,KAeFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAGhB,IAOpBJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSortProps } from \"./utils.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport interface TableHeaderProps\n    extends ThHTMLAttributes<HTMLTableCellElement> {\n    bold?: boolean;\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Si om headeren gjelder for en kolonne eller en rad\n     * @default \"col\"\n     */\n    scope?: \"col\" | \"row\";\n    srOnly?: boolean;\n    sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"+QA2BA,MAAMA,EAAcC,GAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAA,KAeFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAGhB,IAOpBJ,EAAYuB,YAAc"}

package/build/es/components/table/TablePagination.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as n,Fragment as o}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useState as t,useCallback as r}from"react";import{useId as c}from"../../hooks/useId/useId.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as s}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as l}from"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as m}from"../icon-button/IconButton.js";import{NativeSelect as p}from"../select/NativeSelect.js";import{TextInput as d}from"../text-input/TextInput.js";import{useTableContext as g}from"./tableContext.js";const u=a(((o,a)=>{const{activePage:u=0,totalNumberOfRows:b,rowsPerPage:h,rowsPerPageItems:k,className:I,density:v,id:_,withGoToPage:C=!1,onChange:f,onChangeRowsPerPage:N,labels:P={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...w}=o,A=c(_||"jkl-table-pagination",{generateSuffix:!_}),{density:x}=g(),y=h<=0?1:Math.ceil(b/h),[S,T]=t(function(i,n,o){return n<i?i:n>o?o:n}(0,u,y-1)),R=r((i=>{const n=Number.parseInt(i.currentTarget.dataset.number);f(i,n,S),T(n),L(String(n+1))}),[f,T,S]),[M,L]=t(String(S+1)),D=r((i=>{L(i.target.value);try{const n=Number.parseInt(i.target.value)-1;if(Number.isNaN(n))return;n>=0&&n<y&&(f(i,n,S),T(n))}catch{return}}),[f,L,T,S,y]),O=r((i=>{if(0===S)return void f(i,S,S);const n=S-1;f(i,n,S),T(n),L(String(n+1))}),[f,T,S]),G=r((i=>{if(S===y-1)return void f(i,S,S);const n=S+1;f(i,n,S),T(n),L(String(n+1))}),[f,T,y,S]);return i("div",{className:e("jkl-table-pagination",I),...w,id:A,"data-density":v||x,ref:a,children:[n("div",{className:"jkl-table-pagination__left",children:i("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[i("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[P.rowsPerPage,":"]}),n(p,{className:"jkl-table-pagination__picker-input",label:P.rowsPerPage,labelProps:{srOnly:!0},name:`${A}-rows-per-page`,items:k.map((i=>"number"==typeof i?String(i):{label:i.label,value:String(i.value)})),value:String(h),onChange:N,width:"min(8rem, 100%)",inline:!0})]})}),n("div",{className:"jkl-table-pagination__right",children:1!==y&&i("nav",{className:"jkl-table-pagination__nav",children:[C&&i("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[i("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof C?C.gotoLabel:"Gå til side",":"]}),n(d,{className:"jkl-table-pagination__picker-input",label:"object"==typeof C?C.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${A}-go-to-page`,value:M,width:"min(4rem, 100%)",onChange:D,"aria-invalid":M&&M!==String(S+1)?"true":void 0})]}),i("ul",{children:[n("li",{children:n(m,{className:"jkl-table-pagination__previous",title:P.previous,onClick:O,children:n(s,{})})}),n(j,{id:A,activePage:u,numberOfPages:y,onPageClick:R}),n("li",{children:n(m,{className:"jkl-table-pagination__next",title:P.next,onClick:G,children:n(l,{})})})]})]})})]})})),j=({id:a,activePage:t,numberOfPages:r,onPageClick:c})=>{if(r<=7)return n(o,{children:Array.from({length:r}).map(((i,o)=>n("li",{children:n("button",{className:e("jkl-table-pagination__page",{"jkl-table-pagination__page--active":t===o}),type:"button","data-number":o,onClick:c,children:o+1})},`${a}-page-${o}`)))});const s=t>3&&r>7,l=t<r-4&&r>7,m=Math.min(Math.max(t-2,1),r-6),p=Math.min(m+1,r-5),d=Math.min(p+1,r-4),g=Math.min(p+2,r-3),u=Math.min(p+3,r-2);return i(o,{children:[n("li",{children:n(b,{isActive:0===t,number:0,onClick:c})}),n("li",{children:s?n("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):n(b,{isActive:t===m,number:m,onClick:c})}),n("li",{children:n(b,{isActive:t===p,number:p,onClick:c})}),n("li",{children:n(b,{isActive:t===d,number:d,onClick:c})}),n("li",{children:n(b,{isActive:t===g,number:g,onClick:c})}),n("li",{children:l?n("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):n(b,{isActive:t===u,number:u,onClick:c})}),n("li",{children:n(b,{isActive:t===r-1,number:r-1,onClick:c})})]})},b=({isActive:i,number:o,onClick:a,...t})=>n("button",{className:e("jkl-table-pagination__page",{"jkl-table-pagination__page--active":i}),type:"button","data-number":o,onClick:a,...t,children:o+1});u.displayName="TablePagination";export{u as TablePagination};
+import{jsxs as e,jsx as a,Fragment as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useCallback as r}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{ChevronLeftIcon as s}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as c}from"../icon/icons/ChevronRightIcon.js";import{IconButton as p}from"../icon-button/IconButton.js";import{NativeSelect as m}from"../select/NativeSelect.js";import{TextInput as g}from"../text-input/TextInput.js";import{useTableContext as d}from"./tableContext.js";const b=t(((i,t)=>{const{activePage:b=0,totalNumberOfRows:h,rowsPerPage:k,rowsPerPageItems:v,className:_,density:j,id:f,withGoToPage:N=!1,onChange:C,onChangeRowsPerPage:P,labels:x={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...I}=i,w=o(f||"jkl-table-pagination",{generateSuffix:!f}),{density:y}=d(),S=k<=0?1:Math.ceil(h/k),[A,M]=l(function(e,a,i){return a<e?e:a>i?i:a}(0,b,S-1)),T=r((e=>{const a=Number.parseInt(e.currentTarget.dataset.number);C(e,a,A),M(a),O(String(a+1))}),[C,M,A]),[R,O]=l(String(A+1)),L=r((e=>{O(e.target.value);try{const a=Number.parseInt(e.target.value)-1;if(Number.isNaN(a))return;a>=0&&a<S&&(C(e,a,A),M(a))}catch{return}}),[C,O,M,A,S]),$=r((e=>{if(0===A)return void C(e,A,A);const a=A-1;C(e,a,A),M(a),O(String(a+1))}),[C,M,A]),G=r((e=>{if(A===S-1)return void C(e,A,A);const a=A+1;C(e,a,A),M(a),O(String(a+1))}),[C,M,S,A]);return e("div",{className:n("jkl-table-pagination",_),...I,id:w,"data-density":j||y,ref:t,children:[a("div",{className:"jkl-table-pagination__left",children:e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[x.rowsPerPage,":"]}),a(m,{className:"jkl-table-pagination__picker-input",label:x.rowsPerPage,labelProps:{srOnly:!0},name:`${w}-rows-per-page`,items:v.map((e=>"number"==typeof e?String(e):{label:e.label,value:String(e.value)})),value:String(k),onChange:P,width:"min(8rem, 100%)",inline:!0})]})}),a("div",{className:"jkl-table-pagination__right",children:1!==S&&e("nav",{className:"jkl-table-pagination__nav",children:[N&&e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof N?N.gotoLabel:"Gå til side",":"]}),a(g,{className:"jkl-table-pagination__picker-input",label:"object"==typeof N?N.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${w}-go-to-page`,value:R,width:"min(4rem, 100%)",onChange:L,"aria-invalid":R&&R!==String(A+1)?"true":void 0})]}),e("ul",{children:[a("li",{children:a(p,{className:"jkl-table-pagination__previous",title:x.previous,onClick:$,children:a(s,{})})}),a(u,{id:w,activePage:b,numberOfPages:S,onPageClick:T}),a("li",{children:a(p,{className:"jkl-table-pagination__next",title:x.next,onClick:G,children:a(c,{})})})]})]})})]})})),u=({id:t,activePage:l,numberOfPages:r,onPageClick:o})=>{if(r<=7)return a(i,{children:Array.from({length:r}).map(((e,i)=>a("li",{children:a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":l===i}),type:"button","data-number":i,onClick:o,children:i+1})},`${t}-page-${i}`)))});const s=l>3&&r>7,c=l<r-4&&r>7,p=Math.min(Math.max(l-2,1),r-6),m=Math.min(p+1,r-5),g=Math.min(m+1,r-4),d=Math.min(m+2,r-3),b=Math.min(m+3,r-2);return e(i,{children:[a("li",{children:a(h,{isActive:0===l,number:0,onClick:o})}),a("li",{children:s?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===p,number:p,onClick:o})}),a("li",{children:a(h,{isActive:l===m,number:m,onClick:o})}),a("li",{children:a(h,{isActive:l===g,number:g,onClick:o})}),a("li",{children:a(h,{isActive:l===d,number:d,onClick:o})}),a("li",{children:c?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===b,number:b,onClick:o})}),a("li",{children:a(h,{isActive:l===r-1,number:r-1,onClick:o})})]})},h=({isActive:e,number:i,onClick:t,...l})=>a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":e}),type:"button","data-number":i,onClick:t,...l,children:i+1});b.displayName="TablePagination";export{b as TablePagination};
 //# sourceMappingURL=TablePagination.js.map

package/build/es/components/table/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n    className?: string;\n    id?: string;\n    density?: Density;\n    /**\n     * @default 0\n     */\n    activePage?: number;\n    /**\n     * Null eller negativt tall tolkes som \"vis alle\".\n     */\n    rowsPerPage: number;\n    rowsPerPageItems: Array<number | { label: string; value: number }>;\n    totalNumberOfRows: number;\n    /**\n     * Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n     * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n     * true for default label\n     * @default false\n     */\n    withGoToPage?: boolean | { gotoLabel: string };\n    onChange: (\n        e: React.SyntheticEvent,\n        toPage: number,\n        fromPage: number,\n    ) => void;\n    onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n    /**\n     * Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n     * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n     * skjermlesere for ikon-knappene til Neste/Forrige side\n     * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n     */\n    labels?: {\n        rowsPerPage: string;\n        previous: string;\n        next: string;\n    };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    } else if (num > max) {\n        return max;\n    }\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n    (props, ref) => {\n        const {\n            activePage = 0,\n            totalNumberOfRows,\n            rowsPerPage,\n            rowsPerPageItems,\n            className,\n            density,\n            id: idProp,\n            withGoToPage = false,\n            onChange,\n            onChangeRowsPerPage,\n            labels = {\n                rowsPerPage: \"Rader per side\",\n                previous: \"Forrige\",\n                next: \"Neste\",\n            },\n            ...rest\n        } = props;\n\n        const id = useId(idProp || \"jkl-table-pagination\", {\n            generateSuffix: !idProp,\n        });\n        const { density: contextDensity } = useTableContext();\n\n        const showAll = rowsPerPage <= 0;\n        const numberOfPages = showAll\n            ? 1\n            : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n        const [currentPage, setCurrentPage] = useState(\n            clamp(0, activePage, numberOfPages - 1),\n        );\n\n        const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                const toPage = Number.parseInt(\n                    e.currentTarget.dataset[\"number\"] as string,\n                );\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, currentPage],\n        );\n\n        const [pagePickerValue, setPagePickerValue] = useState(\n            String(currentPage + 1),\n        );\n        const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n            (e) => {\n                setPagePickerValue(e.target.value);\n                try {\n                    const toPage = Number.parseInt(e.target.value) - 1;\n                    if (Number.isNaN(toPage)) {\n                        return;\n                    }\n\n                    if (toPage >= 0 && toPage < numberOfPages) {\n                        onChange(e, toPage, currentPage);\n                        setCurrentPage(toPage);\n                    }\n                } catch {\n                    return;\n                }\n            },\n            [\n                onChange,\n                setPagePickerValue,\n                setCurrentPage,\n                currentPage,\n                numberOfPages,\n            ],\n        );\n\n        const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === 0) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage - 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, currentPage],\n        );\n\n        const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === numberOfPages - 1) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage + 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, numberOfPages, currentPage],\n        );\n\n        return (\n            <div\n                className={clsx(\"jkl-table-pagination\", className)}\n                {...rest}\n                id={id}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                <div className=\"jkl-table-pagination__left\">\n                    <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                        <span\n                            className=\"jkl-table-pagination__picker-label\"\n                            aria-hidden=\"true\"\n                        >\n                            {labels.rowsPerPage}:\n                        </span>\n                        <NativeSelect\n                            className=\"jkl-table-pagination__picker-input\"\n                            label={labels.rowsPerPage}\n                            labelProps={{ srOnly: true }}\n                            name={`${id}-rows-per-page`}\n                            items={rowsPerPageItems.map((i) =>\n                                typeof i === \"number\"\n                                    ? String(i)\n                                    : {\n                                          label: i.label,\n                                          value: String(i.value),\n                                      },\n                            )}\n                            value={String(rowsPerPage)}\n                            onChange={onChangeRowsPerPage}\n                            width=\"min(8rem, 100%)\"\n                            inline\n                        />\n                    </div>\n                </div>\n                <div className=\"jkl-table-pagination__right\">\n                    {numberOfPages !== 1 && (\n                        <nav className=\"jkl-table-pagination__nav\">\n                            {withGoToPage && (\n                                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                    <span\n                                        className=\"jkl-table-pagination__picker-label\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        {typeof withGoToPage === \"object\"\n                                            ? withGoToPage.gotoLabel\n                                            : \"Gå til side\"}\n                                        :\n                                    </span>\n                                    {/* onChange først ved enter/submit */}\n                                    <TextInput\n                                        className=\"jkl-table-pagination__picker-input\"\n                                        label={\n                                            typeof withGoToPage === \"object\"\n                                                ? withGoToPage.gotoLabel\n                                                : \"Gå til side\"\n                                        }\n                                        labelProps={{ srOnly: true }}\n                                        name={`${id}-go-to-page`}\n                                        value={pagePickerValue}\n                                        width=\"min(4rem, 100%)\"\n                                        onChange={onPageChange}\n                                        aria-invalid={\n                                            pagePickerValue &&\n                                            pagePickerValue !==\n                                                String(currentPage + 1)\n                                                ? \"true\"\n                                                : undefined\n                                        }\n                                    />\n                                </div>\n                            )}\n                            <ul>\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__previous\"\n                                        title={labels.previous}\n                                        onClick={onPrevious}\n                                    >\n                                        <ChevronLeftIcon />\n                                    </IconButton>\n                                </li>\n                                <PaginationPages\n                                    id={id}\n                                    activePage={activePage}\n                                    numberOfPages={numberOfPages}\n                                    onPageClick={onPageClick}\n                                />\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__next\"\n                                        title={labels.next}\n                                        onClick={onNext}\n                                    >\n                                        <ChevronRightIcon />\n                                    </IconButton>\n                                </li>\n                            </ul>\n                        </nav>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\":\n                                    activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(\n        Math.max(activePage - 2, 1),\n        numberOfPages - 6,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 5,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 3,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === 0}\n                    number={0}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}
+{"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n    className?: string;\n    id?: string;\n    density?: Density;\n    /**\n     * @default 0\n     */\n    activePage?: number;\n    /**\n     * Null eller negativt tall tolkes som \"vis alle\".\n     */\n    rowsPerPage: number;\n    rowsPerPageItems: Array<number | { label: string; value: number }>;\n    totalNumberOfRows: number;\n    /**\n     * Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n     * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n     * true for default label\n     * @default false\n     */\n    withGoToPage?: boolean | { gotoLabel: string };\n    onChange: (\n        e: React.SyntheticEvent,\n        toPage: number,\n        fromPage: number,\n    ) => void;\n    onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n    /**\n     * Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n     * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n     * skjermlesere for ikon-knappene til Neste/Forrige side\n     * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n     */\n    labels?: {\n        rowsPerPage: string;\n        previous: string;\n        next: string;\n    };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    } else if (num > max) {\n        return max;\n    }\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n    (props, ref) => {\n        const {\n            activePage = 0,\n            totalNumberOfRows,\n            rowsPerPage,\n            rowsPerPageItems,\n            className,\n            density,\n            id: idProp,\n            withGoToPage = false,\n            onChange,\n            onChangeRowsPerPage,\n            labels = {\n                rowsPerPage: \"Rader per side\",\n                previous: \"Forrige\",\n                next: \"Neste\",\n            },\n            ...rest\n        } = props;\n\n        const id = useId(idProp || \"jkl-table-pagination\", {\n            generateSuffix: !idProp,\n        });\n        const { density: contextDensity } = useTableContext();\n\n        const showAll = rowsPerPage <= 0;\n        const numberOfPages = showAll\n            ? 1\n            : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n        const [currentPage, setCurrentPage] = useState(\n            clamp(0, activePage, numberOfPages - 1),\n        );\n\n        const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                const toPage = Number.parseInt(\n                    e.currentTarget.dataset[\"number\"] as string,\n                );\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, currentPage],\n        );\n\n        const [pagePickerValue, setPagePickerValue] = useState(\n            String(currentPage + 1),\n        );\n        const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n            (e) => {\n                setPagePickerValue(e.target.value);\n                try {\n                    const toPage = Number.parseInt(e.target.value) - 1;\n                    if (Number.isNaN(toPage)) {\n                        return;\n                    }\n\n                    if (toPage >= 0 && toPage < numberOfPages) {\n                        onChange(e, toPage, currentPage);\n                        setCurrentPage(toPage);\n                    }\n                } catch {\n                    return;\n                }\n            },\n            [\n                onChange,\n                setPagePickerValue,\n                setCurrentPage,\n                currentPage,\n                numberOfPages,\n            ],\n        );\n\n        const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === 0) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage - 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, currentPage],\n        );\n\n        const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === numberOfPages - 1) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage + 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, setCurrentPage, numberOfPages, currentPage],\n        );\n\n        return (\n            <div\n                className={clsx(\"jkl-table-pagination\", className)}\n                {...rest}\n                id={id}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                <div className=\"jkl-table-pagination__left\">\n                    <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                        <span\n                            className=\"jkl-table-pagination__picker-label\"\n                            aria-hidden=\"true\"\n                        >\n                            {labels.rowsPerPage}:\n                        </span>\n                        <NativeSelect\n                            className=\"jkl-table-pagination__picker-input\"\n                            label={labels.rowsPerPage}\n                            labelProps={{ srOnly: true }}\n                            name={`${id}-rows-per-page`}\n                            items={rowsPerPageItems.map((i) =>\n                                typeof i === \"number\"\n                                    ? String(i)\n                                    : {\n                                          label: i.label,\n                                          value: String(i.value),\n                                      },\n                            )}\n                            value={String(rowsPerPage)}\n                            onChange={onChangeRowsPerPage}\n                            width=\"min(8rem, 100%)\"\n                            inline\n                        />\n                    </div>\n                </div>\n                <div className=\"jkl-table-pagination__right\">\n                    {numberOfPages !== 1 && (\n                        <nav className=\"jkl-table-pagination__nav\">\n                            {withGoToPage && (\n                                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                    <span\n                                        className=\"jkl-table-pagination__picker-label\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        {typeof withGoToPage === \"object\"\n                                            ? withGoToPage.gotoLabel\n                                            : \"Gå til side\"}\n                                        :\n                                    </span>\n                                    {/* onChange først ved enter/submit */}\n                                    <TextInput\n                                        className=\"jkl-table-pagination__picker-input\"\n                                        label={\n                                            typeof withGoToPage === \"object\"\n                                                ? withGoToPage.gotoLabel\n                                                : \"Gå til side\"\n                                        }\n                                        labelProps={{ srOnly: true }}\n                                        name={`${id}-go-to-page`}\n                                        value={pagePickerValue}\n                                        width=\"min(4rem, 100%)\"\n                                        onChange={onPageChange}\n                                        aria-invalid={\n                                            pagePickerValue &&\n                                            pagePickerValue !==\n                                                String(currentPage + 1)\n                                                ? \"true\"\n                                                : undefined\n                                        }\n                                    />\n                                </div>\n                            )}\n                            <ul>\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__previous\"\n                                        title={labels.previous}\n                                        onClick={onPrevious}\n                                    >\n                                        <ChevronLeftIcon />\n                                    </IconButton>\n                                </li>\n                                <PaginationPages\n                                    id={id}\n                                    activePage={activePage}\n                                    numberOfPages={numberOfPages}\n                                    onPageClick={onPageClick}\n                                />\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__next\"\n                                        title={labels.next}\n                                        onClick={onNext}\n                                    >\n                                        <ChevronRightIcon />\n                                    </IconButton>\n                                </li>\n                            </ul>\n                        </nav>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\":\n                                    activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(\n        Math.max(activePage - 2, 1),\n        numberOfPages - 6,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 5,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 3,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === 0}\n                    number={0}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}

package/build/es/components/tag/Tag.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import{CloseIcon as c}from"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as s}from"../icon-button/IconButton.js";function r(r){const t=({className:t,density:a,dismissAction:e,children:m,...j})=>o("span",{className:i("jkl-tag",{"jkl-tag--info":"info"===r,"jkl-tag--error":"error"===r,"jkl-tag--warning":"warning"===r,"jkl-tag--success":"success"===r},t),"data-density":a,...j,children:[m,e&&n(s,{className:"jkl-tag__dismiss-action",density:a,title:e.label,onClick:e.onClick,onFocus:e.onFocus,onBlur:e.onBlur,children:n(c,{variant:"small",bold:!0})})]});return t.displayName=function(o){switch(o){case"info":return"InfoTag";case"error":return"ErrorTag";case"warning":return"WarningTag";case"success":return"SuccessTag";default:return"Tag"}}(r),t}const t=r(),a=r("info"),e=r("error"),m=r("warning"),j=r("success");export{e as ErrorTag,a as InfoTag,j as SuccessTag,t as Tag,m as WarningTag};
+import{jsxs as s,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{CloseIcon as r}from"../icon/icons/CloseIcon.js";import{IconButton as o}from"../icon-button/IconButton.js";function c(c){const t=({className:t,density:e,dismissAction:i,children:l,...u})=>s("span",{className:a("jkl-tag",{"jkl-tag--info":"info"===c,"jkl-tag--error":"error"===c,"jkl-tag--warning":"warning"===c,"jkl-tag--success":"success"===c},t),"data-density":e,...u,children:[l,i&&n(o,{className:"jkl-tag__dismiss-action",density:e,title:i.label,onClick:i.onClick,onFocus:i.onFocus,onBlur:i.onBlur,children:n(r,{variant:"small",bold:!0})})]});return t.displayName=function(s){switch(s){case"info":return"InfoTag";case"error":return"ErrorTag";case"warning":return"WarningTag";case"success":return"SuccessTag";default:return"Tag"}}(c),t}const t=c(),e=c("info"),i=c("error"),l=c("warning"),u=c("success");export{i as ErrorTag,e as InfoTag,u as SuccessTag,t as Tag,l as WarningTag};
 //# sourceMappingURL=Tag.js.map

package/build/es/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    FC,\n    HTMLAttributes,\n    MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nexport interface DismissAction\n    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label: string;\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n    density?: Density;\n    dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" | \"error\" | \"warning\" | \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n    switch (variant) {\n        case \"info\":\n            return \"InfoTag\";\n        case \"error\":\n            return \"ErrorTag\";\n        case \"warning\":\n            return \"WarningTag\";\n        case \"success\":\n            return \"SuccessTag\";\n        default:\n            return \"Tag\";\n    }\n}\n\nfunction tagFactory(variant?: Variant) {\n    const Tag: FC<TagProps> = ({\n        className,\n        density,\n        dismissAction,\n        children,\n        ...rest\n    }) => (\n        <span\n            className={clsx(\n                \"jkl-tag\",\n                {\n                    \"jkl-tag--info\": variant === \"info\",\n                    \"jkl-tag--error\": variant === \"error\",\n                    \"jkl-tag--warning\": variant === \"warning\",\n                    \"jkl-tag--success\": variant === \"success\",\n                },\n                className,\n            )}\n            data-density={density}\n            {...rest}\n        >\n            {children}\n            {dismissAction && (\n                <IconButton\n                    className=\"jkl-tag__dismiss-action\"\n                    density={density}\n                    title={dismissAction.label}\n                    onClick={dismissAction.onClick}\n                    onFocus={dismissAction.onFocus}\n                    onBlur={dismissAction.onBlur}\n                >\n                    <CloseIcon variant=\"small\" bold />\n                </IconButton>\n            )}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"i/CAuCA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EACtBC,UAAAA,EACAC,QAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,KAEHC,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,YApDR,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAuCsBmB,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ButtonHTMLAttributes,\n    FC,\n    HTMLAttributes,\n    MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nexport interface DismissAction\n    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label: string;\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n    density?: Density;\n    dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" | \"error\" | \"warning\" | \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n    switch (variant) {\n        case \"info\":\n            return \"InfoTag\";\n        case \"error\":\n            return \"ErrorTag\";\n        case \"warning\":\n            return \"WarningTag\";\n        case \"success\":\n            return \"SuccessTag\";\n        default:\n            return \"Tag\";\n    }\n}\n\nfunction tagFactory(variant?: Variant) {\n    const Tag: FC<TagProps> = ({\n        className,\n        density,\n        dismissAction,\n        children,\n        ...rest\n    }) => (\n        <span\n            className={clsx(\n                \"jkl-tag\",\n                {\n                    \"jkl-tag--info\": variant === \"info\",\n                    \"jkl-tag--error\": variant === \"error\",\n                    \"jkl-tag--warning\": variant === \"warning\",\n                    \"jkl-tag--success\": variant === \"success\",\n                },\n                className,\n            )}\n            data-density={density}\n            {...rest}\n        >\n            {children}\n            {dismissAction && (\n                <IconButton\n                    className=\"jkl-tag__dismiss-action\"\n                    density={density}\n                    title={dismissAction.label}\n                    onClick={dismissAction.onClick}\n                    onFocus={dismissAction.onFocus}\n                    onBlur={dismissAction.onBlur}\n                >\n                    <CloseIcon variant=\"small\" bold />\n                </IconButton>\n            )}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"iNAuCA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EACtBC,UAAAA,EACAC,QAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,KAEHC,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,YApDR,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAuCsBmB,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}

package/build/es/components/text-input/BaseTextInput.d.ts

@@ -1,6 +1,6 @@
-import { default as React, MouseEventHandler, ReactNode, InputHTMLAttributes, HTMLProps } from 'react';
+import { default as React, HTMLProps, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { Density } from '../../core/types.js';
-import { IconProps } from '../icon/index.js';
+import { IconProps } from '../icon/types.js';
 interface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, "disabled"> {
     icon: React.ReactElement<IconProps>;
     label: string;

package/build/es/components/text-input/BaseTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    type MouseEventHandler,\n    type ReactNode,\n    InputHTMLAttributes,\n    HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action && actionButton && actionButton}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA8CO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXY,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,IAOpBzB,EAAc0B,YAAc"}
+{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    HTMLProps,\n    InputHTMLAttributes,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action && actionButton && actionButton}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA8CO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXY,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,IAOpBzB,EAAc0B,YAAc"}

package/build/es/components/toast/Toast.js

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

package/build/es/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport {\n    CloseIcon,\n    ErrorIcon,\n    InfoIcon,\n    SuccessIcon,\n    WarningIcon,\n} from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"y4DAsBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEC,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    let ref = useRef(null);\n    let { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n            </div>\n            <IconButton\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"0qBAoBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEC,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}

package/build/es/components/toggle-switch/ToggleSwitch.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ButtonHTMLAttributes } from 'react';
 import { Density } from '../../core/types.js';
-import { SwipeChangeHandler } from '../../hooks/index.js';
+import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
 export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
 export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
     density?: Density;

package/build/es/components/toggle-switch/ToggleSwitch.js

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

package/build/es/components/toggle-switch/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ButtonHTMLAttributes,\n    type MouseEventHandler,\n    forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { SwipeChangeHandler, useSwipeGesture } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { CheckIcon } from \"../icon/index.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleProps = Omit<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    \"onChange\"\n> & {\n    density?: Density;\n    /**\n     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n     * @example\n     * ```js\n     * function handleChange(event, pressed) {\n     *    console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n     * }\n     * ```\n     */\n    onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleProps>(\n    (\n        {\n            \"aria-pressed\": ariaPressed = false,\n            children,\n            className,\n            density,\n            id,\n            onChange,\n            ...rest\n        },\n        ref,\n    ) => {\n        const uid = useId(id || \"jkl-toggle-switch\", { generateSuffix: !id });\n        const [pressed, setPressed] = React.useState(ariaPressed);\n        React.useEffect(() => {\n            setPressed(ariaPressed);\n        }, [ariaPressed]);\n\n        const {\n            onClick,\n            onPointerCancel,\n            onPointerDown,\n            onPointerMove,\n            onPointerUp,\n            ...buttonProps\n        } = rest;\n\n        const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n            setPressed(!pressed);\n            onChange?.(event, !pressed);\n            onClick?.(event);\n        };\n\n        const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n            event,\n            toggleTo,\n        ) => {\n            if (toggleTo !== pressed) {\n                setPressed(toggleTo);\n                onChange?.(event, toggleTo);\n            }\n        };\n\n        const { gestureHandlers } = useSwipeGesture({\n            onClick: handleClick,\n            onChange: handleChange,\n            onPointerCancel,\n            onPointerDown,\n            onPointerMove,\n            onPointerUp,\n        });\n\n        return (\n            <button\n                className={clsx(\"jkl-toggle-switch\", className)}\n                id={uid}\n                ref={ref}\n                aria-pressed={pressed}\n                data-density={density}\n                {...buttonProps}\n                {...(buttonProps.disabled ? {} : gestureHandlers)}\n            >\n                {children}\n                <div aria-hidden className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon\n                            variant=\"small\"\n                            bold\n                            className=\"jkl-toggle-switch-widget__indicator\"\n                        />\n                    </div>\n                </div>\n            </button>\n        );\n    },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"4oDA+BO,MAAMA,EAAeC,GACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}
+{"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ButtonHTMLAttributes,\n    type MouseEventHandler,\n    forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n    SwipeChangeHandler,\n    useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleProps = Omit<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    \"onChange\"\n> & {\n    density?: Density;\n    /**\n     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n     * @example\n     * ```js\n     * function handleChange(event, pressed) {\n     *    console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n     * }\n     * ```\n     */\n    onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleProps>(\n    (\n        {\n            \"aria-pressed\": ariaPressed = false,\n            children,\n            className,\n            density,\n            id,\n            onChange,\n            ...rest\n        },\n        ref,\n    ) => {\n        const uid = useId(id || \"jkl-toggle-switch\", { generateSuffix: !id });\n        const [pressed, setPressed] = React.useState(ariaPressed);\n        React.useEffect(() => {\n            setPressed(ariaPressed);\n        }, [ariaPressed]);\n\n        const {\n            onClick,\n            onPointerCancel,\n            onPointerDown,\n            onPointerMove,\n            onPointerUp,\n            ...buttonProps\n        } = rest;\n\n        const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n            setPressed(!pressed);\n            onChange?.(event, !pressed);\n            onClick?.(event);\n        };\n\n        const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n            event,\n            toggleTo,\n        ) => {\n            if (toggleTo !== pressed) {\n                setPressed(toggleTo);\n                onChange?.(event, toggleTo);\n            }\n        };\n\n        const { gestureHandlers } = useSwipeGesture({\n            onClick: handleClick,\n            onChange: handleChange,\n            onPointerCancel,\n            onPointerDown,\n            onPointerMove,\n            onPointerUp,\n        });\n\n        return (\n            <button\n                className={clsx(\"jkl-toggle-switch\", className)}\n                id={uid}\n                ref={ref}\n                aria-pressed={pressed}\n                data-density={density}\n                {...buttonProps}\n                {...(buttonProps.disabled ? {} : gestureHandlers)}\n            >\n                {children}\n                <div aria-hidden className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon\n                            variant=\"small\"\n                            bold\n                            className=\"jkl-toggle-switch-widget__indicator\"\n                        />\n                    </div>\n                </div>\n            </button>\n        );\n    },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"iUAkCO,MAAMA,EAAeC,GACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}

package/build/es/components/tooltip/PopupTip.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, HTMLProps } from 'react';
+import { HTMLProps, FC, ReactNode } from 'react';
 import { TooltipProps } from './Tooltip.js';
 export interface PopupTipProps extends Omit<TooltipProps, "triggerOn" | "children"> {
     /**

package/build/es/components/tooltip/PopupTip.js

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

package/build/es/components/tooltip/PopupTip.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useState,\n    type FC,\n    type ReactNode,\n    HTMLProps,\n    FocusEventHandler,\n} from \"react\";\nimport { QuestionIcon } from \"../icon/index.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n    extends Omit<TooltipProps, \"triggerOn\" | \"children\"> {\n    /**\n     * Innholdet i tooltipet som vises\n     */\n    content: ReactNode;\n    /**\n     * Eventuelle props du vil sette på trigger-knappen for tooltipet\n     */\n    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" | \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isBold, setIsBold] = useState(false);\n\n    const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(true);\n        triggerProps?.onFocus?.(event);\n    };\n    const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(false);\n        triggerProps?.onBlur?.(event);\n    };\n\n    return (\n        <Tooltip triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isBold} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n            <TooltipContent>{content}</TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isBold","setIsBold","useState","jsxs","Tooltip","triggerOn","children","jsx","TooltipTrigger","onFocus","event","_a","call","onBlur","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"4mDAyBO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,GAYhC,OAAAC,EAAAC,EAAA,CAAQC,UAAU,WAAYN,EAC3BO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAH,EAAC,SAAA,IACOL,EACJW,QAd2CC,UACvDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAcW,UAAdE,EAAAC,KAAAd,EAAwBY,EAAAA,EAaZG,OAX0CH,UACtDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAce,SAAdF,EAAAC,KAAAd,EAAuBY,EAAAA,EAUXI,KAAK,SACLC,UAAWC,EACP,8BACA,MAAAlB,SAAAA,EAAciB,WAElB,cAAY,8BAEZT,SAAA,CAAAC,EAACU,EAAa,CAAAC,QAAQ,UAAUC,KAAMnB,IACrCO,EAAA,OAAA,CAAKQ,UAAU,cAAcT,SAAe,yBAGrDC,EAACa,GAAgBd,SAAQT,MAC7B"}
+{"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    FocusEventHandler,\n    HTMLProps,\n    useState,\n    type FC,\n    type ReactNode,\n} from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n    extends Omit<TooltipProps, \"triggerOn\" | \"children\"> {\n    /**\n     * Innholdet i tooltipet som vises\n     */\n    content: ReactNode;\n    /**\n     * Eventuelle props du vil sette på trigger-knappen for tooltipet\n     */\n    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" | \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isBold, setIsBold] = useState(false);\n\n    const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(true);\n        triggerProps?.onFocus?.(event);\n    };\n    const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n        setIsBold(false);\n        triggerProps?.onBlur?.(event);\n    };\n\n    return (\n        <Tooltip triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isBold} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n            <TooltipContent>{content}</TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isBold","setIsBold","useState","jsxs","Tooltip","triggerOn","children","jsx","TooltipTrigger","onFocus","event","_a","call","onBlur","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"+UAyBO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,GAYhC,OAAAC,EAAAC,EAAA,CAAQC,UAAU,WAAYN,EAC3BO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAH,EAAC,SAAA,IACOL,EACJW,QAd2CC,UACvDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAcW,UAAdE,EAAAC,KAAAd,EAAwBY,EAAAA,EAaZG,OAX0CH,UACtDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAce,SAAdF,EAAAC,KAAAd,EAAuBY,EAAAA,EAUXI,KAAK,SACLC,UAAWC,EACP,8BACA,MAAAlB,SAAAA,EAAciB,WAElB,cAAY,8BAEZT,SAAA,CAAAC,EAACU,EAAa,CAAAC,QAAQ,UAAUC,KAAMnB,IACrCO,EAAA,OAAA,CAAKQ,UAAU,cAAcT,SAAe,yBAGrDC,EAACa,GAAgBd,SAAQT,MAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.27.4",
+    "version": "0.27.5",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -511,5 +511,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "94584a6da5fab3ed3805e5aad2b8874be21f3613"
+    "gitHead": "bbe38a1e86f92389f43929f61feec99c54970763"
 }

package/styles/components/button/button.css

@@ -136,7 +136,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ut2pfqi;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ubnpk7x;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -180,7 +180,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-ut2pfqi {
+@keyframes jkl-tertiary-flash-ubnpk7x {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ut2pfqi .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ut2pfqi{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ubnpk7x .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ubnpk7x{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-urqwtck {
+@keyframes jkl-checkbox-checked-u7v26ib {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-urqwtcm {
+@keyframes jkl-checkbox-indeterminate-u7v26jb {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-urqwtck 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u7v26ib 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-urqwtcm 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u7v26jb 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {