@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/build/cjs/components/notification-badge/NotificationBadge.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),i=require("react");function t(e,a){return e>a?`${a}+`:e}exports.NotificationBadge=({className:n,children:r,count:l,max:s=99,hideCounter:o,urgent:c=!1,label:d="varsler",...u})=>{const j=i.useId(),b=`jkl-notification-badge-${j}`,g=`--jkl-notification-badge-anchor-${j.replace(/[^a-z0-9]/gi,"")}`,m=l>0,p=m?d:void 0;return e.jsxs(e.Fragment,{children:[i.isValidElement(r)?i.cloneElement(r,{"aria-describedby":a.clsx(r.props["aria-describedby"],m&&b)||void 0,className:a.clsx(r.props.className,"jkl-notification-badge-anchor"),style:{...r.props.style,"--jkl-notification-badge-anchor-name":g},title:r.props.title??p}):r,m?e.jsxs("div",{className:a.clsx("jkl-notification-badge",o&&"jkl-notification-badge--dot",n),"data-urgent":c,"data-count":l,"data-hide-counter":o,...u,style:{...u.style,"--jkl-notification-badge-anchor-name":g},id:b,children:[o?null:e.jsx("span",{"aria-hidden":"true",children:t(l,s)}),e.jsx("div",{className:"jkl-sr-only",children:p})]}):null]})};
+//# sourceMappingURL=NotificationBadge.cjs.map

package/build/cjs/components/notification-badge/NotificationBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.cjs","sources":["../../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, type ReactNode, useId } from \"react\";\nimport type { NotificationBadgeProps } from \"./types.js\";\n\nconst DEFAULT_LABEL = \"varsler\";\n\nfunction badgeValue(count: number, max: number) {\n    return count > max ? `${max}+` : count;\n}\n\nexport const NotificationBadge = ({\n    className,\n    children,\n    count,\n    max = 99,\n    hideCounter,\n    urgent = false,\n    label = DEFAULT_LABEL,\n    ...rest\n}: NotificationBadgeProps): ReactNode => {\n    const reactId = useId();\n    const badgeId = `jkl-notification-badge-${reactId}`;\n    const anchorName = `--jkl-notification-badge-anchor-${reactId.replace(/[^a-z0-9]/gi, \"\")}`;\n    const hasCount = count > 0;\n    const description = hasCount ? label : undefined;\n\n    return (\n        <>\n            {React.isValidElement(children)\n                ? React.cloneElement(children, {\n                      // Uten et varsel å peke på beholder ankeret bare sin egen\n                      // verdi, slik at attributtet utelates helt når den mangler.\n                      \"aria-describedby\":\n                          clsx(\n                              children.props[\"aria-describedby\"],\n                              hasCount && badgeId,\n                          ) || undefined,\n                      className: clsx(\n                          children.props.className,\n                          \"jkl-notification-badge-anchor\",\n                      ),\n                      style: {\n                          ...children.props.style,\n                          \"--jkl-notification-badge-anchor-name\": anchorName,\n                      } as CSSProperties,\n                      title: children.props.title ?? description,\n                  })\n                : children}\n            {hasCount ? (\n                <div\n                    className={clsx(\n                        \"jkl-notification-badge\",\n                        hideCounter && \"jkl-notification-badge--dot\",\n                        className,\n                    )}\n                    data-urgent={urgent}\n                    data-count={count}\n                    data-hide-counter={hideCounter}\n                    {...rest}\n                    style={\n                        {\n                            ...rest.style,\n                            \"--jkl-notification-badge-anchor-name\": anchorName,\n                        } as CSSProperties\n                    }\n                    id={badgeId}\n                >\n                    {hideCounter ? null : (\n                        <span aria-hidden=\"true\">{badgeValue(count, max)}</span>\n                    )}\n                    <div className=\"jkl-sr-only\">{description}</div>\n                </div>\n            ) : null}\n        </>\n    );\n};\n"],"names":["badgeValue","count","max","className","children","hideCounter","urgent","label","rest","reactId","useId","badgeId","anchorName","replace","hasCount","description","jsxs","Fragment","React","isValidElement","cloneElement","clsx","props","style","title","id","jsx"],"mappings":"gLAMA,SAASA,EAAWC,EAAeC,GAC/B,OAAOD,EAAQC,EAAM,GAAGA,KAASD,CACrC,2BAEiC,EAC7BE,UAAAA,EACAC,SAAAA,EACAH,MAAAA,EACAC,IAAAA,EAAM,GACNG,YAAAA,EACAC,OAAAA,GAAS,EACTC,MAAAA,EAbkB,aAcfC,MAEH,MAAMC,EAAUC,EAAAA,QACVC,EAAU,0BAA0BF,IACpCG,EAAa,mCAAmCH,EAAQI,QAAQ,cAAe,MAC/EC,EAAWb,EAAQ,EACnBc,EAAcD,EAAWP,OAAQ,EAEvC,OACIS,EAAAA,KAAAC,WAAA,CACKb,SAAA,CAAAc,EAAMC,eAAef,GAChBc,EAAME,aAAahB,EAAU,CAGzB,mBACIiB,EAAAA,KACIjB,EAASkB,MAAM,oBACfR,GAAYH,SACX,EACTR,UAAWkB,EAAAA,KACPjB,EAASkB,MAAMnB,UACf,iCAEJoB,MAAO,IACAnB,EAASkB,MAAMC,MAClB,uCAAwCX,GAE5CY,MAAOpB,EAASkB,MAAME,OAAST,IAEnCX,EACLU,EACGE,EAAAA,KAAC,MAAA,CACGb,UAAWkB,EAAAA,KACP,yBACAhB,GAAe,8BACfF,GAEJ,cAAaG,EACb,aAAYL,EACZ,oBAAmBI,KACfG,EACJe,MACI,IACOf,EAAKe,MACR,uCAAwCX,GAGhDa,GAAId,EAEHP,SAAA,CAAAC,EAAc,WACV,OAAA,CAAK,cAAY,OAAQD,SAAAJ,EAAWC,EAAOC,KAEhDwB,EAAAA,IAAC,MAAA,CAAIvB,UAAU,cAAeC,SAAAW,OAElC"}

