@helsenorge/designsystem-react 15.5.1 → 15.7.0

package/lib/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [15.7.0](https://github.com/helsenorge/designsystem/compare/v15.6.0...v15.7.0) (2026-08-19)
+
+### Features
+
+*  ikoner for innstillinger ([86e28d9](https://github.com/helsenorge/designsystem/commit/86e28d950a40b9dd72fa63cbac8e09ad5ff79dd2)), closes [#383478](https://github.com/helsenorge/designsystem/issues/383478)
+
+## [15.6.0](https://github.com/helsenorge/designsystem/compare/v15.5.1...v15.6.0) (2026-08-18)
+
+### Features
+
+* **helppanel:**  ny variant subdued og spacing endringer ([ab758f9](https://github.com/helsenorge/designsystem/commit/ab758f9b0fe6cb6b5df4a1fd9e46a5b17095afef)), closes [#381355](https://github.com/helsenorge/designsystem/issues/381355)
+* **helpteaser:**  ny prop variant med subdued valg ([83ffba6](https://github.com/helsenorge/designsystem/commit/83ffba63fb1e0c67c84d9de416ca88b98dbcd9b1)), closes [#381365](https://github.com/helsenorge/designsystem/issues/381365)
+
+### Bug Fixes
+
+*  formgroup og formlayout spacing fikses ([31ea3ff](https://github.com/helsenorge/designsystem/commit/31ea3ff9e6250ae41cb59d1fae94452e5cbce5f7)), closes [#374103](https://github.com/helsenorge/designsystem/issues/374103)
+* **close:**  fokus outline 4px ([b51d0dd](https://github.com/helsenorge/designsystem/commit/b51d0ddb149ff7103dfe1d2f6a09ce80c00f723f)), closes [#379795](https://github.com/helsenorge/designsystem/issues/379795)
+* **helppanel:**  styling settes på riktig breakpoint ([103a337](https://github.com/helsenorge/designsystem/commit/103a337a36d5df5ebe4a5963328a060ff1e4ac5c)), closes [#381355](https://github.com/helsenorge/designsystem/issues/381355)
+
 ## [15.5.1](https://github.com/helsenorge/designsystem/compare/v15.5.0...v15.5.1) (2026-08-11)
 
 ### Bug Fixes

package/lib/Checkbox.js

@@ -47,7 +47,7 @@ var Checkbox = (props) => {
 	});
 	if (checked !== checkedControlledState && typeof checked !== "undefined") {
 		setCheckedControlledState(checked);
-		if (typeof checked !== "undefined") setIsChecked(checked);
+		setIsChecked(checked);
 	}
 	const onChangeHandler = (e) => {
 		if (onChange) onChange(e);

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    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  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\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: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\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 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  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n\n    if (typeof checked !== 'undefined') {\n      setIsChecked(checked);\n    }\n  }\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        <span className={checkboxStyles['checkbox__marker-wrapper']}>\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, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,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;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EAEjC,IAAI,OAAO,YAAY,aACrB,aAAa,OAAO;CAExB;CAEA,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;GAAhC,UAAA,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;EACN,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;GAC1E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    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  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\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: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\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 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  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setIsChecked(checked);\n  }\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        <span className={checkboxStyles['checkbox__marker-wrapper']}>\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, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,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;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EACjC,aAAa,OAAO;CACtB;CAEA,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;GAAhC,UAAA,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;EACN,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;GAC1E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}

package/lib/FormGroup.js

@@ -6,9 +6,10 @@ import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as Checkbox } from "./Checkbox.js";
 import Title_default from "./components/Title/index.js";
 import { t as Select_default } from "./Select.js";
+import { t as RadioButton } from "./RadioButton.js";
+import { hasSublabel, isCompactComponent } from "./utils/formSpacing.js";
 import { t as FormLayout_default } from "./FormLayout.js";
 import { t as Input } from "./Input.js";
-import { t as RadioButton } from "./RadioButton.js";
 import { t as Slider_default } from "./Slider.js";
 import { t as Textarea_default } from "./Textarea.js";
 import classNames from "classnames";
@@ -26,7 +27,13 @@ var FormGroup = (props) => {
 	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
 	const CustomTagForLegend = legendHtmlMarkup;
 	const legendClasses = classNames(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
-	const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
+	const childArray = React.Children.toArray(props.children);
+	const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);
+	const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);
+	const fieldsetClasses = classNames(formGroupStyles["field-set"], {
+		[formGroupStyles["field-set--compact-gap"]]: hasOnlyCompactComponents && !hasCompactSublabel,
+		[formGroupStyles["field-set--compact-sublabel-gap"]]: hasCompactSublabel
+	}, fieldsetClassName);
 	const mapFormComponent = (child, index) => {
 		if (isComponent(child, FormLayout_default)) return React.cloneElement(child, {
 			size,

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":[],"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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"}
+{"version":3,"file":"FormGroup.js","names":[],"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 { hasSublabel, isCompactComponent } from '../../utils/formSpacing';\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 childArray = React.Children.toArray(props.children);\n  const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);\n  const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);\n  const fieldsetClasses = classNames(\n    formGroupStyles['field-set'],\n    {\n      [formGroupStyles['field-set--compact-gap']]: hasOnlyCompactComponents && !hasCompactSublabel,\n      [formGroupStyles['field-set--compact-sublabel-gap']]: hasCompactSublabel,\n    },\n    fieldsetClassName\n  );\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":";;;;;;;;;;;;;;;;;;;AAiFA,IAAa,aAAuC,UAA0B;CAC5E,MAAM,EACJ,gBACA,WACA,aAAa,iBACb,mBACA,cACA,iBACA,UACA,UAAU,YAAY,SACtB,OAAO,SAAS,QAChB,OACA,MACA,aAAa,YACb,cAAc,MACd,uBACA,oBACA,iBACA,mBAAmB,MACnB,kBAAkB,SAChB;CACJ,MAAM,eAAe,MAAM;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,0BAA0B,WAAW,gBAAgB,uBAAuB,SAAS;CAC3F,MAAM,eAAe,WAAW,GAC7B,gBAAgB,wCAAwC,UAAU,CAAC,MACtE,CAAC;CAED,MAAM,qBAAqB;CAE3B,MAAM,gBAAgB,WACpB,gBAAgB,sBAChB,GACG,gBAAgB,gCAAgC,UAAU,CAAC,MAC9D,GACA,eACF;CAEA,MAAM,aAAa,MAAM,SAAS,QAAQ,MAAM,QAAQ;CACxD,MAAM,2BAA2B,WAAW,SAAS,KAAK,WAAW,MAAM,kBAAkB;CAC7F,MAAM,qBAAqB,4BAA4B,WAAW,KAAK,WAAW;CAClF,MAAM,kBAAkB,WACtB,gBAAgB,cAChB;GACG,gBAAgB,4BAA4B,4BAA4B,CAAC;GACzE,gBAAgB,qCAAqC;CACxD,GACA,iBACF;CAEA,MAAM,oBAAoB,OAAwB,UAAmC;EACnF,IAAI,YAA6B,OAAO,kBAAU,GAChD,OAAO,MAAM,aAAa,OAAO;GAC/B;GACA,WAAW;EACb,CAAC;OACI,IAAI,YAA4B,OAAO,SAAS,GACrD,OAAO,MAAM,aAAa,OAAO;GAC/B;GACA;GACA;GACA,aAAa;GACA;EACf,CAAC;OACI,IAAI,YAA2B,OAAO,QAAQ,GACnD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAA8B,OAAO,WAAW,GAAG;GAC5D,MAAM,UAAU,OAAO,MAAM,MAAM,YAAY,cAAc,eAAe,QAAQ,MAAM,MAAM;GAChG,MAAM,eACJ,MAAM,MAAM,YAAY,KAAA,IAAY,MAAM,MAAM,UAAU,mBAAmB,KAAA,IAAY,mBAAmB,UAAU,KAAA;GACxH,OAAO,MAAM,aAAa,OAAO;IAC/B,SAAS;IACT,MAAM,QAAQ,MAAM,MAAM;IAC1B;IACA;IACA,SAAS;IACT,WAAW,UAA+C;KACxD,kBAAkB,MAAM,OAAO,EAAE;KACjC,IAAI,MAAM,MAAM,UAAU,MAAM,MAAM,SAAS,KAAK;IACtD;IACA,OAAO,CAAC,CAAC;IACI;GACf,CAAC;EACH,OAAO,IAAI,YAAwB,OAAO,KAAK,GAC7C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAA2B,OAAO,gBAAQ,GACnD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAAyB,OAAO,cAAM,GAC/C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAAyB,OAAO,cAAM,GAC/C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B,OAAO,CAAC,CAAC;GACI;EACf,CAAC;EAEH,OAAO;CACT;CAEA,MAAM,yBAA0C;EAC9C,OACE,qBAAC,OAAD,EAAA,UAAA,CACG,eAAe,SACd,qBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACG,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,oBAAD;IAAoB,IAAI;IAAU,WAAW;IAA7C,UAAA,CACG,MAAM,QACN,gBAAgB,YAA+B,cAAc,oBAAY,KAAK,MAAM,aAAa,YAAY,CAC5F;GACpB,CAAA,EAAA,CAAA,GAEH,MAAM,SAAS,IAAI,MAAM,UAAU,gBAAgB,CACjD;EAEN,CAAA,GAAA,eAAe,cACd,qBAAC,YAAD;GAAU,mBAAiB;GAAgB,MAAM,MAAM;GAAc,WAAW;GAAhF,UAAA,CACG,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,UAAD;IAAQ,IAAI;IAAU,WAAW;IAAjC,UAAA,CACG,MAAM,QACN,gBAAgB,YAA+B,cAAc,oBAAY,KAAK,MAAM,aAAa,YAAY,CACxG;GACR,CAAA,EAAA,CAAA,GAEH,MAAM,SAAS,IAAI,MAAM,UAAU,gBAAgB,CAC5C;EAET,CAAA,CAAA,EAAA,CAAA;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAW,WAAW;EAApF,UAAA,CACG,MAAM,SACL,oBAAC,eAAD;GACE,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,QAAQ;IAAE,WAAW;IAAG,cAAc,QAAQ,IAAI;GAAE;GAEnD,UAAA,MAAM;EACF,CAAA,GAET,oBAAC,sBAAD;GACE,WAAW;GACX,WAAW;GACX,QAAQ;GACK;GACI;GACJ;GAEZ,UAAA,iBAAiB;EACN,CAAA,CACX;;AAET;AAEA,UAAU,cAAc"}

package/lib/FormLayout.js

@@ -1,4 +1,5 @@
 import { AnalyticsId, FormSize } from "./constants.js";
+import { hasSublabel, isCompactComponent } from "./utils/formSpacing.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -17,7 +18,14 @@ var FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns) {
 var FormLayout = (props) => {
 	const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;
 	const cssVariable = { "--min-col-width": `${colMinWidth}px` };
-	const formLayoutContainerClasses = classNames(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
+	const childArray = React.Children.toArray(props.children);
+	const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);
+	const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);
+	const formLayoutContainerClasses = classNames(formGroupStyles["form-layout-container"], {
+		[formGroupStyles["form-layout-container--compact-gap"]]: hasOnlyCompactComponents && !hasCompactSublabel,
+		[formGroupStyles["form-layout-container--compact-sublabel-gap"]]: hasCompactSublabel,
+		[formGroupStyles["form-layout-container--large"]]: size === FormSize.large
+	}, className);
 	const formLayoutChildClasses = classNames(formGroupStyles["form-layout-child"], {
 		[formGroupStyles["form-layout-child--two"]]: columns === FormLayoutColumns.two,
 		[formGroupStyles["form-layout-child--three"]]: columns === FormLayoutColumns.three,

package/lib/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":[],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n  /** Ref passed to the root div */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;;AAAA,IAAY,oBAAL,yBAAA,mBAAA;CACL,kBAAA,SAAA;CACA,kBAAA,SAAA;CACA,kBAAA,WAAA;CACA,kBAAA,UAAA;CACA,kBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;ACsBA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,IAAI;CAC5D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,MACvE,GACA,SACF;CACA,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;CAC9E,CAAC;CAED,OACE,oBAAC,OAAD;EACE,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;EAEJ,UAAA,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;GAC7E,OAAO,oBAAC,OAAD;IAAK,WAAW;IAAyB,UAAA,YAAY,UAAU,OAAO,KAAK,IAAI;GAAW,CAAA;EACnG,CAAC;CACE,CAAA;AAET;AAEA,WAAW,cAAc;;;AC1DzB,IAAA,qBAAe"}
+{"version":3,"file":"FormLayout.js","names":[],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { hasSublabel, isCompactComponent } from '../../utils/formSpacing';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n  /** Ref passed to the root div */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const childArray = React.Children.toArray(props.children);\n  const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);\n  const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--compact-gap']]: hasOnlyCompactComponents && !hasCompactSublabel,\n      [formGroupStyles['form-layout-container--compact-sublabel-gap']]: hasCompactSublabel,\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;;;AAAA,IAAY,oBAAL,yBAAA,mBAAA;CACL,kBAAA,SAAA;CACA,kBAAA,SAAA;CACA,kBAAA,WAAA;CACA,kBAAA,UAAA;CACA,kBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;ACuBA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,IAAI;CAC5D,MAAM,aAAa,MAAM,SAAS,QAAQ,MAAM,QAAQ;CACxD,MAAM,2BAA2B,WAAW,SAAS,KAAK,WAAW,MAAM,kBAAkB;CAC7F,MAAM,qBAAqB,4BAA4B,WAAW,KAAK,WAAW;CAClF,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB;GACG,gBAAgB,wCAAwC,4BAA4B,CAAC;GACrF,gBAAgB,iDAAiD;GACjE,gBAAgB,kCAAkC,SAAS,SAAS;CACvE,GACA,SACF;CACA,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;CAC9E,CAAC;CAED,OACE,oBAAC,OAAD;EACE,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;EAEJ,UAAA,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;GAC7E,OAAO,oBAAC,OAAD;IAAK,WAAW;IAAyB,UAAA,YAAY,UAAU,OAAO,KAAK,IAAI;GAAW,CAAA;EACnG,CAAC;CACE,CAAA;AAET;AAEA,WAAW,cAAc;;;AChEzB,IAAA,qBAAe"}

package/lib/LazyIcon.js

@@ -67,6 +67,7 @@ var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/ChildPlaying.tsx": () => import("./components/Icons/ChildPlaying.js"),
 		"../Icons/Cigarette.tsx": () => import("./components/Icons/Cigarette.js"),
 		"../Icons/Coins.tsx": () => import("./components/Icons/Coins.js"),
+		"../Icons/ConsentDocument.tsx": () => import("./components/Icons/ConsentDocument.js"),
 		"../Icons/Contacts.tsx": () => import("./components/Icons/Contacts.js"),
 		"../Icons/Copy.tsx": () => import("./components/Icons/Copy.js"),
 		"../Icons/CoronaCertificate.tsx": () => import("./components/Icons/CoronaCertificate.js"),
@@ -160,6 +161,7 @@ var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/HandWaving.tsx": () => import("./components/Icons/HandWaving.js"),
 		"../Icons/HandWithDisease.tsx": () => import("./components/Icons/HandWithDisease.js"),
 		"../Icons/HandsAndHeart.tsx": () => import("./components/Icons/HandsAndHeart.js"),
+		"../Icons/HealthCarePersonnelSecurity.tsx": () => import("./components/Icons/HealthCarePersonnelSecurity.js"),
 		"../Icons/HealthClinic.tsx": () => import("./components/Icons/HealthClinic.js"),
 		"../Icons/HealthMeasurements.tsx": () => import("./components/Icons/HealthMeasurements.js"),
 		"../Icons/HealthWarning.tsx": () => import("./components/Icons/HealthWarning.js"),
@@ -174,6 +176,7 @@ var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/Hiker.tsx": () => import("./components/Icons/Hiker.js"),
 		"../Icons/Hipprosthesis.tsx": () => import("./components/Icons/Hipprosthesis.js"),
 		"../Icons/History.tsx": () => import("./components/Icons/History.js"),
+		"../Icons/HistoryDocument.tsx": () => import("./components/Icons/HistoryDocument.js"),
 		"../Icons/HivAndAids.tsx": () => import("./components/Icons/HivAndAids.js"),
 		"../Icons/Home.tsx": () => import("./components/Icons/Home.js"),
 		"../Icons/HomeFill.tsx": () => import("./components/Icons/HomeFill.js"),
@@ -242,6 +245,8 @@ var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/Person.tsx": () => import("./components/Icons/Person.js"),
 		"../Icons/PersonAndPatient.tsx": () => import("./components/Icons/PersonAndPatient.js"),
 		"../Icons/PersonCancel.tsx": () => import("./components/Icons/PersonCancel.js"),
+		"../Icons/PersonCommunication.tsx": () => import("./components/Icons/PersonCommunication.js"),
+		"../Icons/PersonDocument.tsx": () => import("./components/Icons/PersonDocument.js"),
 		"../Icons/PersonInXRayMachine.tsx": () => import("./components/Icons/PersonInXRayMachine.js"),
 		"../Icons/PersonOverweight.tsx": () => import("./components/Icons/PersonOverweight.js"),
 		"../Icons/PersonRelaxing.tsx": () => import("./components/Icons/PersonRelaxing.js"),

package/lib/LazyIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\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 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}
+{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\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 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}

package/lib/Toggle.js

@@ -0,0 +1,176 @@
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import classNames from "classnames";
+import React, { useEffect, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAnimate } from "motion/react";
+import styles from "./components/Toggle/styles.module.scss";
+//#region src/components/Toggle/constants.ts
+var TogglePosition = /* @__PURE__ */ function(TogglePosition) {
+	TogglePosition["left"] = "left";
+	TogglePosition["right"] = "right";
+	return TogglePosition;
+}({});
+var ToggleOnColor = /* @__PURE__ */ function(ToggleOnColor) {
+	ToggleOnColor["onwhite"] = "onwhite";
+	ToggleOnColor["onneutral"] = "onneutral";
+	ToggleOnColor["onblueberry"] = "onblueberry";
+	return ToggleOnColor;
+}({});
+//#endregion
+//#region src/components/Toggle/Toggle.tsx
+var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnColor.onwhite, statusText, subLabel, togglePosition = TogglePosition.left, testId }) => {
+	const [checkedControlledState, setCheckedControlledState] = useState(checked);
+	const [checkedState, setCheckedState] = useState(checked);
+	const [showToggleAnimation, setShowToggleAnimation] = useState(false);
+	const [scope, animate] = useAnimate();
+	const baseId = useId();
+	const toggleId = "toggle-" + baseId;
+	const inputId = "input-" + baseId;
+	const labelId = "label-" + baseId;
+	const subLabelId = "sublabel-" + baseId;
+	const toggleRef = React.useRef(null);
+	const toggleDotRef = React.useRef(null);
+	const { refObject, isHovered, isActive } = usePseudoClasses(scope);
+	const showHoveredStyling = isHovered && !showToggleAnimation;
+	const isOnWhite = onColor === ToggleOnColor.onwhite;
+	const animationDuration = disabled ? 0 : .2;
+	const dotBackgroundColor = disabled ? "var(--color-disabled-graphics)" : checkedState ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)";
+	if (checked !== checkedControlledState && typeof checked !== "undefined") {
+		setCheckedControlledState(checked);
+		setCheckedState(checked);
+	}
+	const getBackgroundColor = () => {
+		if (disabled) return "transparent";
+		else if (checkedState && isActive) return "var(--core-color-blueberry-800)";
+		else if (checkedState) return showHoveredStyling ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)";
+		else if (isOnWhite && isActive) return "var(--core-color-neutral-400)";
+		else if (isOnWhite) return showHoveredStyling ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)";
+		else if (isActive) return "var(--core-color-neutral-200)";
+		else return showHoveredStyling ? "var(--core-color-neutral-50)" : "var(--core-color-white)";
+	};
+	useEffect(() => {
+		if (showToggleAnimation) {
+			const timer = setTimeout(() => setShowToggleAnimation(false), 300);
+			return () => clearTimeout(timer);
+		}
+	}, [showToggleAnimation]);
+	useEffect(() => {
+		if (!toggleRef.current || !toggleDotRef.current) return;
+		animate(toggleRef.current, { background: getBackgroundColor() }, {
+			duration: animationDuration,
+			ease: "easeInOut"
+		});
+		animate(toggleDotRef.current, { background: dotBackgroundColor }, {
+			duration: animationDuration,
+			ease: "easeInOut"
+		});
+		animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, {
+			duration: animationDuration,
+			ease: "easeInOut"
+		});
+		animate("svg", { opacity: checkedState ? 1 : 0 }, {
+			duration: animationDuration,
+			ease: "easeInOut"
+		});
+	}, [
+		checkedState,
+		showHoveredStyling,
+		isActive,
+		disabled
+	]);
+	const handleChange = (event) => {
+		setCheckedState(event.target.checked);
+		setShowToggleAnimation(true);
+		onChange?.(event);
+	};
+	const toggleContainerClassNames = classNames(styles["toggle-container"], {
+		[styles["toggle-container--position-right"]]: togglePosition === TogglePosition.right,
+		[styles["toggle-container--with-status"]]: statusText !== void 0 && statusText !== null,
+		[styles["toggle-container--disabled"]]: disabled
+	});
+	const subLabelClassNames = classNames(styles["toggle-container__sublabel"]);
+	const statusTextClassNames = classNames(styles["toggle-container__status"], { [styles["toggle-container__status--checked"]]: checkedState });
+	const toggleClassNames = classNames(styles["toggle-container__toggle"], {
+		[styles["toggle-container__toggle--ignore-hover"]]: showToggleAnimation,
+		[styles["toggle-container__toggle--on-white"]]: onColor === ToggleOnColor.onwhite
+	});
+	const toggleDotClassNames = classNames(styles["toggle-container__toggle__dot"], { [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation });
+	const renderToggle = () => /* @__PURE__ */ jsxs("div", {
+		className: styles["toggle-container__outer-toggle"],
+		children: [/* @__PURE__ */ jsxs("label", {
+			ref: refObject,
+			className: styles["toggle-container__toggle-group"],
+			children: [/* @__PURE__ */ jsx("input", {
+				disabled,
+				id: inputId,
+				type: "checkbox",
+				checked: checkedState,
+				onChange: handleChange,
+				className: styles["toggle-container__input"],
+				"aria-label": label.map((l) => l.text).join(" "),
+				"aria-describedby": [subLabel ? subLabelId : null, statusText ? toggleId + "-status" : null].filter(Boolean).join(" ") || void 0,
+				role: "switch"
+			}), /* @__PURE__ */ jsx("span", {
+				id: toggleId,
+				ref: toggleRef,
+				className: toggleClassNames,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", {
+					ref: toggleDotRef,
+					className: toggleDotClassNames,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "12",
+						height: "12",
+						viewBox: "0 0 12 12",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						className: styles["toggle-container__toggle__dot__icon"],
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M11 2.65247L4.69877 9.34741L1 5.41836",
+							strokeWidth: "2.2"
+						})
+					})
+				})
+			})]
+		}), statusText && /* @__PURE__ */ jsx("span", {
+			className: statusTextClassNames,
+			id: toggleId + "-status",
+			children: checkedState ? statusText.checked : statusText.unchecked
+		})]
+	});
+	const renderLabelText = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles["toggle-container__outer-label"],
+			children: [/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: styles["toggle-container__label"],
+				children: label.map((labelText) => {
+					const labelClassNames = classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" });
+					return /* @__PURE__ */ jsx("span", {
+						className: labelClassNames,
+						children: labelText.text
+					}, labelId + labelText.text);
+				})
+			}), subLabel && /* @__PURE__ */ jsx("div", {
+				id: subLabelId,
+				className: subLabelClassNames,
+				children: subLabel
+			})]
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: toggleContainerClassNames,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Toggle,
+		children: [togglePosition === TogglePosition.left && /* @__PURE__ */ jsxs(Fragment, { children: [renderToggle(), renderLabelText()] }), togglePosition === TogglePosition.right && /* @__PURE__ */ jsxs(Fragment, { children: [renderLabelText(), renderToggle()] })]
+	});
+};
+//#endregion
+//#region src/components/Toggle/index.ts
+var Toggle_default = Toggle;
+//#endregion
+export { ToggleOnColor as n, TogglePosition as r, Toggle_default as t };
+
+//# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/constants.ts","../src/components/Toggle/Toggle.tsx","../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setCheckedState(checked);\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":";;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,gBAAL,yBAAA,eAAA;CACL,cAAA,aAAA;CACA,cAAA,eAAA;CACA,cAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;;;AC+BA,IAAM,UAAiC,EACrC,UAAU,OACV,UACA,OACA,UACA,UAAU,cAAc,SACxB,YACA,UACA,iBAAiB,eAAe,MAChC,aACiB;CACjB,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,cAAc,mBAAmB,SAAS,OAAO;CACxD,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,CAAC,OAAO,WAAW,WAAW;CACpC,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,WAAW;CAC3B,MAAM,UAAU,WAAW;CAC3B,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,MAAM,OAAwB,IAAI;CACpD,MAAM,eAAe,MAAM,OAAwB,IAAI;CACvD,MAAM,EAAE,WAAW,WAAW,aAAa,iBAAmC,KAAK;CACnF,MAAM,qBAAqB,aAAa,CAAC;CACzC,MAAM,YAAY,YAAY,cAAc;CAC5C,MAAM,oBAAoB,WAAW,IAAI;CACzC,MAAM,qBAAqB,WACvB,mCACA,eACE,wCACA;CAEN,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EACjC,gBAAgB,OAAO;CACzB;CAEA,MAAM,2BAAmC;EACvC,IAAI,UACF,OAAO;OACF,IAAI,gBAAgB,UACzB,OAAO;OACF,IAAI,cACT,OAAO,qBAAqB,+CAA+C;OACtE,IAAI,aAAa,UACtB,OAAO;OACF,IAAI,WACT,OAAO,qBAAqB,kCAAkC;OACzD,IAAI,UACT,OAAO;OAEP,OAAO,qBAAqB,iCAAiC;CAEjE;CAEA,gBAAgB;EACd,IAAI,qBAAqB;GACvB,MAAM,QAAQ,iBAAiB,uBAAuB,KAAK,GAAG,GAAG;GACjE,aAAmB,aAAa,KAAK;EACvC;CACF,GAAG,CAAC,mBAAmB,CAAC;CAExB,gBAAgB;EACd,IAAI,CAAC,UAAU,WAAW,CAAC,aAAa,SAAS;EACjD,QAAQ,UAAU,SAAS,EAAE,YAAY,mBAAmB,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;EACnH,QACE,aAAa,SACb,EACE,YAAY,mBACd,GACA;GAAE,UAAU;GAAmB,MAAM;EAAY,CACnD;EACA,QAAQ,aAAa,SAAS,EAAE,GAAG,eAAe,KAAK,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;EAC9G,QAAQ,OAAO,EAAE,SAAS,eAAe,IAAI,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;CACtG,GAAG;EAAC;EAAc;EAAoB;EAAU;CAAQ,CAAC;CAEzD,MAAM,gBAAgB,UAAqD;EACzE,gBAAgB,MAAM,OAAO,OAAO;EACpC,uBAAuB,IAAI;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,4BAA4B,WAAW,OAAO,qBAAqB;GACtE,OAAO,sCAAsC,mBAAmB,eAAe;GAC/E,OAAO,mCAAmC,eAAe,KAAA,KAAa,eAAe;GACrF,OAAO,gCAAgC;CAC1C,CAAC;CAED,MAAM,qBAAqB,WAAW,OAAO,6BAA6B;CAE1E,MAAM,uBAAuB,WAAW,OAAO,6BAA6B,GACzE,OAAO,uCAAuC,aACjD,CAAC;CAED,MAAM,mBAAmB,WAAW,OAAO,6BAA6B;GACrE,OAAO,4CAA4C;GACnD,OAAO,wCAAwC,YAAY,cAAc;CAC5E,CAAC;CAED,MAAM,sBAAsB,WAAW,OAAO,kCAAkC,GAC7E,OAAO,iDAAiD,oBAC3D,CAAC;CAED,MAAM,qBACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAAC,SAAD;GAAO,KAAK;GAAW,WAAW,OAAO;GAAzC,UAAA,CACE,oBAAC,SAAD;IACY;IACV,IAAI;IACJ,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAW,OAAO;IAClB,cAAY,MAAM,KAAI,MAAK,EAAE,IAAI,CAAC,CAAC,KAAK,GAAG;IAC3C,oBAAkB,CAAC,WAAW,aAAa,MAAM,aAAa,WAAW,YAAY,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;IACxH,MAAK;GACN,CAAA,GACD,oBAAC,QAAD;IAAM,IAAI;IAAU,KAAK;IAAW,WAAW;IAAkB,eAAY;IAC3E,UAAA,oBAAC,QAAD;KAAM,KAAK;KAAc,WAAW;KAAqB,eAAY;KACnE,UAAA,oBAAC,OAAD;MACE,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,OAAM;MACN,WAAW,OAAO;MAElB,UAAA,oBAAC,QAAD;OAAM,GAAE;OAAwC,aAAY;MAAO,CAAA;KAChE,CAAA;IACD,CAAA;GACF,CAAA,CACD;EACN,CAAA,GAAA,cACC,oBAAC,QAAD;GAAM,WAAW;GAAsB,IAAI,WAAW;GACnD,UAAA,eAAe,WAAW,UAAU,WAAW;EAC5C,CAAA,CAEL;;CAGP,MAAM,wBAA4C;EAChD,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI;IAAS,WAAW,OAAO;IAClC,UAAA,MAAM,KAAI,cAAa;KACtB,MAAM,kBAAkB,WAAW,GAChC,OAAO,4CAA4C,UAAU,SAAS,UACzE,CAAC;KAED,OACE,oBAAC,QAAD;MAAqC,WAAW;MAC7C,UAAA,UAAU;KACP,GAFK,UAAU,UAAU,IAEzB;IAEV,CAAC;GACG,CAAA,GACL,YACC,oBAAC,OAAD;IAAK,IAAI;IAAY,WAAW;IAC7B,UAAA;GACE,CAAA,CAEJ;;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAA2B,eAAa;EAAQ,oBAAkB,YAAY;EAA9F,UAAA,CACG,mBAAmB,eAAe,QACjC,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,GACb,gBAAgB,CACjB,EAAA,CAAA,GAEH,mBAAmB,eAAe,SACjC,qBAAA,UAAA,EAAA,UAAA,CACG,gBAAgB,GAChB,aAAa,CACd,EAAA,CAAA,CAED;;AAET;;;AC1NA,IAAA,iBAAe"}

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

