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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/cjs/tokens.cjs

@@ -1,2 +1,2 @@
-"use strict";module.exports={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};
+"use strict";module.exports={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},opacity:{hover:"var(--jkl-opacity-hover)"},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};
 //# sourceMappingURL=tokens.cjs.map

package/build/cjs/tokens.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n  color: {\n    \"@\": {\n      background: {\n        page: \"var(--jkl-color-background-page)\",\n        container: \"var(--jkl-color-background-container)\",\n        \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n        contrast: \"var(--jkl-color-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-text-default)\",\n        subdued: \"var(--jkl-color-text-subdued)\",\n        accent: \"var(--jkl-color-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-border-default)\",\n        subdued: \"var(--jkl-color-border-subdued)\",\n        strong: \"var(--jkl-color-border-strong)\",\n      },\n    },\n    warning: {\n      background: {\n        page: \"var(--jkl-color-warning-background-page)\",\n        container: \"var(--jkl-color-warning-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-warning-background-container-accent)\",\n        contrast: \"var(--jkl-color-warning-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-warning-text-default)\",\n        subdued: \"var(--jkl-color-warning-text-subdued)\",\n        accent: \"var(--jkl-color-warning-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-warning-border-default)\",\n        subdued: \"var(--jkl-color-warning-border-subdued)\",\n        strong: \"var(--jkl-color-warning-border-strong)\",\n      },\n    },\n    success: {\n      background: {\n        page: \"var(--jkl-color-success-background-page)\",\n        container: \"var(--jkl-color-success-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-success-background-container-accent)\",\n        contrast: \"var(--jkl-color-success-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-success-text-default)\",\n        subdued: \"var(--jkl-color-success-text-subdued)\",\n        accent: \"var(--jkl-color-success-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-success-border-default)\",\n        subdued: \"var(--jkl-color-success-border-subdued)\",\n        strong: \"var(--jkl-color-success-border-strong)\",\n      },\n    },\n    info: {\n      background: {\n        page: \"var(--jkl-color-info-background-page)\",\n        container: \"var(--jkl-color-info-background-container)\",\n        \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n        contrast: \"var(--jkl-color-info-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-info-text-default)\",\n        subdued: \"var(--jkl-color-info-text-subdued)\",\n        accent: \"var(--jkl-color-info-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-info-border-default)\",\n        subdued: \"var(--jkl-color-info-border-subdued)\",\n        strong: \"var(--jkl-color-info-border-strong)\",\n      },\n    },\n    error: {\n      background: {\n        page: \"var(--jkl-color-error-background-page)\",\n        container: \"var(--jkl-color-error-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-error-background-container-accent)\",\n        contrast: \"var(--jkl-color-error-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-error-text-default)\",\n        subdued: \"var(--jkl-color-error-text-subdued)\",\n        accent: \"var(--jkl-color-error-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-error-border-default)\",\n        subdued: \"var(--jkl-color-error-border-subdued)\",\n        strong: \"var(--jkl-color-error-border-strong)\",\n      },\n    },\n  },\n  unit: {\n    0: \"var(--jkl-unit-0)\",\n    10: \"var(--jkl-unit-10)\",\n    15: \"var(--jkl-unit-15)\",\n    20: \"var(--jkl-unit-20)\",\n    25: \"var(--jkl-unit-25)\",\n    30: \"var(--jkl-unit-30)\",\n    35: \"var(--jkl-unit-35)\",\n    40: \"var(--jkl-unit-40)\",\n    50: \"var(--jkl-unit-50)\",\n    60: \"var(--jkl-unit-60)\",\n    70: \"var(--jkl-unit-70)\",\n    80: \"var(--jkl-unit-80)\",\n    90: \"var(--jkl-unit-90)\",\n    100: \"var(--jkl-unit-100)\",\n    130: \"var(--jkl-unit-130)\",\n    210: \"var(--jkl-unit-210)\",\n    base: \"var(--jkl-unit-base)\",\n    \"02\": \"var(--jkl-unit-02)\",\n    \"05\": \"var(--jkl-unit-05)\",\n  },\n  spacing: {\n    0: \"var(--jkl-spacing-0)\",\n    2: \"var(--jkl-spacing-2)\",\n    4: \"var(--jkl-spacing-4)\",\n    8: \"var(--jkl-spacing-8)\",\n    12: \"var(--jkl-spacing-12)\",\n    16: \"var(--jkl-spacing-16)\",\n    24: \"var(--jkl-spacing-24)\",\n    32: \"var(--jkl-spacing-32)\",\n    40: \"var(--jkl-spacing-40)\",\n    64: \"var(--jkl-spacing-64)\",\n    104: \"var(--jkl-spacing-104)\",\n    168: \"var(--jkl-spacing-168)\",\n    none: \"var(--jkl-spacing-none)\",\n    \"2xs\": \"var(--jkl-spacing-2xs)\",\n    xs: \"var(--jkl-spacing-xs)\",\n    s: \"var(--jkl-spacing-s)\",\n    m: \"var(--jkl-spacing-m)\",\n    l: \"var(--jkl-spacing-l)\",\n    xl: \"var(--jkl-spacing-xl)\",\n    \"2xl\": \"var(--jkl-spacing-2xl)\",\n  },\n  border: {\n    width: {\n      1: \"var(--jkl-border-width-1)\",\n      2: \"var(--jkl-border-width-2)\",\n      3: \"var(--jkl-border-width-3)\",\n    },\n    radius: {\n      none: \"var(--jkl-border-radius-none)\",\n      xs: \"var(--jkl-border-radius-xs)\",\n      s: \"var(--jkl-border-radius-s)\",\n      m: \"var(--jkl-border-radius-m)\",\n      l: \"var(--jkl-border-radius-l)\",\n      full: \"var(--jkl-border-radius-full)\",\n    },\n  },\n  breakpoint: {\n    small: \"0\",\n    medium: \"680px\",\n    large: \"1200px\",\n    xl: \"1600px\",\n  },\n  motion: {\n    timing: {\n      energetic: \"var(--jkl-motion-timing-energetic)\",\n      snappy: \"var(--jkl-motion-timing-snappy)\",\n      productive: \"var(--jkl-motion-timing-productive)\",\n      polite: \"var(--jkl-motion-timing-polite)\",\n      expressive: \"var(--jkl-motion-timing-expressive)\",\n      lazy: \"var(--jkl-motion-timing-lazy)\",\n    },\n    easing: {\n      standard: \"var(--jkl-motion-easing-standard)\",\n      entrance: \"var(--jkl-motion-easing-entrance)\",\n      exit: \"var(--jkl-motion-easing-exit)\",\n      easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n      focus: \"var(--jkl-motion-easing-focus)\",\n    },\n  },\n  font: {\n    size: {\n      1: \"var(--jkl-font-size-1)\",\n      2: \"var(--jkl-font-size-2)\",\n      3: \"var(--jkl-font-size-3)\",\n      4: \"var(--jkl-font-size-4)\",\n      5: \"var(--jkl-font-size-5)\",\n      6: \"var(--jkl-font-size-6)\",\n      7: \"var(--jkl-font-size-7)\",\n      8: \"var(--jkl-font-size-8)\",\n      9: \"var(--jkl-font-size-9)\",\n      10: \"var(--jkl-font-size-10)\",\n    },\n    weight: {\n      normal: \"var(--jkl-font-weight-normal)\",\n      bold: \"var(--jkl-font-weight-bold)\",\n    },\n    family: {\n      regular: \"var(--jkl-font-family-regular)\",\n      display: \"var(--jkl-font-family-display)\",\n      mono: \"var(--jkl-font-family-mono)\",\n      icons: \"var(--jkl-font-family-icons)\",\n    },\n  },\n  lineHeight: {\n    flush: \"var(--jkl-line-height-flush)\",\n    tight: \"var(--jkl-line-height-tight)\",\n    relaxed: \"var(--jkl-line-height-relaxed)\",\n  },\n  textStyle: {\n    title: \"var(--jkl-text-style-title)\",\n    \"title-small\": \"var(--jkl-text-style-title-small)\",\n    \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n    \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n    \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n    \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n    \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n    \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n    \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n    \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n    \"text-large\": \"var(--jkl-text-style-text-large)\",\n    \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n    \"text-small\": \"var(--jkl-text-style-text-small)\",\n    \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n  },\n};\n"],"names":["color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"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"}
+{"version":3,"file":"tokens.cjs","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n  color: {\n    \"@\": {\n      background: {\n        page: \"var(--jkl-color-background-page)\",\n        container: \"var(--jkl-color-background-container)\",\n        \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n        contrast: \"var(--jkl-color-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-text-default)\",\n        subdued: \"var(--jkl-color-text-subdued)\",\n        accent: \"var(--jkl-color-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-border-default)\",\n        subdued: \"var(--jkl-color-border-subdued)\",\n        strong: \"var(--jkl-color-border-strong)\",\n      },\n    },\n    warning: {\n      background: {\n        page: \"var(--jkl-color-warning-background-page)\",\n        container: \"var(--jkl-color-warning-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-warning-background-container-accent)\",\n        contrast: \"var(--jkl-color-warning-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-warning-text-default)\",\n        subdued: \"var(--jkl-color-warning-text-subdued)\",\n        accent: \"var(--jkl-color-warning-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-warning-border-default)\",\n        subdued: \"var(--jkl-color-warning-border-subdued)\",\n        strong: \"var(--jkl-color-warning-border-strong)\",\n      },\n    },\n    success: {\n      background: {\n        page: \"var(--jkl-color-success-background-page)\",\n        container: \"var(--jkl-color-success-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-success-background-container-accent)\",\n        contrast: \"var(--jkl-color-success-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-success-text-default)\",\n        subdued: \"var(--jkl-color-success-text-subdued)\",\n        accent: \"var(--jkl-color-success-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-success-border-default)\",\n        subdued: \"var(--jkl-color-success-border-subdued)\",\n        strong: \"var(--jkl-color-success-border-strong)\",\n      },\n    },\n    info: {\n      background: {\n        page: \"var(--jkl-color-info-background-page)\",\n        container: \"var(--jkl-color-info-background-container)\",\n        \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n        contrast: \"var(--jkl-color-info-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-info-text-default)\",\n        subdued: \"var(--jkl-color-info-text-subdued)\",\n        accent: \"var(--jkl-color-info-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-info-border-default)\",\n        subdued: \"var(--jkl-color-info-border-subdued)\",\n        strong: \"var(--jkl-color-info-border-strong)\",\n      },\n    },\n    error: {\n      background: {\n        page: \"var(--jkl-color-error-background-page)\",\n        container: \"var(--jkl-color-error-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-error-background-container-accent)\",\n        contrast: \"var(--jkl-color-error-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-error-text-default)\",\n        subdued: \"var(--jkl-color-error-text-subdued)\",\n        accent: \"var(--jkl-color-error-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-error-border-default)\",\n        subdued: \"var(--jkl-color-error-border-subdued)\",\n        strong: \"var(--jkl-color-error-border-strong)\",\n      },\n    },\n  },\n  opacity: {\n    hover: \"var(--jkl-opacity-hover)\",\n  },\n  unit: {\n    0: \"var(--jkl-unit-0)\",\n    10: \"var(--jkl-unit-10)\",\n    15: \"var(--jkl-unit-15)\",\n    20: \"var(--jkl-unit-20)\",\n    25: \"var(--jkl-unit-25)\",\n    30: \"var(--jkl-unit-30)\",\n    35: \"var(--jkl-unit-35)\",\n    40: \"var(--jkl-unit-40)\",\n    50: \"var(--jkl-unit-50)\",\n    60: \"var(--jkl-unit-60)\",\n    70: \"var(--jkl-unit-70)\",\n    80: \"var(--jkl-unit-80)\",\n    90: \"var(--jkl-unit-90)\",\n    100: \"var(--jkl-unit-100)\",\n    130: \"var(--jkl-unit-130)\",\n    210: \"var(--jkl-unit-210)\",\n    base: \"var(--jkl-unit-base)\",\n    \"02\": \"var(--jkl-unit-02)\",\n    \"05\": \"var(--jkl-unit-05)\",\n  },\n  spacing: {\n    0: \"var(--jkl-spacing-0)\",\n    2: \"var(--jkl-spacing-2)\",\n    4: \"var(--jkl-spacing-4)\",\n    8: \"var(--jkl-spacing-8)\",\n    12: \"var(--jkl-spacing-12)\",\n    16: \"var(--jkl-spacing-16)\",\n    24: \"var(--jkl-spacing-24)\",\n    32: \"var(--jkl-spacing-32)\",\n    40: \"var(--jkl-spacing-40)\",\n    64: \"var(--jkl-spacing-64)\",\n    104: \"var(--jkl-spacing-104)\",\n    168: \"var(--jkl-spacing-168)\",\n    none: \"var(--jkl-spacing-none)\",\n    \"2xs\": \"var(--jkl-spacing-2xs)\",\n    xs: \"var(--jkl-spacing-xs)\",\n    s: \"var(--jkl-spacing-s)\",\n    m: \"var(--jkl-spacing-m)\",\n    l: \"var(--jkl-spacing-l)\",\n    xl: \"var(--jkl-spacing-xl)\",\n    \"2xl\": \"var(--jkl-spacing-2xl)\",\n  },\n  border: {\n    width: {\n      1: \"var(--jkl-border-width-1)\",\n      2: \"var(--jkl-border-width-2)\",\n      3: \"var(--jkl-border-width-3)\",\n    },\n    radius: {\n      none: \"var(--jkl-border-radius-none)\",\n      xs: \"var(--jkl-border-radius-xs)\",\n      s: \"var(--jkl-border-radius-s)\",\n      m: \"var(--jkl-border-radius-m)\",\n      l: \"var(--jkl-border-radius-l)\",\n      full: \"var(--jkl-border-radius-full)\",\n    },\n  },\n  breakpoint: {\n    small: \"0\",\n    medium: \"680px\",\n    large: \"1200px\",\n    xl: \"1600px\",\n  },\n  motion: {\n    timing: {\n      energetic: \"var(--jkl-motion-timing-energetic)\",\n      snappy: \"var(--jkl-motion-timing-snappy)\",\n      productive: \"var(--jkl-motion-timing-productive)\",\n      polite: \"var(--jkl-motion-timing-polite)\",\n      expressive: \"var(--jkl-motion-timing-expressive)\",\n      lazy: \"var(--jkl-motion-timing-lazy)\",\n    },\n    easing: {\n      standard: \"var(--jkl-motion-easing-standard)\",\n      entrance: \"var(--jkl-motion-easing-entrance)\",\n      exit: \"var(--jkl-motion-easing-exit)\",\n      easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n      focus: \"var(--jkl-motion-easing-focus)\",\n    },\n  },\n  font: {\n    size: {\n      1: \"var(--jkl-font-size-1)\",\n      2: \"var(--jkl-font-size-2)\",\n      3: \"var(--jkl-font-size-3)\",\n      4: \"var(--jkl-font-size-4)\",\n      5: \"var(--jkl-font-size-5)\",\n      6: \"var(--jkl-font-size-6)\",\n      7: \"var(--jkl-font-size-7)\",\n      8: \"var(--jkl-font-size-8)\",\n      9: \"var(--jkl-font-size-9)\",\n      10: \"var(--jkl-font-size-10)\",\n    },\n    weight: {\n      normal: \"var(--jkl-font-weight-normal)\",\n      bold: \"var(--jkl-font-weight-bold)\",\n    },\n    family: {\n      regular: \"var(--jkl-font-family-regular)\",\n      display: \"var(--jkl-font-family-display)\",\n      mono: \"var(--jkl-font-family-mono)\",\n      icons: \"var(--jkl-font-family-icons)\",\n    },\n  },\n  lineHeight: {\n    flush: \"var(--jkl-line-height-flush)\",\n    tight: \"var(--jkl-line-height-tight)\",\n    relaxed: \"var(--jkl-line-height-relaxed)\",\n  },\n  textStyle: {\n    title: \"var(--jkl-text-style-title)\",\n    \"title-small\": \"var(--jkl-text-style-title-small)\",\n    \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n    \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n    \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n    \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n    \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n    \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n    \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n    \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n    \"text-large\": \"var(--jkl-text-style-text-large)\",\n    \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n    \"text-small\": \"var(--jkl-text-style-text-small)\",\n    \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n  },\n};\n"],"names":["color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","opacity","hover","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"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"}

package/build/cjs/tokens.d.cts

@@ -99,6 +99,9 @@ declare const _default: {
             };
         };
     };
