@helsenorge/designsystem-react 14.9.2 → 14.11.0

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":["FormGroup: React.FC<FormGroupProps>"],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport { getRadioLabelClasses } from '../RadioButton/utils';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","names":["FormGroup: React.FC<FormGroupProps>"],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const radioGroupId = useId();\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      const groupChecked =\n        child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        checked: groupChecked,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/lib/GiveBabyFoodMedium.js

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils4.js";
+import { t as ViewBoxSize } from "./utils3.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChildMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {

package/lib/Illustration.js

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "./constants2.js";
-import { n as getIllustration, t as ViewBoxSize } from "./utils4.js";
+import { n as getIllustration, t as ViewBoxSize } from "./utils3.js";
 import React, { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 const Illustration = (props) => {

package/lib/IllustrationNames.js

@@ -2,10 +2,12 @@ const IllustrationList = [
 	"BabyMobile",
 	"Child",
 	"Doctor",
+	"EyeContact",
 	"FacialRecognitionFingerprint",
 	"GiveBabyFood",
 	"HealthcarePersonnel",
 	"ReadLetters",
+	"SkinToSkin",
 	"Stork",
 	"Stroller",
 	"Support2",
@@ -18,6 +20,7 @@ const IllustrationSizeList = {
 		small: "DoctorSmall",
 		medium: "DoctorMedium"
 	},
+	EyeContact: { medium: "EyeContactMedium" },
 	FacialRecognitionFingerprint: { medium: "FacialRecognitionFingerprintMedium" },
 	GiveBabyFood: { medium: "GiveBabyFoodMedium" },
 	HealthcarePersonnel: {
@@ -25,6 +28,7 @@ const IllustrationSizeList = {
 		medium: "HealthcarePersonnelMedium"
 	},
 	ReadLetters: { medium: "ReadLettersMedium" },
+	SkinToSkin: { medium: "SkinToSkinMedium" },
 	Stork: { medium: "StorkMedium" },
 	Stroller: { medium: "StrollerMedium" },
 	Support2: { medium: "Support2Medium" },

package/lib/IllustrationNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"IllustrationNames.js","names":["IllustrationSizeList: Record<IllustrationName, IllustrationSize>"],"sources":["../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'ReadLetters',\n  'Stork',\n  'Stroller',\n  'Support2',\n  'Thinking',\n] as const;\n\nexport interface IllustrationSize {\n  small?: string;\n  medium?: string;\n  large?: string;\n}\n\nexport const IllustrationSizeList: Record<IllustrationName, IllustrationSize> = {\n  BabyMobile: { medium: 'BabyMobileMedium' },\n  Child: { medium: 'ChildMedium' },\n  Doctor: { small: 'DoctorSmall', medium: 'DoctorMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  Stork: { medium: 'StorkMedium' },\n  Stroller: { medium: 'StrollerMedium' },\n  Support2: { medium: 'Support2Medium' },\n  Thinking: { medium: 'ThinkingMedium' },\n};\n\nexport type IllustrationName = (typeof IllustrationList)[number];\n"],"mappings":"AAEA,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAQD,MAAaA,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,OAAO,EAAE,QAAQ,eAAe;CAChC,QAAQ;EAAE,OAAO;EAAe,QAAQ;EAAgB;CACxD,8BAA8B,EAAE,QAAQ,sCAAsC;CAC9E,cAAc,EAAE,QAAQ,sBAAsB;CAC9C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;EAA6B;CAC/F,aAAa,EAAE,QAAQ,qBAAqB;CAC5C,OAAO,EAAE,QAAQ,eAAe;CAChC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACvC"}
+{"version":3,"file":"IllustrationNames.js","names":["IllustrationSizeList: Record<IllustrationName, IllustrationSize>"],"sources":["../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'EyeContact',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'ReadLetters',\n  'SkinToSkin',\n  'Stork',\n  'Stroller',\n  'Support2',\n  'Thinking',\n] as const;\n\nexport interface IllustrationSize {\n  small?: string;\n  medium?: string;\n  large?: string;\n}\n\nexport const IllustrationSizeList: Record<IllustrationName, IllustrationSize> = {\n  BabyMobile: { medium: 'BabyMobileMedium' },\n  Child: { medium: 'ChildMedium' },\n  Doctor: { small: 'DoctorSmall', medium: 'DoctorMedium' },\n  EyeContact: { medium: 'EyeContactMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  SkinToSkin: { medium: 'SkinToSkinMedium' },\n  Stork: { medium: 'StorkMedium' },\n  Stroller: { medium: 'StrollerMedium' },\n  Support2: { medium: 'Support2Medium' },\n  Thinking: { medium: 'ThinkingMedium' },\n};\n\nexport type IllustrationName = (typeof IllustrationList)[number];\n"],"mappings":"AAEA,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAQD,MAAaA,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,OAAO,EAAE,QAAQ,eAAe;CAChC,QAAQ;EAAE,OAAO;EAAe,QAAQ;EAAgB;CACxD,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,8BAA8B,EAAE,QAAQ,sCAAsC;CAC9E,cAAc,EAAE,QAAQ,sBAAsB;CAC9C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;EAA6B;CAC/F,aAAa,EAAE,QAAQ,qBAAqB;CAC5C,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,OAAO,EAAE,QAAQ,eAAe;CAChC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACvC"}

package/lib/LazyIllustration.js

@@ -1,6 +1,6 @@
 import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
 import { t as useIsServerSide } from "./useIsServerSide.js";
-import { n as getIllustration } from "./utils4.js";
+import { n as getIllustration } from "./utils3.js";
 import { t as Illustration_default } from "./Illustration.js";
 import { n as IllustrationSizeList } from "./IllustrationNames.js";
 import { Suspense, lazy, useMemo } from "react";
@@ -20,6 +20,8 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/Doctor.tsx": () => import("./components/Illustrations/Doctor.js"),
 			"../Illustrations/DoctorMedium.tsx": () => import("./components/Illustrations/DoctorMedium.js"),
 			"../Illustrations/DoctorSmall.tsx": () => import("./components/Illustrations/DoctorSmall.js"),
+			"../Illustrations/EyeContact.tsx": () => import("./components/Illustrations/EyeContact.js"),
+			"../Illustrations/EyeContactMedium.tsx": () => import("./components/Illustrations/EyeContactMedium.js"),
 			"../Illustrations/FacialRecognitionFingerprint.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprint.js"),
 			"../Illustrations/FacialRecognitionFingerprintMedium.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprintMedium.js"),
 			"../Illustrations/GiveBabyFood.tsx": () => import("./components/Illustrations/GiveBabyFood.js"),
@@ -29,6 +31,8 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/HealthcarePersonnelSmall.tsx": () => import("./components/Illustrations/HealthcarePersonnelSmall.js"),
 			"../Illustrations/ReadLetters.tsx": () => import("./components/Illustrations/ReadLetters.js"),
 			"../Illustrations/ReadLettersMedium.tsx": () => import("./components/Illustrations/ReadLettersMedium.js"),
+			"../Illustrations/SkinToSkin.tsx": () => import("./components/Illustrations/SkinToSkin.js"),
+			"../Illustrations/SkinToSkinMedium.tsx": () => import("./components/Illustrations/SkinToSkinMedium.js"),
 			"../Illustrations/Stork.tsx": () => import("./components/Illustrations/Stork.js"),
 			"../Illustrations/StorkMedium.tsx": () => import("./components/Illustrations/StorkMedium.js"),
 			"../Illustrations/Stroller.tsx": () => import("./components/Illustrations/Stroller.js"),

package/lib/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}
+{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}

