@helsenorge/designsystem-react 15.0.0-beta.1 → 15.1.0

package/lib/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,IAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,OACE,oBAAC,UAAD;EACE,KAAK;EACI;EACT,MAAK;EACL,WAAW,WAAW,OAAO,+BAA+B;EAC5D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAD;GACa;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;GACnE,CAAA;EACK,CAAA;;AAIb,IAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;CAOtG,OACE,qBAAC,MAAD;EAAI,WANiB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAGgB;YAAf,CACG,UACA,YAAY,oBAAC,YAAD;GAAY,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;GAAa,CAAA,CAC9H;;;AAIT,iBAAiB,cAAc;;;AC9E/B,IAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;;;ACDnF,IAAA,uBAAe"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,IAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,OACE,oBAAC,UAAD;EACE,KAAK;EACI;EACT,MAAK;EACL,WAAW,WAAW,OAAO,8BAA8B;EAC3D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAD;GACa;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;EACpE,CAAA;CACK,CAAA;AAEZ;AAEA,IAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;CAOtG,OACE,qBAAC,MAAD;EAAI,WANiB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;EAC5E,CAGiB;YAAf,CACG,UACA,YAAY,oBAAC,YAAD;GAAY,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;EAAY,CAAA,CAC9H;;AAER;AAEA,iBAAiB,cAAc;;;AC9E/B,IAAa,gCAAgC,WAAW,CAAC,OAAO,iBAAiB,CAAC;;;ACDlF,IAAA,uBAAe"}

package/lib/LoaderSpinner.js

