@fremtind/jokul 6.0.0-next.2 → 6.0.0-next.4

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

@@ -1,33 +1,43 @@
 import { default as React } from 'react';
-import { AsChildProps } from '../../utilities/polymorphism/as-child.js';
-import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
-export declare const SEMANTIC_SPACING: readonly ["none", "2xs", "xs", "s", "m", "l", "xl", "2xl"];
-export declare const STATIC_SPACING: readonly ["0", "2", "4", "8", "12", "16", "20", "24", "28", "32", "40", "48", "56", "64", "72", "80", "104", "168"];
-declare const BREAKPOINTS: readonly ["small", "medium", "large", "xl"];
-export type SemanticSpacing = (typeof SEMANTIC_SPACING)[number];
-export type StaticSpacing = (typeof STATIC_SPACING)[number];
-export type Breakpoint = (typeof BREAKPOINTS)[number];
-export type Responsive<T> = Partial<Record<Breakpoint, T>>;
-export declare function isResponsive<T>(value: unknown): value is Responsive<T>;
-export declare const LAYOUTS: readonly ["auto", "1", "2", "3", "4", "6", "4.8", "8.4", "2.10", "10.2", "3.9", "9.3", "5.7", "7.5"];
-export type Layout = (typeof LAYOUTS)[number];
-export type Center = "m" | "l" | "xl" | "2xl" | boolean;
-export type DynamicGap = `${SemanticSpacing}` | `${SemanticSpacing} ${SemanticSpacing}`;
-export type StaticGap = `${StaticSpacing}` | `${StaticSpacing} ${StaticSpacing}`;
-export type Gap = DynamicGap | StaticGap;
+import { AsChildProps, PolymorphicPropsWithRef } from '../../utilities/index.js';
+declare const staticSpacingTokens: {
+    0: string;
+    2: string;
+    4: string;
+    8: string;
+    12: string;
+    16: string;
+    24: string;
+    32: string;
+    40: string;
+    64: string;
+    104: string;
+    168: string;
+    none: string;
+    "2xs": string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    "2xl": string;
+};
+type Spacing = keyof typeof staticSpacingTokens;
+type SpacingValue = `${Spacing}`;
+export type Gap = Spacing | SpacingValue | `${SpacingValue} ${SpacingValue}`;
 type FlexBaseProps = {
     alignItems?: "normal" | "start" | "center" | "end" | "baseline" | "stretch";
     alignContent?: "normal" | "start" | "center" | "end" | "stretch" | "baseline" | "space-between" | "space-around" | "space-evenly";
-    center?: Center;
-    direction?: "row" | "column" | "row-reverse" | "column-reverse";
-    fill?: boolean;
-    gap?: Gap | Responsive<Gap>;
-    inline?: boolean;
-    textAlign?: "left" | "right" | "center";
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    gap?: Gap;
     justifyContent?: "normal" | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
-    layout?: Layout | Responsive<Layout>;
-    wrap?: "wrap" | "nowrap" | "reverse";
+    /**
+     * Om elementene skal brytes over flere linjer.
+     * `true`/`false` setter `wrap`/`nowrap`, `"reverse"` som kortform for
+     * `"wrap-reverse"`.
+     */
+    wrap?: boolean | "wrap" | "nowrap" | "reverse";
 };
-export type FlexProps<As extends React.ElementType = "div"> = PolymorphicPropsWithRef<As, FlexBaseProps>;
-export type FlexComponent = <ElementType extends React.ElementType = "div">(props: FlexProps<ElementType> & AsChildProps) => React.ReactElement | null;
+export type FlexProps<As extends React.ElementType = "div"> = PolymorphicPropsWithRef<As, FlexBaseProps> & AsChildProps;
+export type FlexComponent = <ElementType extends React.ElementType = "div">(props: FlexProps<ElementType>) => React.ReactElement | null;
 export {};

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

@@ -1,2 +1,2 @@
-import"react";const s=["none","2xs","xs","s","m","l","xl","2xl"],e=["0","2","4","8","12","16","20","24","28","32","40","48","56","64","72","80","104","168"],t=["small","medium","large","xl"];function n(s){if("object"!=typeof s||null===s||Array.isArray(s))return!1;const e=Object.keys(s);return 0===e.length||t.includes(e[0])}const r=["auto","1","2","3","4","6","4.8","8.4","2.10","10.2","3.9","9.3","5.7","7.5"];export{r as LAYOUTS,s as SEMANTIC_SPACING,e as STATIC_SPACING,n as isResponsive};
+import o from"../../tokens.js";o.spacing;
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/flex/types.ts"],"sourcesContent":["import React from \"react\";\nimport type { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport type { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const SEMANTIC_SPACING = [\n    \"none\",\n    \"2xs\",\n    \"xs\",\n    \"s\",\n    \"m\",\n    \"l\",\n    \"xl\",\n    \"2xl\",\n] as const;\n\nexport const STATIC_SPACING = [\n    \"0\",\n    \"2\",\n    \"4\",\n    \"8\",\n    \"12\",\n    \"16\",\n    \"20\",\n    \"24\",\n    \"28\",\n    \"32\",\n    \"40\",\n    \"48\",\n    \"56\",\n    \"64\",\n    \"72\",\n    \"80\",\n    \"104\",\n    \"168\",\n] as const;\n\nconst BREAKPOINTS = [\"small\", \"medium\", \"large\", \"xl\"] as const;\n\nexport type SemanticSpacing = (typeof SEMANTIC_SPACING)[number];\nexport type StaticSpacing = (typeof STATIC_SPACING)[number];\nexport type Breakpoint = (typeof BREAKPOINTS)[number];\n\nexport type Responsive<T> = Partial<Record<Breakpoint, T>>;\nexport function isResponsive<T>(value: unknown): value is Responsive<T> {\n    if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n        return false;\n    }\n    const keys = Object.keys(value);\n    return keys.length === 0 || BREAKPOINTS.includes(keys[0] as Breakpoint);\n}\n\nexport const LAYOUTS = [\n    \"auto\",\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"6\",\n    \"4.8\",\n    \"8.4\",\n    \"2.10\",\n    \"10.2\",\n    \"3.9\",\n    \"9.3\",\n    \"5.7\",\n    \"7.5\",\n] as const;\n\nexport type Layout = (typeof LAYOUTS)[number];\nexport type Center = \"m\" | \"l\" | \"xl\" | \"2xl\" | boolean;\n\nexport type DynamicGap =\n    | `${SemanticSpacing}`\n    | `${SemanticSpacing} ${SemanticSpacing}`;\nexport type StaticGap =\n    | `${StaticSpacing}`\n    | `${StaticSpacing} ${StaticSpacing}`;\nexport type Gap = DynamicGap | StaticGap;\n\ntype FlexBaseProps = {\n    alignItems?: \"normal\" | \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n    alignContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"stretch\"\n        | \"baseline\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    center?: Center;\n    direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n    fill?: boolean;\n    gap?: Gap | Responsive<Gap>;\n    inline?: boolean;\n    textAlign?: \"left\" | \"right\" | \"center\";\n    justifyContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    layout?: Layout | Responsive<Layout>;\n    wrap?: \"wrap\" | \"nowrap\" | \"reverse\";\n};\n\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n    PolymorphicPropsWithRef<As, FlexBaseProps>;\n\nexport type FlexComponent = <ElementType extends React.ElementType = \"div\">(\n    props: FlexProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n"],"names":["SEMANTIC_SPACING","STATIC_SPACING","BREAKPOINTS","isResponsive","value","Array","isArray","keys","Object","length","includes","LAYOUTS"],"mappings":"cAIO,MAAMA,EAAmB,CAC5B,OACA,MACA,KACA,IACA,IACA,IACA,KACA,OAGSC,EAAiB,CAC1B,IACA,IACA,IACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,MACA,OAGEC,EAAc,CAAC,QAAS,SAAU,QAAS,MAO1C,SAASC,EAAgBC,GAC5B,GAAqB,iBAAVA,GAAgC,OAAVA,GAAkBC,MAAMC,QAAQF,GAC7D,OAAO,EAEX,MAAMG,EAAOC,OAAOD,KAAKH,GACzB,OAAuB,IAAhBG,EAAKE,QAAgBP,EAAYQ,SAASH,EAAK,GAC1D,CAEO,MAAMI,EAAU,CACnB,OACA,IACA,IACA,IACA,IACA,IACA,MACA,MACA,OACA,OACA,MACA,MACA,MACA"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/flex/types.ts"],"sourcesContent":["import type React from \"react\";\nimport * as tokens from \"../../tokens.js\";\nimport type {\n    AsChildProps,\n    PolymorphicPropsWithRef,\n} from \"../../utilities/index.js\";\n\nconst staticSpacingTokens = tokens.default.spacing;\n\ntype Spacing = keyof typeof staticSpacingTokens;\ntype SpacingValue = `${Spacing}`;\n\nexport type Gap = Spacing | SpacingValue | `${SpacingValue} ${SpacingValue}`;\n\ntype FlexBaseProps = {\n    alignItems?: \"normal\" | \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n    alignContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"stretch\"\n        | \"baseline\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n    gap?: Gap;\n    justifyContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    /**\n     * Om elementene skal brytes over flere linjer.\n     * `true`/`false` setter `wrap`/`nowrap`, `\"reverse\"` som kortform for\n     * `\"wrap-reverse\"`.\n     */\n    wrap?: boolean | \"wrap\" | \"nowrap\" | \"reverse\";\n};\n\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n    PolymorphicPropsWithRef<As, FlexBaseProps> & AsChildProps;\n\n// Nødvendig for å fortelle TypeScript at dette ikke returnerer ReactNode, men JSX.Element\nexport type FlexComponent = <ElementType extends React.ElementType = \"div\">(\n    props: FlexProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":["tokens.default","spacing"],"mappings":"+BAO4BA,EAAeC"}

