@helsenorge/designsystem-react 14.6.0 → 14.7.0

package/lib/components/Filter/index.js

@@ -0,0 +1,109 @@
+import { useState } from "react";
+const useFilter = (options) => {
+	const [filters, setFiltersState] = useState(() => ({ ...options?.defaultValues }));
+	const removeFilter = (filterKey, optionValue) => {
+		setFiltersState((prev) => {
+			const current = prev[filterKey];
+			if (current === void 0) return prev;
+			if (optionValue !== void 0 && Array.isArray(current)) {
+				const updated = current.filter((v) => v !== optionValue);
+				if (updated.length === 0) {
+					const { [filterKey]: _removed$1, ...rest$1 } = prev;
+					return rest$1;
+				}
+				return {
+					...prev,
+					[filterKey]: updated
+				};
+			}
+			const { [filterKey]: _removed, ...rest } = prev;
+			return rest;
+		});
+	};
+	const setFilter = (name, value) => {
+		if (value === void 0) {
+			removeFilter(name);
+			return;
+		}
+		setFiltersState((prev) => ({
+			...prev,
+			[name]: value
+		}));
+	};
+	const setFilters = (newFilters) => {
+		setFiltersState(newFilters);
+	};
+	const resetFilters = () => {
+		setFiltersState({ ...options?.defaultValues });
+	};
+	const resetFiltersToEmpty = () => {
+		setFiltersState({});
+	};
+	return {
+		filters,
+		setFilter,
+		setFilters,
+		removeFilter,
+		resetFilters,
+		resetFiltersToEmpty
+	};
+};
+const createFilterConfig = (categories) => {
+	const defaultValues = {};
+	const labelMaps = /* @__PURE__ */ new Map();
+	for (const key in categories) {
+		const category = categories[key];
+		if (category?.defaultValue !== void 0) defaultValues[key] = category.defaultValue;
+		if (category?.options) {
+			const resolve = category.getLabel ?? ((o) => String(o.value));
+			const map = /* @__PURE__ */ new Map();
+			for (const opt of category.options) map.set(opt.value, resolve(opt));
+			labelMaps.set(key, map);
+		}
+	}
+	const getLabel = (key, value) => {
+		return labelMaps.get(key)?.get(value) ?? String(value);
+	};
+	return {
+		filterOptions: { defaultValues },
+		getLabel
+	};
+};
+const matchFilter = {
+	arrayIncludes: (accessor) => (item, value) => {
+		const filterValues = Array.isArray(value) ? value : [value];
+		const itemValue = accessor(item);
+		if (Array.isArray(itemValue)) return itemValue.some((v) => filterValues.includes(v));
+		return filterValues.includes(itemValue);
+	},
+	exactMatch: (accessor) => (item, value) => {
+		if (Array.isArray(value)) return value.includes(accessor(item));
+		return accessor(item) === value;
+	},
+	booleanToggle: (accessor) => (item, value) => {
+		return !(Array.isArray(value) ? value.includes(true) : value === true) || accessor(item);
+	},
+	textSearch: (...accessors) => (item, value) => {
+		const search = String(value).toLowerCase();
+		return accessors.some((accessor) => accessor(item)?.toLowerCase().includes(search));
+	}
+};
+const filterItems = (items, filters, matchers) => {
+	return items.filter((item) => {
+		for (const key in matchers) {
+			const value = filters[key];
+			if (value === void 0) continue;
+			const matcher = matchers[key];
+			if (matcher && !matcher(item, value)) return false;
+		}
+		return true;
+	});
+};
+const toggleArrayFilter = (filter, filterKey, value) => {
+	const current = filter.filters[filterKey] ?? [];
+	const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+	filter.setFilter(filterKey, updated.length > 0 ? updated : void 0);
+};
+export { createFilterConfig, filterItems, matchFilter, toggleArrayFilter, useFilter };
+
+//# sourceMappingURL=index.js.map