package/build/cjs/components/notification-badge/NotificationBadge.d.cts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { NotificationBadgeProps } from './types.cjs';
+export declare const NotificationBadge: ({ className, children, count, max, hideCounter, urgent, label, ...rest }: NotificationBadgeProps) => ReactNode;

package/build/cjs/components/notification-badge/index.cjs

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

package/build/cjs/components/notification-badge/index.cjs.map

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

package/build/cjs/components/notification-badge/index.d.cts

@@ -0,0 +1,2 @@
+export type { NotificationBadgeProps } from './types.cjs';
+export { NotificationBadge } from './NotificationBadge.cjs';

package/build/cjs/components/notification-badge/types.cjs

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

package/build/cjs/components/notification-badge/types.cjs.map

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

package/build/cjs/components/notification-badge/types.d.cts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactElement } from 'react';
+export interface NotificationBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Antall varsler
+     */
+    count: number;
+    /**
+     * Høyeste tall som vises før det blir "+".
+     *
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Skjuler tallene visuelt, så det bare vises en prikk. Antallet leses fortsatt opp av skjermlesere.
+     */
+    hideCounter?: boolean;
+    /**
+     * Elementet varselet skal plasseres på. Må være kun ett element, og klikkbart, for å kunne brukes.
+     */
+    children?: ReactElement<HTMLAttributes<HTMLElement>>;
+    /**
+     * Teksten skjermlesere får, og tittelen på ankeret. Brukes ordrett, slik du
+     * sender den inn.
+     *
+     * Antallet vises bare visuelt, så dette er eneste sted skjermlesere kan få
+     * det. Ta det med i strengen, og hold den i takt med `count`.
+     *
+     * @example `${antallMeldinger} uleste meldinger`
+     * @example "4 produkter"
+     *
+     * @default varsler
+     */
+    label?: string;
+    /**
+     * Endrer farge fra kontrastfarge til en rød-farge.
+     *
+     * @default false
+     */
+    urgent?: boolean;
+}