package/lib/Radio.js

@@ -0,0 +1,73 @@
+import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/VisualRadioCloud/Radio/styles.module.scss";
+var Radio = (props) => {
+	const { className, checked, defaultChecked, children, inputId: inputIdProp, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, testId, onChange, ref, ...rest } = props;
+	const inputId = useIdWithFallback(inputIdProp);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const isMobile = useIsMobileBreakpoint();
+	const [isChecked, setIsChecked] = useState(!!(checked ?? defaultChecked));
+	const [prevChecked, setPrevChecked] = useState(checked);
+	if (prevChecked !== checked) {
+		setPrevChecked(checked);
+		if (checked !== void 0 && checked !== isChecked) setIsChecked(checked);
+	}
+	const handleChange = (e) => {
+		setIsChecked(e.target.checked);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: classNames(styles["visual-radio"], {
+				[styles["visual-radio--checked"]]: isChecked,
+				[styles["visual-radio--invalid"]]: error
+			}, className),
+			htmlFor: inputId,
+			"data-testid": testId,
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				id: inputId,
+				ref,
+				className: styles["visual-radio__input"],
+				type: "radio",
+				checked: isChecked,
+				"aria-describedby": getAriaDescribedBy(props, errorTextId),
+				onChange: handleChange
+			}), /* @__PURE__ */ jsxs("span", {
+				className: styles["visual-radio__pill"],
+				children: [isChecked && /* @__PURE__ */ jsx("span", {
+					className: styles["visual-radio__icon"],
+					"aria-hidden": "true",
+					children: isMobile ? /* @__PURE__ */ jsx("svg", {
+						width: "8",
+						height: "8",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" })
+					}) : /* @__PURE__ */ jsx("svg", {
+						width: "12",
+						height: "12",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles["visual-radio__label"],
+					children
+				})]
+			})]
+		})
+	});
+};
+var Radio_default = Radio;
+export { Radio_default as t };
+
+//# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["Radio: React.FC<RadioProps>"],"sources":["../src/components/VisualRadioCloud/Radio/Radio.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** Value identifying this radio inside its group. Required. */\n  value: string;\n  /** input id of the underlying radio */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a cloud). */\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  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio'],\n          {\n            [styles['visual-radio--checked']]: isChecked,\n            [styles['visual-radio--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio__input']}\n          type=\"radio\"\n          checked={isChecked}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-radio__pill']}>\n          {isChecked && (\n            <span className={styles['visual-radio__icon']} aria-hidden=\"true\">\n              {isMobile ? (\n                <svg width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" />\n                </svg>\n              ) : (\n                <svg width=\"12\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z\" />\n                </svg>\n              )}\n            </span>\n          )}\n          <span className={styles['visual-radio__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;AAqCA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,WAAW,uBAAuB;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,gBAAgB;CAClF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,QAAQ;AAC5E,KAAI,gBAAgB,SAAS;AAC3B,iBAAe,QAAQ;AACvB,MAAI,YAAY,KAAA,KAAa,YAAY,UACvC,cAAa,QAAQ;;CAIzB,MAAM,gBAAgB,MAAiD;AACrE,eAAa,EAAE,OAAO,QAAQ;AAC9B,aAAW,EAAE;;AAGf,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAA;GACC,WAAW,WACT,OAAO,iBACP;KACG,OAAO,2BAA2B;KAClC,OAAO,2BAA2B;IACpC,EACD,UACD;GACD,SAAS;GACT,eAAa;cAEb,oBAAC,SAAA;IACC,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,YAAY;IACxD,UAAU;KACV,EACF,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,aACC,oBAAC,QAAA;KAAK,WAAW,OAAO;KAAuB,eAAY;eACxD,WACC,oBAAC,OAAA;MAAI,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;gBAC1C,oBAAC,QAAA,EAAK,GAAE,qCAAA,CAAsC;OAC1C,GAEN,oBAAC,OAAA;MAAI,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAA,EAAK,GAAE,uCAAA,CAAwC;OAC5C;MAEH,EAET,oBAAC,QAAA;KAAK,WAAW,OAAO;KAAyB;MAAgB,CAAA;KAC5D,CAAA;IACD;GACK;;AAInB,IAAA,gBAAe"}