package/lib/components/Filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Filter/useFilter.ts","../../../src/components/Filter/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\n// Key er string men value kan være hva som helst og er ukjent for oss internt i useFilter. Den er typesikker for consumer.\n// Dette mønsteret lar oss ha ulike typer i samme objekt.\nexport type FilterValues = Record<string, unknown>;\n\nexport interface UseFilterOptions<T extends FilterValues> {\n  /** Initial filter values */\n  defaultValues?: Partial<T>;\n}\n\nexport interface UseFilterReturn<T extends FilterValues> {\n  /** Current filter state */\n  filters: Partial<T>;\n  /** Update a single filter. Pass undefined to remove it. */\n  setFilter: <K extends keyof T>(name: K, value: T[K] | undefined) => void;\n  /** Replace all filters at once (useful for applying draft/delayed filters) */\n  setFilters: (filters: Partial<T>) => void;\n  /** Remove a filter entirely, or a specific value from an array filter */\n  removeFilter: (filterKey: keyof T | string, optionValue?: unknown) => void;\n  /** Reset filters to default values */\n  resetFilters: () => void;\n  /** Resets to empty filter */\n  resetFiltersToEmpty: () => void;\n}\n\nexport const useFilter = <T extends FilterValues>(options?: UseFilterOptions<T>): UseFilterReturn<T> => {\n  const [filters, setFiltersState] = useState<Partial<T>>(() => ({ ...options?.defaultValues }) as Partial<T>);\n\n  // Fjern et filter helt, eller fjern en spesifikk verdi fra et array-filter.\n  const removeFilter = (filterKey: keyof T, optionValue?: unknown): void => {\n    setFiltersState(prev => {\n      const current = prev[filterKey];\n      if (current === undefined) return prev;\n      if (optionValue !== undefined && Array.isArray(current)) {\n        const updated = current.filter(v => v !== optionValue);\n        if (updated.length === 0) {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [filterKey as string]: _removed, ...rest } = prev;\n          return rest as Partial<T>;\n        }\n        return { ...prev, [filterKey]: updated };\n      }\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { [filterKey as string]: _removed, ...rest } = prev;\n      return rest as Partial<T>;\n    });\n  };\n\n  // Sett en filtervalue. Send inn undefined for å fjerne filteret.\n  const setFilter = <K extends keyof T>(name: K, value: T[K] | undefined): void => {\n    if (value === undefined) {\n      removeFilter(name);\n      return;\n    }\n    setFiltersState(prev => ({ ...prev, [name]: value }));\n  };\n\n  // Erstatt alle filtre på en gang (f.eks. ved \"Bruk filter\" i delayed filtrering).\n  const setFilters = (newFilters: Partial<T>): void => {\n    setFiltersState(newFilters);\n  };\n\n  const resetFilters = (): void => {\n    setFiltersState({ ...options?.defaultValues } as Partial<T>);\n  };\n\n  const resetFiltersToEmpty = (): void => {\n    setFiltersState({});\n  };\n\n  return { filters, setFilter, setFilters, removeFilter, resetFilters, resetFiltersToEmpty };\n};\n","import type { FilterValues, UseFilterOptions, UseFilterReturn } from './useFilter';\n\n/** Et filtervalg med verdi og visningstekst */\nexport interface FilterOption<V = string> {\n  value: V;\n  label: string;\n}\n\n// Hvis V er et array (f.eks. string[]), hent ut typen inni arrayet (string).\n// Hvis V ikke er et array (f.eks. boolean), bruk V som den er.\n// Brukes for å sikre at options-listen matcher elementene, ikke hele arrayet.\n// Eksempel: FilterCategoryConfig<string[]> → options er FilterOption<string>[], ikke FilterOption<string[]>[]\ntype OptionValue<V> = V extends (infer U)[] ? U : V;\n\n/** Konfigurasjon for en filterkategori. */\nexport interface FilterCategoryConfig<V = unknown> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  options?: ({ value: OptionValue<V> } & { [key: string]: any })[];\n  defaultValue?: V;\n  /** Hent visningstekst fra et option-objekt. Hvis ikke satt, brukes String(value). */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getLabel?: (option: any) => string;\n}\n\nexport interface FilterConfigResult<T extends FilterValues> {\n  /** Options for useFilter (defaultValues) */\n  filterOptions: UseFilterOptions<T>;\n  /** Look up the display label for a filter value */\n  getLabel: (key: keyof T, value: unknown) => string;\n}\n\n/**\n * Lager UseFilterOptions fra et oppsett av filterkategorier.\n * Samler defaultValues og label-oppslag automatisk fra config.\n *\n * Eksempel:\n *   const { filterOptions, getLabel } = createFilterConfig<MyFilters>({\n *     sykehus: { options: sykehusOptions, defaultValue: ['haukeland'], getLabel: o => o.label },\n *     status: { options: statusOptions, getLabel: o => o.displayText },\n *   });\n *   const filter = useFilter(filterOptions);\n *   getLabel('sykehus', 'haukeland') // → 'Haukeland universitetssjukehus'\n */\nexport const createFilterConfig = <T extends FilterValues>(categories: {\n  [K in keyof T]?: FilterCategoryConfig<T[K]>;\n}): FilterConfigResult<T> => {\n  const defaultValues = {} as Partial<T>;\n  const labelMaps = new Map<string, Map<unknown, string>>();\n\n  for (const key in categories) {\n    const category = categories[key];\n    if (category?.defaultValue !== undefined) {\n      defaultValues[key] = category.defaultValue as T[typeof key];\n    }\n    if (category?.options) {\n      const resolve = category.getLabel ?? ((o: { value: unknown }): string => String(o.value));\n      const map = new Map<unknown, string>();\n      for (const opt of category.options) {\n        map.set(opt.value, resolve(opt));\n      }\n      labelMaps.set(key, map);\n    }\n  }\n\n  const getLabel = (key: keyof T, value: unknown): string => {\n    return labelMaps.get(key as string)?.get(value) ?? String(value); // todo: fallback til .displaytext om det ikke er sendt inn noe, og String(value) om .label ikke finnes\n  };\n\n  return { filterOptions: { defaultValues }, getLabel };\n};\n\n/**\n * Ferdige matcher-funksjoner for typiske filter mønster.\n * Brukes som deler i matcher objektet til filterItems.\n *\n * Eksempel:\n *   const filterMatchers = {\n *     categories: matchFilter.arrayIncludes<Medisin>(m => m.sykehus),\n *     status: matchFilter.exactMatch<Medisin>(m => m.status),\n *     eResept: matchFilter.booleanToggle<Medisin>(m => m.eResept),\n *   };\n */\nexport const matchFilter = {\n  /** Array-filter: matcher hvis det er overlapp mellom filterverdier og item-verdier (OR-logikk). */\n  arrayIncludes:\n    <TItem>(accessor: (item: TItem) => unknown) =>\n    (item: TItem, value: unknown): boolean => {\n      const filterValues = Array.isArray(value) ? value : [value];\n      const itemValue = accessor(item);\n      if (Array.isArray(itemValue)) {\n        return itemValue.some(v => filterValues.includes(v));\n      }\n      return filterValues.includes(itemValue);\n    },\n\n  /** Eksakt match: matcher hvis item-verdien er lik én av filterverdiene */\n  exactMatch:\n    <TItem>(accessor: (item: TItem) => unknown) =>\n    (item: TItem, value: unknown): boolean => {\n      if (Array.isArray(value)) {\n        return value.includes(accessor(item));\n      }\n      return accessor(item) === value;\n    },\n\n  /** Boolean toggle: når filterverdien er true, inkluder kun items der accessor returnerer true */\n  booleanToggle:\n    <TItem>(accessor: (item: TItem) => boolean) =>\n    (item: TItem, value: unknown): boolean => {\n      const active = Array.isArray(value) ? value.includes(true) : value === true;\n      return !active || accessor(item);\n    },\n\n  /** Fritekstsøk: matcher hvis søketeksten finnes i ett eller flere felt (case-insensitive) */\n  textSearch:\n    <TItem>(...accessors: ((item: TItem) => string | undefined)[]) =>\n    (item: TItem, value: unknown): boolean => {\n      const search = String(value).toLowerCase();\n      return accessors.some(accessor => accessor(item)?.toLowerCase().includes(search));\n    },\n};\n\n/**\n * Filtrerer en liste med items basert på aktive filterverdier.\n * Hvert filter som er satt må matche for at et item skal inkluderes (AND-logikk).\n *\n * Eksempel:\n *   const filtered = filterItems(medisiner, filter.filters, {\n *     sykehus: matchFilter.arrayIncludes<Medisin>(m => m.sykehus),\n *     reseptstatus: matchFilter.exactMatch<Medisin>(m => m.reseptstatus),\n *     eResept: matchFilter.booleanToggle<Medisin>(m => m.eResept),\n *   });\n */\n\n/** Type for matcher-objektet som sendes til filterItems. Sikrer at keys matcher filtertypen. */\nexport type FilterMatchers<TItem, T extends FilterValues> = { [K in keyof T]?: (item: TItem, value: NonNullable<T[K]>) => boolean };\n\nexport const filterItems = <TItem, T extends FilterValues>(\n  items: TItem[],\n  filters: Partial<T>,\n  matchers: FilterMatchers<TItem, T>\n): TItem[] => {\n  return items.filter(item => {\n    for (const key in matchers) {\n      const value = filters[key];\n      if (value === undefined) {\n        continue;\n      }\n      const matcher = matchers[key];\n      if (matcher && !matcher(item, value as NonNullable<T[typeof key]>)) {\n        return false;\n      }\n    }\n    return true;\n  });\n};\n\n/**\n * Toggler en verdi i et array-basert filter.\n * Legger til verdien hvis den ikke finnes, fjerner den hvis den finnes.\n * Setter filteret til undefined hvis arrayet blir tomt.\n */\nexport const toggleArrayFilter = <T extends FilterValues, K extends keyof T>(\n  filter: UseFilterReturn<T>,\n  filterKey: K,\n  value: T[K] extends (infer U)[] | undefined ? U : never\n): void => {\n  const current = (filter.filters[filterKey] ?? []) as unknown[];\n  const updated = current.includes(value) ? current.filter(v => v !== value) : [...current, value];\n  filter.setFilter(filterKey, (updated.length > 0 ? updated : undefined) as T[K] | undefined);\n};\n"],"mappings":"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"}

