@helsenorge/designsystem-react 14.0.0-beta.4 → 14.0.0-beta.9

package/lib/StatusDot.js

@@ -29,6 +29,7 @@ let StatusDotVariant = /* @__PURE__ */ function(StatusDotVariant$1) {
 	StatusDotVariant$1["active"] = "active";
 	StatusDotVariant$1["pending"] = "pending";
 	StatusDotVariant$1["inactive"] = "inactive";
+	StatusDotVariant$1["ready"] = "ready";
 	return StatusDotVariant$1;
 }({});
 var StatusDotIcon = ({ onColor, variant = "info" }) => {
@@ -44,7 +45,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 	switch (variant) {
 		case StatusDotVariant.success: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotSuccess"
+			iconName: "DotCheckmark"
 		});
 		case StatusDotVariant.inprocess: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
@@ -52,7 +53,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		});
 		case StatusDotVariant.exception: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotWarningTriangle"
+			iconName: "DotTriangle"
 		});
 		case StatusDotVariant.unknown: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
@@ -64,15 +65,15 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		});
 		case StatusDotVariant.cancelled: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotCancelled"
+			iconName: "DotX"
 		});
 		case StatusDotVariant.alert: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotAlert"
+			iconName: "DotExclamationMark"
 		});
 		case StatusDotVariant.transparent: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotTransparent"
+			iconName: "DotOutline"
 		});
 		case StatusDotVariant.info: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
@@ -80,43 +81,47 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		});
 		case StatusDotVariant.group: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "Group"
+			iconName: "DotGroup"
 		});
 		case StatusDotVariant.recurring: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "Change"
+			iconName: "DotCircleArrows"
 		});
 		case StatusDotVariant.noaccess: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "NoAccess"
+			iconName: "DotNoAccess"
 		});
 		case StatusDotVariant.draft: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "Pencil"
+			iconName: "DotPencil"
 		});
 		case StatusDotVariant.hidden: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "NoEye"
+			iconName: "DotNoEye"
 		});
 		case StatusDotVariant.login: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "Login"
+			iconName: "DotLogin"
 		});
 		case StatusDotVariant.attachment: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "Attachment"
+			iconName: "DotAttachment"
 		});
 		case StatusDotVariant.active: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotActive"
+			iconName: "DotFill"
 		});
 		case StatusDotVariant.pending: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotPending"
+			iconName: "DotDot"
 		});
 		case StatusDotVariant.inactive: return /* @__PURE__ */ jsx(LazyIcon, {
 			...iconProps,
-			iconName: "DotInactive"
+			iconName: "DotOutline"
+		});
+		case StatusDotVariant.ready: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotOutline"
 		});
 	}
 	return null;

package/lib/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n  ready = 'ready',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotCheckmark'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotX'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotExclamationMark'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'DotGroup'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'DotCircleArrows'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'DotNoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'DotPencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'DotNoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'DotLogin'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'DotAttachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotFill'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotDot'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.ready:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/Textarea.js

@@ -86,7 +86,11 @@ var Textarea = (props) => {
 			"data-analyticsid": AnalyticsId.Textarea,
 			className: textareaWrapperClass,
 			children: [
-				renderLabel(label, textareaId, onColor),
+				renderLabel({
+					label,
+					inputId: textareaId,
+					onColor
+				}),
 				/* @__PURE__ */ jsx("div", {
 					className: contentWrapperClass,
 					ref: referanse,

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (value) setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (value) setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel({ label: label, inputId: textareaId, onColor: onColor as FormOnColor })}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}

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

@@ -458,3 +458,7 @@ $padding-clickable-area-left: 8px;
   margin-top: -$padding-clickable-area-top-bottom;
   padding-left: calc(2.8rem + $padding-clickable-area-left);
 }
+
+.checkbox-afterlabelchildren-wrapper {
+  padding-top: $padding-clickable-area-top-bottom;
+}

package/lib/components/Checkbox/styles.module.scss.d.ts

@@ -17,6 +17,7 @@ export type Styles = {
   'checkbox__icon-wrapper--on-grey': string;
   'checkbox__icon-wrapper--on-invalid': string;
   'checkbox__icon-wrapper--on-white': string;
+  'checkbox-afterlabelchildren-wrapper': string;
   'checkbox-errors': string;
   'checkbox-label': string;
   'checkbox-label__large--checked': string;

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

@@ -182,5 +182,11 @@
       column-gap: var(--core-space-2xs) 0;
       padding: var(--core-space-2xs) 0;
     }
+
+    // Hack in order to not cut the buttons on iOS in app browser from iOS 26
+    // Selector targets iOS
+    @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+      padding-bottom: 2.5rem;
+    }
   }
 }

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