package/lib/RadioButton.js

@@ -1,5 +1,97 @@
-import { r as RadioButton_default } from "./utils3.js";
-var RadioButton_default$1 = RadioButton_default;
-export { RadioButton_default$1 as t };
+import { t as uuid } from "./uuid.js";
+import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
+import { t as RadioMarker_default } from "./RadioMarker.js";
+import classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import radioButtonStyles from "./components/RadioButton/styles.module.scss";
+const RadioButton = (props) => {
+	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ref, ...rest } = props;
+	const invalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onCherry = onColor === FormOnColor.oninvalid;
+	const isLarge = size === FormSize.large;
+	const [isChecked, setIsChecked] = useState(!!(props.checked ?? defaultChecked));
+	const [prevChecked, setPrevChecked] = useState(props.checked);
+	if (prevChecked !== props.checked) {
+		setPrevChecked(props.checked);
+		if (props.checked !== void 0 && props.checked !== isChecked) setIsChecked(props.checked);
+	}
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
+		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
+		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && isChecked,
+		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry,
+		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry
+	});
+	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
+		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
+		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
+		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
+		[radioButtonStyles["radio-button-label__large"]]: isLarge,
+		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled,
+		[radioButtonStyles["radio-button-label__large--on-grey"]]: isLarge && onGrey && !isChecked,
+		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: isLarge && onBlueberry && !isChecked,
+		[radioButtonStyles["radio-button-label__large--selected"]]: isLarge && isChecked && !onCherry,
+		[radioButtonStyles["radio-button-label__large--selected-invalid"]]: isLarge && isChecked && onCherry
+	}, labelClassNames);
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], className);
+	const change = (e) => {
+		setIsChecked(e.target.checked);
+		if (onChange) onChange(e);
+	};
+	const getLabelContent = () => /* @__PURE__ */ jsxs("span", {
+		className: radioButtonStyles["radio-button__marker-wrapper"],
+		children: [/* @__PURE__ */ jsx("input", {
+			...rest,
+			id: inputId,
+			name,
+			className: radioButtonClasses,
+			type: "radio",
+			disabled,
+			value,
+			ref,
+			defaultChecked,
+			"aria-describedby": getAriaDescribedBy(props, errorTextId),
+			required,
+			onChange: (e) => change(e)
+		}), /* @__PURE__ */ jsx(RadioMarker_default, {
+			checked: isChecked,
+			disabled,
+			error: invalid,
+			onColor,
+			size
+		})]
+	});
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.RadioButton,
+			className: radioButtonWrapperClasses,
+			children: renderLabelAsParent({
+				label,
+				children: getLabelContent(),
+				inputId,
+				onColor,
+				labelClassName: radioButtonLabelClasses,
+				sublabelWrapperClassName: radioButtonStyles["radiobutton-sublabel-wrapper"],
+				large: isLarge,
+				afterLabelChildrenClassName: radioButtonStyles["radiobutton-afterlabelchildren-wrapper"]
+			})
+		})
+	});
+};
+RadioButton.displayName = "RadioButton";
+var RadioButton_default = RadioButton;
+export { RadioButton_default as n, RadioButton as t };
 
 //# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport * from './utils';\nexport default RadioButton;\n"],"mappings":";AAGA,IAAA,wBAAe"}