package/lib/components/Filter/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { HNDesignsystemFilter } from '../../resources/Resources';
+import { LanguageLocales } from '../../constants';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemFilter;

package/lib/components/Filter/resourcesMock.d.ts

@@ -0,0 +1,41 @@
+import { LanguageLocales } from '../../constants';
+export declare const getResources: (language: LanguageLocales) => {
+    verktoydata_aa_name: string;
+    verktoydata_aa_ingress: string;
+    verktoydata_grubl_name: string;
+    verktoydata_grubl_ingress: string;
+    verktoydata_mm_name: string;
+    verktoydata_mm_ingress: string;
+    verktoydata_hverdagshjelpen_name: string;
+    verktoydata_hverdagshjelpen_ingress: string;
+    verktoydata_ungmestring_name: string;
+    verktoydata_ungmestring_ingress: string;
+    verktoydata_bevegelsesglede_name: string;
+    verktoydata_bevegelsesglede_ingress: string;
+    verktoydata_tryggfodsel_name: string;
+    verktoydata_tryggfodsel_ingress: string;
+    verktoydata_skadekompasset_name: string;
+    verktoydata_skadekompasset_ingress: string;
+    verktoydata_seniorbalanse_name: string;
+    verktoydata_seniorbalanse_ingress: string;
+    verktoydata_tankevenn_name: string;
+    verktoydata_tankevenn_ingress: string;
+    filterOptionTitles_omrade: string;
+    filterOptionTitles_passerfor: string;
+    filterOptionTitles_type: string;
+    omradeOptions_psykiskhelse: string;
+    omradeOptions_graviditet: string;
+    omradeOptions_livsstil: string;
+    omradeOptions_sykdom: string;
+    omradeOptions_rad: string;
+    omradeOptions_tanker: string;
+    passerForOptions_barn: string;
+    passerForOptions_ungdom: string;
+    passerForOptions_voksne: string;
+    passerForOptions_eldre: string;
+    typeOptions_app: string;
+    typeOptions_web: string;
+    filterOption_omrade_legend: string;
+    filterOption_passerFor_legend: string;
+    filterOption_type_legend: string;
+};