@@ -170,14 +170,23 @@
     }
 
     &--nested-line {
-      padding-left: spacers.getSpacer(s);
-      border-left: solid 3px palette.$neutral200;
+      &--outer {
+        padding-left: 0;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
-        padding-left: calc(
-          38px / 2 + 12px - 2px
-        ); // Halvparten av chevron-ikonets bredde, pluss ikonets margin-right på tablet, minus bredden på border
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+          padding-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
+        }
+      }
+
+      &--inner {
+        padding-left: spacers.getSpacer(s);
+        border-left: solid 3px palette.$neutral200;
+
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+          padding-left: calc(
+            38px / 2 + 12px - 2px
+          ); // Halvparten av chevron-ikonets bredde, pluss ikonets margin-right på tablet, minus bredden på border
+        }
       }
     }
 

package/lib/components/Expander/styles.module.scss.d.ts

@@ -40,7 +40,8 @@ export type Styles = {
   'expander__content--icon': string;
   'expander__content--kiwi': string;
   'expander__content--large': string;
-  'expander__content--nested-line': string;
+  'expander__content--nested-line--inner': string;
+  'expander__content--nested-line--outer': string;
   'expander__content--neutral': string;
   'expander__content--plum': string;
   'expander__content--small': string;

package/lib/components/ExpanderHierarchy/Expander.d.ts

@@ -13,6 +13,8 @@ export interface ExpanderProps extends ExpanderHierarchyCommonProps {
     testId?: string;
     /** Adds custom classes to the element. */
     className?: string;
+    /** ref that is placed on the li element */
+    ref?: React.RefObject<HTMLLIElement>;
 }
 export type ExpanderType = typeof Expander;
 declare const Expander: React.FC<ExpanderProps>;

package/lib/components/ExpanderHierarchy/index.js

@@ -50,10 +50,11 @@ const getHeadingTag = (htmlMarkup) => {
 		default: return "h2";
 	}
 };
