@fremtind/jokul 5.0.0 → 5.0.1

package/build/cjs/utilities/types.d.cts

@@ -3,10 +3,20 @@ import { default as tokens } from '../tokens.cjs';
 export interface DataTestAutoId {
     "data-testautoid"?: string;
 }
-export type ColorScheme = "light" | "dark";
-export type Size = "small" | "medium" | "large";
 export declare const BRANDS: readonly [];
 export type Brand = (typeof BRANDS)[number];
+export type Size = "small" | "medium" | "large";
+export type ColorScheme = "light" | "dark";
+/**
+ * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene
+ * @example type Props = { myProp: string } & JokulModes;
+ * @example interface Props extends JokulModes { myProp: string };
+ */
+export interface JokulModes {
+    "data-brand"?: Brand;
+    "data-size"?: Size;
+    "data-theme"?: ColorScheme;
+}
 export type Easing = keyof typeof tokens.motion.easing;
 export type Timing = keyof typeof tokens.motion.timing;
 /**

package/build/es/components/checkbox-panel/CheckboxPanel.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { CheckboxPanelProps } from './types.js';
-export declare const CheckboxPanel: (props: CheckboxPanelProps) => React.JSX.Element;
+export declare const CheckboxPanel: React.ForwardRefExoticComponent<CheckboxPanelProps & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/checkbox-panel/CheckboxPanel.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import"react";import{InputPanel as e}from"../input-panel/InputPanel.js";const a=a=>t(e,{...a,type:"checkbox"});export{a as CheckboxPanel};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{InputPanel as t}from"../input-panel/InputPanel.js";const n=e(function(e,n){return r(t,{...e,ref:n,type:"checkbox"})});export{n as CheckboxPanel};
 //# sourceMappingURL=CheckboxPanel.js.map

package/build/es/components/checkbox-panel/CheckboxPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxPanel.js","sources":["../../../../src/components/checkbox-panel/CheckboxPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { CheckboxPanelProps } from \"./types.js\";\n\nexport const CheckboxPanel = (props: CheckboxPanelProps) => (\n    <InputPanel {...props} type=\"checkbox\" />\n);\n"],"names":["CheckboxPanel","props","jsx","InputPanel","type"],"mappings":"gHAIO,MAAMA,EAAiBC,GAC1BC,EAACC,MAAeF,EAAOG,KAAK"}
+{"version":3,"file":"CheckboxPanel.js","sources":["../../../../src/components/checkbox-panel/CheckboxPanel.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { CheckboxPanelProps } from \"./types.js\";\n\nexport const CheckboxPanel = forwardRef<HTMLInputElement, CheckboxPanelProps>(\n    function CheckboxPanel(props, ref) {\n        return <InputPanel {...props} ref={ref} type=\"checkbox\" />;\n    },\n);\n"],"names":["CheckboxPanel","forwardRef","props","ref","InputPanel","type"],"mappings":"qIAIO,MAAMA,EAAgBC,EACzB,SAAuBC,EAAOC,GAC1B,SAAQC,EAAA,IAAeF,EAAOC,IAAAA,EAAUE,KAAK,YACjD"}

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

@@ -1,3 +1,4 @@
 export { ExpandablePanel } from './ExpandablePanel.js';
 export { Expander } from './Expander.js';
+export { Accordion } from './Accordion.js';
 export type { ExpandablePanelProps, ExpanderProps, AccordionProps, } from './types.js';

package/build/es/components/expander/index.js

@@ -1,2 +1,2 @@
-import{ExpandablePanel as a}from"./ExpandablePanel.js";import{Expander as e}from"./Expander.js";export{a as ExpandablePanel,e as Expander};
+import{ExpandablePanel as a}from"./ExpandablePanel.js";import{Expander as o}from"./Expander.js";import{Accordion as r}from"./Accordion.js";export{r as Accordion,a as ExpandablePanel,o as Expander};
 //# sourceMappingURL=index.js.map

package/build/es/components/input-panel/InputPanel.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & {
+export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & import('../../utilities/types.js').JokulModes & {
     label: string;
     type: "radio" | "checkbox";
     amount?: string;

package/build/es/components/input-panel/InputPanel.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as a}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as e}from"react";import{Checkbox as r}from"../checkbox/Checkbox.js";import{RadioButton as i}from"../radio-button/RadioButton.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";const t=e(function({className:e,description:t,type:s,label:c,amount:l,value:p=c,name:m="Panelvalg",children:d,extraLabel:u,alwaysOpen:j=!1,...h},x){return o("div",{className:n("jkl-input-panel",`jkl-${s}-panel`,e),ref:x,"data-always-open":j,children:[o("div",{className:"jkl-input-panel__header",children:["checkbox"===s&&a(r,{value:p?.toString(),name:m,...h,children:c}),"radio"===s&&a(i,{value:p?.toString(),name:m,...h,children:c}),(l||u)&&a("span",{className:"jkl-input-panel__header__amount",children:l||u})]}),(t||d)&&a("div",{className:"jkl-input-panel__description",children:t||d})]})});export{t as InputPanel};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import{Checkbox as t}from"../checkbox/Checkbox.js";import{RadioButton as i}from"../radio-button/RadioButton.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";const r=n(function({className:n,description:r,type:s,label:c,amount:l,value:d=c,name:m="Panelvalg",children:p,extraLabel:u,alwaysOpen:j=!1,"data-size":h,"data-theme":x,...f},k){return a("div",{className:o("jkl-input-panel",`jkl-${s}-panel`,n),"data-always-open":j,"data-size":h,"data-theme":x,children:[a("div",{className:"jkl-input-panel__header",children:["checkbox"===s&&e(t,{value:d?.toString(),name:m,ref:k,...f,children:c}),"radio"===s&&e(i,{value:d?.toString(),name:m,ref:k,...f,children:c}),(l||u)&&e("span",{className:"jkl-input-panel__header__amount",children:l||u})]}),(r||p)&&e("div",{className:"jkl-input-panel__description",children:r||p})]})});export{r as InputPanel};
 //# sourceMappingURL=InputPanel.js.map

package/build/es/components/input-panel/InputPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPanel.js","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            ref={ref}\n            data-always-open={alwaysOpen}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox value={value?.toString()} name={name} {...rest}>\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"2dAMO,MAAMA,EAAaC,EAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,KACVC,GAEPC,GAEA,OACIC,EAAC,MAAA,CACGZ,UAAWa,EAAK,kBAAmB,OAAOX,UAAcF,GACxDW,IAAAA,EACA,mBAAkBF,EAElBF,SAAA,CAAAK,EAAC,MAAA,CAAIZ,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGY,EAACC,EAAA,CAASV,MAAOA,GAAOW,WAAYV,KAAAA,KAAgBI,EAC/CH,SAAAJ,IAGC,UAATD,GACGY,EAACG,EAAA,CACGZ,MAAOA,GAAOW,WACdV,KAAAA,KACII,EAEHH,SAAAJ,KAGPC,GAAUI,IACRM,EAAC,QAAKd,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbO,EAAC,OAAId,UAAU,+BACVO,YAAeA,MAKpC"}
+{"version":3,"file":"InputPanel.js","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-always-open={alwaysOpen}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"2dAMO,MAAMA,EAAaC,EAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,EACb,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAC,MAAA,CACGd,UAAWe,EAAK,kBAAmB,OAAOb,UAAcF,GACxD,mBAAkBS,EAClB,YAAWC,EACX,aAAYC,EAEZJ,SAAA,CAAAO,EAAC,MAAA,CAAId,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGc,EAACC,EAAA,CACGZ,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,IAGC,UAATD,GACGc,EAACG,EAAA,CACGd,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,KAGPC,GAAUI,IACRQ,EAAC,QAAKhB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbS,EAAC,OAAIhB,UAAU,+BACVO,YAAeA,MAKpC"}

package/build/es/components/input-panel/types.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
+import { JokulModes } from '../../utilities/types.js';
+export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & JokulModes & {
     label: string;
     type: "radio" | "checkbox";
     /**

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAUA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAC,MAAA,CAAIzB,UAAU,uBAAuB,aAAW,QAC5Cc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,aAAW,QACX,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAC,MAAA,CAAIzB,UAAU,uBAAuB,aAAW,QAC5Cc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,aAAW,QACX,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}
+{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAUA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAC,MAAA,CAAIzB,UAAU,uBAAuB,aAAW,QAC5Cc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAC,MAAA,CAAIzB,UAAU,uBAAuB,aAAW,QAC5Cc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}

package/build/es/components/radio-panel/RadioPanel.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{InputPanel as a}from"../input-panel/InputPanel.js";const e=t(function({...t},e){return r(a,{...t,type:"radio",ref:e})});export{e as RadioPanel};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{InputPanel as a}from"../input-panel/InputPanel.js";const e=t(function(t,e){return r(a,{...t,type:"radio",ref:e})});export{e as RadioPanel};
 //# sourceMappingURL=RadioPanel.js.map

package/build/es/components/radio-panel/RadioPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { type ForwardedRef, forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n    { ...rest }: RadioPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return <InputPanel {...rest} type=\"radio\" ref={ref} />;\n});\n"],"names":["RadioPanel","forwardRef","rest","ref","InputPanel","type"],"mappings":"qIAIO,MAAMA,EAAaC,EAAW,aAC5BC,GACLC,GAEA,SAAQC,EAAA,IAAeF,EAAMG,KAAK,QAAQF,IAAAA,GAC9C"}
+{"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef<HTMLInputElement, RadioPanelProps>(\n    function RadioPanel(props, ref) {\n        return <InputPanel {...props} type=\"radio\" ref={ref} />;\n    },\n);\n"],"names":["RadioPanel","forwardRef","props","ref","InputPanel","type"],"mappings":"qIAIO,MAAMA,EAAaC,EACtB,SAAoBC,EAAOC,GACvB,SAAQC,EAAA,IAAeF,EAAOG,KAAK,QAAQF,IAAAA,GAC/C"}

package/build/es/components/select/Select.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as a,useState as l,useCallback as s,useMemo as i,useRef as c,useEffect as u}from"react";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as d}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as v}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as m}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as f}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as b}from"../input-group/InputGroup.js";import{Popover as h}from"../popover/Popover.js";import{focusSelected as g,toLower as k}from"./select-utils.js";const y=()=>{},w=a((a,w)=>{const{id:j,name:_,items:P,value:D,label:E,labelProps:$,onChange:L,onBlur:N,onFocus:x,className:C,helpLabel:F,errorLabel:A,invalid:S,searchable:V=!1,inline:T=!1,defaultPrompt:I="Velg",width:O,maxShownOptions:K=5,style:B,tooltip:M,...q}=a,z=p(j||"jkl-select",{generateSuffix:!j}),G=`${z}_label`,R=`${z}_button`,U=`${z}_search-input`,W=`--${z.replace(/[^a-zA-Z0-9-]/g,"-")}-anchor`,[Z,H]=l(!1),J=s(()=>{H(e=>!e)},[]),[Q,X]=l("bottom"),Y=s(e=>{X(e.startsWith("top")?"top":"bottom")},[]),ee=!!V,te=ee&&Z,[re,oe]=l(""),ne=s(e=>!!e.label.toLowerCase().includes(re.toLowerCase())||"function"==typeof V&&V(re,e),[V,re]),ae=i(()=>P.map(m).map(e=>{const t=!ee||""===re||ne(e);return{...e,visible:t}}),[P,ee,re,ne]),le=i(()=>!(typeof D>"u")&&P.some(e=>"string"==typeof e?e===D:e.value===D),[D,P]),[se,ie]=l(le&&void 0!==D?D:""),ce=""!==se,ue=i(()=>ae.find(e=>e.value===se)?.label||I,[ae,se,I]),pe=c(null),de=s(e=>{pe.current=e,w&&("function"==typeof w?w(e):w.current=e),e&&ie(e.value)},[w]),ve=v(D);u(()=>{D!==ve&&ie(typeof D>"u"||!le?"":D)},[D,ve,le]);const me=s(e=>{const t=e.value;oe(""),ie(t),J(),ke.current?.focus()},[J]),fe=v(se);u(()=>{typeof fe>"u"||fe===se||se===D||(L&&L({type:"change",target:{name:_,value:se}}),pe.current&&pe.current.dispatchEvent(new Event("change",{bubbles:!0})))},[L,_,D,se,fe]);const be=c(null),he=c(!1),ge=c(null),ke=c(null),ye=c(null),[we,je]=l(null),_e=c(ee),Pe=c(se);u(()=>{_e.current=ee,Pe.current=se});const De=s(e=>{ye.current=e,je(e),e&&!_e.current&&requestAnimationFrame(()=>{ye.current===e&&g(e,Pe.current)})},[]),Ee=v(Z);u(()=>{Z!==Ee&&(Z&&ee?ge.current?.focus():!Z&&he.current&&ke.current&&ke.current.focus())},[Z,Ee,ee]),d({element:we});const $e=s(()=>{ee&&oe(""),N&&(N({type:"blur",target:{name:_,value:se}}),pe.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),he.current=!1,H(!1)},[N,ee,_,se]),Le=s(e=>{const t=be.current,r=ye.current;t?.contains(e.relatedTarget)||r?.contains(e.relatedTarget)||$e()},[$e]),Ne=s(()=>{he.current||(x&&x({type:"change",target:{name:_,value:se}}),he.current=!0)},[x,se,_]),xe=s(e=>{e.target.focus({preventScroll:!0})},[]);u(()=>{const e=pe.current;if(!e)return;const t=()=>{te?ge.current?.focus():ke.current?.focus()},r=e=>{const t=e.relatedTarget,r=be.current?.contains(t),o=ye.current?.contains(t);(r||o)&&e.preventDefault()};return e.addEventListener("focus",t),e.addEventListener("blur",r),()=>{e.removeEventListener("focus",t),e.removeEventListener("blur",r)}},[te]);const Ce=s(e=>{"ArrowDown"!==e.key&&" "!==e.key||Z?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),H(!1)):(e.preventDefault(),e.stopPropagation(),H(!0))},[Z]),Fe=s(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=ye.current;t&&g(t,ee?void 0:se)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),H(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&Z&&(e.preventDefault(),e.stopPropagation());else{const t=ye.current;t&&(e.preventDefault(),e.stopPropagation(),g(t,se))}},[se,ee,Z]),Ae=s(e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ge.current?ge.current.focus():ke.current&&(ie(e.currentTarget.value),H(!1),ke.current.focus());else if("ArrowUp"===e.key&&ye.current&&ge.current){const t=ye.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&ge.current&&ge.current.focus()}},[]);return u(()=>{const e=e=>{"Escape"===e.key&&Z&&H(!1)};return typeof window<"u"&&Z&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}},[Z]),e(t,{children:[e("select",{name:_,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:de,value:se,onChange:y,children:[r("option",{value:""})," ",ae.map(e=>r("option",{hidden:!e.visible,value:e.value,children:e.label},`${z}-opt-${e.value}`))]}),r(b,{ref:be,"data-testid":"jkl-select",className:o("jkl-select",C,{"jkl-select--inline":T,"jkl-select--open":Z&&ae.some(e=>e.visible),"jkl-select--no-value":!ce,"jkl-select--invalid":!!A||S}),tooltip:M&&n.isValidElement(M)?n.cloneElement(M,{triggerProps:{...M.props.triggerProps,onFocus:e=>{M.props.triggerProps?.onFocus?.(e),$e()}}}):null,...q,id:ee?U:R,style:B,label:E,labelProps:{id:G,srOnly:T,...$,htmlFor:ee?U:R},helpLabel:F,errorLabel:A,render:({"aria-invalid":t,...n})=>{const a=Z&&ae.some(e=>e.visible);return e(h,{open:a,placement:"bottom-start",offset:0,modal:!1,onPlacementChange:Y,clickOptions:{enabled:!1},dismissOptions:{enabled:!1},roleOptions:{enabled:!1},children:[r(h.Trigger,{asChild:!0,children:e("div",{className:"jkl-select__outer-wrapper","data-popover-placement":Q,style:{width:O,anchorName:W},children:[ee&&r("input",{...n,"aria-invalid":t,id:U,hidden:!te,ref:ge,placeholder:"Søk",value:re,onChange:e=>oe(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":a&&ce?`${z}__${k(se)}`:void 0,"aria-controls":a?z:void 0,"aria-expanded":a,role:"combobox",onKeyDown:Fe,onBlur:Le,onFocus:Ne,onClick:e=>{e.stopPropagation()}}),r("button",{"aria-invalid":t,...n,id:R,ref:ke,hidden:te,type:"button",name:`${_}-btn`,className:o("jkl-select__button",{"jkl-select__button--active-value":!!se}),"data-testid":"jkl-select__button","aria-label":`${ue||"Velg"},${E}`,"aria-expanded":a,"aria-controls":a?z:void 0,onBlur:Le,onFocus:Ne,onKeyDown:Ce,onClick:J,onMouseDown:e=>{e.preventDefault(),ke.current?.focus()},children:ue}),r(f,{variant:"medium",pointingDown:!a,className:"jkl-select__arrow"})]})}),r(h.Content,{initialFocus:-1,returnFocus:!1,className:"jkl-select__popover",style:{width:`anchor-size(${W} width)`},children:r("div",{id:z,ref:De,role:"listbox",className:"jkl-select__options-menu","data-popover-placement":Q,"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",style:{"--jkl-select-max-shown-options":K},children:ae.map((t,o)=>t.visible?e("button",{hidden:!t.visible,type:"button",id:`${z}__${k(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===se,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${o}`,onBlur:Le,onFocus:Ne,onKeyDown:Ae,onClick:e=>{e.preventDefault(),me(t)},onMouseOver:xe,children:[t.label,t.description?r("span",{className:"jkl-select__option-description",children:t.description}):null]},`${z}-${t.value}`):null)})})]})}})]})});w.displayName="Select";export{w as Select};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import n,{forwardRef as a,useState as s,useCallback as l,useMemo as i,useRef as c,useEffect as u}from"react";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as d}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as v}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as m}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as f}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as b}from"../input-group/InputGroup.js";import{Popover as h}from"../popover/Popover.js";import{focusSelected as k,toLower as g}from"./select-utils.js";const y=()=>{},_=a((a,_)=>{const{id:j,name:w,items:P,value:$,label:x,labelProps:D,onChange:E,onBlur:L,onFocus:N,className:C,helpLabel:F,errorLabel:A,invalid:S,searchable:V=!1,inline:T=!1,defaultPrompt:I="Velg",width:O,maxShownOptions:K=5,style:B,tooltip:M,"data-testautoid":q,...z}=a,G=p(j||"jkl-select",{generateSuffix:!j}),R=`${G}_label`,U=`${G}_button`,W=`${G}_search-input`,Z=`--${G.replace(/[^a-zA-Z0-9-]/g,"-")}-anchor`,[H,J]=s(!1),Q=l(()=>{J(e=>!e)},[]),[X,Y]=s("bottom"),ee=l(e=>{Y(e.startsWith("top")?"top":"bottom")},[]),te=!!V,oe=te&&H,[re,ne]=s(""),ae=l(e=>!!e.label.toLowerCase().includes(re.toLowerCase())||"function"==typeof V&&V(re,e),[V,re]),se=i(()=>P.map(m).map(e=>{const t=!te||""===re||ae(e);return{...e,visible:t}}),[P,te,re,ae]),le=i(()=>!(typeof $>"u")&&P.some(e=>"string"==typeof e?e===$:e.value===$),[$,P]),[ie,ce]=s(le&&void 0!==$?$:""),ue=""!==ie,pe=i(()=>se.find(e=>e.value===ie)?.label||I,[se,ie,I]),de=c(null),ve=l(e=>{de.current=e,_&&("function"==typeof _?_(e):_.current=e),e&&ce(e.value)},[_]),me=v($);u(()=>{$!==me&&ce(typeof $>"u"||!le?"":$)},[$,me,le]);const fe=l(e=>{const t=e.value;ne(""),ce(t),Q(),ye.current?.focus()},[Q]),be=v(ie);u(()=>{typeof be>"u"||be===ie||ie===$||(E&&E({type:"change",target:{name:w,value:ie}}),de.current&&de.current.dispatchEvent(new Event("change",{bubbles:!0})))},[E,w,$,ie,be]);const he=c(null),ke=c(!1),ge=c(null),ye=c(null),_e=c(null),[je,we]=s(null),Pe=c(te),$e=c(ie);u(()=>{Pe.current=te,$e.current=ie});const xe=l(e=>{_e.current=e,we(e),e&&!Pe.current&&requestAnimationFrame(()=>{_e.current===e&&k(e,$e.current)})},[]),De=v(H);u(()=>{H!==De&&(H&&te?ge.current?.focus():!H&&ke.current&&ye.current&&ye.current.focus())},[H,De,te]),d({element:je});const Ee=l(()=>{te&&ne(""),L&&(L({type:"blur",target:{name:w,value:ie}}),de.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),ke.current=!1,J(!1)},[L,te,w,ie]),Le=l(e=>{const t=he.current,o=_e.current;t?.contains(e.relatedTarget)||o?.contains(e.relatedTarget)||Ee()},[Ee]),Ne=l(()=>{ke.current||(N&&N({type:"change",target:{name:w,value:ie}}),ke.current=!0)},[N,ie,w]),Ce=l(e=>{e.target.focus({preventScroll:!0})},[]);u(()=>{const e=de.current;if(!e)return;const t=()=>{oe?ge.current?.focus():ye.current?.focus()},o=e=>{const t=e.relatedTarget,o=he.current?.contains(t),r=_e.current?.contains(t);(o||r)&&e.preventDefault()};return e.addEventListener("focus",t),e.addEventListener("blur",o),()=>{e.removeEventListener("focus",t),e.removeEventListener("blur",o)}},[oe]);const Fe=l(e=>{"ArrowDown"!==e.key&&" "!==e.key||H?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),J(!1)):(e.preventDefault(),e.stopPropagation(),J(!0))},[H]),Ae=l(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=_e.current;t&&k(t,te?void 0:ie)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),J(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&H&&(e.preventDefault(),e.stopPropagation());else{const t=_e.current;t&&(e.preventDefault(),e.stopPropagation(),k(t,ie))}},[ie,te,H]),Se=l(e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ge.current?ge.current.focus():ye.current&&(ce(e.currentTarget.value),J(!1),ye.current.focus());else if("ArrowUp"===e.key&&_e.current&&ge.current){const t=_e.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&ge.current&&ge.current.focus()}},[]);return u(()=>{const e=e=>{"Escape"===e.key&&H&&J(!1)};return typeof window<"u"&&H&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}},[H]),e(t,{children:[e("select",{name:w,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ve,value:ie,onChange:y,children:[o("option",{value:""})," ",se.map(e=>o("option",{hidden:!e.visible,value:e.value,children:e.label},`${G}-opt-${e.value}`))]}),o(b,{ref:he,"data-testid":"jkl-select",className:r("jkl-select",C,{"jkl-select--inline":T,"jkl-select--open":H&&se.some(e=>e.visible),"jkl-select--no-value":!ue,"jkl-select--invalid":!!A||S}),"data-testautoid":q,tooltip:M&&n.isValidElement(M)?n.cloneElement(M,{triggerProps:{...M.props.triggerProps,onFocus:e=>{M.props.triggerProps?.onFocus?.(e),Ee()}}}):null,...z,id:te?W:U,style:B,label:x,labelProps:{id:R,srOnly:T,...D,htmlFor:te?W:U},helpLabel:F,errorLabel:A,render:({"aria-invalid":t,...n})=>{const a=H&&se.some(e=>e.visible);return e(h,{open:a,placement:"bottom-start",offset:0,modal:!1,onPlacementChange:ee,clickOptions:{enabled:!1},dismissOptions:{enabled:!1},roleOptions:{enabled:!1},children:[o(h.Trigger,{asChild:!0,children:e("div",{className:"jkl-select__outer-wrapper","data-popover-placement":X,style:{width:O,anchorName:Z},children:[te&&o("input",{...n,"aria-invalid":t,id:W,hidden:!oe,ref:ge,placeholder:"Søk",value:re,onChange:e=>ne(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":a&&ue?`${G}__${g(ie)}`:void 0,"aria-controls":a?G:void 0,"aria-expanded":a,role:"combobox",onKeyDown:Ae,onBlur:Le,onFocus:Ne,onClick:e=>{e.stopPropagation()}}),o("button",{"aria-invalid":t,...n,id:U,ref:ye,hidden:oe,type:"button",name:`${w}-btn`,className:r("jkl-select__button",{"jkl-select__button--active-value":!!ie}),"data-testid":"jkl-select__button","aria-label":`${pe||"Velg"},${x}`,"aria-expanded":a,"aria-controls":a?G:void 0,onBlur:Le,onFocus:Ne,onKeyDown:Fe,onClick:Q,onMouseDown:e=>{e.preventDefault(),ye.current?.focus()},children:pe}),o(f,{variant:"medium",pointingDown:!a,className:"jkl-select__arrow"})]})}),o(h.Content,{initialFocus:-1,returnFocus:!1,className:"jkl-select__popover",style:{width:`anchor-size(${Z} width)`},children:o("div",{id:G,ref:xe,role:"listbox",className:"jkl-select__options-menu","data-popover-placement":X,"aria-labelledby":R,tabIndex:-1,"data-testid":"jkl-select__listbox","data-testautoid":q?`${q}__listbox`:"jkl-select__listbox","data-focus":"controlled",style:{"--jkl-select-max-shown-options":K},children:se.map((t,r)=>t.visible?e("button",{hidden:!t.visible,type:"button",id:`${G}__${g(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===ie,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:Le,onFocus:Ne,onKeyDown:Se,onClick:e=>{e.preventDefault(),fe(t)},onMouseOver:Ce,children:[t.label,t.description?o("span",{className:"jkl-select__option-description",children:t.description}):null]},`${G}-${t.value}`):null)})})]})}})]})});_.displayName="Select";export{_ as Select};
 //# sourceMappingURL=Select.js.map

package/build/es/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n        // Unik anchor-name som CSS anchor positioning bruker for å la\n        // dropdown-listen matche bredden til triggeren.\n        const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [selectedValue, isSearchable, dropdownIsShown],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={\n                                            {\n                                                width,\n                                                anchorName,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOnKeyDown}\n                                            onClick={toggleListVisibility}\n                                            onMouseDown={(e) => {\n                                                // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                                // https://twitter.com/MilesSorce/status/1278762360669265925\n                                                e.preventDefault();\n                                                buttonRef.current?.focus();\n                                            }}\n                                        >\n                                            {selectedValueLabel}\n                                        </button>\n                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                    style={{\n                                        width: `anchor-size(${anchorName} width)`,\n                                    }}\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            \"data-testautoid\": dataTestAutoId,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n        // Unik anchor-name som CSS anchor positioning bruker for å la\n        // dropdown-listen matche bredden til triggeren.\n        const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [selectedValue, isSearchable, dropdownIsShown],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    data-testautoid={dataTestAutoId}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={\n                                            {\n                                                width,\n                                                anchorName,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOnKeyDown}\n                                            onClick={toggleListVisibility}\n                                            onMouseDown={(e) => {\n                                                // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                                // https://twitter.com/MilesSorce/status/1278762360669265925\n                                                e.preventDefault();\n                                                buttonRef.current?.focus();\n                                            }}\n                                        >\n                                            {selectedValueLabel}\n                                        </button>\n                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                    style={{\n                                        width: `anchor-size(${anchorName} width)`,\n                                    }}\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-testid=\"jkl-select__listbox\"\n                                        data-testautoid={\n                                            dataTestAutoId\n                                                ? `${dataTestAutoId}__listbox`\n                                                : \"jkl-select__listbox\"\n                                        }\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","dataTestAutoId","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport 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                    data-theme=\"light\"\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                                data-theme=\"light\"\n                                onClick={props.toast.action.onClick}\n                            >\n                                {props.toast.action.label}\n                            </Button>\n                        </div>\n                    )}\n                </Flex>\n                <IconButton\n                    data-theme={!props.toast.variant ? undefined : \"light\"}\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","Toast","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":"ywBAsBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,OAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,GAAS,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,IAEjC,OAAAC,EAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAC,MAAA,IACOrB,EACJF,IAAAA,EACAP,UAAW+B,EACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtChC,GAEJ,iBAAgBM,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACT1B,EAACqC,EAAA,CACGnC,UAAU,sBACVoC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACA,aAAW,QACXe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAACS,EAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAAtC,EAAQU,EAAMU,MAAMgB,SACrBF,EAACS,EAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJzC,UAAU,qBACV,YAAU,YAETkC,SAAA,CAAAjB,GACGnB,EAAC,IAAA,CAAEE,UAAU,mBACRkC,YAAiBjB,IAG1BnB,EAAC,IAAA,CAAEE,UAAU,qBACRkC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT7C,EAAC,MAAA,CAAIE,UAAU,oBACXkC,SAAApC,EAAC8C,EAAA,CACGZ,QAAQ,YACR,aAAW,QACXa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpChD,EAACiD,EAAA,CACG,aAAazC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACXhC,UAAU,4BACV6C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,WAACe,EAAA,CAAA,UAKrB"}
+{"version":3,"file":"Toast.js","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","Toast","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":"ywBAsBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,OAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,GAAS,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,IAEjC,OAAAC,EAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAC,MAAA,IACOrB,EACJF,IAAAA,EACAP,UAAW+B,EACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtChC,GAEJ,iBAAgBM,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACT1B,EAACqC,EAAA,CACGnC,UAAU,sBACVoC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAACS,EAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAAtC,EAAQU,EAAMU,MAAMgB,SACrBF,EAACS,EAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJzC,UAAU,qBACV,YAAU,YAETkC,SAAA,CAAAjB,GACGnB,EAAC,IAAA,CAAEE,UAAU,mBACRkC,YAAiBjB,IAG1BnB,EAAC,IAAA,CAAEE,UAAU,qBACRkC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT7C,EAAC,MAAA,CAAIE,UAAU,oBACXkC,SAAApC,EAAC8C,EAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpChD,EAACiD,EAAA,CACG,aAAW,cACX/C,UAAU,4BACV6C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,WAACe,EAAA,CAAA,UAKrB"}

package/build/es/components/typography/Title.js

@@ -1,2 +1,2 @@
-import{jsx as s}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";const a=t(function({className:t,size:a="l",as:e,srOnly:o,...l},i){return s(e||"h2",{className:r("jkl-title",o&&"jkl-sr-only",t),"data-text-size":a,ref:i,...l})});export{a as Title};
+import{jsx as s}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";const t=a(function({className:a,size:t="l",as:e,srOnly:o,...m},c){return s(e||"h2",{className:r(o&&"jkl-sr-only",a),"data-text-size":t,ref:c,...m})});export{t as Title};
 //# sourceMappingURL=Title.js.map

package/build/es/components/typography/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(\"jkl-title\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAwBC,EAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAGA,OACIC,EAFSJ,GAAM,KAEd,CACGF,UAAWO,EAAK,YAAaJ,GAAU,cAAeH,GACtD,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Title.js","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAwBC,EAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAGA,OACIC,EAFSJ,GAAM,KAEd,CACGF,UAAWO,EAAKJ,GAAU,cAAeH,GACzC,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}