package/lib/components/Filter/useFilter.d.ts

@@ -0,0 +1,20 @@
+export type FilterValues = Record<string, unknown>;
+export interface UseFilterOptions<T extends FilterValues> {
+    /** Initial filter values */
+    defaultValues?: Partial<T>;
+}
+export interface UseFilterReturn<T extends FilterValues> {
+    /** Current filter state */
+    filters: Partial<T>;
+    /** Update a single filter. Pass undefined to remove it. */
+    setFilter: <K extends keyof T>(name: K, value: T[K] | undefined) => void;
+    /** Replace all filters at once (useful for applying draft/delayed filters) */
+    setFilters: (filters: Partial<T>) => void;
+    /** Remove a filter entirely, or a specific value from an array filter */
+    removeFilter: (filterKey: keyof T | string, optionValue?: unknown) => void;
+    /** Reset filters to default values */
+    resetFilters: () => void;
+    /** Resets to empty filter */
+    resetFiltersToEmpty: () => void;
+}
+export declare const useFilter: <T extends FilterValues>(options?: UseFilterOptions<T>) => UseFilterReturn<T>;

package/lib/components/Filter/useFilterDrawer.d.ts

@@ -0,0 +1,11 @@
+export interface UseFilterDrawerReturn<ViewId extends string = string> {
+    /** Whether the drawer is currently open */
+    isOpen: boolean;
+    /** The view to navigate to when the drawer opens */
+    initialView: ViewId | undefined;
+    /** Open the drawer, optionally navigating directly to a specific view */
+    open: (view?: ViewId) => void;
+    /** Close the drawer */
+    close: () => void;
+}
+export declare const useFilterDrawer: <ViewId extends string = string>() => UseFilterDrawerReturn<ViewId>;