+    opacity: {
+        hover: string;
+    };
     unit: {
         0: string;
         10: string;

package/build/cjs/utilities/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),i=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),p=require("./getThemeAndSize.cjs"),g=require("./mergeRefs.cjs"),c=require("../hooks/useMergeRefs/useMergeRefs.cjs"),E=require("./polymorphism/mergeProps.cjs"),x=require("./polymorphism/SlotComponent.cjs"),j=require("./tabListener.cjs"),R=require("./validators/isValidEpost/isValidEpost.cjs"),N=require("./validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),V=require("./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),q=require("./validators/isValidChassisnummer/isValidChassisnummer.cjs"),M=require("./validators/isExactLength/isExactLength.cjs"),h=require("./validators/isInteger/isInteger.cjs"),O=require("./validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),S=require("./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),T=require("./validators/isValidName/isValidName.cjs"),v=require("./validators/hasMinimumWords/hasMinimumWords.cjs"),b=require("./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),A=require("./valuePair.cjs"),G=require("./types.cjs");exports.unicode=e.unicode,exports.formatNumber=r.formatNumber,exports.parseNumber=s.parseNumber,exports.registerWithMasks=t.registerWithMasks,exports.formatAvstand=a.formatAvstand,exports.formatBytes=i.formatBytes,exports.formatDate=o.formatDate,exports.FODSELSNUMMER_REGEX=m.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=m.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=n.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=n.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=u.KONTONUMMER_REGEX,exports.formatKontonummer=u.formatKontonummer,exports.KORTNUMMER_REGEX=l.KORTNUMMER_REGEX,exports.formatKortnummer=l.formatKortnummer,exports.TELEFONNUMMER_REGEX=d.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=d.formatTelefonnummer,exports.formatValuta=f.formatValuta,exports.getThemeAndSize=p.getThemeAndSize,exports.mergeRefs=g.mergeRefs,exports.useMergeRefs=c.useMergeRefs,exports.mergeProps=E.mergeProps,exports.SlotComponent=x.SlotComponent,exports.initTabListener=j.initTabListener,exports.isValidEpost=R.isValidEpost,exports.isValidTelefonnummer=N.isValidTelefonnummer,exports.isValidRegistreringsnummer=V.isValidRegistreringsnummer,exports.isValidChassisnummer=q.isValidChassisnummer,exports.isExactLength=M.isExactLength,exports.isInteger=h.isInteger,exports.isValidFodselsnummer=O.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=S.isValidOrganisasjonsnummer,exports.isValidName=T.isValidName,exports.hasMinimumWords=v.hasMinimumWords,exports.hasNoIllegalCharacters=b.hasNoIllegalCharacters,exports.getValuePair=A.getValuePair,exports.BRANDS=G.BRANDS;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),o=require("./formatters/bytes/formatBytes.cjs"),i=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),p=require("./formatters/valuta/formatValuta.cjs"),f=require("./getThemeAndSize.cjs"),E=require("./mergeRefs.cjs"),g=require("../hooks/useMergeRefs/useMergeRefs.cjs"),x=require("./polymorphism/mergeProps.cjs"),c=require("./polymorphism/SlotComponent.cjs"),j=require("./tabListener.cjs"),R=require("./validators/isValidEpost/isValidEpost.cjs"),M=require("./validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),N=require("./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),V=require("./validators/isValidChassisnummer/isValidChassisnummer.cjs"),q=require("./validators/isExactLength/isExactLength.cjs"),O=require("./validators/isInteger/isInteger.cjs"),S=require("./validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),h=require("./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),T=require("./validators/isValidName/isValidName.cjs"),v=require("./validators/hasMinimumWords/hasMinimumWords.cjs"),C=require("./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),L=require("./valuePair.cjs"),_=require("./types.cjs");exports.unicode=e.unicode,exports.formatNumber=r.formatNumber,exports.parseNumber=s.parseNumber,exports.registerWithMasks=t.registerWithMasks,exports.formatAvstand=a.formatAvstand,exports.formatBytes=o.formatBytes,exports.formatDate=i.formatDate,exports.FODSELSNUMMER_REGEX=m.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=m.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=n.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=n.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=u.KONTONUMMER_REGEX,exports.formatKontonummer=u.formatKontonummer,exports.KORTNUMMER_REGEX=l.KORTNUMMER_REGEX,exports.formatKortnummer=l.formatKortnummer,exports.TELEFONNUMMER_REGEX=d.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=d.formatTelefonnummer,exports.formatValuta=p.formatValuta,exports.getThemeAndSize=f.getThemeAndSize,exports.mergeRefs=E.mergeRefs,exports.useMergeRefs=g.useMergeRefs,exports.mergeProps=x.mergeProps,exports.SlotComponent=c.SlotComponent,exports.initTabListener=j.initTabListener,exports.isValidEpost=R.isValidEpost,exports.isValidTelefonnummer=M.isValidTelefonnummer,exports.isValidRegistreringsnummer=N.isValidRegistreringsnummer,exports.isValidChassisnummer=V.isValidChassisnummer,exports.isExactLength=q.isExactLength,exports.isInteger=O.isInteger,exports.isValidFodselsnummer=S.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=h.isValidOrganisasjonsnummer,exports.isValidName=T.isValidName,exports.hasMinimumWords=v.hasMinimumWords,exports.hasNoIllegalCharacters=C.hasNoIllegalCharacters,exports.getValuePair=L.getValuePair,exports.BRANDS=_.BRANDS,exports.COLOR_MODES=_.COLOR_MODES,exports.COLOR_SCHEMES=_.COLOR_SCHEMES,exports.SIZES=_.SIZES;
 //# sourceMappingURL=index.cjs.map