+{"version":3,"file":"RadioButton.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    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  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\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    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [isChecked, setIsChecked] = useState<boolean>(!!(props.checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(props.checked);\n  if (prevChecked !== props.checked) {\n    setPrevChecked(props.checked);\n    if (props.checked !== undefined && props.checked !== isChecked) {\n      setIsChecked(props.checked);\n    }\n  }\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && isChecked,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\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      [radioButtonStyles['radio-button-label__large--on-grey']]: isLarge && onGrey && !isChecked,\n      [radioButtonStyles['radio-button-label__large--on-blueberry']]: isLarge && onBlueberry && !isChecked,\n      [radioButtonStyles['radio-button-label__large--selected']]: isLarge && isChecked && !onCherry,\n      [radioButtonStyles['radio-button-label__large--selected-invalid']]: isLarge && isChecked && onCherry,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(radioButtonStyles['radio-button'], className);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioButtonStyles['radio-button__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioButtonClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={(e): void => change(e)}\n      />\n      <RadioMarker checked={isChecked} disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;AA+CA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,MAAM,WAAW,gBAAgB;CACxF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,MAAM,QAAQ;AAClF,KAAI,gBAAgB,MAAM,SAAS;AACjC,iBAAe,MAAM,QAAQ;AAC7B,MAAI,MAAM,YAAY,KAAA,KAAa,MAAM,YAAY,UACnD,cAAa,MAAM,QAAQ;;CAG/B,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,2CAA2C,WAAW;GACxE,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,+CAA+C,WAAW;EAC9E,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,yCAAyC,WAAW;GACtE,kBAAkB,wCAAwC,WAAW,UAAU,CAAC;GAChF,kBAAkB,6CAA6C,WAAW,eAAe,CAAC;GAC1F,kBAAkB,yCAAyC,WAAW,aAAa,CAAC;GACpF,kBAAkB,iDAAiD,WAAW,aAAa;EAC7F,EACD,gBACD;CACD,MAAM,qBAAqB,WAAW,kBAAkB,iBAAiB,UAAU;CAEnF,MAAM,UAAU,MAAiD;AAC/D,eAAa,EAAE,OAAO,QAAQ;AAC9B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,qBAAC,QAAA;EAAK,WAAW,kBAAkB;aACjC,oBAAC,SAAA;GACC,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,YAAY;GAC9C;GACV,WAAW,MAAY,OAAO,EAAE;IAChC,EACF,oBAAC,qBAAA;GAAY,SAAS;GAAqB;GAAU,OAAO;GAAkB;GAAe;IAAQ,CAAA;GAChG;AAGT,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe"}

package/lib/RadioButton2.js

@@ -0,0 +1,5 @@
+import { n as RadioButton_default } from "./RadioButton.js";
+var RadioButton_default$1 = RadioButton_default;
+export { RadioButton_default$1 as t };
+
+//# sourceMappingURL=RadioButton2.js.map

package/lib/RadioButton2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton2.js","names":[],"sources":["../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";AAEA,IAAA,wBAAe"}

package/lib/RadioMarker.js