@@ -54,7 +54,7 @@ $mobile-outer-size: 2.75rem;
     }
 
     :focus-visible > & {
-      outline: 3px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-onlight-focus);
       border-radius: 0;
       border: 0;
     }
@@ -69,7 +69,7 @@ $mobile-outer-size: 2.75rem;
       }
 
       :focus-visible > & {
-        outline: 3px solid var(--color-action-border-onlight-focus);
+        outline: 4px solid var(--color-action-border-onlight-focus);
         border-radius: 0;
         border: 0;
       }

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

@@ -1,7 +1,7 @@
-@use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers';
 
 .form-group-wrapper {
   &__title {
@@ -21,14 +21,22 @@
   margin: 0;
   display: flex;
   flex-flow: column;
-  gap: spacers.getSpacer(s);
+  gap: var(--core-space-s);
 
   > div {
     padding-bottom: 0;
   }
 
+  &--compact-gap {
+    gap: 0;
+  }
+
+  &--compact-sublabel-gap {
+    gap: var(--core-space-2xs);
+  }
+
   &__legend {
-    margin-bottom: spacers.getSpacer(m);
+    margin-bottom: var(--core-space-s);
     margin-top: 0;
     display: flex;
     flex-flow: column;
@@ -40,4 +48,8 @@
       color: palette.$white;
     }
   }
+
+  &--compact-sublabel-gap &__legend {
+    margin-bottom: var(--core-space-m);
+  }
 }

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