@@ -0,0 +1,61 @@
+import { AnalyticsId, LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { t as getResources } from "./resourceHelper.js";
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAnimate } from "motion/react";
+import styles from "./components/Filter/LoaderSpinner/styles.module.scss";
+//#region src/components/Filter/LoaderSpinner/LoaderSpinner.tsx
+var LoaderSpinner = (props) => {
+	const { resources, testId } = props;
+	const textId = useId();
+	const isMobile = useIsMobileBreakpoint();
+	const svgSize = isMobile ? 14 : 19;
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
+	const [scope, animate] = useAnimate();
+	useEffect(() => {
+		if (!scope.current) return;
+		animate(scope.current, { rotate: 360 }, {
+			duration: 1.3,
+			ease: "linear",
+			repeat: Infinity
+		});
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Loader,
+		role: "progressbar",
+		"aria-labelledby": textId,
+		className: styles["loader-spinner"],
+		children: [/* @__PURE__ */ jsx("svg", {
+			ref: scope,
+			className: styles["loader-spinner__svg"],
+			width: svgSize,
+			height: svgSize,
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: isMobile ? /* @__PURE__ */ jsx("path", {
+				d: "M1 7a6 6 0 1 1 6 6",
+				strokeWidth: "2",
+				strokeLinecap: "round"
+			}) : /* @__PURE__ */ jsx("path", {
+				d: "M1.5 9.5a8 8 0 1 1 8 8",
+				strokeWidth: "2.3",
+				strokeLinecap: "round"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			id: textId,
+			className: styles["loader-spinner__text"],
+			children: mergedResources.loadingText
+		})]
+	});
+};
+//#endregion
+export { LoaderSpinner as t };
+
+//# sourceMappingURL=LoaderSpinner.js.map

package/lib/LoaderSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderSpinner.js","names":[],"sources":["../src/components/Filter/LoaderSpinner/LoaderSpinner.tsx"],"sourcesContent":["import { useEffect, useId } from 'react';\n\nimport { useAnimate } from 'motion/react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { AnalyticsId, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface LoaderSpinnerProps {\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst LoaderSpinner: React.FC<LoaderSpinnerProps> = props => {\n  const { resources, testId } = props;\n  const textId = useId();\n  const isMobile = useIsMobileBreakpoint();\n  const svgSize = isMobile ? 14 : 19;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  const [scope, animate] = useAnimate();\n\n  useEffect(() => {\n    if (!scope.current) {\n      return;\n    }\n\n    animate(scope.current, { rotate: 360 }, { duration: 1.3, ease: 'linear', repeat: Infinity });\n  }, []);\n\n  return (\n    <div\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Loader}\n      role=\"progressbar\"\n      aria-labelledby={textId}\n      className={styles['loader-spinner']}\n    >\n      <svg\n        ref={scope}\n        className={styles['loader-spinner__svg']}\n        width={svgSize}\n        height={svgSize}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {isMobile ? (\n          <path d=\"M1 7a6 6 0 1 1 6 6\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        ) : (\n          <path d=\"M1.5 9.5a8 8 0 1 1 8 8\" strokeWidth=\"2.3\" strokeLinecap=\"round\" />\n        )}\n      </svg>\n      <span id={textId} className={styles['loader-spinner__text']}>\n        {mergedResources.loadingText}\n      </span>\n    </div>\n  );\n};\n\nexport default LoaderSpinner;\n"],"mappings":";;;;;;;;;AAoBA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,sBAAsB;CACvC,MAAM,UAAU,WAAW,KAAK;CAChC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CACA,MAAM,CAAC,OAAO,WAAW,WAAW;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,SACT;EAGF,QAAQ,MAAM,SAAS,EAAE,QAAQ,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;GAAU,QAAQ;EAAS,CAAC;CAC7F,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EACE,eAAa;EACb,oBAAkB,YAAY;EAC9B,MAAK;EACL,mBAAiB;EACjB,WAAW,OAAO;YALpB,CAOE,oBAAC,OAAD;GACE,KAAK;GACL,WAAW,OAAO;GAClB,OAAO;GACP,QAAQ;GACR,MAAK;GACL,OAAM;aAEL,WACC,oBAAC,QAAD;IAAM,GAAE;IAAqB,aAAY;IAAI,eAAc;GAAS,CAAA,IAEpE,oBAAC,QAAD;IAAM,GAAE;IAAyB,aAAY;IAAM,eAAc;GAAS,CAAA;EAEzE,CAAA,GACL,oBAAC,QAAD;GAAM,IAAI;GAAQ,WAAW,OAAO;aACjC,gBAAgB;EACb,CAAA,CACH;;AAET"}

package/lib/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","names":[],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAmBA,IAAM,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,WAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;EACjD,CAAC;CAIF,OACE,oBAAC,OAAD;EAAK,aAHW,WAAW,MAAO,WAAW;EAGlB,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG;EAC3B,CAAA"}
+{"version":3,"file":"MaxCharacters.js","names":[],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAmBA,IAAM,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,WAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;CAClD,CAAC;CAID,OACE,oBAAC,OAAD;EAAK,aAHW,WAAW,MAAO,WAAW;EAGlB,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,SAAS;YAC5F,GAAG,OAAO,GAAG,cAAc,GAAG;CAC5B,CAAA;AAET"}

package/lib/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import type { IconSize } from '../../constants';\n\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"mappings":";;;;;;;;AAwBA,IAAM,qBAAqB,UAAqD;CAC9E,MAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;CACrE,QAAQ,SAAR;EACE,KAAK,QACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;GACX,CAAA;EAEN,KAAK,QACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;GACX,CAAA;EAEN,KAAK,SACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;GACX,CAAA;EAEN,KAAK,WACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;GACX,CAAA"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import type { IconSize } from '../../constants';\n\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"mappings":";;;;;;;;AAwBA,IAAM,qBAAqB,UAAqD;CAC9E,MAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;CACrE,QAAQ,SAAR;EACE,KAAK,QACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;EACZ,CAAA;EAEL,KAAK,QACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;EACZ,CAAA;EAEL,KAAK,SACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;EACZ,CAAA;EAEL,KAAK,WACH,OACE,oBAAC,cAAD;GACE,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;EACZ,CAAA;CAEP;AACF"}

package/lib/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTitle.js","names":[],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;;AAsBA,IAAM,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;CAC1E,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;YAA3G,CACG,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;aAAsB;GAAW,CAAA,EAChE,SACC,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACE,oBAAC,eAAD;IAAO,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAD;KAAa,YAAY;eAAgB;KAAoB,CAAA;IACvD,CAAA,EACP,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAuB;IAAY,CAAA,CAChE;KAEJ;;;;;ACjCV,IAAA,qBAAe"}
+{"version":3,"file":"PanelTitle.js","names":[],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;;AAsBA,IAAM,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;CAC1E,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,KAAK,CAAC;EAAG,eAAa;YAA3G,CACG,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;aAAsB;EAAU,CAAA,GAC/D,SACC,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACE,oBAAC,eAAD;IAAO,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAD;KAAa,YAAY;eAAgB;IAAmB,CAAA;GACvD,CAAA,GACN,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAuB;GAAW,CAAA,CAChE;IAEJ;;AAET;;;ACnCA,IAAA,qBAAe"}

package/lib/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAoB;CACpB,eAAA,mBAAgB;CAChB,eAAA,mBAAgB;;KACjB;;;ACsDD,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAE9F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,GAAG;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,GAAG,CAAC;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,UAAU,CAAC;GAAC;EAC7F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,SAC1B;EACF,CAAC;CAKF,MAAM,EAAE,qBAAqB,gBAAgB,CAH/B,SAAS,QAGuB,EAF9B,WAAW,QAE0B,CAAQ,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;CAIhD,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;YAC7C,qBAAC,OAAD;GACM;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAMxE;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;IAAQ;GAC1F,WAAW,WAAW,OAAO,SAAS,UAAU;GAChD,GAAI,kBAAkB;GAChB;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;aATN,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;IACb,CAAA,CACE;;EACe,CAAA;;AAI3B,QAAQ,cAAc;;;AC5HtB,IAAA,kBAAe"}
+{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAA;CACA,eAAA,mBAAA;CACA,eAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;;;ACsDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAE7F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,SAAS,CAAC;EAAC;EAC5F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,QAC3B;CACF,CAAC;CAKD,MAAM,EAAE,qBAAqB,gBAAgB,CAH/B,SAAS,OAGuB,GAF9B,WAAW,OAE0B,CAAO,CAAC;CAE7D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;CAIhD,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;YAC7C,qBAAC,OAAD;GACM;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAMvE;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;GAAO;GACzF,WAAW,WAAW,OAAO,SAAS,SAAS;GAC/C,GAAI,iBAAiB;GACf;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;aATN,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA,CACE;;CACe,CAAA;AAE1B;AAEA,QAAQ,cAAc;;;AC5HtB,IAAA,kBAAe"}

package/lib/Radio.js

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

package/lib/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/VisualRadioCloud/Radio/Radio.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** Value identifying this radio inside its group. Required. */\n  value: string;\n  /** input id of the underlying radio */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a cloud). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio'],\n          {\n            [styles['visual-radio--checked']]: isChecked,\n            [styles['visual-radio--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio__input']}\n          type=\"radio\"\n          checked={isChecked}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-radio__pill']}>\n          {isChecked && (\n            <span className={styles['visual-radio__icon']} aria-hidden=\"true\">\n              {isMobile ? (\n                <svg width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" />\n                </svg>\n              ) : (\n                <svg width=\"12\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z\" />\n                </svg>\n              )}\n            </span>\n          )}\n          <span className={styles['visual-radio__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;AAqCA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CACvC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,iBACP;KACG,OAAO,2BAA2B;KAClC,OAAO,2BAA2B;GACrC,GACA,SACF;GACA,SAAS;GACT,eAAa;aAVf,CAYE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;cAAxB,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAuB,eAAY;eACxD,WACC,oBAAC,OAAD;MAAK,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;gBAC1C,oBAAC,QAAD,EAAM,GAAE,oCAAqC,CAAA;KAC1C,CAAA,IAEL,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAD,EAAM,GAAE,sCAAuC,CAAA;KAC5C,CAAA;IAEH,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAyB;IAAe,CAAA,CAC5D;KACD;;CACK,CAAA;AAElB"}

package/lib/RadioButton.js

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

package/lib/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button-label__large--on-grey']]: isLarge && onGrey,\n      [radioButtonStyles['radio-button-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioButtonStyles['radio-button-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(radioButtonStyles['radio-button'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioButtonStyles['radio-button__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioButtonClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,+CAA+C,WAAW;CAC/E,CAAC;CACD,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,yCAAyC,WAAW;GACtE,kBAAkB,wCAAwC,WAAW;GACrE,kBAAkB,6CAA6C,WAAW;GAC1E,kBAAkB,wCAAwC,WAAW;CACxE,GACA,eACF;CACA,MAAM,qBAAqB,WAAW,kBAAkB,iBAAiB,SAAS;CAElF,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,kBAAkB;YAAnC,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;GACjD,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/lib/RadioMarker.js

@@ -0,0 +1,35 @@
+import { FormOnColor, FormSize } from "./constants.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/RadioButton/RadioMarker/styles.module.scss";
+//#region src/components/RadioButton/RadioMarker/RadioMarker.tsx
+/**
+* Does not render an <input>; consumers render this on their end.
+*/
+var RadioMarker = (props) => {
+	const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;
+	const onWhite = onColor === FormOnColor.onwhite;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onInvalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const large = size === FormSize.large;
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(styles["radio__marker"], large ? styles["radio__marker__large"] : styles["radio__marker__regular"], {
+			[styles["radio__marker--on-white"]]: onWhite,
+			[styles["radio__marker--on-grey"]]: onGrey,
+			[styles["radio__marker--on-blueberry"]]: onBlueberry,
+			[styles["radio__marker--on-dark"]]: onDark,
+			[styles["radio__marker--on-invalid"]]: onInvalid,
+			[styles["radio__marker--invalid"]]: onInvalid,
+			[styles["radio__marker--disabled"]]: disabled,
+			[styles["radio__marker--checked"]]: checked
+		}, className),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", { className: styles["radio__marker-dot"] })
+	});
+};
+//#endregion
+export { RadioMarker as t };
+
+//# sourceMappingURL=RadioMarker.js.map

package/lib/RadioMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMarker.js","names":[],"sources":["../src/components/RadioButton/RadioMarker/RadioMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioMarkerProps {\n  /** Whether the radio is checked. Controls the inner dot visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const RadioMarker: React.FC<RadioMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n\n  const markerClasses = classNames(\n    styles['radio__marker'],\n    large ? styles['radio__marker__large'] : styles['radio__marker__regular'],\n    {\n      [styles['radio__marker--on-white']]: onWhite,\n      [styles['radio__marker--on-grey']]: onGrey,\n      [styles['radio__marker--on-blueberry']]: onBlueberry,\n      [styles['radio__marker--on-dark']]: onDark,\n      [styles['radio__marker--on-invalid']]: onInvalid,\n      [styles['radio__marker--invalid']]: onInvalid,\n      [styles['radio__marker--disabled']]: disabled,\n      [styles['radio__marker--checked']]: checked,\n    },\n    className\n  );\n\n  return (\n    <span className={markerClasses} aria-hidden=\"true\">\n      <span className={styles['radio__marker-dot']} />\n    </span>\n  );\n};\n\nexport default RadioMarker;\n"],"mappings":";;;;;;;;AAwBA,IAAa,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAkBhC,OACE,oBAAC,QAAD;EAAM,WAjBc,WACpB,OAAO,kBACP,QAAQ,OAAO,0BAA0B,OAAO,2BAChD;IACG,OAAO,6BAA6B;IACpC,OAAO,4BAA4B;IACnC,OAAO,iCAAiC;IACxC,OAAO,4BAA4B;IACnC,OAAO,+BAA+B;IACtC,OAAO,4BAA4B;IACnC,OAAO,6BAA6B;IACpC,OAAO,4BAA4B;EACtC,GACA,SAIiB;EAAe,eAAY;YAC1C,oBAAC,QAAD,EAAM,WAAW,OAAO,qBAAuB,CAAA;CAC3C,CAAA;AAEV"}

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Adds custom classes to the label wrapper */\n  labelClassName?: string;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    labelClassName,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor, className: labelClassName })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;;AAwDA,IAAM,qBAAqB,eAA+B;CAGxD,OAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;CAEpE,OAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,IAAa,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,gBACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;CAEzF,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;aAApH,CACG,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,WAAW;IAAgB,CAAC,EAC7G,qBAAC,OAAD;IAAK,WAAW;IAA2B,eAAa,SAAS;cAAjE,CACE,oBAAC,cAAD;KACE,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;KACjB,CAAA,EACF,oBAAC,UAAD;KACE,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;KACM,CAAA,CACL;MACF;;EACO,CAAA;;;;ACnJnB,IAAA,iBAAe"}
+{"version":3,"file":"Select.js","names":[],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Adds custom classes to the label wrapper */\n  labelClassName?: string;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    labelClassName,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor, className: labelClassName })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;;AAwDA,IAAM,qBAAqB,eAA+B;CAGxD,OAAO,QAAQ,aAAA,GAAwC;AACzD;AAEA,IAAM,gBAAgB,SAAkB,aAA8B;CAEpE,OAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAD3B,UAAU,WAAW,aAC0B,GAAG;AACtE;AAEA,IAAa,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,gBACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,YAAY;CAC/C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;CAClD,MAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;CACpD,GACA,SACF;CAEA,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;CACrC,CAAC;CAED,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,gBAAgB;CAExF,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,SAAS;aAAnH,CACG,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,WAAW;GAAe,CAAC,GAC5G,qBAAC,OAAD;IAAK,WAAW;IAA2B,eAAa,SAAS;cAAjE,CACE,oBAAC,cAAD;KACE,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;IAClB,CAAA,GACD,oBAAC,UAAD;KACE,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,WAAW;KACvD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;IACK,CAAA,CACL;KACF;;CACO,CAAA;AAElB;;;ACrJA,IAAA,iBAAe"}

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":[],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;;AAIA,IAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,IAAa,wBAAwD,MAAM,WAAW,oBAAoB;;;AC0B1G,IAAa,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;CAEnE,MAAM,gBAAgB;EACpB,IAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,aACrD,MAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAC5C,CAAW,MAAM;CAEtC,MAAM,cAAc,MAAmC;EACrD,IAAI,YAAY;EAChB,IAAI,SAAS,MAAM,UAAU,aAC3B,MAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAW;EAAY,eAAA;EAAc,CAAA,EAC3C,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CAClB,EAAA,CAAA;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;GACzD,EAAE,gBAAgB;GAClB,WAAW,EAAE;;EAEf,YAAY,MAAoD;GAC9D,IAAI,EAAE,QAAQ,SAAS;IACrB,EAAE,gBAAgB;IAClB,WAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;CAEL,OACE,oBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAD,EAAW,GAAI,gBAAkB,CAAA;EAC7B,CAAA;;AAIV,iBAAiB,cAAc"}
+{"version":3,"file":"SingleSelectItem.js","names":[],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;;AAIA,IAAa,sBAAsB,MAAM,cAA8C,IAAI;AAE3F,IAAa,wBAAwD,MAAM,WAAW,mBAAmB;;;AC0BzG,IAAa,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,IAAI;CAElE,MAAM,gBAAgB;EACpB,IAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,aACrD,MAAM,gBAAgB,WAAW;CAErC,GAAG;EAAC;EAAiB;EAAO;CAAW,CAAC;CAExC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,WACrD,CAAC;CACD,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;CAChD,CAAC;CAGD,MAAM,eADa,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAC5C,EAAW,MAAM;CAEtC,MAAM,cAAc,MAAmC;EACrD,IAAI,YAAY;EAChB,IAAI,SAAS,MAAM,UAAU,aAC3B,MAAM,gBAAgB,aAAa,CAAC;CAExC;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAW;EAAY,eAAA;CAAa,CAAA,GAC1C,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CAClB,EAAA,CAAA;CAGJ,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,OAAO,IAAI;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,CAAC;EACzD,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;CACZ,IACA;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;GACzD,EAAE,eAAe;GACjB,WAAW,CAAC;EACd;EACA,YAAY,MAAoD;GAC9D,IAAI,EAAE,QAAQ,SAAS;IACrB,EAAE,eAAe;IACjB,WAAW,CAAC;GACd;EACF;EACK;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;CACZ;CAEJ,OACE,oBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA;CAC7B,CAAA;AAET;AAEA,iBAAiB,cAAc"}