package/lib/components/Filter/utils.d.ts

@@ -0,0 +1,81 @@
+import { FilterValues, UseFilterOptions, UseFilterReturn } from './useFilter';
+/** Et filtervalg med verdi og visningstekst */
+export interface FilterOption<V = string> {
+    value: V;
+    label: string;
+}
+type OptionValue<V> = V extends (infer U)[] ? U : V;
+/** Konfigurasjon for en filterkategori. */
+export interface FilterCategoryConfig<V = unknown> {
+    options?: ({
+        value: OptionValue<V>;
+    } & {
+        [key: string]: any;
+    })[];
+    defaultValue?: V;
+    /** Hent visningstekst fra et option-objekt. Hvis ikke satt, brukes String(value). */
+    getLabel?: (option: any) => string;
+}
+export interface FilterConfigResult<T extends FilterValues> {
+    /** Options for useFilter (defaultValues) */
+    filterOptions: UseFilterOptions<T>;
+    /** Look up the display label for a filter value */
+    getLabel: (key: keyof T, value: unknown) => string;
+}
+/**
+ * Lager UseFilterOptions fra et oppsett av filterkategorier.
+ * Samler defaultValues og label-oppslag automatisk fra config.
+ *
+ * Eksempel:
+ *   const { filterOptions, getLabel } = createFilterConfig<MyFilters>({
+ *     sykehus: { options: sykehusOptions, defaultValue: ['haukeland'], getLabel: o => o.label },
+ *     status: { options: statusOptions, getLabel: o => o.displayText },
+ *   });
+ *   const filter = useFilter(filterOptions);
+ *   getLabel('sykehus', 'haukeland') // → 'Haukeland universitetssjukehus'
+ */
+export declare const createFilterConfig: <T extends FilterValues>(categories: { [K in keyof T]?: FilterCategoryConfig<T[K]>; }) => FilterConfigResult<T>;
+/**
+ * Ferdige matcher-funksjoner for typiske filter mønster.
+ * Brukes som deler i matcher objektet til filterItems.
+ *
+ * Eksempel:
+ *   const filterMatchers = {
+ *     categories: matchFilter.arrayIncludes<Medisin>(m => m.sykehus),
+ *     status: matchFilter.exactMatch<Medisin>(m => m.status),
+ *     eResept: matchFilter.booleanToggle<Medisin>(m => m.eResept),
+ *   };
+ */
+export declare const matchFilter: {
+    /** Array-filter: matcher hvis det er overlapp mellom filterverdier og item-verdier (OR-logikk). */
+    arrayIncludes: <TItem>(accessor: (item: TItem) => unknown) => (item: TItem, value: unknown) => boolean;
+    /** Eksakt match: matcher hvis item-verdien er lik én av filterverdiene */
+    exactMatch: <TItem>(accessor: (item: TItem) => unknown) => (item: TItem, value: unknown) => boolean;
+    /** Boolean toggle: når filterverdien er true, inkluder kun items der accessor returnerer true */
+    booleanToggle: <TItem>(accessor: (item: TItem) => boolean) => (item: TItem, value: unknown) => boolean;
+    /** Fritekstsøk: matcher hvis søketeksten finnes i ett eller flere felt (case-insensitive) */
+    textSearch: <TItem>(...accessors: ((item: TItem) => string | undefined)[]) => (item: TItem, value: unknown) => boolean;
+};
+/**
+ * Filtrerer en liste med items basert på aktive filterverdier.
+ * Hvert filter som er satt må matche for at et item skal inkluderes (AND-logikk).
+ *
+ * Eksempel:
+ *   const filtered = filterItems(medisiner, filter.filters, {
+ *     sykehus: matchFilter.arrayIncludes<Medisin>(m => m.sykehus),
+ *     reseptstatus: matchFilter.exactMatch<Medisin>(m => m.reseptstatus),
+ *     eResept: matchFilter.booleanToggle<Medisin>(m => m.eResept),
+ *   });
+ */
+/** Type for matcher-objektet som sendes til filterItems. Sikrer at keys matcher filtertypen. */
+export type FilterMatchers<TItem, T extends FilterValues> = {
+    [K in keyof T]?: (item: TItem, value: NonNullable<T[K]>) => boolean;
+};
+export declare const filterItems: <TItem, T extends FilterValues>(items: TItem[], filters: Partial<T>, matchers: FilterMatchers<TItem, T>) => TItem[];
+/**
+ * Toggler en verdi i et array-basert filter.
+ * Legger til verdien hvis den ikke finnes, fjerner den hvis den finnes.
+ * Setter filteret til undefined hvis arrayet blir tomt.
+ */
+export declare const toggleArrayFilter: <T extends FilterValues, K extends keyof T>(filter: UseFilterReturn<T>, filterKey: K, value: T[K] extends (infer U)[] | undefined ? U : never) => void;
+export {};