@@ -2,6 +2,8 @@ export type Styles = {
   'field-set': string;
   'field-set__legend': string;
   'field-set__legend--on-dark': string;
+  'field-set--compact-gap': string;
+  'field-set--compact-sublabel-gap': string;
   'form-group-wrapper': string;
   'form-group-wrapper__title--on-dark': string;
 };

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

@@ -6,7 +6,15 @@
 
   display: flex;
   flex-wrap: wrap;
-  gap: spacers.getSpacer(s) var(--column-gap);
+  column-gap: var(--column-gap);
+
+  &--compact-gap {
+    row-gap: 0;
+  }
+
+  &--compact-sublabel-gap {
+    row-gap: var(--core-space-2xs);
+  }
 
   &--large {
     row-gap: spacers.getSpacer(2xs);

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

@@ -5,6 +5,8 @@ export type Styles = {
   'form-layout-child--three': string;
   'form-layout-child--two': string;
   'form-layout-container': string;
+  'form-layout-container--compact-gap': string;
+  'form-layout-container--compact-sublabel-gap': string;
   'form-layout-container--large': string;
 };
 

package/lib/components/HelpPanel/HelpPanel.d.ts

@@ -1,6 +1,6 @@
-export type HelpPanelVariants = 'normal' | 'compact';
+export type HelpPanelVariants = 'normal' | 'compact' | 'subdued';
 export interface HelpPanelProps {
-    /** What's in the box? */
+    /** The content of the component */
     children: React.ReactNode;
     /** If set the compact styling will be used */
     variant?: HelpPanelVariants;