package/build/cjs/utilities/types.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.BRANDS=["dnb"];
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.BRANDS=["dnb"],exports.COLOR_MODES=["error","success","warning","info"],exports.COLOR_SCHEMES=["light","dark"],exports.SIZES=["small","medium","large"];
 //# sourceMappingURL=types.cjs.map

package/build/cjs/utilities/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","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":[],"mappings":"+FASsB,CAAC"}
+{"version":3,"file":"types.cjs","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];\n\nexport const SIZES = [\"small\", \"medium\", \"large\"] as const;\nexport type Size = (typeof SIZES)[number];\n\nexport const COLOR_SCHEMES = [\"light\", \"dark\"] as const;\nexport type ColorScheme = (typeof COLOR_SCHEMES)[number];\n\nexport const COLOR_MODES = [\"error\", \"success\", \"warning\", \"info\"] as const;\nexport type ColorMode = (typeof COLOR_MODES)[number];\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    \"data-color\"?: ColorMode;\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\n/**\n * @see WithReadOnly\n */\nexport interface WithDisabled {\n    /**\n     * Deaktiverer kontrollen.\n     *\n     * Bruk den bare i interne verktøy, aldri i kundeflyter. En deaktivert kontroll\n     * forklarer ikke hvorfor den er låst eller hva som må til for å låse den opp,\n     * og den dempede kontrasten gjør den vanskelig å lese. Skal et valg ikke være\n     * tilgjengelig for kunden, la det heller være ute av skjemaet, eller forklar\n     * kravet med `description` eller `errorLabel`.\n     */\n    disabled?: boolean;\n}\n\n/**\n * @see WithDisabled\n */\nexport interface WithReadOnly {\n    /**\n     * Gjør kontrollen uredigerbar. Verdien beholder full tekstkontrast, og feltet\n     * kan fortsatt fokuseres og kopieres fra.\n     *\n     * Bruk den bare i interne verktøy, aldri i kundeflyter. Kunden får ikke vite\n     * hvorfor feltet er låst eller hva som må til for å endre det. Skal en verdi\n     * bare vises i en kundeflyt, vis den som tekst framfor som et låst skjemafelt.\n     */\n    readOnly?: boolean;\n}\n"],"names":[],"mappings":"+FASsB,CAAC,2BASI,CAAC,QAAS,UAAW,UAAW,8BAH9B,CAAC,QAAS,sBAHlB,CAAC,QAAS,SAAU"}

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