@@ -0,0 +1,37 @@
+import { i as FormSize, r as FormOnColor } from "./constants2.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/RadioButton/RadioMarker/styles.module.scss";
+const RadioMarker = (props) => {
+	const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;
+	const onWhite = onColor === FormOnColor.onwhite;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onInvalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const large = size === FormSize.large;
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(styles["radio__marker"], {
+			[styles["radio__marker--on-white"]]: onWhite,
+			[styles["radio__marker--on-grey"]]: onGrey,
+			[styles["radio__marker--on-blueberry"]]: onBlueberry,
+			[styles["radio__marker--on-dark"]]: onDark,
+			[styles["radio__marker--on-invalid"]]: onInvalid,
+			[styles["radio__marker--invalid"]]: onInvalid,
+			[styles["radio__marker--disabled"]]: disabled,
+			[styles["radio__marker__regular--checked"]]: !large && checked,
+			[styles["radio__marker__regular--checked--invalid"]]: !large && checked && onInvalid,
+			[styles["radio__marker__regular--checked--on-dark"]]: !large && checked && onDark,
+			[styles["radio__marker__regular--checked--disabled"]]: !large && checked && disabled,
+			[styles["radio__marker__large--checked"]]: large && checked,
+			[styles["radio__marker__large--checked--invalid"]]: large && checked && onInvalid,
+			[styles["radio__marker__large--checked--disabled"]]: large && checked && disabled
+		}, className),
+		"aria-hidden": "true",
+		children: checked && /* @__PURE__ */ jsx("span", { className: styles["radio__marker-dot"] })
+	});
+};
+var RadioMarker_default = RadioMarker;
+export { RadioMarker_default as t };
+
+//# sourceMappingURL=RadioMarker.js.map

package/lib/RadioMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMarker.js","names":["RadioMarker: React.FC<RadioMarkerProps>"],"sources":["../src/components/RadioButton/RadioMarker/RadioMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioMarkerProps {\n  /** Whether the radio is checked. Controls the inner dot visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const RadioMarker: React.FC<RadioMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\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\n  const markerClasses = classNames(\n    styles['radio__marker'],\n    {\n      [styles['radio__marker--on-white']]: onWhite,\n      [styles['radio__marker--on-grey']]: onGrey,\n      [styles['radio__marker--on-blueberry']]: onBlueberry,\n      [styles['radio__marker--on-dark']]: onDark,\n      [styles['radio__marker--on-invalid']]: onInvalid,\n      [styles['radio__marker--invalid']]: onInvalid,\n      [styles['radio__marker--disabled']]: disabled,\n      [styles['radio__marker__regular--checked']]: !large && checked,\n      [styles['radio__marker__regular--checked--invalid']]: !large && checked && onInvalid,\n      [styles['radio__marker__regular--checked--on-dark']]: !large && checked && onDark,\n      [styles['radio__marker__regular--checked--disabled']]: !large && checked && disabled,\n      [styles['radio__marker__large--checked']]: large && checked,\n      [styles['radio__marker__large--checked--invalid']]: large && checked && onInvalid,\n      [styles['radio__marker__large--checked--disabled']]: large && checked && disabled,\n    },\n    className\n  );\n\n  return (\n    <span className={markerClasses} aria-hidden=\"true\">\n      {checked && <span className={styles['radio__marker-dot']} />}\n    </span>\n  );\n};\n\nexport default RadioMarker;\n"],"mappings":";;;;AAwBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;AAuBhC,QACE,oBAAC,QAAA;EAAK,WAtBc,WACpB,OAAO,kBACP;IACG,OAAO,6BAA6B;IACpC,OAAO,4BAA4B;IACnC,OAAO,iCAAiC;IACxC,OAAO,4BAA4B;IACnC,OAAO,+BAA+B;IACtC,OAAO,4BAA4B;IACnC,OAAO,6BAA6B;IACpC,OAAO,qCAAqC,CAAC,SAAS;IACtD,OAAO,8CAA8C,CAAC,SAAS,WAAW;IAC1E,OAAO,8CAA8C,CAAC,SAAS,WAAW;IAC1E,OAAO,+CAA+C,CAAC,SAAS,WAAW;IAC3E,OAAO,mCAAmC,SAAS;IACnD,OAAO,4CAA4C,SAAS,WAAW;IACvE,OAAO,6CAA6C,SAAS,WAAW;GAC1E,EACD,UACD;EAGiC,eAAY;YACzC,WAAW,oBAAC,QAAA,EAAK,WAAW,OAAO,sBAAA,CAAwB;GACvD;;AAIX,IAAA,sBAAe"}

package/lib/ReadLettersMedium.js

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils4.js";
+import { t as ViewBoxSize } from "./utils3.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ReadLettersMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {