@helsenorge/designsystem-react 15.2.0 → 15.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;AAuDA,IAAM,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;CAWhF,OACE,oBAAC,YAAD;EAAW,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;EACxC,GACA,SAKsB;EAAmB;EACtC;CACQ,CAAA;AAEf;AAEA,MAAM,cAAc;AAEpB,IAAa,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,MAAM,SADa,cACJ,IAAa,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,WAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;CACrC,GACA,SACF;CACA,MAAM,0BAA0B,WAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,QAC1C,CAAC;CAED,OACE,qBAAC,KAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EACzB;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;YARX;GAUE,qBAAC,OAAD;IAAK,WAAW;cAAhB,EACI,YAAuB,MAAM,YAAI,KAAK,YAA2B,MAAM,gBAAQ,MAC/E,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;IACjC,CAAC,GACF,YAA4B,OAAO,KAAK,KAAK,KAAK,MAAM,aAAa,OAAO;KAAe;KAAsB;IAAQ,CAAC,CACxH;;GACJ,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAD;IAAG,WAAW,WAAW;cAAoB;GAAe,CAAA;GACnF,YAAY,oBAAC,OAAD;IAAK,WAAW,WAAW;IAAiB;GAAc,CAAA;EACtE;;AAEP;AAEA,KAAK,cAAc;AACnB,KAAK,QAAQ;;;ACvIb,IAAA,eAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;AAuDA,IAAM,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;CAWhF,OACE,oBAAC,YAAD;EAAW,WAXQ,GACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;EACxC,GACA,SAKsB;EAAmB;EACtC;CACQ,CAAA;AAEf;AAEA,MAAM,cAAc;AAEpB,IAAa,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,MAAM,SADa,cACJ,IAAa,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,GAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;CACrC,GACA,SACF;CACA,MAAM,0BAA0B,GAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,QAC1C,CAAC;CAED,OACE,qBAAC,KAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EACzB;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;YARX;GAUE,qBAAC,OAAD;IAAK,WAAW;cAAhB,EACI,YAAuB,MAAM,YAAI,KAAK,YAA2B,MAAM,gBAAQ,MAC/E,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;IACjC,CAAC,GACF,YAA4B,OAAO,KAAK,KAAK,KAAK,MAAM,aAAa,OAAO;KAAe;KAAsB;IAAQ,CAAC,CACxH;;GACJ,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAD;IAAG,WAAW,WAAW;cAAoB;GAAe,CAAA;GACnF,YAAY,oBAAC,OAAD;IAAK,WAAW,WAAW;IAAiB;GAAc,CAAA;EACtE;;AAEP;AAEA,KAAK,cAAc;AACnB,KAAK,QAAQ;;;ACvIb,IAAA,eAAe"}

package/lib/components/Toggle/index.js

@@ -1,6 +1,6 @@
 import { AnalyticsId } from "../../constants.js";
 import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect, useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useAnimate } from "motion/react";
@@ -82,18 +82,18 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 		setShowToggleAnimation(true);
 		onChange?.(event);
 	};
-	const toggleContainerClassNames = classNames(styles["toggle-container"], {
+	const toggleContainerClassNames = cn(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"], {
+	const subLabelClassNames = cn(styles["toggle-container__sublabel"]);
+	const statusTextClassNames = cn(styles["toggle-container__status"], { [styles["toggle-container__status--checked"]]: checkedState });
+	const toggleClassNames = cn(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 toggleDotClassNames = cn(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", {
@@ -146,7 +146,7 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 				className: styles["toggle-container__label"],
 				children: label.map((labelText) => {
 					return /* @__PURE__ */ jsx("span", {
-						className: classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
+						className: cn({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
 						children: labelText.text
 					}, labelId + labelText.text);
 				})

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

@@ -1 +1 @@
-{"version":3,"file":"index.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 [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  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    setCheckedState(checked);\n  }, [checked]);\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":"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"}
+{"version":3,"file":"index.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 [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  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    setCheckedState(checked);\n  }, [checked]);\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":"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"}

package/lib/components/Validation/index.js

@@ -10,7 +10,7 @@ import { t as FormGroup } from "../../FormGroup.js";
 import Input_default from "../Input/index.js";
 import { t as List_default } from "../../List.js";
 import RadioButton_default from "../RadioButton/index.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -40,7 +40,7 @@ var ValidationSummary = (props) => {
 	const titleId = useId();
 	const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
 	const visuallyHidden = props.visuallyHidden;
-	const summaryClasses = classNames(styles["validation__summary"], {
+	const summaryClasses = cn(styles["validation__summary"], {
 		[styles["validation__summary--visible"]]: hasErrors && !visuallyHidden,
 		[styles["validation__summary--sr-only"]]: visuallyHidden
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;EACxF,OAAO,eAAe;EACtB,IAAI,SAAS,OAAO,SAAS,MAAM;CACrC;CAEA,IAAI,MAAM,MAAM,KACd,OACE,oBAAC,oBAAD;EAAY,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,GAAG;YACrF,MAAM,MAAM;CACH,CAAA;CAIhB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,QAAU,CAAA;AAClC;;;AChBA,IAAM,aAAsC,UAC1C,oBAAC,cAAD,EAAA,UACG,OAAO,QAAQ,MAAM,MAAM,EAAE,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAN,EAAA,UACE,oBAAC,eAAD;CAAqB;CAAa;AAAQ,CAAA,EACjC,GAFK,IAEL,CACZ,EACG,CAAA;;;ACSR,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,MAAM;CAEtB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,MAAM,EAAE,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;CAC5C,CAAC;CAED,OACE,qBAAC,OAAD;EACE,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;YANb,CAQG,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAD;GAAO,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;GAAE;aAC/G,MAAM;EACF,CAAA,GAET,oBAAC,WAAD,EAAW,QAAQ,MAAM,OAAU,CAAA,CACnC,EAAA,CAAA,GAEH,MAAM,QACJ;;AAET;;;ACdA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;EACtH,OAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;EACzB,CAAC;CACH;CAEA,MAAM,eAAe,UAA4C;EAC/D,IACE,YAA4B,OAAO,SAAS,KAC5C,YAA2B,OAAO,gBAAQ,KAC1C,YAA8B,OAAO,mBAAW,KAChD,YAA2B,OAAO,gBAAQ,KAC1C,YAAwB,OAAO,aAAK,KACpC,YAAyB,OAAO,cAAM,KACtC,YAAyB,OAAO,cAAM,KACtC,2BAAuD,OAAO,uBAAuB,KACrF,2BAAuD,OAAO,YAAY,KAC1E,2BAAuD,OAAO,UAAU,GAExE,OAAO,iBAA6C,KAAK;EAE3D,IAAI,YAAiC,OAAO,MAAM,QAAQ,GACxD,OAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,UAA2B;GAC1E,OAAO,YAAY,KAAK;EAC1B,CAAC;EAGH,OAAO;CACT;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,KAAK,CAAC;CAC/E,CAAA,GACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;CAAwB,CAAA,CACrH,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc;;;ACvFzB,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;EACxF,OAAO,eAAe;EACtB,IAAI,SAAS,OAAO,SAAS,MAAM;CACrC;CAEA,IAAI,MAAM,MAAM,KACd,OACE,oBAAC,oBAAD;EAAY,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,GAAG;YACrF,MAAM,MAAM;CACH,CAAA;CAIhB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,QAAU,CAAA;AAClC;;;AChBA,IAAM,aAAsC,UAC1C,oBAAC,cAAD,EAAA,UACG,OAAO,QAAQ,MAAM,MAAM,EAAE,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAN,EAAA,UACE,oBAAC,eAAD;CAAqB;CAAa;AAAQ,CAAA,EACjC,GAFK,IAEL,CACZ,EACG,CAAA;;;ACSR,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,MAAM;CAEtB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,MAAM,EAAE,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,GAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;CAC5C,CAAC;CAED,OACE,qBAAC,OAAD;EACE,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;YANb,CAQG,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAD;GAAO,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;GAAE;aAC/G,MAAM;EACF,CAAA,GAET,oBAAC,WAAD,EAAW,QAAQ,MAAM,OAAU,CAAA,CACnC,EAAA,CAAA,GAEH,MAAM,QACJ;;AAET;;;ACdA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;EACtH,OAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;EACzB,CAAC;CACH;CAEA,MAAM,eAAe,UAA4C;EAC/D,IACE,YAA4B,OAAO,SAAS,KAC5C,YAA2B,OAAO,gBAAQ,KAC1C,YAA8B,OAAO,mBAAW,KAChD,YAA2B,OAAO,gBAAQ,KAC1C,YAAwB,OAAO,aAAK,KACpC,YAAyB,OAAO,cAAM,KACtC,YAAyB,OAAO,cAAM,KACtC,2BAAuD,OAAO,uBAAuB,KACrF,2BAAuD,OAAO,YAAY,KAC1E,2BAAuD,OAAO,UAAU,GAExE,OAAO,iBAA6C,KAAK;EAE3D,IAAI,YAAiC,OAAO,MAAM,QAAQ,GACxD,OAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,UAA2B;GAC1E,OAAO,YAAY,KAAK;EAC1B,CAAC;EAGH,OAAO;CACT;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,KAAK,CAAC;CAC/E,CAAA,GACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;CAAwB,CAAA,CACrH,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc;;;ACvFzB,IAAA,qBAAe"}

package/lib/components/VisualCheckboxCloud/index.js

@@ -2,7 +2,7 @@ import { isComponent } from "../../utils/component.js";
 import { useIdWithFallback } from "../../hooks/useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
 import { t as Checkbox } from "../../Checkbox2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -19,7 +19,7 @@ var VisualCheckboxCloud = (props) => {
 		return child;
 	};
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: classNames(errorWrapperClassName, className),
+		className: cn(errorWrapperClassName, className),
 		errorText: error,
 		errorTextId,
 		renderError,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxCloud/VisualCheckboxCloud.tsx","../../../src/components/VisualCheckboxCloud/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from './Checkbox/Checkbox';\n\nimport Checkbox from './Checkbox/Checkbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxCloudProps {\n  /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Checkbox elements (overridable per child) */\n  name?: string;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {\n  Checkbox: typeof Checkbox;\n}\n\nexport const VisualCheckboxCloud: VisualCheckboxCloudComponent = props => {\n  const {\n    children,\n    name,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div className={styles['visual-checkbox-cloud']} data-testid={testId}>\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxCloud.Checkbox = Checkbox;\n\nexport default VisualCheckboxCloud;\n","import VisualCheckboxCloud from './VisualCheckboxCloud';\nexport * from './VisualCheckboxCloud';\nexport default VisualCheckboxCloud;\n"],"mappings":";;;;;;;;;AAwCA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA2B,OAAO,QAAQ,GAC5C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GAAK,WAAW,OAAO;GAA0B,eAAa;aAC3D,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,WAAW;;;ACjF/B,IAAA,8BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxCloud/VisualCheckboxCloud.tsx","../../../src/components/VisualCheckboxCloud/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from './Checkbox/Checkbox';\n\nimport Checkbox from './Checkbox/Checkbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxCloudProps {\n  /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Checkbox elements (overridable per child) */\n  name?: string;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {\n  Checkbox: typeof Checkbox;\n}\n\nexport const VisualCheckboxCloud: VisualCheckboxCloudComponent = props => {\n  const {\n    children,\n    name,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div className={styles['visual-checkbox-cloud']} data-testid={testId}>\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxCloud.Checkbox = Checkbox;\n\nexport default VisualCheckboxCloud;\n","import VisualCheckboxCloud from './VisualCheckboxCloud';\nexport * from './VisualCheckboxCloud';\nexport default VisualCheckboxCloud;\n"],"mappings":";;;;;;;;;AAwCA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA2B,OAAO,QAAQ,GAC5C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,GAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GAAK,WAAW,OAAO;GAA0B,eAAa;aAC3D,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,WAAW;;;ACjF/B,IAAA,8BAAe"}

package/lib/components/VisualCheckboxGroup/index.js

@@ -3,7 +3,7 @@ import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { useIdWithFallback } from "../../hooks/useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
 import { t as VisualCheckbox } from "../../VisualCheckbox.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -24,14 +24,14 @@ var VisualCheckboxGroup = (props) => {
 		return child;
 	};
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: classNames(errorWrapperClassName, className),
+		className: cn(errorWrapperClassName, className),
 		errorText: error,
 		errorTextId,
 		renderError,
 		errorMessageRef,
 		testId: errorWrapperTestId,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames(styles["visual-checkbox-group"], { [styles["visual-checkbox-group--variant-line"]]: effectiveVariant === "line" }),
+			className: cn(styles["visual-checkbox-group"], { [styles["visual-checkbox-group--variant-line"]]: effectiveVariant === "line" }),
 			"data-testid": testId,
 			children: React.Children.map(children, mapChild)
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxGroup/VisualCheckboxGroup.tsx","../../../src/components/VisualCheckboxGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualCheckboxProps, VisualCheckboxVariant } from './VisualCheckbox/VisualCheckbox';\n\nimport VisualCheckbox from './VisualCheckbox/VisualCheckbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxGroupProps {\n  /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualCheckbox elements (overridable per child) */\n  name?: string;\n  /** Variant applied to all child VisualCheckbox elements (overridable per child). */\n  variant?: VisualCheckboxVariant;\n  /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {\n  VisualCheckbox: typeof VisualCheckbox;\n}\n\nexport const VisualCheckboxGroup: VisualCheckboxGroupComponent = props => {\n  const {\n    children,\n    name,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const visualCheckboxCount = React.Children.toArray(children).filter(child =>\n    isComponent<VisualCheckboxProps>(child, VisualCheckbox)\n  ).length;\n\n  const effectiveVariant: VisualCheckboxVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && visualCheckboxCount > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualCheckboxProps>(child, VisualCheckbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-checkbox-group'], {\n          [styles['visual-checkbox-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxGroup.VisualCheckbox = VisualCheckbox;\n\nexport default VisualCheckboxGroup;\n","import VisualCheckboxGroup from './VisualCheckboxGroup';\nexport * from './VisualCheckboxGroup';\nexport default VisualCheckboxGroup;\n"],"mappings":";;;;;;;;;;AA6CA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAsB,MAAM,SAAS,QAAQ,QAAQ,EAAE,QAAO,UAClE,YAAiC,OAAO,cAAc,CACxD,EAAE;CAEF,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,sBAAsB,yBAAyB,SAAS;CAE9G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAiC,OAAO,cAAc,GACxD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,SAAS,MAAM,MAAM,WAAW;GAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,yCAAyC,qBAAqB,OACxE,CAAC;GACD,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,iBAAiB;;;ACtGrC,IAAA,8BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxGroup/VisualCheckboxGroup.tsx","../../../src/components/VisualCheckboxGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualCheckboxProps, VisualCheckboxVariant } from './VisualCheckbox/VisualCheckbox';\n\nimport VisualCheckbox from './VisualCheckbox/VisualCheckbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxGroupProps {\n  /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualCheckbox elements (overridable per child) */\n  name?: string;\n  /** Variant applied to all child VisualCheckbox elements (overridable per child). */\n  variant?: VisualCheckboxVariant;\n  /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {\n  VisualCheckbox: typeof VisualCheckbox;\n}\n\nexport const VisualCheckboxGroup: VisualCheckboxGroupComponent = props => {\n  const {\n    children,\n    name,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const visualCheckboxCount = React.Children.toArray(children).filter(child =>\n    isComponent<VisualCheckboxProps>(child, VisualCheckbox)\n  ).length;\n\n  const effectiveVariant: VisualCheckboxVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && visualCheckboxCount > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualCheckboxProps>(child, VisualCheckbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-checkbox-group'], {\n          [styles['visual-checkbox-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxGroup.VisualCheckbox = VisualCheckbox;\n\nexport default VisualCheckboxGroup;\n","import VisualCheckboxGroup from './VisualCheckboxGroup';\nexport * from './VisualCheckboxGroup';\nexport default VisualCheckboxGroup;\n"],"mappings":";;;;;;;;;;AA6CA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAsB,MAAM,SAAS,QAAQ,QAAQ,EAAE,QAAO,UAClE,YAAiC,OAAO,cAAc,CACxD,EAAE;CAEF,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,sBAAsB,yBAAyB,SAAS;CAE9G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAiC,OAAO,cAAc,GACxD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,SAAS,MAAM,MAAM,WAAW;GAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,GAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,WAAW,GAAW,OAAO,0BAA0B,GACpD,OAAO,yCAAyC,qBAAqB,OACxE,CAAC;GACD,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,iBAAiB;;;ACtGrC,IAAA,8BAAe"}

package/lib/components/VisualContentgroupWithImage/index.js

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx
@@ -8,7 +8,7 @@ var VisualContentgroupWithImage = (props) => {
 		"data-testid": testId,
 		className: styles["visual-contentgroup-with-image"],
 		children: [/* @__PURE__ */ jsx("div", {
-			className: classNames(styles["visual-contentgroup-with-image__frame"], { [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio }),
+			className: cn(styles["visual-contentgroup-with-image__frame"], { [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio }),
 			children: visualContent
 		}), children]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx","../../../src/components/VisualContentgroupWithImage/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport type ImageRatios = 'square' | 'landscape';\n\nexport interface VisualContentgroupWithImageProps {\n  /** Set the ratio of the image. */\n  imageRatio?: ImageRatios;\n  /** Content rendered inside the visualcontent area. */\n  visualContent: React.ReactNode;\n  /** Content rendered inside the component */\n  children: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps> = props => {\n  const { imageRatio = 'square', visualContent, children, testId } = props;\n\n  return (\n    <div data-testid={testId} className={styles['visual-contentgroup-with-image']}>\n      <div\n        className={classNames(styles['visual-contentgroup-with-image__frame'], {\n          [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio,\n        })}\n      >\n        {visualContent}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default VisualContentgroupWithImage;\n","import VisualContentgroupWithImage from './VisualContentgroupWithImage';\nexport * from './VisualContentgroupWithImage';\nexport default VisualContentgroupWithImage;\n"],"mappings":";;;;AAiBA,IAAM,+BAA0E,UAAS;CACvF,MAAM,EAAE,aAAa,UAAU,eAAe,UAAU,WAAW;CAEnE,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAA5C,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0CAA0C,GACpE,OAAO,0CAA0C,gBAAgB,WACpE,CAAC;aAEA;EACE,CAAA,GACJ,QACE;;AAET;;;AC9BA,IAAA,sCAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx","../../../src/components/VisualContentgroupWithImage/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport type ImageRatios = 'square' | 'landscape';\n\nexport interface VisualContentgroupWithImageProps {\n  /** Set the ratio of the image. */\n  imageRatio?: ImageRatios;\n  /** Content rendered inside the visualcontent area. */\n  visualContent: React.ReactNode;\n  /** Content rendered inside the component */\n  children: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps> = props => {\n  const { imageRatio = 'square', visualContent, children, testId } = props;\n\n  return (\n    <div data-testid={testId} className={styles['visual-contentgroup-with-image']}>\n      <div\n        className={classNames(styles['visual-contentgroup-with-image__frame'], {\n          [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio,\n        })}\n      >\n        {visualContent}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default VisualContentgroupWithImage;\n","import VisualContentgroupWithImage from './VisualContentgroupWithImage';\nexport * from './VisualContentgroupWithImage';\nexport default VisualContentgroupWithImage;\n"],"mappings":";;;;AAiBA,IAAM,+BAA0E,UAAS;CACvF,MAAM,EAAE,aAAa,UAAU,eAAe,UAAU,WAAW;CAEnE,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAA5C,CACE,oBAAC,OAAD;GACE,WAAW,GAAW,OAAO,0CAA0C,GACpE,OAAO,0CAA0C,gBAAgB,WACpE,CAAC;aAEA;EACE,CAAA,GACJ,QACE;;AAET;;;AC9BA,IAAA,sCAAe"}

package/lib/components/VisualRadioCloud/index.js

@@ -2,7 +2,7 @@ import { isComponent } from "../../utils/component.js";
 import { useIdWithFallback } from "../../hooks/useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
 import { t as Radio } from "../../Radio.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -34,7 +34,7 @@ var VisualRadioCloud = (props) => {
 		return child;
 	};
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: classNames(errorWrapperClassName, className),
+		className: cn(errorWrapperClassName, className),
 		errorText: error,
 		errorTextId,
 		renderError,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioCloud/VisualRadioCloud.tsx","../../../src/components/VisualRadioCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioProps } from './Radio/Radio';\n\nimport Radio from './Radio/Radio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioCloudProps {\n  /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {\n  Radio: typeof Radio;\n}\n\nexport const VisualRadioCloud: VisualRadioCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioProps>(child, Radio)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioCloud.Radio = Radio;\n\nexport default VisualRadioCloud;\n","import VisualRadioCloud from './VisualRadioCloud';\nexport * from './VisualRadioCloud';\nexport default VisualRadioCloud;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,YAAY;CAC5F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAwB,OAAO,KAAK,GAAG;GACzC,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;GACxE,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;KACpD,iBAAiB,MAAM,MAAM,KAAK;KAClC,MAAM,MAAM,WAAW,CAAC;KACxB,WAAW,GAAG,MAAM,MAAM,KAAK;IACjC;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,QAAQ;;;ACvHzB,IAAA,2BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioCloud/VisualRadioCloud.tsx","../../../src/components/VisualRadioCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioProps } from './Radio/Radio';\n\nimport Radio from './Radio/Radio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioCloudProps {\n  /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {\n  Radio: typeof Radio;\n}\n\nexport const VisualRadioCloud: VisualRadioCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioProps>(child, Radio)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioCloud.Radio = Radio;\n\nexport default VisualRadioCloud;\n","import VisualRadioCloud from './VisualRadioCloud';\nexport * from './VisualRadioCloud';\nexport default VisualRadioCloud;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,YAAY;CAC5F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAwB,OAAO,KAAK,GAAG;GACzC,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;GACxE,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;KACpD,iBAAiB,MAAM,MAAM,KAAK;KAClC,MAAM,MAAM,WAAW,CAAC;KACxB,WAAW,GAAG,MAAM,MAAM,KAAK;IACjC;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,GAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,QAAQ;;;ACvHzB,IAAA,2BAAe"}

package/lib/components/VisualRadioGroup/index.js

@@ -3,7 +3,7 @@ import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { useIdWithFallback } from "../../hooks/useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
 import { t as VisualRadio } from "../../VisualRadio.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -43,14 +43,14 @@ var VisualRadioGroup = (props) => {
 		return child;
 	};
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: classNames(errorWrapperClassName, className),
+		className: cn(errorWrapperClassName, className),
 		errorText: error,
 		errorTextId,
 		renderError,
 		errorMessageRef,
 		testId: errorWrapperTestId,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames(styles["visual-radio-group"], { [styles["visual-radio-group--variant-line"]]: effectiveVariant === "line" }),
+			className: cn(styles["visual-radio-group"], { [styles["visual-radio-group--variant-line"]]: effectiveVariant === "line" }),
 			"data-testid": testId,
 			role: "radiogroup",
 			children: React.Children.map(children, mapChild)

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioGroup/VisualRadioGroup.tsx","../../../src/components/VisualRadioGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualRadioProps, VisualRadioVariant } from './VisualRadio/VisualRadio';\n\nimport VisualRadio from './VisualRadio/VisualRadio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioGroupProps {\n  /** Items in the group. Should be VisualRadioGroup.VisualRadio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualRadio elements (overridable per child). Auto-generated if omitted. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Variant applied to all child VisualRadio elements (overridable per child). */\n  variant?: VisualRadioVariant;\n  /** When set and the number of VisualRadio children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualRadioGroupComponent extends React.FC<VisualRadioGroupProps> {\n  VisualRadio: typeof VisualRadio;\n}\n\nexport const VisualRadioGroup: VisualRadioGroupComponent = props => {\n  const {\n    children,\n    name: nameProp,\n    value,\n    defaultValue,\n    onChange,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const name = useIdWithFallback(nameProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const childArray = React.Children.toArray(children);\n  const radioChildren = childArray.filter((child): child is React.ReactElement<VisualRadioProps> =>\n    isComponent<VisualRadioProps>(child, VisualRadio)\n  );\n\n  const initialSelected =\n    value ?? defaultValue ?? radioChildren.find(child => child.props.defaultChecked || child.props.checked)?.props.value?.toString();\n\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>(initialSelected);\n  const [prevValue, setPrevValue] = React.useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const effectiveVariant: VisualRadioVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && radioChildren.length > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualRadioProps>(child, VisualRadio)) {\n      const childValue = child.props.value?.toString();\n      const isSelected = selectedValue !== undefined && childValue !== undefined && childValue === selectedValue;\n      const childOnChange = child.props.onChange;\n\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        checked: isSelected,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>): void => {\n          if (childValue !== undefined) {\n            setSelectedValue(childValue);\n          }\n          childOnChange?.(e);\n          if (childValue !== undefined) {\n            onChange?.(e, childValue);\n          }\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-radio-group'], {\n          [styles['visual-radio-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n        role={'radiogroup'}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioGroup.VisualRadio = VisualRadio;\n\nexport default VisualRadioGroup;\n","import VisualRadioGroup from './VisualRadioGroup';\nexport * from './VisualRadioGroup';\nexport default VisualRadioGroup;\n"],"mappings":";;;;;;;;;;AAmDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MAAM,UACN,OACA,cACA,UACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,OAAO,kBAAkB,QAAQ;CACvC,MAAM,WAAW,sBAAsB;CAGvC,MAAM,gBADa,MAAM,SAAS,QAAQ,QACpB,EAAW,QAAQ,UACvC,YAA8B,OAAO,WAAW,CAClD;CAEA,MAAM,kBACJ,SAAS,gBAAgB,cAAc,MAAK,UAAS,MAAM,MAAM,kBAAkB,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,SAAS;CAEjI,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAA6B,eAAe;CAC5F,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAA6B,KAAK;CAC1E,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,cAAc,SAAS,yBAAyB,SAAS;CAE/G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA8B,OAAO,WAAW,GAAG;GACrD,MAAM,aAAa,MAAM,MAAM,OAAO,SAAS;GAC/C,MAAM,aAAa,kBAAkB,KAAA,KAAa,eAAe,KAAA,KAAa,eAAe;GAC7F,MAAM,gBAAgB,MAAM,MAAM;GAElC,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS,MAAM,MAAM,WAAW;IAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,SAAS;IACT,WAAW,MAAiD;KAC1D,IAAI,eAAe,KAAA,GACjB,iBAAiB,UAAU;KAE7B,gBAAgB,CAAC;KACjB,IAAI,eAAe,KAAA,GACjB,WAAW,GAAG,UAAU;IAE5B;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,uBAAuB,GACjD,OAAO,sCAAsC,qBAAqB,OACrE,CAAC;GACD,eAAa;GACb,MAAM;aAEL,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,cAAc;;;AC5I/B,IAAA,2BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioGroup/VisualRadioGroup.tsx","../../../src/components/VisualRadioGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualRadioProps, VisualRadioVariant } from './VisualRadio/VisualRadio';\n\nimport VisualRadio from './VisualRadio/VisualRadio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioGroupProps {\n  /** Items in the group. Should be VisualRadioGroup.VisualRadio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualRadio elements (overridable per child). Auto-generated if omitted. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Variant applied to all child VisualRadio elements (overridable per child). */\n  variant?: VisualRadioVariant;\n  /** When set and the number of VisualRadio children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\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  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualRadioGroupComponent extends React.FC<VisualRadioGroupProps> {\n  VisualRadio: typeof VisualRadio;\n}\n\nexport const VisualRadioGroup: VisualRadioGroupComponent = props => {\n  const {\n    children,\n    name: nameProp,\n    value,\n    defaultValue,\n    onChange,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const name = useIdWithFallback(nameProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const childArray = React.Children.toArray(children);\n  const radioChildren = childArray.filter((child): child is React.ReactElement<VisualRadioProps> =>\n    isComponent<VisualRadioProps>(child, VisualRadio)\n  );\n\n  const initialSelected =\n    value ?? defaultValue ?? radioChildren.find(child => child.props.defaultChecked || child.props.checked)?.props.value?.toString();\n\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>(initialSelected);\n  const [prevValue, setPrevValue] = React.useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const effectiveVariant: VisualRadioVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && radioChildren.length > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualRadioProps>(child, VisualRadio)) {\n      const childValue = child.props.value?.toString();\n      const isSelected = selectedValue !== undefined && childValue !== undefined && childValue === selectedValue;\n      const childOnChange = child.props.onChange;\n\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        checked: isSelected,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>): void => {\n          if (childValue !== undefined) {\n            setSelectedValue(childValue);\n          }\n          childOnChange?.(e);\n          if (childValue !== undefined) {\n            onChange?.(e, childValue);\n          }\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-radio-group'], {\n          [styles['visual-radio-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n        role={'radiogroup'}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioGroup.VisualRadio = VisualRadio;\n\nexport default VisualRadioGroup;\n","import VisualRadioGroup from './VisualRadioGroup';\nexport * from './VisualRadioGroup';\nexport default VisualRadioGroup;\n"],"mappings":";;;;;;;;;;AAmDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MAAM,UACN,OACA,cACA,UACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,OAAO,kBAAkB,QAAQ;CACvC,MAAM,WAAW,sBAAsB;CAGvC,MAAM,gBADa,MAAM,SAAS,QAAQ,QACpB,EAAW,QAAQ,UACvC,YAA8B,OAAO,WAAW,CAClD;CAEA,MAAM,kBACJ,SAAS,gBAAgB,cAAc,MAAK,UAAS,MAAM,MAAM,kBAAkB,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,SAAS;CAEjI,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAA6B,eAAe;CAC5F,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAA6B,KAAK;CAC1E,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,cAAc,SAAS,yBAAyB,SAAS;CAE/G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA8B,OAAO,WAAW,GAAG;GACrD,MAAM,aAAa,MAAM,MAAM,OAAO,SAAS;GAC/C,MAAM,aAAa,kBAAkB,KAAA,KAAa,eAAe,KAAA,KAAa,eAAe;GAC7F,MAAM,gBAAgB,MAAM,MAAM;GAElC,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS,MAAM,MAAM,WAAW;IAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,SAAS;IACT,WAAW,MAAiD;KAC1D,IAAI,eAAe,KAAA,GACjB,iBAAiB,UAAU;KAE7B,gBAAgB,CAAC;KACjB,IAAI,eAAe,KAAA,GACjB,WAAW,GAAG,UAAU;IAE5B;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,GAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,WAAW,GAAW,OAAO,uBAAuB,GACjD,OAAO,sCAAsC,qBAAqB,OACrE,CAAC;GACD,eAAa;GACb,MAAM;aAEL,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,cAAc;;;AC5I/B,IAAA,2BAAe"}

package/lib/utils2.js

@@ -3,7 +3,7 @@ import { isComponent } from "./utils/component.js";
 import { t as Spacer_default } from "./Spacer.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as StatusDot_default } from "./StatusDot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Label/styles.module.scss";
@@ -11,7 +11,7 @@ import styles from "./components/Label/styles.module.scss";
 var Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
 	const mapSublabels = (hideFromScreenReader) => {
 		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-			const labelClasses = classNames(styles.label, styles["sublabel"], {
+			const labelClasses = cn(styles.label, styles["sublabel"], {
 				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
 				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
 			});
@@ -43,13 +43,13 @@ var Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =>
 //#region src/components/Label/Label.tsx
 var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
 	const hasChildren = children && typeof children !== "undefined";
-	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
-	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
-	const afterLabelChildrenClasses = classNames(styles["after-label-children"], afterLabelChildrenClassName);
+	const labelWrapperClasses = cn(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
+	const mainLabelWrapperClasses = cn({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
+	const afterLabelChildrenClasses = cn(styles["after-label-children"], afterLabelChildrenClassName);
 	const mapLabels = () => {
 		if (typeof labelTexts === "undefined") return null;
 		return labelTexts.map((labelText, index) => {
-			const labelClasses = classNames(styles.label, {
+			const labelClasses = cn(styles.label, {
 				[styles["label--subdued"]]: labelText.type === "subdued",
 				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
 			}, labelTextClassName);
@@ -121,7 +121,7 @@ var renderLabelAsParent = (props) => {
 		htmlFor: props.inputId,
 		onColor: props.onColor,
 		children: props.children,
-		labelClassName: classNames(props.labelClassName, props.label.props.labelClassName),
+		labelClassName: cn(props.labelClassName, props.label.props.labelClassName),
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,

package/lib/utils2.js.map

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

package/package.json

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