@@ -5,8 +5,12 @@ export interface DataTestAutoId {
 }
 export declare const BRANDS: readonly ["dnb"];
 export type Brand = (typeof BRANDS)[number];
-export type Size = "small" | "medium" | "large";
-export type ColorScheme = "light" | "dark";
+export declare const SIZES: readonly ["small", "medium", "large"];
+export type Size = (typeof SIZES)[number];
+export declare const COLOR_SCHEMES: readonly ["light", "dark"];
+export type ColorScheme = (typeof COLOR_SCHEMES)[number];
+export declare const COLOR_MODES: readonly ["error", "success", "warning", "info"];
+export type ColorMode = (typeof COLOR_MODES)[number];
 /**
  * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene
  * @example type Props = { myProp: string } & JokulModes;
@@ -16,6 +20,7 @@ export interface JokulModes {
     "data-brand"?: Brand;
     "data-size"?: Size;
     "data-theme"?: ColorScheme;
+    "data-color"?: ColorMode;
 }
 export type Easing = keyof typeof tokens.motion.easing;
 export type Timing = keyof typeof tokens.motion.timing;
@@ -51,3 +56,32 @@ export interface WithChildren {
 export interface WithOptionalChildren {
     children?: ReactNode | ReactNode[];
 }
+/**
+ * @see WithReadOnly
+ */
+export interface WithDisabled {
+    /**
+     * Deaktiverer kontrollen.
+     *
+     * Bruk den bare i interne verktøy, aldri i kundeflyter. En deaktivert kontroll
+     * forklarer ikke hvorfor den er låst eller hva som må til for å låse den opp,
+     * og den dempede kontrasten gjør den vanskelig å lese. Skal et valg ikke være
+     * tilgjengelig for kunden, la det heller være ute av skjemaet, eller forklar
+     * kravet med `description` eller `errorLabel`.
+     */
+    disabled?: boolean;
+}
+/**
+ * @see WithDisabled
+ */
+export interface WithReadOnly {
+    /**
+     * Gjør kontrollen uredigerbar. Verdien beholder full tekstkontrast, og feltet
+     * kan fortsatt fokuseres og kopieres fra.
+     *
+     * Bruk den bare i interne verktøy, aldri i kundeflyter. Kunden får ikke vite
+     * hvorfor feltet er låst eller hva som må til for å endre det. Skal en verdi
+     * bare vises i en kundeflyt, vis den som tekst framfor som et låst skjemafelt.
+     */
+    readOnly?: boolean;
+}