package/build/cjs/components/number-input/NumberInput.d.cts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const NumberInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "inline" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "inline" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "children" | "type" | "readOnly"> & import('../../utilities/types.js').WithDisabled & import('../../utilities/types.js').WithReadOnly & {
     align?: "left" | "right";
     width?: string;
     inputClassName?: string;

package/build/cjs/components/number-input/types.d.cts

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
-export type NumberInputProps = Omit<InputGroupProps, "children" | "inline" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+export type NumberInputProps = Omit<InputGroupProps, "children" | "inline" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "disabled" | "readOnly"> & WithDisabled & WithReadOnly & {
     /**
      * Justerer teksten i inputfeltet.
      * @default "left"

package/build/cjs/components/radio-button/types.d.cts

@@ -1,11 +1,12 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { WithDisabled } from '../../utilities/types.cjs';
 import { FieldGroupProps, SupportLabelProps } from '../input-group/types.cjs';
 export interface BaseRadioButtonProps extends RadioButtonProps {
     inline?: boolean;
     invalid?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "disabled">, WithDisabled {
     children?: ReactNode;
     value: string;
     /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */

package/build/cjs/components/search/Search.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),t=require("../../utilities/mergeRefs.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs");const c=require("../input-group/InputGroup.cjs"),l=require("./SearchButton.cjs"),n=s.forwardRef(function(l,n){const{label:o="Søk",className:a,errorLabel:i,helpLabel:u,labelProps:p={srOnly:!0},supportLabelProps:b,tooltip:d,description:h,name:j="q",placeholder:k="Søk",spellCheck:m=!1,icon:f="search",children:q,...x}=l,g={label:o,errorLabel:i,helpLabel:u,labelProps:p,supportLabelProps:b,tooltip:d,description:h},y=s.useRef(null),I=t.mergeRefs(y,n),S=s.useCallback(()=>{if(y.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(y.current,"");const e=new Event("change",{bubbles:!0});y.current.dispatchEvent(e),y.current.focus()}},[]);return e.jsxs("div",{className:r.clsx("jkl-search",a),children:[e.jsx(c.InputGroup,{...g,label:o,"data-testid":"jkl-search",render:r=>e.jsxs("div",{className:"input-wrapper","data-icon":f,children:[e.jsx("input",{ref:I,type:"search",name:j,placeholder:k,spellCheck:m,...r,...x}),e.jsx("button",{className:"clear-button",type:"button",onClick:S,children:e.jsx("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})})]})}),q]})});n.Button=l.SearchButton,exports.Search=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),l=require("../../utilities/mergeRefs.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs");const c=require("../input-group/InputGroup.cjs"),t=require("./SearchButton.cjs"),a=s.forwardRef(function(t,a){const{label:n="Søk",className:o,errorLabel:i,helpLabel:u,labelProps:p={srOnly:!0},supportLabelProps:d,tooltip:b,description:h,name:j="q",placeholder:k="Søk",spellCheck:m=!1,icon:f="search",children:q,disabled:x,readOnly:y,...g}=t,v={label:n,errorLabel:i,helpLabel:u,labelProps:p,supportLabelProps:d,tooltip:b,description:h},I=s.useRef(null),S=l.mergeRefs(I,a),L=s.useCallback(()=>{if(I.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(I.current,"");const e=new Event("change",{bubbles:!0});I.current.dispatchEvent(e),I.current.focus()}},[]);return e.jsx("div",{className:r.clsx("jkl-search",o),children:e.jsx(c.InputGroup,{...v,label:n,"data-testid":"jkl-search",render:r=>e.jsxs("div",{className:"jkl-search__wrapper","data-icon":f,"data-invalid":r["aria-invalid"],children:[e.jsx("input",{ref:S,type:"search",name:j,placeholder:k,spellCheck:m,...r,...g,disabled:x,readOnly:y}),e.jsx("button",{className:"jkl-search__clear-button",type:"button",onClick:L,disabled:x||y,children:e.jsx("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})}),q]})})})});a.Button=t.SearchButton,exports.Search=a;
 //# sourceMappingURL=Search.cjs.map

package/build/cjs/components/search/Search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Search.cjs","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const clearInput = useCallback(() => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        }, []);\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div className=\"input-wrapper\" data-icon={icon}>\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                            />\n                            <button\n                                className=\"clear-button\"\n                                type=\"button\"\n                                onClick={clearInput}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                        </div>\n                    )}\n                />\n                {children}\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","clearInput","useCallback","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"4cAOaA,EAASC,EAAAA,WAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,KACGC,GACHhB,EAEEiB,EAAkB,CACpBf,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGEQ,EAAcC,EAAAA,OAAyB,MACvCC,EAAMC,EAAAA,UAAUH,EAAajB,GAE7BqB,EAAaC,EAAAA,YAAY,KAC3B,GAAIL,EAAYM,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKb,EAAYM,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7ChB,EAAYM,QAAQW,cAAcH,GAClCd,EAAYM,QAAQY,OACxB,GACD,IAEH,cACK,MAAA,CAAIjC,UAAWkC,EAAAA,KAAK,aAAclC,GAC/BY,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,WAAA,IACOtB,EACJf,MAAAA,EACA,cAAY,aACZsC,OAASC,GACLC,EAAAA,KAAC,OAAIvC,UAAU,gBAAgB,YAAWW,EACtCC,SAAA,CAAAuB,EAAAA,IAAC,QAAA,CACGlB,IAAAA,EACAuB,KAAK,SACLhC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI4B,KACAzB,IAERsB,EAAAA,IAAC,SAAA,CACGnC,UAAU,eACVwC,KAAK,SACLC,QAAStB,EAETP,SAAAuB,EAAAA,IAAC,OAAA,CAAKnC,UAAU,cAAcY,SAAA,mCAO7CA,IAGb,GAKJjB,EAAO+C,OAASC,EAAAA"}
+{"version":3,"file":"Search.cjs","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            disabled,\n            readOnly,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const clearInput = useCallback(() => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        }, []);\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div\n                            className=\"jkl-search__wrapper\"\n                            data-icon={icon}\n                            data-invalid={inputProps[\"aria-invalid\"]}\n                        >\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                                disabled={disabled}\n                                readOnly={readOnly}\n                            />\n                            <button\n                                className=\"jkl-search__clear-button\"\n                                type=\"button\"\n                                onClick={clearInput}\n                                disabled={disabled || readOnly}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                            {children}\n                        </div>\n                    )}\n                />\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","disabled","readOnly","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","clearInput","useCallback","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"4cAOaA,EAASC,EAAAA,WAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,KACGC,GACHlB,EAEEmB,EAAkB,CACpBjB,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGEU,EAAcC,EAAAA,OAAyB,MACvCC,EAAMC,EAAAA,UAAUH,EAAanB,GAE7BuB,EAAaC,EAAAA,YAAY,KAC3B,GAAIL,EAAYM,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKb,EAAYM,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7ChB,EAAYM,QAAQW,cAAcH,GAClCd,EAAYM,QAAQY,OACxB,GACD,IAEH,aACK,MAAA,CAAInC,UAAWoC,EAAAA,KAAK,aAAcpC,GAC/BY,SAAAyB,EAAAA,IAACC,EAAAA,WAAA,IACOtB,EACJjB,MAAAA,EACA,cAAY,aACZwC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACGzC,UAAU,sBACV,YAAWW,EACX,eAAc6B,EAAW,gBAEzB5B,SAAA,CAAAyB,EAAAA,IAAC,QAAA,CACGlB,IAAAA,EACAuB,KAAK,SACLlC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI8B,KACAzB,EACJF,SAAAA,EACAC,SAAAA,IAEJuB,EAAAA,IAAC,SAAA,CACGrC,UAAU,2BACV0C,KAAK,SACLC,QAAStB,EACTR,SAAUA,GAAYC,EAEtBF,SAAAyB,EAAAA,IAAC,OAAA,CAAKrC,UAAU,cAAcY,SAAA,8BAIjCA,QAMzB,GAKJjB,EAAOiD,OAASC,EAAAA"}

package/build/cjs/components/search/types.d.cts

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
-export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & InputHTMLAttributes<HTMLInputElement> & {
+export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled" | "readOnly"> & WithDisabled & WithReadOnly & {
     /**
      * Label til søket. Bruk {@link LabelProps} for å vise den.
      */

package/build/cjs/components/select/Option.d.cts

@@ -5,7 +5,7 @@ export type OptionProps = Omit<ComponentPropsWithoutRef<"button">, "aria-selecte
     selected?: boolean;
     selectRef: RefObject<HTMLSelectElement>;
 };
-export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "role" | "aria-selected" | "type" | "value"> & ValuePair & {
+export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "role" | "aria-selected" | "children" | "type" | "value"> & ValuePair & {
     multiple?: boolean;
     selected?: boolean;
     selectRef: RefObject<HTMLSelectElement>;

package/build/cjs/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type CSSProperties,\n    type ComponentPropsWithoutRef,\n    type FocusEvent,\n    type KeyboardEvent,\n    forwardRef,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n    DataTestAutoId &\n    Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\"> & {\n        width?: string;\n        items: (string | ValuePair)[];\n        placeholder?: string;\n    } & (\n        | {\n              searchable: true;\n              onSearch?: (searchTerm: string) => void;\n              filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n          }\n        | {\n              searchable?: false;\n              onSearch?: never;\n              filterFunction?: never;\n          }\n    );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    function Select(props, externalRef) {\n        const {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n            style,\n            className,\n            id: idProp,\n            items: rawItems,\n            multiple = false,\n            searchable = false,\n            onSearch,\n            filterFunction,\n            placeholder,\n            width,\n            value,\n            \"data-testautoid\": dataTestautoid,\n            \"data-size\": size,\n            ...elementProps\n        } = props;\n\n        const popoverRef = useRef<HTMLDivElement>(null);\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const unifiedRef = mergeRefs(externalRef, selectRef);\n\n        const baseId = `jkl-select-${useId()}`;\n        const selectId = idProp ?? baseId;\n        const popoverId = `${selectId}-popover`;\n\n        const [filter, setFilter] = useState(\"\");\n        const [selected, setSelected] = useState(() => new Set<string>());\n\n        useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n        const items = rawItems.map(getValuePair);\n        const filteredItems =\n            searchable && filter\n                ? items.filter((item) =>\n                      filterFunction\n                          ? filterFunction(item, filter)\n                          : item.label\n                                .toLowerCase()\n                                .includes(filter.toLowerCase()),\n                  )\n                : items;\n\n        const showPlaceholder =\n            selected.size === 0 ||\n            (selected.size === 1 && placeholder && selected.has(\"\"));\n        const placeholderText = placeholder || \"Ingen valgt\";\n        const buttonText = getButtonText(selected, items, placeholderText);\n\n        /**\n         * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n         * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n         */\n        // biome-ignore lint/correctness/useExhaustiveDependencies:\n        useLayoutEffect(() => {\n            const select = selectRef.current;\n            const popover = popoverRef.current;\n            if (!select) return;\n\n            const syncSelected = () => {\n                setSelected(\n                    new Set(Array.from(select.selectedOptions, (o) => o.value)),\n                );\n            };\n\n            const resetFilterOnClose = (event: ToggleEvent) => {\n                if (event.newState === \"closed\") setFilter(\"\");\n            };\n\n            syncSelected();\n            popover?.addEventListener(\"toggle\", resetFilterOnClose);\n            select.addEventListener(\"change\", syncSelected);\n\n            return () => {\n                select.removeEventListener(\"change\", syncSelected);\n                popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n            };\n        }, [multiple, rawItems]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n        useLayoutEffect(() => {\n            setSelected(\n                new Set(\n                    Array.from(\n                        selectRef.current?.selectedOptions ?? [],\n                        (o) => o.value,\n                    ),\n                ),\n            );\n        }, [value, elementProps.defaultValue]);\n\n        /**\n         * Sørger for at menyen kan åpnes med piltastene slik som i native select\n         */\n        const openWithArrows = (event: KeyboardEvent) => {\n            if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                event.preventDefault();\n                popoverRef.current?.showPopover?.();\n            }\n        };\n\n        /**\n         * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n         * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n         * oppdaterer sin state riktig.\n         */\n        const syncFocus = (event: FocusEvent) => {\n            const sel = selectRef.current;\n            if (!popoverRef.current?.contains(event.relatedTarget)) {\n                if (!sel) return;\n                if ([\"focus\", \"focusin\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n                } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n                }\n            }\n        };\n\n        return (\n            <InputGroup\n                id={selectId}\n                label={label}\n                errorLabel={errorLabel}\n                helpLabel={helpLabel}\n                labelProps={labelProps}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                style={style}\n                data-testautoid={dataTestautoid}\n                data-size={size}\n                className={clsx(\"jkl-select\", className)}\n                render={(inputProps) => (\n                    <>\n                        <button\n                            aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n                            className=\"jkl-select__button\"\n                            data-testid=\"jkl-select__button\"\n                            disabled={elementProps.disabled}\n                            type=\"button\"\n                            // @ts-ignore\n                            popovertarget={popoverId}\n                            style={{ \"--width\": width } as CSSProperties}\n                            onKeyDown={openWithArrows}\n                            onFocus={syncFocus}\n                            onBlur={syncFocus}\n                            {...inputProps}\n                        >\n                            {showPlaceholder ? placeholderText : buttonText}\n                            <ArrowDownIcon />\n                        </button>\n                        <Flex\n                            direction=\"column\"\n                            gap=\"16\"\n                            ref={popoverRef}\n                            // @ts-ignore\n                            popover=\"auto\"\n                            id={popoverId}\n                            className=\"jkl-select__popover\"\n                            aria-label={getReactNodeText(label)}\n                        >\n                            <Flex\n                                as=\"header\"\n                                alignItems=\"start\"\n                                justifyContent=\"space-between\"\n                                gap=\"8\"\n                            >\n                                <Title\n                                    size=\"m\"\n                                    as=\"h3\"\n                                    id={`${selectId}-title`}\n                                >\n                                    {label}\n                                </Title>\n                                <Button\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    icon={<CloseIcon />}\n                                    aria-label=\"Lukk\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                />\n                            </Flex>\n                            {searchable && (\n                                <Search\n                                    value={filter}\n                                    onChange={(e) => {\n                                        setFilter(e.target.value);\n                                        onSearch?.(e.target.value);\n                                    }}\n                                    ref={autofocus(searchable)}\n                                    autoComplete=\"off\"\n                                    labelProps={{ srOnly: true }}\n                                    label=\"Søk\"\n                                    placeholder=\"Søk...\"\n                                    width=\"100%\"\n                                    className=\"jkl-spacing-8--bottom\"\n                                />\n                            )}\n                            <Flex\n                                direction=\"column\"\n                                gap=\"8\"\n                                // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                role=\"listbox\"\n                                aria-multiselectable={multiple}\n                                aria-labelledby={`${selectId}-title`}\n                            >\n                                {filteredItems.map((pair, index) => (\n                                    <Option\n                                        {...pair}\n                                        key={pair.value}\n                                        selected={selected.has(pair.value)}\n                                        multiple={multiple}\n                                        selectRef={selectRef}\n                                        // @ts-ignore\n                                        popovertarget={\n                                            multiple ? undefined : popoverId\n                                        }\n                                        popovertargetaction={\n                                            multiple ? undefined : \"hide\"\n                                        }\n                                        ref={autofocus(() => {\n                                            if (searchable) return false;\n                                            if (showPlaceholder)\n                                                return index === 0;\n                                            return (\n                                                selected.has(pair.value) &&\n                                                filteredItems.findIndex((p) =>\n                                                    selected.has(p.value),\n                                                ) === index\n                                            );\n                                        })}\n                                    />\n                                ))}\n                                {searchable && !filteredItems.length && (\n                                    <Text short>Ingen treff</Text>\n                                )}\n                            </Flex>\n                            {multiple && (\n                                <Button\n                                    type=\"button\"\n                                    variant=\"primary\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                >\n                                    Bekreft\n                                </Button>\n                            )}\n                        </Flex>\n                        <select\n                            defaultValue={\n                                !multiple && value === undefined && placeholder\n                                    ? \"\"\n                                    : undefined\n                            }\n                            {...elementProps}\n                            tabIndex={-1}\n                            value={value}\n                            multiple={multiple}\n                            ref={unifiedRef}\n                            aria-labelledby={inputProps.id}\n                        >\n                            {!multiple && placeholder && (\n                                <option value=\"\" disabled>\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map((item) => (\n                                <option key={item.value} value={item.value}>\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                    </>\n                )}\n            />\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type CSSProperties,\n    type ComponentPropsWithoutRef,\n    type FocusEvent,\n    type KeyboardEvent,\n    forwardRef,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId, WithDisabled } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n    DataTestAutoId &\n    Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\" | \"disabled\"> &\n    WithDisabled & {\n        width?: string;\n        items: (string | ValuePair)[];\n        placeholder?: string;\n    } & (\n        | {\n              searchable: true;\n              onSearch?: (searchTerm: string) => void;\n              filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n          }\n        | {\n              searchable?: false;\n              onSearch?: never;\n              filterFunction?: never;\n          }\n    );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    function Select(props, externalRef) {\n        const {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n            style,\n            className,\n            id: idProp,\n            items: rawItems,\n            multiple = false,\n            searchable = false,\n            onSearch,\n            filterFunction,\n            placeholder,\n            width,\n            value,\n            \"data-testautoid\": dataTestautoid,\n            \"data-size\": size,\n            ...elementProps\n        } = props;\n\n        const popoverRef = useRef<HTMLDivElement>(null);\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const unifiedRef = mergeRefs(externalRef, selectRef);\n\n        const baseId = `jkl-select-${useId()}`;\n        const selectId = idProp ?? baseId;\n        const popoverId = `${selectId}-popover`;\n\n        const [filter, setFilter] = useState(\"\");\n        const [selected, setSelected] = useState(() => new Set<string>());\n\n        useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n        const items = rawItems.map(getValuePair);\n        const filteredItems =\n            searchable && filter\n                ? items.filter((item) =>\n                      filterFunction\n                          ? filterFunction(item, filter)\n                          : item.label\n                                .toLowerCase()\n                                .includes(filter.toLowerCase()),\n                  )\n                : items;\n\n        const showPlaceholder =\n            selected.size === 0 ||\n            (selected.size === 1 && placeholder && selected.has(\"\"));\n        const placeholderText = placeholder || \"Ingen valgt\";\n        const buttonText = getButtonText(selected, items, placeholderText);\n\n        /**\n         * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n         * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n         */\n        // biome-ignore lint/correctness/useExhaustiveDependencies:\n        useLayoutEffect(() => {\n            const select = selectRef.current;\n            const popover = popoverRef.current;\n            if (!select) return;\n\n            const syncSelected = () => {\n                setSelected(\n                    new Set(Array.from(select.selectedOptions, (o) => o.value)),\n                );\n            };\n\n            const resetFilterOnClose = (event: ToggleEvent) => {\n                if (event.newState === \"closed\") setFilter(\"\");\n            };\n\n            syncSelected();\n            popover?.addEventListener(\"toggle\", resetFilterOnClose);\n            select.addEventListener(\"change\", syncSelected);\n\n            return () => {\n                select.removeEventListener(\"change\", syncSelected);\n                popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n            };\n        }, [multiple, rawItems]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n        useLayoutEffect(() => {\n            setSelected(\n                new Set(\n                    Array.from(\n                        selectRef.current?.selectedOptions ?? [],\n                        (o) => o.value,\n                    ),\n                ),\n            );\n        }, [value, elementProps.defaultValue]);\n\n        /**\n         * Sørger for at menyen kan åpnes med piltastene slik som i native select\n         */\n        const openWithArrows = (event: KeyboardEvent) => {\n            if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                event.preventDefault();\n                popoverRef.current?.showPopover?.();\n            }\n        };\n\n        /**\n         * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n         * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n         * oppdaterer sin state riktig.\n         */\n        const syncFocus = (event: FocusEvent) => {\n            const sel = selectRef.current;\n            if (!popoverRef.current?.contains(event.relatedTarget)) {\n                if (!sel) return;\n                if ([\"focus\", \"focusin\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n                } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n                }\n            }\n        };\n\n        return (\n            <InputGroup\n                id={selectId}\n                label={label}\n                errorLabel={errorLabel}\n                helpLabel={helpLabel}\n                labelProps={labelProps}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                style={style}\n                data-testautoid={dataTestautoid}\n                data-size={size}\n                className={clsx(\"jkl-select\", className)}\n                render={(inputProps) => (\n                    <>\n                        <button\n                            aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n                            className=\"jkl-select__button\"\n                            data-testid=\"jkl-select__button\"\n                            disabled={elementProps.disabled}\n                            type=\"button\"\n                            // @ts-ignore\n                            popovertarget={popoverId}\n                            style={{ \"--width\": width } as CSSProperties}\n                            onKeyDown={openWithArrows}\n                            onFocus={syncFocus}\n                            onBlur={syncFocus}\n                            {...inputProps}\n                        >\n                            {showPlaceholder ? placeholderText : buttonText}\n                            <ArrowDownIcon />\n                        </button>\n                        <Flex\n                            direction=\"column\"\n                            gap=\"16\"\n                            ref={popoverRef}\n                            // @ts-ignore\n                            popover=\"auto\"\n                            id={popoverId}\n                            className=\"jkl-select__popover\"\n                            aria-label={getReactNodeText(label)}\n                        >\n                            <Flex\n                                as=\"header\"\n                                alignItems=\"start\"\n                                justifyContent=\"space-between\"\n                                gap=\"8\"\n                            >\n                                <Title\n                                    size=\"m\"\n                                    as=\"h3\"\n                                    id={`${selectId}-title`}\n                                >\n                                    {label}\n                                </Title>\n                                <Button\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    icon={<CloseIcon />}\n                                    aria-label=\"Lukk\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                />\n                            </Flex>\n                            {searchable && (\n                                <Search\n                                    value={filter}\n                                    onChange={(e) => {\n                                        setFilter(e.target.value);\n                                        onSearch?.(e.target.value);\n                                    }}\n                                    ref={autofocus(searchable)}\n                                    autoComplete=\"off\"\n                                    labelProps={{ srOnly: true }}\n                                    label=\"Søk\"\n                                    placeholder=\"Søk...\"\n                                    width=\"100%\"\n                                    className=\"jkl-spacing-8--bottom\"\n                                />\n                            )}\n                            <Flex\n                                direction=\"column\"\n                                gap=\"8\"\n                                // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                role=\"listbox\"\n                                aria-multiselectable={multiple}\n                                aria-labelledby={`${selectId}-title`}\n                            >\n                                {filteredItems.map((pair, index) => (\n                                    <Option\n                                        {...pair}\n                                        key={pair.value}\n                                        selected={selected.has(pair.value)}\n                                        multiple={multiple}\n                                        selectRef={selectRef}\n                                        // @ts-ignore\n                                        popovertarget={\n                                            multiple ? undefined : popoverId\n                                        }\n                                        popovertargetaction={\n                                            multiple ? undefined : \"hide\"\n                                        }\n                                        ref={autofocus(() => {\n                                            if (searchable) return false;\n                                            if (showPlaceholder)\n                                                return index === 0;\n                                            return (\n                                                selected.has(pair.value) &&\n                                                filteredItems.findIndex((p) =>\n                                                    selected.has(p.value),\n                                                ) === index\n                                            );\n                                        })}\n                                    />\n                                ))}\n                                {searchable && !filteredItems.length && (\n                                    <Text short>Ingen treff</Text>\n                                )}\n                            </Flex>\n                            {multiple && (\n                                <Button\n                                    type=\"button\"\n                                    variant=\"primary\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                >\n                                    Bekreft\n                                </Button>\n                            )}\n                        </Flex>\n                        <select\n                            defaultValue={\n                                !multiple && value === undefined && placeholder\n                                    ? \"\"\n                                    : undefined\n                            }\n                            {...elementProps}\n                            tabIndex={-1}\n                            value={value}\n                            multiple={multiple}\n                            ref={unifiedRef}\n                            aria-labelledby={inputProps.id}\n                        >\n                            {!multiple && placeholder && (\n                                <option value=\"\" disabled>\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map((item) => (\n                                <option key={item.value} value={item.value}>\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                    </>\n                )}\n            />\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}

package/build/cjs/components/select/Select.d.cts

@@ -1,8 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { DataTestAutoId } from '../../utilities/types.cjs';
+import { DataTestAutoId, WithDisabled } from '../../utilities/types.cjs';
 import { ValuePair } from '../../utilities/valuePair.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
-export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children"> & {
+export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children" | "disabled"> & WithDisabled & {
     width?: string;
     items: (string | ValuePair)[];
     placeholder?: string;

package/build/cjs/components/system-message/SystemMessage.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,maxContentWidth:l,paddingLeft:o,role:c="status",dismissed:d,dismissAction:g,children:u,...y})=>{const j=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:c,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,r,{"jkl-system-message--dismissed":d}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:l,paddingLeft:o},children:[s.jsx(i.MessageIcon,{variant:m||"info"}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const l=m("warning");l.displayName="WarningSystemMessage";const o=m("success");o.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=o,exports.SystemMessage=({id:m,className:n,maxContentWidth:r,paddingLeft:l,role:o="status",dismissed:c,variant:d="info",dismissAction:g,children:u,...y})=>{const j=t.useId(m||"jkl-system-message",{generateSuffix:!m});return s.jsx("div",{role:o,...y,id:j,className:e.clsx("jkl-system-message",`jkl-system-message--${d}`,n,{"jkl-system-message--dismissed":c}),children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:r,paddingLeft:l},children:[s.jsx(i.MessageIcon,{variant:d}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})},exports.WarningSystemMessage=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");require("react");const t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,maxContentWidth:d,paddingLeft:l,role:o="status",dismissed:c,dismissAction:g,children:u,...y})=>{const j=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{...y,role:o,id:j,className:e.clsx("jkl-system-message",r,{"jkl-system-message--dismissed":c}),"data-color":m,"data-testid":"jkl-system-message",children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:d,paddingLeft:l},children:[s.jsx(i.MessageIcon,{variant:m||"info"}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const d=m("warning");d.displayName="WarningSystemMessage";const l=m("success");l.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=l,exports.SystemMessage=({id:m,className:n,maxContentWidth:r,paddingLeft:d,role:l="status",dismissed:o,variant:c="info",dismissAction:g,children:u,...y})=>{const j=t.useId(m||"jkl-system-message",{generateSuffix:!m});return s.jsx("div",{...y,role:l,id:j,className:e.clsx("jkl-system-message",n,{"jkl-system-message--dismissed":o}),"data-color":c,"data-testid":"jkl-system-message",children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:r,paddingLeft:d},children:[s.jsx(i.MessageIcon,{variant:c}),s.jsx("span",{className:"jkl-system-message__message",children:u}),g?.handleDismiss&&s.jsx(a.DismissButton,{"aria-controls":j,className:"jkl-system-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})})},exports.WarningSystemMessage=d;
 //# sourceMappingURL=SystemMessage.cjs.map