package/lib/components/Label/utils.d.ts

@@ -7,6 +7,7 @@ interface RenderLabelProps {
     inputId: string;
     onColor: FormOnColor;
     markup?: LabelTags;
+    className?: string;
 }
 export declare const renderLabel: (props: RenderLabelProps) => React.ReactNode;
 interface RenderLabelAsParentProps {

package/lib/components/Select/Select.d.ts

@@ -10,6 +10,8 @@ export interface SelectProps extends ErrorWrapperClassNameProps, Pick<React.Sele
     concept?: SelectConcept;
     /** The label text above the select */
     label?: React.ReactNode;
+    /** Adds custom classes to the label wrapper */
+    labelClassName?: string;
     /** Changes the visuals of the component */
     onColor?: keyof typeof FormOnColor;
     /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */

package/lib/components/Select/styles.module.scss

@@ -66,6 +66,7 @@
   line-height: font-settings.$lineheight-size-sm;
   border-radius: 0;
   text-overflow: ellipsis;
+  cursor: pointer;
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     height: calc(3rem + 0.25rem); // 48px height + 4px border

package/lib/components/Title/Title.d.ts

@@ -12,6 +12,8 @@ export interface TitleProps {
     htmlMarkup?: TitleTags;
     /** Changes the appearance of the title. */
     appearance?: TitleAppearances;
+    /** Sets the tabIndex. Use this with caution. */
+    tabIndex?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Ref passed to the heading element */

package/lib/index.d.ts

@@ -15,4 +15,5 @@ export { useOutsideEvent } from './hooks/useOutsideEvent';
 export { useLanguage } from './hooks/useLanguage';
 export { isMobileUA } from './utils/mobile';
 export { uuid } from './utils/uuid';
+export { formatResource } from './utils/resource';
 export * from './constants';

package/lib/index.js

@@ -16,4 +16,5 @@ import { t as useToggle } from "./useToggle.js";
 import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
 import { t as useOutsideEvent } from "./useOutsideEvent.js";
 import { t as isMobileUA } from "./mobile.js";
-export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };
+import { t as formatResource } from "./resource.js";
+export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, formatResource, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };

package/lib/resource.js

@@ -0,0 +1,4 @@
+const formatResource = (template, ...args) => args.reduce((result, arg, index) => result.replace(`{${index}}`, String(arg)), template);
+export { formatResource as t };
+
+//# sourceMappingURL=resource.js.map

package/lib/resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource.js","names":[],"sources":["../src/utils/resource.ts"],"sourcesContent":["/**\n * Replace `{0}`, `{1}` etc. placeholders in a resource string with the supplied values.\n * @example formatResource('Siste {0} måneder', 6)  // 'Siste 6 måneder'\n * @example formatResource('{0} av {1}', 'side', 10) // 'side av 10'\n */\nexport const formatResource = (template: string, ...args: (string | number)[]): string =>\n  args.reduce<string>((result, arg, index) => result.replace(`{${index}}`, String(arg)), template);\n"],"mappings":"AAKA,MAAa,kBAAkB,UAAkB,GAAG,SAClD,KAAK,QAAgB,QAAQ,KAAK,UAAU,OAAO,QAAQ,IAAI,MAAM,IAAI,OAAO,IAAI,CAAC,EAAE,SAAS"}

package/lib/resources/HN.Designsystem.Drawer.nn-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Lukk",
+  "ariaLabelBackButton": "Gå tilbake"
+}
+;
+
+export default _default;

package/lib/utils/resource.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Replace `{0}`, `{1}` etc. placeholders in a resource string with the supplied values.
+ * @example formatResource('Siste {0} måneder', 6)  // 'Siste 6 måneder'
+ * @example formatResource('{0} av {1}', 'side', 10) // 'side av 10'
+ */
+export declare const formatResource: (template: string, ...args: (string | number)[]) => string;

package/lib/utils/resource.js

@@ -0,0 +1,2 @@
+import { t as formatResource } from "../resource.js";
+export { formatResource };

package/lib/utils2.js

@@ -100,14 +100,16 @@ const renderLabel = (props) => {
 	return /* @__PURE__ */ jsx(Fragment, { children: props.label && isComponent(props.label, Label_default) ? React.cloneElement(props.label, {
 		htmlFor: props.inputId,
 		htmlMarkup: props.markup || "label",
-		onColor: props.onColor
+		onColor: props.onColor,
+		className: props.className
 	}) : typeof props.label === "string" && /* @__PURE__ */ jsx(Label_default, {
 		labelTexts: [{
 			text: props.label,
 			type: "normal"
 		}],
 		htmlFor: props.inputId,
-		onColor: props.onColor
+		onColor: props.onColor,
+		className: props.className
 	}) });
 };
 const renderLabelAsParent = (props) => {

package/lib/utils2.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n          })\n        : typeof props.label === 'string' && (\n            <Label labelTexts={[{ text: props.label, type: 'normal' }]} htmlFor={props.inputId} onColor={props.onColor} />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n  className?: string;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n            className: props.className,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'normal' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              className={props.className}\n            />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "14.6.0",
+  "version": "14.7.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",