package/build/es/components/image/Image.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as m}from"react";import{useElementDimensions as i}from"../../hooks/useElementDimensions/useElementDimensions.js";import{useImageLoadingStatus as o}from"./useImageLoadingStatus.js";import{mergeRefs as t}from"../../utilities/mergeRefs.js";import"../../utilities/polymorphism/SlotComponent.js";const r=m(({className:m,placeholder:r,alt:l,...n},g)=>{const[c,d]=o(),[p,j]=i(400),f=t(g,c);return e("div",{ref:p,className:a("jkl-image",m,{"jkl-image--loading":!d}),children:[s("img",{className:"jkl-image__placeholder",alt:d?"":l,src:r||n.src}),s("img",{alt:l,className:"jkl-image__image","data-testid":"jkl-image__image",ref:f,sizes:`${j.width}px`,decoding:"async",loading:"lazy",...n})]})});r.displayName="Image";export{r as Image};
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as m}from"react";import{useElementDimensions as i}from"../../hooks/useElementDimensions/useElementDimensions.js";import{mergeRefs as o}from"../../utilities/mergeRefs.js";import"../../utilities/polymorphism/SlotComponent.js";import{useImageLoadingStatus as t}from"./useImageLoadingStatus.js";const r=m(({className:m,placeholder:r,alt:l,...n},g)=>{const[c,d]=t(),[p,j]=i(400),f=o(g,c);return e("div",{ref:p,className:a("jkl-image",m,{"jkl-image--loading":!d}),children:[s("img",{className:"jkl-image__placeholder",alt:d?"":l,src:r||n.src}),s("img",{alt:l,className:"jkl-image__image","data-testid":"jkl-image__image",ref:f,sizes:`${j.width}px`,decoding:"async",loading:"lazy",...n})]})});r.displayName="Image";export{r as Image};
 //# sourceMappingURL=Image.js.map

package/build/es/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\nimport { mergeRefs } from \"../../utilities/index.js\";\nimport type { ImageProps } from \"./types.js\";\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n    ({ className, placeholder, alt, ...imageProperties }, ref) => {\n        const [imageRef, imageLoaded] = useImageLoadingStatus();\n        const [containerRef, dimensions] =\n            useElementDimensions<HTMLDivElement>(400);\n\n        const mergedImageRef = mergeRefs(ref, imageRef);\n\n        return (\n            <div\n                ref={containerRef}\n                className={clsx(\"jkl-image\", className, {\n                    \"jkl-image--loading\": !imageLoaded,\n                })}\n            >\n                {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart */}\n                <img\n                    className=\"jkl-image__placeholder\"\n                    alt={imageLoaded ? \"\" : alt}\n                    src={placeholder || imageProperties.src}\n                />\n                {/* biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n                <img\n                    alt={alt}\n                    className=\"jkl-image__image\"\n                    data-testid=\"jkl-image__image\"\n                    ref={mergedImageRef}\n                    sizes={`${dimensions.width}px`}\n                    decoding=\"async\"\n                    loading=\"lazy\"\n                    {...imageProperties}\n                />\n            </div>\n        );\n    },\n);\n\nImage.displayName = \"Image\";\n"],"names":["Image","forwardRef","className","placeholder","alt","imageProperties","ref","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","mergedImageRef","mergeRefs","jsxs","clsx","children","jsx","src","sizes","width","decoding","loading","displayName"],"mappings":"qZAOO,MAAMA,EAAQC,EACjB,EAAGC,UAAAA,EAAWC,YAAAA,EAAaC,IAAAA,KAAQC,GAAmBC,KAClD,MAAOC,EAAUC,GAAeC,KACzBC,EAAcC,GACjBC,EAAqC,KAEnCC,EAAiBC,EAAUR,EAAKC,GAEtC,OACIQ,EAAC,MAAA,CACGT,IAAKI,EACLR,UAAWc,EAAK,YAAad,EAAW,CACpC,sBAAuBM,IAI3BS,SAAA,CAAAC,EAAC,MAAA,CACGhB,UAAU,yBACVE,IAAKI,EAAc,GAAKJ,EACxBe,IAAKhB,GAAeE,EAAgBc,MAGxCD,EAAC,MAAA,CACGd,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZI,IAAKO,EACLO,MAAO,GAAGT,EAAWU,UACrBC,SAAS,QACTC,QAAQ,UACJlB,SAOxBL,EAAMwB,YAAc"}
+{"version":3,"file":"Image.js","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport { mergeRefs } from \"../../utilities/index.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n    ({ className, placeholder, alt, ...imageProperties }, ref) => {\n        const [imageRef, imageLoaded] = useImageLoadingStatus();\n        const [containerRef, dimensions] =\n            useElementDimensions<HTMLDivElement>(400);\n\n        const mergedImageRef = mergeRefs(ref, imageRef);\n\n        return (\n            <div\n                ref={containerRef}\n                className={clsx(\"jkl-image\", className, {\n                    \"jkl-image--loading\": !imageLoaded,\n                })}\n            >\n                {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart */}\n                <img\n                    className=\"jkl-image__placeholder\"\n                    alt={imageLoaded ? \"\" : alt}\n                    src={placeholder || imageProperties.src}\n                />\n                {/* biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n                <img\n                    alt={alt}\n                    className=\"jkl-image__image\"\n                    data-testid=\"jkl-image__image\"\n                    ref={mergedImageRef}\n                    sizes={`${dimensions.width}px`}\n                    decoding=\"async\"\n                    loading=\"lazy\"\n                    {...imageProperties}\n                />\n            </div>\n        );\n    },\n);\n\nImage.displayName = \"Image\";\n"],"names":["Image","forwardRef","className","placeholder","alt","imageProperties","ref","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","mergedImageRef","mergeRefs","jsxs","clsx","children","jsx","src","sizes","width","decoding","loading","displayName"],"mappings":"qZAOO,MAAMA,EAAQC,EACjB,EAAGC,UAAAA,EAAWC,YAAAA,EAAaC,IAAAA,KAAQC,GAAmBC,KAClD,MAAOC,EAAUC,GAAeC,KACzBC,EAAcC,GACjBC,EAAqC,KAEnCC,EAAiBC,EAAUR,EAAKC,GAEtC,OACIQ,EAAC,MAAA,CACGT,IAAKI,EACLR,UAAWc,EAAK,YAAad,EAAW,CACpC,sBAAuBM,IAI3BS,SAAA,CAAAC,EAAC,MAAA,CACGhB,UAAU,yBACVE,IAAKI,EAAc,GAAKJ,EACxBe,IAAKhB,GAAeE,EAAgBc,MAGxCD,EAAC,MAAA,CACGd,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZI,IAAKO,EACLO,MAAO,GAAGT,EAAWU,UACrBC,SAAS,QACTC,QAAQ,UACJlB,SAOxBL,EAAMwB,YAAc"}