-var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false, onExpand, children, testId, className }) => {
+var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false, onExpand, children, testId, className, ref }) => {
 	const contentClasses = classNames(styles.expander__content, (level === 1 || level === 2) && styles[`expander__content--${level}`], level > 2 && styles[`expander__content--3-and-lower`]);
 	return /* @__PURE__ */ jsxs("li", {
 		className: classNames(styles.expander, className),
+		ref,
 		children: [/* @__PURE__ */ jsx(ExpanderButton_default, {
 			htmlMarkup,
 			level,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: React.FC<ExpanderProps>","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;AClEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACeb,IAAMC,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,gBACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;aACnD,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;AC/Bf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACrDf,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: React.FC<ExpanderProps>","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;AClEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACiBb,IAAMC,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;EAAO;aAC1D,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;AClCf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACrDf,IAAA,4BAAe"}

package/lib/components/FormGroup/FormGroup.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { FormOnColor, FormSize } from '../../constants';
+import { TitleTags } from '../Title';
 export type FormGroupTags = 'fieldset' | 'div';
 export interface FormGroupProps {
     /** Can be used as a replacement text for legend in cases where the group title already exists externally */
@@ -38,6 +39,10 @@ export interface FormGroupProps {
     fieldsetName?: string;
     /** Sets div instead of fieldset tag */
     htmlMarkup?: FormGroupTags;
+    /** Markup for legend if formgroup htmlMarkup is div*/
+    legendHtmlMarkup?: TitleTags;
+    /** Markup for title */
+    titleHtmlMarkup?: TitleTags;
     /** Renders the error component (Default: true) */
     renderError?: boolean;
     /** Ref passed to the error message element */

package/lib/components/HelpTeaser/HelpTeaser.d.ts

@@ -4,6 +4,8 @@ import { TitleTags } from '../Title';
 export interface HelpTeaserProps {
     /** What's in the box? */
     children: React.ReactNode;
+    /** Override the default max height for collapsed teaser. Default is 12.25rem */
+    collapsedMaxHeight?: string;
     /** Changes the underlying element of the wrapper */
     htmlMarkup?: InfoTeaserTags;
     /** Resources for component */

package/lib/components/HelpTeaser/index.js

@@ -3,7 +3,7 @@ import { t as InfoTeaser_default } from "../../InfoTeaser.js";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var HelpTeaser = (props) => {
-	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup } = props;
+	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;
 	return /* @__PURE__ */ jsx(InfoTeaser_default, {
 		testId,
 		htmlMarkup,
@@ -13,6 +13,7 @@ var HelpTeaser = (props) => {
 		resources,
 		svgIcon: HandWaving_default,
 		buttonClassName: styles["helpteaser__button"],
+		collapsedMaxHeight,
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HelpTeaser: React.FC<HelpTeaserProps>"],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { InfoTeaserTags } from '../InfoTeaser';\nimport type { TitleTags } from '../Title';\n\nimport HandWaving from '../Icons/HandWaving';\nimport InfoTeaser from '../InfoTeaser';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup } = props;\n  return (\n    <InfoTeaser\n      testId={testId}\n      htmlMarkup={htmlMarkup}\n      className={styles.helpteaser}\n      title={title}\n      titleHtmlMarkup={titleHtmlMarkup}\n      resources={resources}\n      svgIcon={HandWaving}\n      buttonClassName={styles['helpteaser__button']}\n    >\n      {children}\n    </InfoTeaser>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;AAwBA,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,oBAAoB;AAC5E,QACE,oBAAC,oBAAA;EACS;EACI;EACZ,WAAW,OAAO;EACX;EACU;EACN;EACX,SAAS;EACT,iBAAiB,OAAO;EAEvB;GACU;;ACpCjB,IAAA,qBDwCe"}
+{"version":3,"file":"index.js","names":["HelpTeaser: React.FC<HelpTeaserProps>"],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { InfoTeaserTags } from '../InfoTeaser';\nimport type { TitleTags } from '../Title';\n\nimport HandWaving from '../Icons/HandWaving';\nimport InfoTeaser from '../InfoTeaser';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;\n  return (\n    <InfoTeaser\n      testId={testId}\n      htmlMarkup={htmlMarkup}\n      className={styles.helpteaser}\n      title={title}\n      titleHtmlMarkup={titleHtmlMarkup}\n      resources={resources}\n      svgIcon={HandWaving}\n      buttonClassName={styles['helpteaser__button']}\n      collapsedMaxHeight={collapsedMaxHeight}\n    >\n      {children}\n    </InfoTeaser>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;AA0BA,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,iBAAiB,uBAAuB;AAChG,QACE,oBAAC,oBAAA;EACS;EACI;EACZ,WAAW,OAAO;EACX;EACU;EACN;EACX,SAAS;EACT,iBAAiB,OAAO;EACJ;EAEnB;GACU;;ACvCjB,IAAA,qBD2Ce"}

package/lib/components/HelpTriggerIcon/HelpSign.d.ts

@@ -1,7 +1,9 @@
-import { HelpTriggerWeights } from '../HelpTriggerIcon';
+import { default as React } from 'react';
+import { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';
 export interface HelpSignProps {
     color?: string;
     weight?: HelpTriggerWeights;
+    size?: HelpTriggerIconSizes;
 }
 declare const HelpSign: React.FC<HelpSignProps>;
 export default HelpSign;

package/lib/components/Icons/AdditionalIconInformation.d.ts

@@ -1263,11 +1263,11 @@ declare const _default: {
         alternativeName: string;
         categories: string;
     };
-    dotalert: {
+    dotexclamationmark: {
         alternativeName: string;
         categories: string;
     };
-    dotcancelled: {
+    dotx: {
         alternativeName: string;
         categories: string;
     };
@@ -1275,11 +1275,11 @@ declare const _default: {
         alternativeName: string;
         categories: string;
     };
-    dotsuccess: {
+    dotcheckmark: {
         alternativeName: string;
         categories: string;
     };
-    dottransparent: {
+    dotoutline: {
         alternativeName: string;
         categories: string;
     };
@@ -1295,7 +1295,43 @@ declare const _default: {
         alternativeName: string;
         categories: string;
     };
-    dotwarningtriangle: {
+    dottriangle: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotfill: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotdot: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotgroup: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotcirclearrows: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotnoaccess: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotpencil: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotnoeye: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotlogin: {
+        alternativeName: string;
+        categories: string;
+    };
+    dotattachment: {
         alternativeName: string;
         categories: string;
     };

package/lib/components/Icons/AdditionalIconInformation.js

@@ -1263,11 +1263,11 @@ var AdditionalIconInformation_default = {
 		alternativeName: "HelseMålinger",
 		categories: "Generisk, Tjeneste"
 	},
-	dotalert: {
+	dotexclamationmark: {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
-	dotcancelled: {
+	dotx: {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
@@ -1275,11 +1275,11 @@ var AdditionalIconInformation_default = {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
-	dotsuccess: {
+	dotcheckmark: {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
-	dottransparent: {
+	dotoutline: {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
@@ -1295,7 +1295,43 @@ var AdditionalIconInformation_default = {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},
-	dotwarningtriangle: {
+	dottriangle: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotfill: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotdot: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotgroup: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotcirclearrows: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotnoaccess: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotpencil: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotnoeye: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotlogin: {
+		alternativeName: "",
+		categories: "System, StatusDot"
+	},
+	dotattachment: {
 		alternativeName: "",
 		categories: "System, StatusDot"
 	},