package/build/cjs/components/system-message/SystemMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            role={role}\n            {...rest}\n            id={systemId}\n            className={clsx(\n                \"jkl-system-message\",\n                `jkl-system-message--${variant}`,\n                className,\n                {\n                    \"jkl-system-message--dismissed\": dismissed,\n                },\n            )}\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,GAuDA,MArDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAwDMK,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,qIAxEwB,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}
+{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                {...rest}\n                role={role}\n                id={systemId}\n                className={clsx(\"jkl-system-message\", className, {\n                    \"jkl-system-message--dismissed\": dismissed,\n                })}\n                data-color={variant}\n                data-testid=\"jkl-system-message\"\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            {...rest}\n            role={role}\n            id={systemId}\n            className={clsx(\"jkl-system-message\", className, {\n                \"jkl-system-message--dismissed\": dismissed,\n            })}\n            data-color={variant}\n            data-testid=\"jkl-system-message\"\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,GAoDA,MAlDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,IACOJ,EACJJ,KAAAA,EACAJ,GAAIS,EACJR,UAAWY,EAAAA,KAAK,qBAAsBZ,EAAW,CAC7C,gCAAiCI,IAErC,aAAYN,EACZ,cAAY,qBAEZQ,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAqDMK,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,qIArEwB,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,IACOJ,EACJJ,KAAAA,EACAJ,GAAIS,EACJR,UAAWY,EAAAA,KAAK,qBAAsBZ,EAAW,CAC7C,gCAAiCI,IAErC,aAAYN,EACZ,cAAY,qBAEZQ,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}

package/build/cjs/components/tag/Tag.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");function s(s){const a=({className:a,children:n,...c})=>r.jsx("span",{className:e.clsx("jkl-tag",{"jkl-tag--info":"info"===s,"jkl-tag--error":"error"===s,"jkl-tag--warning":"warning"===s,"jkl-tag--success":"success"===s},a),...c,children:n});return a.displayName=function(r){switch(r){case"info":return"InfoTag";case"error":return"ErrorTag";case"warning":return"WarningTag";case"success":return"SuccessTag";default:return"Tag"}}(s),a}require("react");const a=s("info"),n=s("error"),c=s("warning"),t=s("success");exports.ErrorTag=n,exports.InfoTag=a,exports.SuccessTag=t,exports.Tag=({className:s,variant:a="neutral",children:n,...c})=>r.jsx("span",{className:e.clsx("jkl-tag",`jkl-tag--${a}`,s),...c,children:n}),exports.WarningTag=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs");function a(a){const s=({className:s,children:c,...n})=>r.jsx("span",{...n,className:e.clsx("jkl-tag",s),"data-color":a,children:c});return s.displayName=function(r){switch(r){case"info":return"InfoTag";case"error":return"ErrorTag";case"warning":return"WarningTag";case"success":return"SuccessTag";default:return"Tag"}}(a),s}require("react");const s=a("info"),c=a("error"),n=a("warning"),t=a("success");exports.ErrorTag=c,exports.InfoTag=s,exports.SuccessTag=t,exports.Tag=({className:a,variant:s="neutral",children:c,...n})=>r.jsx("span",{...n,className:e.clsx("jkl-tag",a),"data-color":s,children:c}),exports.WarningTag=n;
 //# sourceMappingURL=Tag.cjs.map

package/build/cjs/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\nfunction getDisplayName(variant?: TagProps[\"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\n// Vil fjernes etterhvert :-)\nfunction tagFactory(variant?: TagProps[\"variant\"]) {\n    const Tag: FC<TagProps> = ({ className, children, ...rest }) => (\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            {...rest}\n        >\n            {children}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = ({\n    className,\n    variant = \"neutral\",\n    children,\n    ...rest\n}: TagProps) => (\n    <span\n        className={clsx(\"jkl-tag\", `jkl-tag--${variant}`, className)}\n        {...rest}\n    >\n        {children}\n    </span>\n);\n\n/**\n * @deprecated bruk {@link Tag} med variant=\"info\"\n */\nexport const InfoTag = tagFactory(\"info\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"error\"\n */\nexport const ErrorTag = tagFactory(\"error\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"warning\"\n */\nexport const WarningTag = tagFactory(\"warning\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"success\"\n */\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","children","rest","jsx","clsx","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"6JAoBA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EAAGC,UAAAA,EAAWC,SAAAA,KAAaC,KACjDC,EAAAA,IAAC,OAAA,CACGH,UAAWI,EAAAA,KACP,UACA,CACI,gBAA6B,SAAZN,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,MAEAE,EAEHD,SAAAA,IAGTF,OAAAA,EAAIM,YAlCR,SAAwBP,GACpB,OAAQA,GACJ,IAAK,OACD,MAAO,UACX,IAAK,QACD,MAAO,WACX,IAAK,UACD,MAAO,aACX,IAAK,UACD,MAAO,aACX,QACI,MAAO,MAEnB,CAqBsBQ,CAAeR,GAC1BC,CACX,kBAEO,MAiBMQ,EAAUV,EAAW,QAIrBW,EAAWX,EAAW,SAItBY,EAAaZ,EAAW,WAIxBa,EAAab,EAAW,iFA7BlB,EACfG,UAAAA,EACAF,QAAAA,EAAU,UACVG,SAAAA,KACGC,KAEHC,EAAAA,IAAC,OAAA,CACGH,UAAWI,EAAAA,KAAK,UAAW,YAAYN,IAAWE,MAC9CE,EAEHD,SAAAA"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\nfunction getDisplayName(variant?: TagProps[\"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\n// Vil fjernes etterhvert :-)\nfunction tagFactory(variant?: TagProps[\"variant\"]) {\n    const Tag: FC<TagProps> = ({ className, children, ...rest }) => (\n        <span\n            {...rest}\n            className={clsx(\"jkl-tag\", className)}\n            data-color={variant}\n        >\n            {children}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = ({\n    className,\n    variant = \"neutral\",\n    children,\n    ...rest\n}: TagProps) => (\n    <span {...rest} className={clsx(\"jkl-tag\", className)} data-color={variant}>\n        {children}\n    </span>\n);\n\n/**\n * @deprecated bruk {@link Tag} med variant=\"info\"\n */\nexport const InfoTag = tagFactory(\"info\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"error\"\n */\nexport const ErrorTag = tagFactory(\"error\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"warning\"\n */\nexport const WarningTag = tagFactory(\"warning\");\n/**\n * @deprecated bruk {@link Tag} med variant=\"success\"\n */\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","children","rest","jsx","clsx","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"6JAoBA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EAAGC,UAAAA,EAAWC,SAAAA,KAAaC,KACjDC,EAAAA,IAAC,OAAA,IACOD,EACJF,UAAWI,EAAAA,KAAK,UAAWJ,GAC3B,aAAYF,EAEXG,SAAAA,IAGTF,OAAAA,EAAIM,YA1BR,SAAwBP,GACpB,OAAQA,GACJ,IAAK,OACD,MAAO,UACX,IAAK,QACD,MAAO,WACX,IAAK,UACD,MAAO,aACX,IAAK,UACD,MAAO,aACX,QACI,MAAO,MAEnB,CAasBQ,CAAeR,GAC1BC,CACX,kBAEO,MAcMQ,EAAUV,EAAW,QAIrBW,EAAWX,EAAW,SAItBY,EAAaZ,EAAW,WAIxBa,EAAab,EAAW,iFA1BlB,EACfG,UAAAA,EACAF,QAAAA,EAAU,UACVG,SAAAA,KACGC,KAEHC,MAAC,OAAA,IAASD,EAAMF,UAAWI,OAAK,UAAWJ,GAAY,aAAYF,EAC9DG,SAAAA"}

package/build/cjs/components/text-area/types.d.cts

@@ -1,4 +1,5 @@
 import { TextareaHTMLAttributes } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
 export type CounterStrategy = "characters" | "bytes";
 export type Counter = {
@@ -32,7 +33,7 @@ export type Counter = {
      */
     hideProgress?: boolean;
 };
-export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> {
+export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "disabled" | "readOnly">, WithDisabled, WithReadOnly {
     /**
      * Viser en teller i tekstfeltet når det har fokus.
      */

package/build/cjs/components/text-input/types.d.cts

@@ -1,7 +1,8 @@
 import { HTMLProps, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.cjs';
 import { IconProps } from '../icon/types.cjs';
 import { InputGroupProps } from '../input-group/types.cjs';
-export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength"> {
+export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength" | "disabled" | "readOnly">, WithDisabled, WithReadOnly {
     /**
      * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
      * @default "left"
@@ -37,7 +38,7 @@ export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseT
     inline?: boolean;
     inputClassName?: string;
 }
-interface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, "disabled"> {
+interface ActionBaseProps extends Omit<HTMLProps<HTMLButtonElement>, "disabled"> {
     icon: React.ReactElement<IconProps>;
     label: string;
     buttonRef?: React.Ref<HTMLButtonElement>;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../flex/Flex.cjs"),i=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=s=>{switch(s){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(m,j,d),[_,g]=o.useState(!1),I="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,p="string"==typeof m.toast.content?void 0:m.toast.content.title,v=null==m.toast.timer?.timerId,{prefersReducedMotion:q}=n.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{g(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{q&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[q,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:e.clsx("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},u),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(c.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(c.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[p&&t.jsx("p",{className:"jkl-toast__title",children:_&&p}),t.jsx("p",{className:"jkl-toast__message",children:_&&I}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(i.IconButton,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("@react-aria/toast"),s=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../flex/Flex.cjs"),i=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=e=>{switch(e){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=e.useToast(m,j,d),[_,I]=o.useState(!1),g="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,p="string"==typeof m.toast.content?void 0:m.toast.content.title,q=null==m.toast.timer?.timerId,{prefersReducedMotion:v}=n.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{I(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{v&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[v,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:s.clsx("jkl-toast",u),"data-color":m.toast.variant,"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:q,onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(c.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(c.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[p&&t.jsx("p",{className:"jkl-toast__title",children:_&&p}),t.jsx("p",{className:"jkl-toast__message",children:_&&g}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(i.IconButton,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
 //# sourceMappingURL=Toast.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.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 type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface 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    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\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        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\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            {props.toast.timeout ? (\n                <Countdown\n                    className=\"jkl-toast__progress\"\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            <Flex alignItems=\"start\" gap=\"xs\">\n                {getIcon(props.toast.variant)}\n                <Flex\n                    {...titleProps}\n                    direction=\"column\"\n                    gap=\"xs\"\n                    className=\"jkl-toast__content\"\n                    aria-live=\"assertive\"\n                >\n                    {title && (\n                        <p className=\"jkl-toast__title\">\n                            {announceReady && title}\n                        </p>\n                    )}\n                    <p className=\"jkl-toast__message\">\n                        {announceReady && content}\n                    </p>\n                    {props.toast.action && (\n                        <div className=\"jkl-toast__action\">\n                            <Button\n                                variant=\"secondary\"\n                                onClick={props.toast.action.onClick}\n                            >\n                                {props.toast.action.label}\n                            </Button>\n                        </div>\n                    )}\n                </Flex>\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            </Flex>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAW,cACX9C,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.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 type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface 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    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\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        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\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(\"jkl-toast\", className)}\n            data-color={props.toast.variant}\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            {props.toast.timeout ? (\n                <Countdown\n                    className=\"jkl-toast__progress\"\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            <Flex alignItems=\"start\" gap=\"xs\">\n                {getIcon(props.toast.variant)}\n                <Flex\n                    {...titleProps}\n                    direction=\"column\"\n                    gap=\"xs\"\n                    className=\"jkl-toast__content\"\n                    aria-live=\"assertive\"\n                >\n                    {title && (\n                        <p className=\"jkl-toast__title\">\n                            {announceReady && title}\n                        </p>\n                    )}\n                    <p className=\"jkl-toast__message\">\n                        {announceReady && content}\n                    </p>\n                    {props.toast.action && (\n                        <div className=\"jkl-toast__action\">\n                            <Button\n                                variant=\"secondary\"\n                                onClick={props.toast.action.onClick}\n                            >\n                                {props.toast.action.label}\n                            </Button>\n                        </div>\n                    )}\n                </Flex>\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            </Flex>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KAAK,YAAa9B,GAC7B,aAAYK,EAAMU,MAAMgB,QACxB,iBAAgB1B,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAW,cACX9C,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { ToggleChangeHandler } from './types.cjs';
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onChange"> & import('../../utilities/types.js').WithDisabled & {
     onChange?: ToggleChangeHandler<HTMLButtonElement>;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.cjs';
-import { WithChildren } from '../../utilities/types.cjs';
+import { WithChildren, WithDisabled } from '../../utilities/types.cjs';
 export interface ToggleSliderProps extends WithChildren {
     labels: [string, string];
     onToggle: (value: string) => void;
@@ -9,7 +9,7 @@ export interface ToggleSliderProps extends WithChildren {
     hideLegend?: boolean;
 }
 export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
-export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "disabled"> & WithDisabled & {
     /**
      * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
      * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.

package/build/cjs/hooks/index.cjs

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

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

@@ -14,4 +14,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
 export { useId } from './useId/useId.cjs';
 export { useKeyListener } from './useKeyListener/useKeyListener.cjs';
 export { useListNavigation } from './useListNavigation/useListNavigation.cjs';
+export { useMergeRefs } from './useMergeRefs/useMergeRefs.cjs';
 export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.cjs';

package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../utilities/mergeRefs.cjs");exports.useMergeRefs=function(...t){return e.useMemo(()=>r.mergeRefs(...t),t)};
+//# sourceMappingURL=useMergeRefs.cjs.map

package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergeRefs.cjs","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n    type ForwardedRef,\n    type MutableRefObject,\n    type RefCallback,\n    useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n    ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n    return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["refs","useMemo","mergeRefs"],"mappings":"yKAcO,YACAA,GAGH,OAAOC,EAAAA,QAAQ,IAAMC,EAAAA,aAAaF,GAAOA,EAC7C"}

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

@@ -0,0 +1,8 @@
+import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
+/**
+ * Slår sammen flere refs til én callback som bare endres når en av refsene endres.
+ * @param refs Liste over refs du vil slå sammen
+ * @returns En `RefCallback` du kan sende videre til en komponent/element
+ * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
+ */
+export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;