package/build/es/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ComponentType,\n    forwardRef,\n    useRef,\n    useState,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { MinusIcon, PlusIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NumberInputProps } from \"./types.js\";\n\ntype NumberInputValue = string | number | readonly string[] | undefined;\n\ntype StepDirection = \"increment\" | \"decrement\";\n\nconst stepperConfig: Record<\n    StepDirection,\n    { label: string; Icon: ComponentType }\n> = {\n    decrement: { label: \"Senk verdien\", Icon: MinusIcon },\n    increment: { label: \"Øk verdien\", Icon: PlusIcon },\n};\n\nfunction toNumeric(value: NumberInputValue): number {\n    if (typeof value === \"number\") {\n        return value;\n    }\n    if (typeof value === \"string\" && value.trim() !== \"\") {\n        return Number(value);\n    }\n    return Number.NaN;\n}\n\ntype StepperButtonProps = {\n    direction: StepDirection;\n    disabled: boolean;\n    onClick: () => void;\n};\n\nfunction StepperButton({ direction, disabled, onClick }: StepperButtonProps) {\n    const { label, Icon } = stepperConfig[direction];\n\n    return (\n        <button\n            type=\"button\"\n            className=\"jkl-button jkl-button--ghost\"\n            aria-label={label}\n            data-direction={direction}\n            onPointerDown={(event) => event.preventDefault()}\n            onClick={onClick}\n            disabled={disabled}\n        >\n            <span aria-hidden=\"true\">\n                <Icon />\n            </span>\n        </button>\n    );\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n    (props, ref) => {\n        const {\n            \"data-size\": dataSize,\n            \"data-testautoid\": testAutoId,\n            \"data-testid\": dataTestId,\n            align = \"left\",\n            id,\n            label,\n            className,\n            style,\n            errorLabel,\n            helpLabel,\n            inputClassName,\n            labelProps,\n            supportLabelProps,\n            stepper = false,\n            tooltip,\n            description,\n            width,\n            onChange,\n            ...rest\n        } = props;\n        const internalRef = useRef<HTMLInputElement>(null);\n        const mergedRef = mergeRefs(internalRef, ref);\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState<NumberInputValue>(rest.defaultValue);\n\n        // I kontrollert bruk må vi lese direkte fra `value` for at disabled-\n        // state på stepper-knappene skal følge prop-en i samme render. Bruker\n        // intern state som fallback for ukontrollert bruk.\n        const effectiveValue =\n            rest.value !== undefined ? rest.value : uncontrolledValue;\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            if (rest.value === undefined) {\n                setUncontrolledValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        const numericValue = toNumeric(effectiveValue);\n        const minNumeric =\n            rest.min !== undefined ? Number(rest.min) : Number.NaN;\n        const maxNumeric =\n            rest.max !== undefined ? Number(rest.max) : Number.NaN;\n        const isAtOrBelowMin =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(minNumeric) &&\n            numericValue <= minNumeric;\n        const isAtOrAboveMax =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(maxNumeric) &&\n            numericValue >= maxNumeric;\n\n        const inputWrapperStyle =\n            style || width\n                ? {\n                      ...style,\n                      ...(width ? { width } : undefined),\n                  }\n                : undefined;\n        const inputGroupProps = {\n            id,\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const triggerStep = (direction: StepDirection) => {\n            const input = internalRef.current;\n\n            if (!input || input.disabled || input.readOnly) {\n                return;\n            }\n\n            const previousValue = input.value;\n            input.focus();\n\n            try {\n                if (direction === \"increment\") {\n                    input.stepUp();\n                } else {\n                    input.stepDown();\n                }\n            } catch {\n                return;\n            }\n\n            if (input.value === previousValue) {\n                return;\n            }\n\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        const stepperDisabled = rest.disabled || rest.readOnly;\n\n        return (\n            <InputGroup\n                {...inputGroupProps}\n                className={clsx(className, \"jkl-number-input\")}\n                data-size={dataSize}\n                data-testid={dataTestId ?? \"jkl-number-input\"}\n                render={(inputProps) => (\n                    <div\n                        className={clsx(\"jkl-number-input__wrapper\", {\n                            \"jkl-number-input__wrapper--stepper\": stepper,\n                        })}\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                        style={inputWrapperStyle}\n                    >\n                        {stepper && (\n                            <StepperButton\n                                direction=\"decrement\"\n                                disabled={stepperDisabled || isAtOrBelowMin}\n                                onClick={() => triggerStep(\"decrement\")}\n                            />\n                        )}\n                        <input\n                            {...inputProps}\n                            {...rest}\n                            ref={mergedRef}\n                            type=\"number\"\n                            onChange={handleChange}\n                            className={clsx(\n                                \"jkl-number-input__input\",\n                                {\n                                    \"jkl-number-input__input--stepper\": stepper,\n                                    \"jkl-number-input__input--align-right\":\n                                        !stepper && align === \"right\",\n                                },\n                                inputClassName,\n                            )}\n                            data-testautoid={testAutoId}\n                        />\n                        {stepper && (\n                            <StepperButton\n                                direction=\"increment\"\n                                disabled={stepperDisabled || isAtOrAboveMax}\n                                onClick={() => triggerStep(\"increment\")}\n                            />\n                        )}\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nNumberInput.displayName = \"NumberInput\";\n"],"names":["stepperConfig","decrement","label","Icon","MinusIcon","increment","PlusIcon","StepperButton","direction","disabled","onClick","jsx","type","className","onPointerDown","event","preventDefault","children","NumberInput","forwardRef","props","ref","dataSize","testAutoId","dataTestId","align","id","style","errorLabel","helpLabel","inputClassName","labelProps","supportLabelProps","stepper","tooltip","description","width","onChange","rest","internalRef","useRef","mergedRef","mergeRefs","uncontrolledValue","setUncontrolledValue","useState","defaultValue","effectiveValue","value","handleChange","target","numericValue","trim","Number","NaN","toNumeric","minNumeric","min","maxNumeric","max","isAtOrBelowMin","isFinite","isAtOrAboveMax","inputWrapperStyle","inputGroupProps","triggerStep","input","current","readOnly","previousValue","focus","stepUp","stepDown","dispatchEvent","Event","bubbles","stepperDisabled","InputGroup","clsx","render","inputProps","jsxs","displayName"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ComponentType, forwardRef, useRef, useState } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { MinusIcon, PlusIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NumberInputProps } from \"./types.js\";\n\ntype NumberInputValue = string | number | readonly string[] | undefined;\n\ntype StepDirection = \"increment\" | \"decrement\";\n\nconst stepperConfig: Record<\n    StepDirection,\n    { label: string; Icon: ComponentType }\n> = {\n    decrement: { label: \"Senk verdien\", Icon: MinusIcon },\n    increment: { label: \"Øk verdien\", Icon: PlusIcon },\n};\n\nfunction toNumeric(value: NumberInputValue): number {\n    if (typeof value === \"number\") {\n        return value;\n    }\n    if (typeof value === \"string\" && value.trim() !== \"\") {\n        return Number(value);\n    }\n    return Number.NaN;\n}\n\ntype StepperButtonProps = {\n    direction: StepDirection;\n    disabled: boolean;\n    onClick: () => void;\n};\n\nfunction StepperButton({ direction, disabled, onClick }: StepperButtonProps) {\n    const { label, Icon } = stepperConfig[direction];\n\n    return (\n        <button\n            type=\"button\"\n            className=\"jkl-button jkl-button--ghost\"\n            aria-label={label}\n            data-direction={direction}\n            onPointerDown={(event) => event.preventDefault()}\n            onClick={onClick}\n            disabled={disabled}\n        >\n            <span aria-hidden=\"true\">\n                <Icon />\n            </span>\n        </button>\n    );\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n    (props, ref) => {\n        const {\n            \"data-size\": dataSize,\n            \"data-testautoid\": testAutoId,\n            \"data-testid\": dataTestId,\n            align = \"left\",\n            id,\n            label,\n            className,\n            style,\n            errorLabel,\n            helpLabel,\n            inputClassName,\n            labelProps,\n            supportLabelProps,\n            stepper = false,\n            tooltip,\n            description,\n            width,\n            onChange,\n            ...rest\n        } = props;\n        const internalRef = useRef<HTMLInputElement>(null);\n        const mergedRef = mergeRefs(internalRef, ref);\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState<NumberInputValue>(rest.defaultValue);\n\n        // I kontrollert bruk må vi lese direkte fra `value` for at disabled-\n        // state på stepper-knappene skal følge prop-en i samme render. Bruker\n        // intern state som fallback for ukontrollert bruk.\n        const effectiveValue =\n            rest.value !== undefined ? rest.value : uncontrolledValue;\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            if (rest.value === undefined) {\n                setUncontrolledValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        const numericValue = toNumeric(effectiveValue);\n        const minNumeric =\n            rest.min !== undefined ? Number(rest.min) : Number.NaN;\n        const maxNumeric =\n            rest.max !== undefined ? Number(rest.max) : Number.NaN;\n        const isAtOrBelowMin =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(minNumeric) &&\n            numericValue <= minNumeric;\n        const isAtOrAboveMax =\n            Number.isFinite(numericValue) &&\n            Number.isFinite(maxNumeric) &&\n            numericValue >= maxNumeric;\n\n        const inputWrapperStyle =\n            style || width\n                ? {\n                      ...style,\n                      ...(width ? { width } : undefined),\n                  }\n                : undefined;\n        const inputGroupProps = {\n            id,\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const triggerStep = (direction: StepDirection) => {\n            const input = internalRef.current;\n\n            if (!input || input.disabled || input.readOnly) {\n                return;\n            }\n\n            const previousValue = input.value;\n            input.focus();\n\n            try {\n                if (direction === \"increment\") {\n                    input.stepUp();\n                } else {\n                    input.stepDown();\n                }\n            } catch {\n                return;\n            }\n\n            if (input.value === previousValue) {\n                return;\n            }\n\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        const stepperDisabled = rest.disabled || rest.readOnly;\n\n        return (\n            <InputGroup\n                {...inputGroupProps}\n                className={clsx(className, \"jkl-number-input\")}\n                data-size={dataSize}\n                data-testid={dataTestId ?? \"jkl-number-input\"}\n                render={(inputProps) => (\n                    <div\n                        className={clsx(\"jkl-number-input__wrapper\", {\n                            \"jkl-number-input__wrapper--stepper\": stepper,\n                        })}\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                        style={inputWrapperStyle}\n                    >\n                        {stepper && (\n                            <StepperButton\n                                direction=\"decrement\"\n                                disabled={stepperDisabled || isAtOrBelowMin}\n                                onClick={() => triggerStep(\"decrement\")}\n                            />\n                        )}\n                        <input\n                            {...inputProps}\n                            {...rest}\n                            ref={mergedRef}\n                            type=\"number\"\n                            onChange={handleChange}\n                            className={clsx(\n                                \"jkl-number-input__input\",\n                                {\n                                    \"jkl-number-input__input--stepper\": stepper,\n                                    \"jkl-number-input__input--align-right\":\n                                        !stepper && align === \"right\",\n                                },\n                                inputClassName,\n                            )}\n                            data-testautoid={testAutoId}\n                        />\n                        {stepper && (\n                            <StepperButton\n                                direction=\"increment\"\n                                disabled={stepperDisabled || isAtOrAboveMax}\n                                onClick={() => triggerStep(\"increment\")}\n                            />\n                        )}\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nNumberInput.displayName = \"NumberInput\";\n"],"names":["stepperConfig","decrement","label","Icon","MinusIcon","increment","PlusIcon","StepperButton","direction","disabled","onClick","jsx","type","className","onPointerDown","event","preventDefault","children","NumberInput","forwardRef","props","ref","dataSize","testAutoId","dataTestId","align","id","style","errorLabel","helpLabel","inputClassName","labelProps","supportLabelProps","stepper","tooltip","description","width","onChange","rest","internalRef","useRef","mergedRef","mergeRefs","uncontrolledValue","setUncontrolledValue","useState","defaultValue","effectiveValue","value","handleChange","target","numericValue","trim","Number","NaN","toNumeric","minNumeric","min","maxNumeric","max","isAtOrBelowMin","isFinite","isAtOrAboveMax","inputWrapperStyle","inputGroupProps","triggerStep","input","current","readOnly","previousValue","focus","stepUp","stepDown","dispatchEvent","Event","bubbles","stepperDisabled","InputGroup","clsx","render","inputProps","jsxs","displayName"],"mappings":"iqDAWA,MAAMA,EAGF,CACAC,UAAW,CAAEC,MAAO,eAAgBC,KAAMC,GAC1CC,UAAW,CAAEH,MAAO,aAAcC,KAAMG,IAmB5C,SAASC,GAAgBC,UAAAA,EAAWC,SAAAA,EAAUC,QAAAA,IAC1C,MAAQR,MAAAA,EAAOC,KAAAA,GAASH,EAAcQ,GAEtC,OACIG,EAAC,SAAA,CACGC,KAAK,SACLC,UAAU,+BACV,aAAYX,EACZ,iBAAgBM,EAChBM,cAAgBC,GAAUA,EAAMC,iBAChCN,QAAAA,EACAD,SAAAA,EAEAQ,WAAC,OAAA,CAAK,cAAY,OACdA,SAAAN,EAACR,SAIjB,CAEO,MAAMe,EAAcC,EACvB,CAACC,EAAOC,KACJ,MACI,YAAaC,EACb,kBAAmBC,EACnB,cAAeC,EACfC,MAAAA,EAAQ,OACRC,GAAAA,EACAxB,MAAAA,EACAW,UAAAA,EACAc,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,GAAU,EACVC,QAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHlB,EACEmB,EAAcC,EAAyB,MACvCC,EAAYC,EAAUH,EAAalB,IAClCsB,EAAmBC,GACtBC,EAA2BP,EAAKQ,cAK9BC,OACa,IAAfT,EAAKU,MAAsBV,EAAKU,MAAQL,EAEtCM,EAAgBlC,SACC,IAAfuB,EAAKU,OACLJ,EAAqB7B,EAAMmC,OAAOF,OAEtCX,IAAWtB,IAGToC,EA7Ed,SAAmBH,GACf,MAAqB,iBAAVA,EACAA,EAEU,iBAAVA,GAAuC,KAAjBA,EAAMI,OAC5BC,OAAOL,GAEXK,OAAOC,GAClB,CAqE6BC,CAAUR,GACzBS,OACW,IAAblB,EAAKmB,IAAoBJ,OAAOf,EAAKmB,KAAOJ,OAAOC,IACjDI,OACW,IAAbpB,EAAKqB,IAAoBN,OAAOf,EAAKqB,KAAON,OAAOC,IACjDM,EACFP,OAAOQ,SAASV,IAChBE,OAAOQ,SAASL,IAChBL,GAAgBK,EACdM,EACFT,OAAOQ,SAASV,IAChBE,OAAOQ,SAASH,IAChBP,GAAgBO,EAEdK,EACFpC,GAASS,EACH,IACOT,KACCS,EAAQ,CAAEA,MAAAA,QAAU,QAE5B,EACJ4B,EAAkB,CACpBtC,GAAAA,EACAxB,MAAAA,EACA0B,WAAAA,EACAC,UAAAA,EACAE,WAAAA,EACAC,kBAAAA,EACAE,QAAAA,EACAC,YAAAA,GAGE8B,EAAezD,IACjB,MAAM0D,EAAQ3B,EAAY4B,QAE1B,IAAKD,GAASA,EAAMzD,UAAYyD,EAAME,SAClC,OAGJ,MAAMC,EAAgBH,EAAMlB,MAC5BkB,EAAMI,QAEN,IACsB,cAAd9D,EACA0D,EAAMK,SAENL,EAAMM,UAEd,CAAA,MACI,MACJ,CAEIN,EAAMlB,QAAUqB,GAIpBH,EAAMO,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MAGhDC,EAAkBtC,EAAK7B,UAAY6B,EAAK8B,SAE9C,OACIzD,EAACkE,EAAA,IACOb,EACJnD,UAAWiE,EAAKjE,EAAW,oBAC3B,YAAWS,EACX,cAAaE,GAAc,mBAC3BuD,OAASC,GACLC,EAAC,MAAA,CACGpE,UAAWiE,EAAK,4BAA6B,CACzC,qCAAsC7C,IAE1C,eAAc+C,EAAW,gBACzBrD,MAAOoC,EAEN9C,SAAA,CAAAgB,GACGtB,EAACJ,EAAA,CACGC,UAAU,YACVC,SAAUmE,GAAmBhB,EAC7BlD,QAAS,IAAMuD,EAAY,eAGnCtD,EAAC,QAAA,IACOqE,KACA1C,EACJjB,IAAKoB,EACL7B,KAAK,SACLyB,SAAUY,EACVpC,UAAWiE,EACP,0BACA,CACI,mCAAoC7C,EACpC,wCACKA,GAAqB,UAAVR,GAEpBK,GAEJ,kBAAiBP,IAEpBU,GACGtB,EAACJ,EAAA,CACGC,UAAU,YACVC,SAAUmE,GAAmBd,EAC7BpD,QAAS,IAAMuD,EAAY,sBAU3D/C,EAAYgE,YAAc"}

