@helsenorge/designsystem-react 12.3.0 → 12.4.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [12.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.3.0&targetVersion=GTv12.4.0) (2025-09-23)
+
+### Features
+
+- **favoritebutton:** default aria-label hentes fra sot
+  ([53b3596](https://github.com/helsenorge/designsystem/commit/53b359668307ed19279a2a4d87a80a81538698e0)), closes
+  [#357829](https://github.com/helsenorge/designsystem/issues/357829)
+- **favoritebutton:** ny komponent ([3971d8c](https://github.com/helsenorge/designsystem/commit/3971d8cea9d0f6e87c622ffcc700d5aecfc5a1ca)),
+  closes [#357829](https://github.com/helsenorge/designsystem/issues/357829)
+
+### Bug Fixes
+
+- når vertikaler brukte aria-describedby på skjemakomponenter så ble errorTextUuid overstyrt
+  ([7de2697](https://github.com/helsenorge/designsystem/commit/7de26976ff449a10028deb734dbf6c5fe24fc029)), closes
+  [#359583](https://github.com/helsenorge/designsystem/issues/359583)
+- statusdot og elementheader spacing fikses
+  ([d88c71d](https://github.com/helsenorge/designsystem/commit/d88c71d6d73d73039a744cee76939114c06487e9)), closes
+  [#356675](https://github.com/helsenorge/designsystem/issues/356675)
+- **elementheader:** ishovered sendes bare til ekte ikoner
+  ([dcb0779](https://github.com/helsenorge/designsystem/commit/dcb0779a4a89894ad2262f9e88ef4438a41b09dc)), closes
+  [#360049](https://github.com/helsenorge/designsystem/issues/360049)
+
 ## [12.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.2.0&targetVersion=GTv12.3.0) (2025-09-18)
 
 ### Features

package/Checkbox.js

@@ -30,8 +30,7 @@ const Checkbox = React__default.forwardRef((props, ref) => {
     value = getLabelText(label),
     testId,
     required,
-    onChange,
-    ...rest
+    onChange
   } = props;
   const [isChecked, setIsChecked] = useState(checked);
   const errorTextUuid = useUuid(errorTextId);
@@ -112,8 +111,7 @@ const Checkbox = React__default.forwardRef((props, ref) => {
           "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
           "aria-invalid": error,
           required,
-          onChange: onChangeHandler,
-          ...rest
+          onChange: onChangeHandler
         }
       ),
       /* @__PURE__ */ jsx("span", { className: checkboxIconWrapperClasses, children: isChecked && /* @__PURE__ */ jsx(Icon, { color: iconColor, className: checkboxStyles["checkbox__icon"], svgIcon: Check, size: IconSize.XSmall }) })

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["React"],"mappings":"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"}

package/ElementHeader.js

@@ -103,7 +103,7 @@ const ElementHeaderRoot = (props) => {
   const contentIsString = typeof children === "string";
   const mappedChildren = mapChildren(children);
   const hasStatusDots = !!((_a = mappedChildren == null ? void 0 : mappedChildren.statusDotChildren) == null ? void 0 : _a.length) || !!(mappedChildren == null ? void 0 : mappedChildren.statusDotMCChild);
-  const listLabelClasses = classNames(styles["element-header"], { [styles["element-header--with-statusdot"]]: hasStatusDots }, className);
+  const listLabelClasses = classNames(styles["element-header"], className);
   const badgeContainerClasses = classNames(styles["element-header__badge-container"]);
   const badgeClasses = classNames(styles["element-header__badge"]);
   const statusdotContainerClasses = classNames(styles["element-header__statusdot-container"]);
@@ -111,14 +111,15 @@ const ElementHeaderRoot = (props) => {
   const contentClasses = classNames(styles["element-header__content"], {
     [styles["element-header__content--element"]]: !contentIsString
   });
-  const iconClasses = classNames(styles["element-header__icon"], {});
+  const iconClasses = classNames(styles["element-header__icon"], { [styles["element-header__icon--with-statusdot"]]: hasStatusDots });
   const avatarClasses = classNames(styles["element-header__avatar"], {});
   const CustomTag = titleHtmlMarkup;
+  const iconPropIsIconComponent = isComponent(icon, Icon);
   return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: listLabelClasses, children: [
-    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React__default.cloneElement(icon, {
+    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: iconPropIsIconComponent ? React__default.cloneElement(icon, {
       size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,
       isHovered
-    }) }),
+    }) : icon }),
     size !== "small" && (mappedChildren == null ? void 0 : mappedChildren.avatarChild) && /* @__PURE__ */ jsx("span", { className: avatarClasses, children: React__default.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall }) }),
     /* @__PURE__ */ jsxs("span", { className: contentClasses, "data-hasstatusdots": hasStatusDots, children: [
       mappedChildren == null ? void 0 : mappedChildren.elementHeaderTextChildren,

package/ElementHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeader.js","sources":["../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';\nimport { TitleTags } from '../Title';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<ElementHeaderProps, 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText'>\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\ninterface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--with-statusdot']]: hasStatusDots }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n  });\n  const iconClasses = cn(styles['element-header__icon'], {});\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"names":["React","cn"],"mappings":"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"}
+{"version":3,"file":"ElementHeader.js","sources":["../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconProps, IconSize, SvgIcon } from '../Icon';\nimport StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';\nimport { TitleTags } from '../Title';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<ElementHeaderProps, 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText'>\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\ninterface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && (\n        <span className={iconClasses}>\n          {iconPropIsIconComponent\n            ? React.cloneElement(icon, {\n                size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n                isHovered,\n              })\n            : icon}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"names":["React","cn"],"mappings":"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"}

package/Input.js

@@ -160,6 +160,7 @@ const Input = React__default.forwardRef((props, ref) => {
             /* @__PURE__ */ jsx(
               "input",
               {
+                ...rest,
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
                 onKeyUp: handleKeyUp,
@@ -169,7 +170,6 @@ const Input = React__default.forwardRef((props, ref) => {
                 id: inputIdState,
                 className: inputClass,
                 ref,
-                "aria-labelledby": props["aria-labelledby"] ?? void 0,
                 "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
                 "aria-invalid": !!onError,
                 disabled,
@@ -177,8 +177,7 @@ const Input = React__default.forwardRef((props, ref) => {
                 readOnly,
                 autoComplete: autoComplete || "off",
                 required,
-                autoFocus,
-                ...rest
+                autoFocus
               }
             ),
             iconRight && renderIcon()

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, onColor as FormOnColor)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","React","cn","input"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, onColor as FormOnColor)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","React","cn","input"],"mappings":";;;;;;;;;;;;;;;AAuFO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,MAAA,IAAO;AACPA,cAAA,QAAA,IAAS;AACTA,cAAA,OAAA,IAAQ;AACRA,cAAA,UAAA,IAAW;AACXA,cAAA,QAAA,IAAS;AACTA,cAAA,KAAA,IAAM;AACNA,cAAA,KAAA,IAAM;AACNA,cAAA,MAAA,IAAO;AACPA,cAAA,MAAA,IAAO;AATG,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAYZ,MAAM,mBAAmB,CAAC,YAAoB,SAAkB,aAA6B;AAC3F,QAAM,eAAe,UAAU,WAAW;AAC1C,QAAM,YAAY,UAAU,GAAG,QAAQ,OAAO;AAC9C,QAAM,cAAc;AAEpB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY,MAAM,SAAS,MAAM,WAAW;AAC5G;AAEA,MAAM,QAAQC,eAAM,WAAW,CAAC,OAAmB,QAAqC;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,aAAa,cAAA;AACnB,QAAM,yBAAyB,OAAuB,IAAI;AAC1D,QAAM,eAAe,QAAQ,OAAO;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,gBAAgB,EAAE;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAsC,MAAS;AACjF,QAAM,gBAAgB,OAAgB,KAAK;AAC3C,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,WAAW;AAEjB,YAAU,MAAM;AACd,aAAS,gBAAgB,EAAE;AAAA,EAC7B,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,SAAS,YAAY,YAAY;AACvC,QAAM,cAAc,YAAY,YAAY;AAC5C,QAAM,wBAAwB,CAAC,CAAC,iBAAiB,MAAM,SAAA,EAAW,SAAS;AAC3E,QAAM,UAAU,YAAY,YAAY,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS;AAC/E,QAAM,UAAU,SAAS,SAAS;AAClC,QAAM,gBAAgB,eAAe,YAAY,YAAY,UAAU,CAAC;AAExE,QAAM,oBAAoBC,WAAG,OAAO,eAAe,GAAG,SAAS;AAE/D,QAAM,iBAAiBA,WAAG,OAAO,iBAAiB,GAAG;AAAA,IACnD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,IAC1C,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,IAC3C,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,IACtC,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,IACtC,CAAC,OAAO,wBAAwB,CAAC,GAAG;AAAA,IACpC,CAAC,OAAO,2BAA2B,CAAC,GAAG;AAAA,IACvC,CAAC,OAAO,4BAA4B,CAAC,GAAG;AAAA,EAAA,CACzC;AAED,QAAM,aAAaA,WAAG,OAAO,wBAAwB,GAAG;AAAA,IACtD,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,IAC3C,CAAC,OAAO,kCAAkC,CAAC,GAAG;AAAA,EAAA,CAC/C;AAED,QAAM,YAAY,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,OAAO;AACxE,QAAM,WAAW,eAAe,WAAW,MAAM,CAAC,UAAU,SAAS,SAAS,SAAS;AAEvF,QAAM,aAAa,MAAuB;AACxC,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,QAAI,OAAO,SAAS,UAAU;AAC5B,aAAO,oBAAC,UAAA,EAAS,WAAW,OAAO,8BAA8B,GAAG,OAAO,WAAW,MAAM,UAAU,UAAU,KAAA,CAAM;AAAA,IACxH;AAEA,WAAO,oBAAC,MAAA,EAAK,WAAW,OAAO,8BAA8B,GAAG,OAAO,WAAW,MAAM,UAAU,SAAS,KAAA,CAAM;AAAA,EACnH;AAGA,QAAM,cAAc,CAAC,MAAmC;AACtD,QAAI,0BAA0B,uBAAuB,WAAW,MAAM;AACpE,YAAM,gBAAgB,YAAY,IAAI;AACtC,YAAMC,SAAQ,uBAAuB,QAAQ,SAAS,aAAa;AACnEA,aAAM,MAAA;AAEN,UAAI,MAAM,QAAS,OAAM,QAAQ,CAAC;AAAA,IACpC;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,MAAiD;AACrE,UAAM,WAAW,kBAAkB,CAAC;AAEpC,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IACZ;AAEA,aAAS,QAAQ;AACjB,iBAAa,QAAQ;AAAA,EACvB;AAGA,QAAM,oBAAoB,CAAC,MAAmD;AAC5E,QAAI,OAAO,uBAAuB,eAAe,SAAS,SAAU,QAAO,EAAE,OAAO;AAEpF,UAAM,gBAAgB,OAAO,EAAE,OAAO,KAAK;AAE3C,QAAI,CAAC,aAAa,CAAC,cAAc,YAAY,kBAAkB,KAAK,kBAAkB,KAAK;AACzF,QAAE,OAAO,QAAQ,qBAAqB;AAAA,IACxC;AAEA,WAAO,EAAE,OAAO;AAAA,EAClB;AAEA,QAAM,gBAAgB,CAAC,MAAmD;AACxE,QAAI,SAAS,KAAK,EAAE,GAAG,GAAG;AACxB,oBAAc,UAAU;AAAA,IAC1B;AACA,QAAI,qBAAqB,CAAC;AAAA,EAC5B;AAEA,QAAM,cAAc,CAAC,MAAmD;AACtE,QAAI,SAAS,KAAK,EAAE,GAAG,GAAG;AACxB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,WAAW,QAAQ,iBAAiB,OAAO,CAAC,CAAC,MAAM,QAAQ,IAAI;AAErE,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,OAAO,WAAW,mBAAmB,KAAK,iBAC/F,UAAA;AAAA,IAAA,YAAY,OAAO,cAAc,OAAsB;AAAA,IAExD,qBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,GAEtC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,KAAK,UAAU,CAAC,wBAAwB,iBAAiB,CAAC;AAAA,UAC1D,WAAW;AAAA,UACX,OAAO,EAAE,SAAA;AAAA,UAER,UAAA;AAAA,YAAA,CAAC,aAAa,WAAA;AAAA,YACf;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,IAAI;AAAA,gBACJ,WAAW;AAAA,gBACX;AAAA,gBACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,gBACzD,gBAAc,CAAC,CAAC;AAAA,gBAChB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAc,gBAAgB;AAAA,gBAC9B;AAAA,gBAEA;AAAA,cAAA;AAAA,YAAA;AAAA,YAED,aAAa,WAAA;AAAA,UAAW;AAAA,QAAA;AAAA,MAAA;AAAA,0BAE1B,OAAA,EAAI,WAAW,OAAO,iCAAiC,GAAI,UAAA,aAAA,CAAa;AAAA,IAAA,GAC3E;AAAA,IACC,iBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ,CAAC;AAED,MAAM,cAAc;"}

package/PanelOld.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelOld.js","sources":["../src/components/PanelOld/PanelOld.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n"],"names":["PanelOldStatus","PanelOldVariant","PanelOldLayout","React"],"mappings":"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"}
+{"version":3,"file":"PanelOld.js","sources":["../src/components/PanelOld/PanelOld.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n"],"names":["PanelOldStatus","PanelOldVariant","PanelOldLayout","React"],"mappings":"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"}

package/RadioButton.js

@@ -88,6 +88,7 @@ const RadioButton = React__default.forwardRef((props, ref) => {
   const getLabelContent = () => /* @__PURE__ */ jsx(
     "input",
     {
+      ...rest,
       id: inputId,
       name,
       className: radioButtonClasses,
@@ -98,7 +99,6 @@ const RadioButton = React__default.forwardRef((props, ref) => {
       defaultChecked,
       "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
       required,
-      ...rest,
       onChange: (e) => change(e)
     }
   );

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}

package/Select.js

@@ -78,6 +78,7 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
       /* @__PURE__ */ jsx(
         "select",
         {
+          ...rest,
           "aria-invalid": !!invalid,
           id: uuid,
           name,
@@ -90,7 +91,6 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
           value,
           defaultValue,
           autoComplete: autoComplete ? autoComplete : void 0,
-          ...rest,
           children
         }
       )

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AAC5D,QAAM,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AACxH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IAAA;AAAA,IAEpD;AAAA,EAAA;AAGF,QAAM,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,YACvG,UAAA;AAAA,IAAA,YAAY,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAA,EAAI,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AAC5D,QAAM,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AACxH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IAAA;AAAA,IAEpD;AAAA,EAAA;AAGF,QAAM,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,YACvG,UAAA;AAAA,IAAA,YAAY,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAA,EAAI,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAE3C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

package/components/ElementHeader/styles.module.scss

@@ -3,11 +3,9 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
 
-@mixin gridtemplate($second-row-height, $with-statusdot) {
-  $first-col: if($with-statusdot, 'icon', '.');
-
+@mixin gridtemplate($second-row-height) {
   grid-template:
-    '#{$first-col} statusdots badge chevron' auto
+    '. statusdots badge chevron' auto
     'icon text badge chevron' $second-row-height '. text badge chevron' auto /
     min-content auto min-content min-content;
 }
@@ -26,11 +24,7 @@
   height: 100%;
   text-align: left;
 
-  @include gridtemplate(3rem, false);
-
-  &--with-statusdot {
-    @include gridtemplate(3rem, true);
-  }
+  @include gridtemplate(3rem);
 
   &__title {
     font-size: inherit;
@@ -89,6 +83,10 @@
   &__icon,
   &__avatar {
     grid-area: icon;
+
+    &--with-statusdot {
+      margin-top: -1rem;
+    }
   }
 
   &__icon {

package/components/ElementHeader/styles.module.scss.d.ts

@@ -1,6 +1,7 @@
 export type Styles = {
   'element-header': string;
   'element-header__avatar': string;
+  'element-header__avatar--with-statusdot': string;
   'element-header__badge': string;
   'element-header__badge-container': string;
   'element-header__chevron': string;
@@ -8,9 +9,9 @@ export type Styles = {
   'element-header__content--element': string;
   'element-header__content--spacing': string;
   'element-header__icon': string;
+  'element-header__icon--with-statusdot': string;
   'element-header__statusdot-container': string;
   'element-header__title': string;
-  'element-header--with-statusdot': string;
   'text-wrapper': string;
   'text-wrapper__text--emphasised': string;
   'text-wrapper--sub-level': string;

package/components/FavoriteButton/FavoriteButton.d.ts

@@ -0,0 +1,19 @@
+import { default as React, AriaAttributes } from 'react';
+import { HTMLButtonProps } from '../../constants';
+import { HNDesignsystemFavoriteButton } from '../../resources/Resources';
+export interface FavoriteButtonProps extends HTMLButtonProps, AriaAttributes {
+    /**  Determines if the FavoriteButton is checked */
+    checked: boolean;
+    /** Gives a unique id to the button */
+    id?: string;
+    /** Function that is called when clicked */
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemFavoriteButton>;
+    /** Specifies the focus order relative to the other buttons or controls on the page  */
+    tabIndex?: number;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const FavoriteButton: React.ForwardRefExoticComponent<FavoriteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default FavoriteButton;

package/components/FavoriteButton/FavoriteButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/FavoriteButton/StarIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const starIconNormalMobile: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconHoverMobile: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconNormalDesktop: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;
+export declare const starIconHoverDesktop: (isFocused: boolean, isChecked: boolean, isActive: boolean) => React.JSX.Element;

package/components/FavoriteButton/index.d.ts

@@ -0,0 +1,3 @@
+import { FavoriteButton } from './FavoriteButton';
+export * from './FavoriteButton';
+export default FavoriteButton;

package/components/FavoriteButton/index.js

@@ -0,0 +1,204 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { LanguageLocales, AnalyticsId } from "../../constants.js";
+import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useLanguage } from "../../utils/language.js";
+import { isMutableRefObject } from "../../utils/refs.js";
+import styles from "./styles.module.scss";
+const ariaLabel = "Favorittmarkering";
+const nbNO = {
+  ariaLabel
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+const normalStroke = "var(--color-action-graphics-onlight)";
+const normalFill = "transparent";
+const hoverFill = "#126F8721";
+const hoverStroke = "var(--color-action-graphics-onlight-hover)";
+const activeStroke = "var(--core-color-blueberry-800)";
+const fillColor = (isChecked, isActive, isHovered) => {
+  if (isChecked) {
+    if (isActive) {
+      return activeStroke;
+    } else {
+      if (isHovered) {
+        return hoverStroke;
+      } else {
+        return normalStroke;
+      }
+    }
+  } else {
+    if (isHovered) {
+      return hoverFill;
+    } else {
+      return normalFill;
+    }
+  }
+};
+const strokeColor = (isActive, isHovered) => {
+  if (isActive) {
+    return activeStroke;
+  } else {
+    if (isHovered) {
+      return hoverStroke;
+    } else {
+      return normalStroke;
+    }
+  }
+};
+const starIconNormalMobile = (isFocused, isChecked, isActive) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isFocused && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M20.1026 31.1787L13.4007 34.7023C10.833 36.0523 7.83185 33.8719 8.32233 31.0126L9.60261 23.5492L4.17653 18.2675C2.09656 16.2428 3.24317 12.712 6.11581 12.2956L13.5982 11.2112L16.9493 4.42107C18.2332 1.81969 21.9426 1.81969 23.2265 4.42107L26.5776 11.2112L34.06 12.2956C36.9326 12.712 38.0792 16.2428 35.9993 18.2675L30.5732 23.5492L31.852 31.0044C32.3428 33.8651 29.3386 36.0456 26.7708 34.6925L20.1026 31.1787Z",
+        stroke: "black",
+        fill: "transparent",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M20.0961 26.5515L12.6372 30.4731L14.0621 22.1671L8.01953 16.2853L16.3582 15.0768L20.0877 7.52002L23.8171 15.0768L32.1558 16.2853L26.1133 22.1671L27.5381 30.4731L20.0961 26.5515Z",
+        stroke: strokeColor(isActive, false),
+        fill: fillColor(isChecked, isActive, false),
+        strokeWidth: "2.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+};
+const starIconHoverMobile = (isFocused, isChecked, isActive) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  isFocused && /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M22.2128 31.4832L16.2246 36.117C13.9303 37.8924 10.5961 36.2662 10.5826 33.3653L10.5475 25.7929L4.28665 21.5336C1.88672 19.9009 2.40278 16.2246 5.15948 15.3158L12.3399 12.9486L14.461 5.67964C15.2736 2.89484 18.9267 2.2507 20.6428 4.58962L25.1221 10.6947L32.6791 10.4633C35.5804 10.3745 37.3227 13.6526 35.6259 16.0077L31.1994 22.1514L33.7534 29.2712C34.7335 32.0033 32.1536 34.6724 29.3898 33.7857L22.2128 31.4832Z",
+      stroke: "black",
+      fill: "transparent",
+      strokeWidth: "3",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M21.4079 26.8365L14.7433 31.9937L14.7041 23.5664L7.73204 18.8233L15.7342 16.1851L18.0947 8.09555L23.0798 14.8899L31.5016 14.6321L26.5722 21.4738L29.4178 29.4062L21.4079 26.8365Z",
+      stroke: strokeColor(isActive, true),
+      fill: fillColor(isChecked, isActive, true),
+      fillOpacity: isChecked ? "1" : "0.13",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+const starIconNormalDesktop = (isFocused, isChecked, isActive) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  isFocused && /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M30.1061 44.1854L20.3139 49.3338C17.7461 50.6838 14.745 48.5034 15.2355 45.6441L17.1061 34.7394L9.17653 27.0207C7.09656 24.9961 8.24318 21.4653 11.1158 21.0489L22.053 19.4638L26.9493 9.54278C28.2331 6.9414 31.9426 6.94139 33.2265 9.54278L38.1227 19.4638L49.06 21.0489C51.9326 21.4653 53.0792 24.9961 50.9993 27.0207L43.0697 34.7394L44.9389 45.6359C45.4296 48.4966 42.4254 50.6772 39.8576 49.324L30.1061 44.1854Z",
+      stroke: "black",
+      fill: "transparent",
+      strokeWidth: "3",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M30.0998 39.4723L19.5927 44.9966L21.5998 33.2961L13.0879 25.0106L24.8343 23.3082L30.0879 12.6632L35.3414 23.3082L47.0879 25.0106L38.576 33.2961L40.5831 44.9966L30.0998 39.4723Z",
+      stroke: strokeColor(isActive, false),
+      fill: fillColor(isChecked, isActive, false),
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+const starIconHoverDesktop = (isFocused, isChecked, isActive) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  isFocused && /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M33.1609 44.7458L24.4114 51.5164C22.1171 53.2918 18.783 51.6656 18.7695 48.7646L18.7181 37.7007L9.56864 31.4763C7.1687 29.8436 7.68476 26.1672 10.4415 25.2584L20.9373 21.7982L24.0364 11.1776C24.849 8.39281 28.5021 7.74867 30.2182 10.0876L36.7629 19.0077L47.8092 18.6695C50.7105 18.5807 52.4528 21.8588 50.756 24.2138L44.2872 33.1922L48.0201 43.5985C49.0002 46.3306 46.4203 48.9997 43.6565 48.113L33.1609 44.7458Z",
+      stroke: "black",
+      fill: "transparent",
+      strokeWidth: "3",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M32.3991 40.1029L23.0108 47.3678L22.9557 35.4965L13.1343 28.815L24.4067 25.0987L27.732 13.7031L34.7542 23.2741L46.6178 22.9109L39.674 32.5486L43.6823 43.7228L32.3991 40.1029Z",
+      stroke: strokeColor(isActive, true),
+      fill: fillColor(isChecked, isActive, true),
+      fillOpacity: isChecked ? "1" : "0.13",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+const FavoriteButton = React__default.forwardRef(function FavoriteButtonForwardedRef(props, ref) {
+  const { checked, id, onClick, resources, tabIndex, testId, ...other } = props;
+  const buttonWrapperClasses = classNames(styles.favoritebutton);
+  const { refObject, isFocused, isHovered, isActive } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const breakpoint = useBreakpoint();
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabel: other["aria-label"] || (resources == null ? void 0 : resources.ariaLabel) || defaultResources.ariaLabel
+  };
+  const isMobile = breakpoint <= Breakpoint.sm;
+  const starIcon = (() => {
+    if (isMobile) {
+      if (isHovered) {
+        return starIconHoverMobile(isFocused, checked, isActive);
+      } else {
+        return starIconNormalMobile(isFocused, checked, isActive);
+      }
+    } else {
+      if (isHovered) {
+        return starIconHoverDesktop(isFocused, checked, isActive);
+      } else {
+        return starIconNormalDesktop(isFocused, checked, isActive);
+      }
+    }
+  })();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id,
+      onClick,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.FavoriteButton,
+      className: buttonWrapperClasses,
+      ref: refObject,
+      tabIndex,
+      role: "switch",
+      "aria-checked": checked,
+      type: "button",
+      "aria-label": mergedResources.ariaLabel,
+      ...other,
+      children: /* @__PURE__ */ jsx("svg", { focusable: false, overflow: "visible", role: "presentation", viewBox: isMobile ? "0 0 41 41" : "0 0 61 61", ...other, children: starIcon })
+    }
+  );
+});
+FavoriteButton.displayName = "FavoriteButton";
+export {
+  FavoriteButton,
+  FavoriteButton as default
+};
+//# sourceMappingURL=index.js.map

package/components/FavoriteButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/FavoriteButton/resourceHelper.ts","../../../src/components/FavoriteButton/StarIcon.tsx","../../../src/components/FavoriteButton/FavoriteButton.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FavoriteButton.nb-NO.json';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFavoriteButton => {\n  switch (language) {\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","const normalStroke = 'var(--color-action-graphics-onlight)';\nconst normalFill = 'transparent';\nconst hoverFill = '#126F8721'; // kan ikke bruke transparent token på svg\nconst hoverStroke = 'var(--color-action-graphics-onlight-hover)';\nconst activeStroke = 'var(--core-color-blueberry-800)';\n\nconst fillColor = (isChecked: boolean, isActive: boolean, isHovered: boolean): string => {\n  if (isChecked) {\n    if (isActive) {\n      return activeStroke;\n    } else {\n      if (isHovered) {\n        return hoverStroke;\n      } else {\n        return normalStroke;\n      }\n    }\n  } else {\n    if (isHovered) {\n      return hoverFill;\n    } else {\n      return normalFill;\n    }\n  }\n};\n\nconst strokeColor = (isActive: boolean, isHovered: boolean): string => {\n  if (isActive) {\n    return activeStroke;\n  } else {\n    if (isHovered) {\n      return hoverStroke;\n    } else {\n      return normalStroke;\n    }\n  }\n};\n\nexport const starIconNormalMobile = (isFocused: boolean, isChecked: boolean, isActive: boolean): React.JSX.Element => {\n  return (\n    <>\n      {isFocused && (\n        <path\n          d=\"M20.1026 31.1787L13.4007 34.7023C10.833 36.0523 7.83185 33.8719 8.32233 31.0126L9.60261 23.5492L4.17653 18.2675C2.09656 16.2428 3.24317 12.712 6.11581 12.2956L13.5982 11.2112L16.9493 4.42107C18.2332 1.81969 21.9426 1.81969 23.2265 4.42107L26.5776 11.2112L34.06 12.2956C36.9326 12.712 38.0792 16.2428 35.9993 18.2675L30.5732 23.5492L31.852 31.0044C32.3428 33.8651 29.3386 36.0456 26.7708 34.6925L20.1026 31.1787Z\"\n          stroke=\"black\"\n          fill=\"transparent\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n      )}\n      <path\n        d=\"M20.0961 26.5515L12.6372 30.4731L14.0621 22.1671L8.01953 16.2853L16.3582 15.0768L20.0877 7.52002L23.8171 15.0768L32.1558 16.2853L26.1133 22.1671L27.5381 30.4731L20.0961 26.5515Z\"\n        stroke={strokeColor(isActive, false)}\n        fill={fillColor(isChecked, isActive, false)}\n        strokeWidth=\"2.2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </>\n  );\n};\n\nexport const starIconHoverMobile = (isFocused: boolean, isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    {isFocused && (\n      <path\n        d=\"M22.2128 31.4832L16.2246 36.117C13.9303 37.8924 10.5961 36.2662 10.5826 33.3653L10.5475 25.7929L4.28665 21.5336C1.88672 19.9009 2.40278 16.2246 5.15948 15.3158L12.3399 12.9486L14.461 5.67964C15.2736 2.89484 18.9267 2.2507 20.6428 4.58962L25.1221 10.6947L32.6791 10.4633C35.5804 10.3745 37.3227 13.6526 35.6259 16.0077L31.1994 22.1514L33.7534 29.2712C34.7335 32.0033 32.1536 34.6724 29.3898 33.7857L22.2128 31.4832Z\"\n        stroke=\"black\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n    )}\n    <path\n      d=\"M21.4079 26.8365L14.7433 31.9937L14.7041 23.5664L7.73204 18.8233L15.7342 16.1851L18.0947 8.09555L23.0798 14.8899L31.5016 14.6321L26.5722 21.4738L29.4178 29.4062L21.4079 26.8365Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\nexport const starIconNormalDesktop = (isFocused: boolean, isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    {isFocused && (\n      <path\n        d=\"M30.1061 44.1854L20.3139 49.3338C17.7461 50.6838 14.745 48.5034 15.2355 45.6441L17.1061 34.7394L9.17653 27.0207C7.09656 24.9961 8.24318 21.4653 11.1158 21.0489L22.053 19.4638L26.9493 9.54278C28.2331 6.9414 31.9426 6.94139 33.2265 9.54278L38.1227 19.4638L49.06 21.0489C51.9326 21.4653 53.0792 24.9961 50.9993 27.0207L43.0697 34.7394L44.9389 45.6359C45.4296 48.4966 42.4254 50.6772 39.8576 49.324L30.1061 44.1854Z\"\n        stroke=\"black\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n    )}\n    <path\n      d=\"M30.0998 39.4723L19.5927 44.9966L21.5998 33.2961L13.0879 25.0106L24.8343 23.3082L30.0879 12.6632L35.3414 23.3082L47.0879 25.0106L38.576 33.2961L40.5831 44.9966L30.0998 39.4723Z\"\n      stroke={strokeColor(isActive, false)}\n      fill={fillColor(isChecked, isActive, false)}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n\nexport const starIconHoverDesktop = (isFocused: boolean, isChecked: boolean, isActive: boolean): React.JSX.Element => (\n  <>\n    {isFocused && (\n      <path\n        d=\"M33.1609 44.7458L24.4114 51.5164C22.1171 53.2918 18.783 51.6656 18.7695 48.7646L18.7181 37.7007L9.56864 31.4763C7.1687 29.8436 7.68476 26.1672 10.4415 25.2584L20.9373 21.7982L24.0364 11.1776C24.849 8.39281 28.5021 7.74867 30.2182 10.0876L36.7629 19.0077L47.8092 18.6695C50.7105 18.5807 52.4528 21.8588 50.756 24.2138L44.2872 33.1922L48.0201 43.5985C49.0002 46.3306 46.4203 48.9997 43.6565 48.113L33.1609 44.7458Z\"\n        stroke=\"black\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n    )}\n    <path\n      d=\"M32.3991 40.1029L23.0108 47.3678L22.9557 35.4965L13.1343 28.815L24.4067 25.0987L27.732 13.7031L34.7542 23.2741L46.6178 22.9109L39.674 32.5486L43.6823 43.7228L32.3991 40.1029Z\"\n      stroke={strokeColor(isActive, true)}\n      fill={fillColor(isChecked, isActive, true)}\n      fillOpacity={isChecked ? '1' : '0.13'}\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </>\n);\n","import React, { AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { starIconHoverDesktop, starIconHoverMobile, starIconNormalDesktop, starIconNormalMobile } from './StarIcon';\nimport { AnalyticsId, HTMLButtonProps, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemFavoriteButton } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { isMutableRefObject } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface FavoriteButtonProps extends HTMLButtonProps, AriaAttributes {\n  /**  Determines if the FavoriteButton is checked */\n  checked: boolean;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Function that is called when clicked */\n  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemFavoriteButton>;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const FavoriteButton = React.forwardRef(function FavoriteButtonForwardedRef(\n  props: FavoriteButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement>\n) {\n  const { checked, id, onClick, resources, tabIndex, testId, ...other } = props;\n\n  const buttonWrapperClasses = classNames(styles.favoritebutton);\n  const { refObject, isFocused, isHovered, isActive } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const breakpoint = useBreakpoint();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFavoriteButton = {\n    ...defaultResources,\n    ...resources,\n    ariaLabel: other['aria-label'] || resources?.ariaLabel || defaultResources.ariaLabel,\n  };\n\n  const isMobile = breakpoint <= Breakpoint.sm;\n\n  const starIcon = ((): React.JSX.Element => {\n    if (isMobile) {\n      if (isHovered) {\n        return starIconHoverMobile(isFocused, checked, isActive);\n      } else {\n        return starIconNormalMobile(isFocused, checked, isActive);\n      }\n    } else {\n      if (isHovered) {\n        return starIconHoverDesktop(isFocused, checked, isActive);\n      } else {\n        return starIconNormalDesktop(isFocused, checked, isActive);\n      }\n    }\n  })();\n\n  return (\n    <button\n      id={id}\n      onClick={onClick}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FavoriteButton}\n      className={buttonWrapperClasses}\n      ref={refObject}\n      tabIndex={tabIndex}\n      role=\"switch\"\n      aria-checked={checked}\n      type=\"button\"\n      aria-label={mergedResources.ariaLabel}\n      {...other}\n    >\n      <svg focusable={false} overflow=\"visible\" role=\"presentation\" viewBox={isMobile ? '0 0 41 41' : '0 0 61 61'} {...other}>\n        {starIcon}\n      </svg>\n    </button>\n  );\n});\n\nFavoriteButton.displayName = 'FavoriteButton';\n\nexport default FavoriteButton;\n"],"names":["React"],"mappings":"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"}

package/components/FavoriteButton/resourceHelper.d.ts

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

package/components/FavoriteButton/stories.module.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/spacers' as spacers;
+
+.story {
+  &__title {
+    display: inline;
+    padding-right: spacers.getSpacer(2xl);
+  }
+
+  &__hjelpetrigger {
+    display: inline-flex;
+    position: relative;
+    margin-left: spacers.getSpacer(xl) * -1;
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/components/FavoriteButton/stories.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  story__hjelpetrigger: string;
+  story__title: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/FavoriteButton/styles.module.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+
+$large-size: 2.5rem;
+$xl-size: 3.75rem;
+
+.favoritebutton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  height: $large-size;
+  width: $large-size;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  outline: none;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $xl-size;
+    width: $xl-size;
+  }
+
+  svg {
+    height: $large-size;
+    width: $large-size;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $xl-size;
+      width: $xl-size;
+    }
+  }
+}

package/components/FavoriteButton/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  favoritebutton: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HelpTriggerIcon/styles.module.scss

@@ -6,6 +6,9 @@
 $trigger-medium-size: 1.25rem;
 $trigger-large-size: 1.5rem;
 $trigger-xl-size: 2rem;
+$trigger-medium-margin: 0.125rem;
+$trigger-large-margin: 0.25rem;
+$trigger-xl-margin: 0.25rem;
 $outline-medium-width: 2px;
 $outline-large-width: 2.2px;
 $outline-xl-width: 2.5px;
@@ -91,6 +94,18 @@ $outline-focus-outer-width: 5px;
     }
   }
 
+  &--medium#{&}--is-button {
+    margin: $trigger-medium-margin;
+  }
+
+  &--large#{&}--is-button {
+    margin: $trigger-medium-margin;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin: $trigger-large-margin;
+    }
+  }
+
   &--medium#{&}--is-button,
   &--large#{&}--is-button {
     &:focus-visible {
@@ -113,11 +128,17 @@ $outline-focus-outer-width: 5px;
   }
 
   &--xlarge#{&}--is-button {
+    margin: $trigger-large-margin;
+
     &:focus-visible {
       box-shadow: none;
       outline: 3.5px solid var(--color-action-border-onlight-focus);
       outline-offset: -2px;
     }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin: $trigger-xl-margin;
+    }
   }
 
   &--is-button {

package/components/StatusDot/styles.module.scss

@@ -10,6 +10,7 @@
 $status-dot-size: 1rem;
 
 .statusdot {
+  min-height: 1.75rem;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -29,6 +30,7 @@ $status-dot-size: 1rem;
     &--active {
       fill: var(--color-notification-graphics-success);
     }
+
     &--success#{&}--on-dark,
     &--active#{&}--on-dark {
       fill: var(--core-color-kiwi-200);
@@ -41,6 +43,7 @@ $status-dot-size: 1rem;
     &--pending {
       fill: var(--color-notification-graphics-warning);
     }
+
     &--inprocess#{&}--on-dark,
     &--exception#{&}--on-dark,
     &--unknown#{&}--on-dark,
@@ -54,6 +57,7 @@ $status-dot-size: 1rem;
     &--inactive {
       fill: var(--color-notification-graphics-error);
     }
+
     &--cancelled#{&}--on-dark,
     &--alert#{&}--on-dark,
     &--inactive#{&}--on-dark {
@@ -63,6 +67,7 @@ $status-dot-size: 1rem;
     &--info {
       fill: var(--core-color-blueberry-500);
     }
+
     &--info#{&}--on-dark {
       fill: var(--core-color-blueberry-200);
     }
@@ -70,6 +75,7 @@ $status-dot-size: 1rem;
     &--transparent {
       fill: var(--color-disabled-border);
     }
+
     &--transparent#{&}--on-dark,
     &--group#{&}--on-dark,
     &--recurring#{&}--on-dark,

package/constants.d.ts

@@ -69,6 +69,7 @@ export declare enum AnalyticsId {
     ExpanderList = "expander-list",
     ExpanderListExpander = "expander-list-expander",
     EyebrowHeader = "eyebrow-header",
+    FavoriteButton = "favorite-button",
     FormGroup = "form-group",
     FormLayout = "form-layout",
     HelpBubble = "help-bubble",

package/constants.js

@@ -47,6 +47,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
   AnalyticsId2["ExpanderList"] = "expander-list";
   AnalyticsId2["ExpanderListExpander"] = "expander-list-expander";
   AnalyticsId2["EyebrowHeader"] = "eyebrow-header";
+  AnalyticsId2["FavoriteButton"] = "favorite-button";
   AnalyticsId2["FormGroup"] = "form-group";
   AnalyticsId2["FormLayout"] = "form-layout";
   AnalyticsId2["HelpBubble"] = "help-bubble";

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/resources/HN.Designsystem.FavoriteButton.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabel": "Favorittmarkering"
+}
+;
+
+export default _default;