package/build/es/components/segmented-control/SegmentedControl.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import"react";import{FieldGroup as r}from"../input-group/FieldGroup.js";const s=s=>e(r,{...s,className:o("jkl-segmented-control",s.className)});s.displayName="Segmented Control";export{s as SegmentedControl};
+import{jsx as e}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import"react";import{FieldGroup as r}from"../input-group/FieldGroup.js";const s=s=>e(r,{...s,className:o("jkl-segmented-control",s.className)});s.displayName="SegmentedControl";export{s as SegmentedControl};
 //# sourceMappingURL=SegmentedControl.js.map

package/build/es/components/segmented-control/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport type { SegmentedControlProps } from \"./types.js\";\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n    return (\n        <FieldGroup\n            {...props}\n            className={clsx(\"jkl-segmented-control\", props.className)}\n        />\n    );\n};\n\nSegmentedControl.displayName = \"Segmented Control\";\n"],"names":["SegmentedControl","props","jsx","FieldGroup","className","clsx","displayName"],"mappings":"8JAKO,MAAMA,EAAoBC,GAEzBC,EAACC,EAAA,IACOF,EACJG,UAAWC,EAAK,wBAAyBJ,EAAMG,aAK3DJ,EAAiBM,YAAc"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport type { SegmentedControlProps } from \"./types.js\";\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n    return (\n        <FieldGroup\n            {...props}\n            className={clsx(\"jkl-segmented-control\", props.className)}\n        />\n    );\n};\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":["SegmentedControl","props","jsx","FieldGroup","className","clsx","displayName"],"mappings":"8JAKO,MAAMA,EAAoBC,GAEzBC,EAACC,EAAA,IACOF,EACJG,UAAWC,EAAK,wBAAyBJ,EAAMG,aAK3DJ,EAAiBM,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../../src/components/select/Option.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type ComponentPropsWithoutRef,\n    type RefObject,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n} from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { Text } from \"../typography/Text.js\";\n\nexport type OptionProps = Omit<\n    ComponentPropsWithoutRef<\"button\">,\n    \"aria-selected\" | \"children\" | \"role\" | \"type\" | \"value\"\n> &\n    ValuePair & {\n        multiple?: boolean;\n        selected?: boolean;\n        selectRef: RefObject<HTMLSelectElement>;\n    };\n\nexport const Option = forwardRef<HTMLButtonElement, OptionProps>(\n    function Option(props, ref) {\n        const {\n            className = \"\",\n            multiple = false,\n            selected = false,\n            selectRef,\n            label,\n            description,\n            media,\n            value,\n            ...rest\n        } = props;\n\n        const mediaRef = useRef<HTMLSpanElement>(null);\n        const labelRef = useRef<HTMLSpanElement>(null);\n\n        const syncValueToSelect = useCallback(\n            (event: KeyboardEvent | MouseEvent) => {\n                const button = (\n                    event.target as HTMLElement\n                ).closest<HTMLButtonElement>(\"button\");\n                if (!button || !selectRef.current || selectRef.current.disabled)\n                    return;\n\n                const option = Array.from(selectRef.current.options).find(\n                    (option) => option.value === button.value,\n                );\n                if (!option) return;\n\n                option.selected = multiple ? !option.selected : true;\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            },\n            [selectRef, multiple],\n        );\n\n        useEffect(() => {\n            if (!media || !labelRef.current || !mediaRef.current) return;\n            const labelElement = labelRef.current;\n            const mediaElement = mediaRef.current;\n            const observer = new ResizeObserver(() => {\n                mediaElement.style.setProperty(\n                    \"--media-size\",\n                    `${labelElement.offsetHeight}px`,\n                );\n            });\n            observer.observe(labelElement);\n            return () => observer.disconnect();\n        }, [media]);\n\n        return (\n            <button\n                ref={ref}\n                // biome-ignore lint/a11y/useSemanticElements: vi kan ikke style option-elementet\n                role=\"option\"\n                type=\"button\"\n                className={clsx(\"jkl-option\", className)}\n                value={value}\n                data-multiple={multiple || undefined}\n                aria-selected={selected}\n                {...rest}\n                onClick={(event) => {\n                    rest.onClick?.(event);\n                    syncValueToSelect(event);\n                }}\n            >\n                <Flex\n                    as=\"span\"\n                    direction=\"column\"\n                    gap=\"4\"\n                    className=\"jkl-option__label\"\n                    ref={labelRef}\n                >\n                    <Text short as=\"span\">\n                        {label}\n                    </Text>\n                    {description && (\n                        <Text short subdued as=\"span\" size=\"xs\">\n                            {description}\n                        </Text>\n                    )}\n                </Flex>\n                {media && (\n                    <span className=\"jkl-option__media\" ref={mediaRef}>\n                        {media}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n"],"names":["Option","forwardRef","props","ref","className","multiple","selected","selectRef","label","description","media","value","rest","mediaRef","useRef","labelRef","syncValueToSelect","useCallback","event","button","target","closest","current","disabled","option","Array","from","options","find","dispatchEvent","Event","bubbles","useEffect","labelElement","mediaElement","observer","ResizeObserver","style","setProperty","offsetHeight","observe","disconnect","jsxs","role","type","clsx","onClick","children","Flex","as","direction","gap","jsx","Text","short","subdued","size"],"mappings":"mQAwBO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,UAAAA,EAAY,GACZC,SAAAA,GAAW,EACXC,SAAAA,GAAW,EACXC,UAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAwB,MACnCC,EAAWD,EAAwB,MAEnCE,EAAoBC,EACrBC,IACG,MAAMC,EACFD,EAAME,OACRC,QAA2B,UAC7B,IAAKF,IAAWZ,EAAUe,SAAWf,EAAUe,QAAQC,SACnD,OAEJ,MAAMC,EAASC,MAAMC,KAAKnB,EAAUe,QAAQK,SAASC,KAChDJ,GAAWA,EAAOb,QAAUQ,EAAOR,OAEnCa,IAELA,EAAOlB,UAAWD,IAAYmB,EAAOlB,SACrCC,EAAUe,QAAQO,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,OAGvC,CAACxB,EAAWF,IAGhB,OAAA2B,EAAU,KACN,IAAKtB,IAAUK,EAASO,UAAYT,EAASS,QAAS,OACtD,MAAMW,EAAelB,EAASO,QACxBY,EAAerB,EAASS,QACxBa,EAAW,IAAIC,eAAe,KAChCF,EAAaG,MAAMC,YACf,eACA,GAAGL,EAAaM,oBAGxB,OAAAJ,EAASK,QAAQP,GACV,IAAME,EAASM,cACvB,CAAC/B,IAGAgC,EAAC,SAAA,CACGvC,IAAAA,EAEAwC,KAAK,SACLC,KAAK,SACLxC,UAAWyC,EAAK,aAAczC,GAC9BO,MAAAA,EACA,gBAAeN,QAAY,EAC3B,gBAAeC,KACXM,EACJkC,QAAU5B,IACNN,EAAKkC,UAAU5B,GACfF,EAAkBE,IAGtB6B,SAAA,CAAAL,EAACM,EAAA,CACGC,GAAG,OACHC,UAAU,SACVC,IAAI,IACJ/C,UAAU,oBACVD,IAAKY,EAELgC,SAAA,CAAAK,EAACC,EAAA,CAAKC,OAAK,EAACL,GAAG,OACVF,SAAAvC,IAEJC,GACG2C,EAACC,EAAA,CAAKC,OAAK,EAACC,SAAO,EAACN,GAAG,OAAOO,KAAK,KAC9BT,SAAAtC,OAIZC,GACG0C,EAAC,OAAA,CAAKhD,UAAU,oBAAoBD,IAAKU,EACpCkC,SAAArC,MAKrB"}
+{"version":3,"file":"Option.js","sources":["../../../../src/components/select/Option.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type ComponentPropsWithoutRef,\n    type MouseEvent,\n    type RefObject,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n} from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { Text } from \"../typography/Text.js\";\n\nexport type OptionProps = Omit<\n    ComponentPropsWithoutRef<\"button\">,\n    \"aria-selected\" | \"children\" | \"role\" | \"type\" | \"value\"\n> &\n    ValuePair & {\n        multiple?: boolean;\n        selected?: boolean;\n        selectRef: RefObject<HTMLSelectElement>;\n    };\n\nexport const Option = forwardRef<HTMLButtonElement, OptionProps>(\n    function Option(props, ref) {\n        const {\n            className = \"\",\n            multiple = false,\n            selected = false,\n            selectRef,\n            label,\n            description,\n            media,\n            value,\n            ...rest\n        } = props;\n\n        const mediaRef = useRef<HTMLSpanElement>(null);\n        const labelRef = useRef<HTMLSpanElement>(null);\n\n        const syncValueToSelect = useCallback(\n            (event: KeyboardEvent | MouseEvent) => {\n                const button = (\n                    event.target as HTMLElement\n                ).closest<HTMLButtonElement>(\"button\");\n                if (!button || !selectRef.current || selectRef.current.disabled)\n                    return;\n\n                const option = Array.from(selectRef.current.options).find(\n                    (option) => option.value === button.value,\n                );\n                if (!option) return;\n\n                option.selected = multiple ? !option.selected : true;\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            },\n            [selectRef, multiple],\n        );\n\n        useEffect(() => {\n            if (!media || !labelRef.current || !mediaRef.current) return;\n            const labelElement = labelRef.current;\n            const mediaElement = mediaRef.current;\n            const observer = new ResizeObserver(() => {\n                mediaElement.style.setProperty(\n                    \"--media-size\",\n                    `${labelElement.offsetHeight}px`,\n                );\n            });\n            observer.observe(labelElement);\n            return () => observer.disconnect();\n        }, [media]);\n\n        return (\n            <button\n                ref={ref}\n                // biome-ignore lint/a11y/useSemanticElements: vi kan ikke style option-elementet\n                role=\"option\"\n                type=\"button\"\n                className={clsx(\"jkl-option\", className)}\n                value={value}\n                data-multiple={multiple || undefined}\n                aria-selected={selected}\n                {...rest}\n                onClick={(event) => {\n                    rest.onClick?.(event);\n                    syncValueToSelect(event);\n                }}\n            >\n                <Flex\n                    as=\"span\"\n                    direction=\"column\"\n                    gap=\"4\"\n                    className=\"jkl-option__label\"\n                    ref={labelRef}\n                >\n                    <Text short as=\"span\">\n                        {label}\n                    </Text>\n                    {description && (\n                        <Text short subdued as=\"span\" size=\"xs\">\n                            {description}\n                        </Text>\n                    )}\n                </Flex>\n                {media && (\n                    <span className=\"jkl-option__media\" ref={mediaRef}>\n                        {media}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n"],"names":["Option","forwardRef","props","ref","className","multiple","selected","selectRef","label","description","media","value","rest","mediaRef","useRef","labelRef","syncValueToSelect","useCallback","event","button","target","closest","current","disabled","option","Array","from","options","find","dispatchEvent","Event","bubbles","useEffect","labelElement","mediaElement","observer","ResizeObserver","style","setProperty","offsetHeight","observe","disconnect","jsxs","role","type","clsx","onClick","children","Flex","as","direction","gap","jsx","Text","short","subdued","size"],"mappings":"mQAwBO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,UAAAA,EAAY,GACZC,SAAAA,GAAW,EACXC,SAAAA,GAAW,EACXC,UAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAwB,MACnCC,EAAWD,EAAwB,MAEnCE,EAAoBC,EACrBC,IACG,MAAMC,EACFD,EAAME,OACRC,QAA2B,UAC7B,IAAKF,IAAWZ,EAAUe,SAAWf,EAAUe,QAAQC,SACnD,OAEJ,MAAMC,EAASC,MAAMC,KAAKnB,EAAUe,QAAQK,SAASC,KAChDJ,GAAWA,EAAOb,QAAUQ,EAAOR,OAEnCa,IAELA,EAAOlB,UAAWD,IAAYmB,EAAOlB,SACrCC,EAAUe,QAAQO,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,OAGvC,CAACxB,EAAWF,IAGhB,OAAA2B,EAAU,KACN,IAAKtB,IAAUK,EAASO,UAAYT,EAASS,QAAS,OACtD,MAAMW,EAAelB,EAASO,QACxBY,EAAerB,EAASS,QACxBa,EAAW,IAAIC,eAAe,KAChCF,EAAaG,MAAMC,YACf,eACA,GAAGL,EAAaM,oBAGxB,OAAAJ,EAASK,QAAQP,GACV,IAAME,EAASM,cACvB,CAAC/B,IAGAgC,EAAC,SAAA,CACGvC,IAAAA,EAEAwC,KAAK,SACLC,KAAK,SACLxC,UAAWyC,EAAK,aAAczC,GAC9BO,MAAAA,EACA,gBAAeN,QAAY,EAC3B,gBAAeC,KACXM,EACJkC,QAAU5B,IACNN,EAAKkC,UAAU5B,GACfF,EAAkBE,IAGtB6B,SAAA,CAAAL,EAACM,EAAA,CACGC,GAAG,OACHC,UAAU,SACVC,IAAI,IACJ/C,UAAU,oBACVD,IAAKY,EAELgC,SAAA,CAAAK,EAACC,EAAA,CAAKC,OAAK,EAACL,GAAG,OACVF,SAAAvC,IAEJC,GACG2C,EAACC,EAAA,CAAKC,OAAK,EAACC,SAAO,EAACN,GAAG,OAAOO,KAAK,KAC9BT,SAAAtC,OAIZC,GACG0C,EAAC,OAAA,CAAKhD,UAAU,oBAAoBD,IAAKU,EACpCkC,SAAArC,MAKrB"}

package/build/es/components/select/Select.d.ts

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/select/utils.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\n\nexport function getReactNodeText(node: ReactNode): string {\n    if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n    if (Array.isArray(node)) return node.map(getReactNodeText).join(\"\");\n    if (isValidElement(node)) return getReactNodeText(node.props.children);\n    return \"\";\n}\n\nexport const getButtonText = (\n    selected: Set<string>,\n    valuePairs: ValuePair[],\n    placeholderText: string,\n): string => {\n    if (selected.size === 1) {\n        return (\n            valuePairs.find((p) => selected.has(p.value))?.label ??\n            placeholderText\n        );\n    }\n    return `${selected.size} valgt`;\n};\n\nexport const autofocus =\n    (active: boolean | (() => boolean)) => (el: HTMLElement | null) => {\n        if (el) el.autofocus = typeof active === \"boolean\" ? active : active();\n    };\n"],"names":["getReactNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","getButtonText","selected","valuePairs","placeholderText","size","find","p","has","value","label","autofocus","active","el"],"mappings":"uCAGO,SAASA,EAAiBC,GAC7B,MAAoB,iBAATA,GAAqC,iBAATA,EAA0BC,OAAOD,GACpEE,MAAMC,QAAQH,GAAcA,EAAKI,IAAIL,GAAkBM,KAAK,IAC5DC,EAAeN,GAAcD,EAAiBC,EAAKO,MAAMC,UACtD,EACX,CAEO,MAAMC,EAAgB,CACzBC,EACAC,EACAC,IAEsB,IAAlBF,EAASG,KAELF,EAAWG,KAAMC,GAAML,EAASM,IAAID,EAAEE,SAASC,OAC/CN,EAGD,GAAGF,EAASG,aAGVM,EACRC,GAAuCC,IAChCA,IAAIA,EAAGF,UAA8B,kBAAXC,EAAuBA,EAASA"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/select/utils.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\n\nexport function getReactNodeText(node: ReactNode): string {\n    if (typeof node === \"string\" || typeof node === \"number\")\n        return String(node);\n    if (Array.isArray(node)) return node.map(getReactNodeText).join(\"\");\n    if (isValidElement(node)) return getReactNodeText(node.props.children);\n    return \"\";\n}\n\nexport const getButtonText = (\n    selected: Set<string>,\n    valuePairs: ValuePair[],\n    placeholderText: string,\n): string => {\n    if (selected.size === 1) {\n        return (\n            valuePairs.find((p) => selected.has(p.value))?.label ??\n            placeholderText\n        );\n    }\n    return `${selected.size} valgt`;\n};\n\nexport const autofocus =\n    (active: boolean | (() => boolean)) => (el: HTMLElement | null) => {\n        if (el) el.autofocus = typeof active === \"boolean\" ? active : active();\n    };\n"],"names":["getReactNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","getButtonText","selected","valuePairs","placeholderText","size","find","p","has","value","label","autofocus","active","el"],"mappings":"uCAGO,SAASA,EAAiBC,GAC7B,MAAoB,iBAATA,GAAqC,iBAATA,EAC5BC,OAAOD,GACdE,MAAMC,QAAQH,GAAcA,EAAKI,IAAIL,GAAkBM,KAAK,IAC5DC,EAAeN,GAAcD,EAAiBC,EAAKO,MAAMC,UACtD,EACX,CAEO,MAAMC,EAAgB,CACzBC,EACAC,EACAC,IAEsB,IAAlBF,EAASG,KAELF,EAAWG,KAAMC,GAAML,EAASM,IAAID,EAAEE,SAASC,OAC/CN,EAGD,GAAGF,EAASG,aAGVM,EACRC,GAAuCC,IAChCA,IAAIA,EAAGF,UAA8B,kBAAXC,EAAuBA,EAASA"}

package/build/es/components/table/stories/assets/table-data.d.ts

@@ -0,0 +1,8 @@
+export declare const skadesaker: {
+    columns: string[];
+    rows: string[][];
+};
+export declare const faktura: {
+    columns: string[];
+    rows: (string | number | string[] | Date)[][];
+};

package/build/es/components/table/stories/assets/table-data.js

@@ -0,0 +1,2 @@
+const r={columns:["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],rows:[["24.02.2025","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]]},e={columns:["Forfallsdato","Type","Beløp","Status","Produkt","Kontonummer","KID","Betalingstype"],rows:[[new Date(2025,10,15),"Skade",612.32,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,9,15),"Person",402.67,"Påminnelse",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,8,15),"Person",2412.67,"Inkassovarsel",["Bilforsikring","Katteforsikring","Båtforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,7,15),"Person",719.17,"Faktura",["Båtforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,6,15),"Skade",992.01,"Faktura",["Bilforsikring","Hundeforsikring","Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,5,15),"Person",772.79,"Faktura",["Bilforsikring","Hus","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,4,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,3,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,2,15),"Person",772.79,"Faktura",["Bil","Hus","Innbo"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,1,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Katteforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,0,15),"Person",772.79,"Faktura",["Hundeforsikring","Barneforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,11,15),"Person",772.79,"Faktura",["Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,10,15),"Person",772.79,"Faktura",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,9,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,8,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"]]};export{e as faktura,r as skadesaker};
+//# sourceMappingURL=table-data.js.map

package/build/es/components/table/stories/assets/table-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-data.js","sources":["../../../../../../src/components/table/stories/assets/table-data.ts"],"sourcesContent":["export const skadesaker = {\n    columns: [\n        \"Dato\",\n        \"Saksnummer\",\n        \"Kundenummer\",\n        \"Kundenavn\",\n        \"Milepæl\",\n        \"Følger saken\",\n    ],\n    rows: [\n        [\n            \"24.02.2025\",\n            \"20-1234567\",\n            \"010203 99887\",\n            \"Ola Nordmann\",\n            \"Opprettet\",\n            \"Siri Saksbehandler\",\n        ],\n        [\n            \"13.04.2019\",\n            \"20-8382811\",\n            \"010203 99887\",\n            \"Kari Nordkvinne\",\n            \"Opprettet\",\n            \"Siri Saksbehandler\",\n        ],\n        [\n            \"31.07.2017\",\n            \"20-1111\",\n            \"010203 99887\",\n            \"Kari Nordkvinne\",\n            \"Opprettet\",\n            \"Per Persen\",\n        ],\n    ],\n};\n\nexport const faktura = {\n    columns: [\n        \"Forfallsdato\",\n        \"Type\",\n        \"Beløp\",\n        \"Status\",\n        \"Produkt\",\n        \"Kontonummer\",\n        \"KID\",\n        \"Betalingstype\",\n    ],\n    rows: [\n        [\n            new Date(2025, 10, 15),\n            \"Skade\",\n            612.32,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 9, 15),\n            \"Person\",\n            402.67,\n            \"Påminnelse\",\n            [\"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 8, 15),\n            \"Person\",\n            2412.67,\n            \"Inkassovarsel\",\n            [\"Bilforsikring\", \"Katteforsikring\", \"Båtforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 7, 15),\n            \"Person\",\n            719.17,\n            \"Faktura\",\n            [\"Båtforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 6, 15),\n            \"Skade\",\n            992.01,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Elsparkesykkel\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 5, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hus\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 4, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 3, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 2, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bil\", \"Hus\", \"Innbo\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 1, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Katteforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 0, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Hundeforsikring\", \"Barneforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 11, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Elsparkesykkel\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 10, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 9, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 8, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n    ],\n};\n"],"names":["skadesaker","columns","rows","faktura","Date"],"mappings":"AAAO,MAAMA,EAAa,CACtBC,QAAS,CACL,OACA,aACA,cACA,YACA,UACA,gBAEJC,KAAM,CACF,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,gBAKCC,EAAU,CACnBF,QAAS,CACL,eACA,OACA,QACA,SACA,UACA,cACA,MACA,iBAEJC,KAAM,CACF,CACI,IAAIE,KAAK,KAAM,GAAI,IACnB,QACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,aACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,QACA,gBACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,QACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,kBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,MAAO,iBACzB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,MAAO,MAAO,SACf,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,mBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,kBAAmB,mBACpB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,kBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,mBAClB,gBACA,iBACA"}

package/build/es/utilities/types.d.ts

@@ -3,7 +3,7 @@ import { default as tokens } from '../tokens.js';
 export interface DataTestAutoId {
     "data-testautoid"?: string;
 }
-export declare const BRANDS: readonly [];
+export declare const BRANDS: readonly ["dnb"];
 export type Brand = (typeof BRANDS)[number];
 export type Size = "small" | "medium" | "large";
 export type ColorScheme = "light" | "dark";

package/build/es/utilities/types.js

@@ -1,2 +1,2 @@
-const o=[];export{o as BRANDS};
+const n=["dnb"];export{n as BRANDS};
 //# sourceMappingURL=types.js.map

package/build/es/utilities/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n    \"data-testautoid\"?: string;\n}\n\nexport const BRANDS = [] as const;\nexport type Brand = (typeof BRANDS)[number];\nexport type Size = \"small\" | \"medium\" | \"large\";\nexport type ColorScheme = \"light\" | \"dark\";\n\n/**\n * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene\n * @example type Props = { myProp: string } & JokulModes;\n * @example interface Props extends JokulModes { myProp: string };\n */\nexport interface JokulModes {\n    \"data-brand\"?: Brand;\n    \"data-size\"?: Size;\n    \"data-theme\"?: ColorScheme;\n}\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n    children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n    children?: ReactNode | ReactNode[];\n}\n"],"names":["BRANDS"],"mappings":"AASO,MAAMA,EAAS"}
+{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n    \"data-testautoid\"?: string;\n}\n\nexport const BRANDS = [\"dnb\"] as const;\nexport type Brand = (typeof BRANDS)[number];\nexport type Size = \"small\" | \"medium\" | \"large\";\nexport type ColorScheme = \"light\" | \"dark\";\n\n/**\n * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene\n * @example type Props = { myProp: string } & JokulModes;\n * @example interface Props extends JokulModes { myProp: string };\n */\nexport interface JokulModes {\n    \"data-brand\"?: Brand;\n    \"data-size\"?: Size;\n    \"data-theme\"?: ColorScheme;\n}\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n    children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n    children?: ReactNode | ReactNode[];\n}\n"],"names":["BRANDS"],"mappings":"AASO,MAAMA,EAAS,CAAC"}