@helsenorge/designsystem-react 13.0.0-workspaces-beta.0 → 13.0.0-workspaces-beta.1

package/lib/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTitle.js","names":["PanelTitle: React.FC<PanelTitleProps>"],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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":";;;;;;AAwBA,IAAMA,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,QACE,qBAAC,OAAA;EAAI,WAAW,GAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;aACxG,QAAQ,oBAAC,OAAA;GAAI,WAAW,OAAO;aAAsB;IAAW,EAChE,SACC,qBAAC,OAAA;GAAI,WAAW,OAAO;cACrB,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAA;KAAY,YAAY;eAAgB;MAAoB;KACvD,EACP,SAAS,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAuB;KAAY,CAAA;IAChE,CAAA;GAEJ;;ACnCV,IAAA,uBDuCe"}
+{"version":3,"file":"PanelTitle.js","names":["PanelTitle: React.FC<PanelTitleProps>"],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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":";;;;;;AAwBA,IAAMA,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;aACxG,QAAQ,oBAAC,OAAA;GAAI,WAAW,OAAO;aAAsB;IAAW,EAChE,SACC,qBAAC,OAAA;GAAI,WAAW,OAAO;cACrB,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAA;KAAY,YAAY;eAAgB;MAAoB;KACvD,EACP,SAAS,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAuB;KAAY,CAAA;IAChE,CAAA;GAEJ;;ACnCV,IAAA,uBDuCe"}

package/lib/PopOver.js

@@ -2,7 +2,7 @@ import { c as ZIndex, n as AnalyticsId } from "./constants2.js";
 import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { _ as autoUpdate, a as useDismiss, d as arrow, f as flip, h as shift, i as useClick, l as useInteractions, m as offset, o as useFloating, p as hide, r as FloatingFocusManager, t as FloatingArrow, u as useMergeRefs } from "./floating-ui.react.js";
 import React, { useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/PopOver/styles.module.scss";
 let PopOverVariant = /* @__PURE__ */ function(PopOverVariant$1) {
@@ -44,7 +44,7 @@ var PopOver = React.forwardRef((props, ref) => {
 				visibility: isVisible ? "visible" : "hidden",
 				zIndex
 			},
-			className: cn(styles.popover, className),
+			className: classNames(styles.popover, className),
 			...getFloatingProps(),
 			role,
 			"data-testid": testId,

package/lib/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import React, { 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 { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\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>;\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}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\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  } = 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 * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;AAwBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,uBAAA;AACA,kBAAA,mBAAA;AACA,kBAAA,mBAAA;;;AAoCF,IAAM,UAAU,MAAM,YAAwE,OAAO,QAAQ;CAC3G,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,cACE;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,QAAQ,EACf,WAAW,QAAQ,CAE0B,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;AAIhD,QACE,oBAAC,sBAAA;EAA8B;EAAS,OAAO;YAC7C,qBAAC,OAAA;GACK;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAAC;GAO9E,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;IAAQ;GAC1F,WAAW,GAAW,OAAO,SAAS,UAAU;GAChD,GAAI,kBAAkB;GAChB;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;cAEH,UACD,oBAAC,eAAA;IACC,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb,CAAA;IACE;GACe;EAEzB;AAEF,QAAQ,cAAc;AC/HtB,IAAA,oBDiIe"}
+{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import React, { 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 { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\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>;\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}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\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  } = 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 * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;AAwBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,uBAAA;AACA,kBAAA,mBAAA;AACA,kBAAA,mBAAA;;;AAoCF,IAAM,UAAU,MAAM,YAAwE,OAAO,QAAQ;CAC3G,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,cACE;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,QAAQ,EACf,WAAW,QAAQ,CAE0B,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;AAIhD,QACE,oBAAC,sBAAA;EAA8B;EAAS,OAAO;YAC7C,qBAAC,OAAA;GACK;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAAC;GAO9E,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;cAEH,UACD,oBAAC,eAAA;IACC,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb,CAAA;IACE;GACe;EAEzB;AAEF,QAAQ,cAAc;AC/HtB,IAAA,oBDiIe"}

package/lib/RadioButton.js

@@ -7,13 +7,13 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { i as renderLabelAsParent, n as getLabelText } from "./Label.js";
 import React, { useState } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import radioButtonStyles from "./components/RadioButton/styles.module.scss";
 const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
 	const onCherry = onColor === "oninvalid";
 	const checked = radioId === checkedRadioId;
-	return cn({
+	return classNames({
 		[radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
 		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
 		[radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
@@ -31,14 +31,14 @@ const RadioButton = React.forwardRef((props, ref) => {
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = cn(radioButtonStyles["radio-button-wrapper"], {
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
 		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
 		[radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
 	});
-	const radioButtonLabelClasses = cn(radioButtonStyles["radio-button-label"], {
+	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,
@@ -46,7 +46,7 @@ const RadioButton = React.forwardRef((props, ref) => {
 		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
 		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
 	}, labelClassNames);
-	const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
 		[radioButtonStyles["radio-button--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button--disabled"]]: disabled,
 		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,

package/lib/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const 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--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\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,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,GAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC;;AAGJ,MAAa,cAAc,MAAM,YAAY,OAAyB,QAAqC;CACzG,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,gBACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,GAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,GAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,GACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,yBACA,KAAA,GACA,kBAAkB,iCAClB,QACD;IACG;GACO;EAEjB;AAEF,YAAY,cAAc;AAE1B,IAAA,sBAAe"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const 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--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\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,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,WAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC;;AAGJ,MAAa,cAAc,MAAM,YAAY,OAAyB,QAAqC;CACzG,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,gBACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,WACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,yBACA,KAAA,GACA,kBAAkB,iCAClB,QACD;IACG;GACO;EAEjB;AAEF,YAAY,cAAc;AAE1B,IAAA,sBAAe"}

package/lib/Select.js

@@ -7,7 +7,7 @@ import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabel } from "./Label.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import selectStyles from "./components/Select/styles.module.scss";
 var getSelectMaxWidth = (characters) => {
@@ -24,17 +24,17 @@ const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
 	const invalid = onColor === "oninvalid" || !!errorText || !!error;
 	const iconColor = getIconColor(invalid, !!disabled);
 	const maxWidth = width ? getSelectMaxWidth(width) : void 0;
-	const selectInnerWrapperClasses = cn(selectStyles["select-inner-wrapper"], {
+	const selectInnerWrapperClasses = classNames(selectStyles["select-inner-wrapper"], {
 		[selectStyles["select-inner-wrapper--transparent"]]: concept === "transparent",
 		[selectStyles["select-inner-wrapper--on-blueberry"]]: onBlueberry,
 		[selectStyles["select-inner-wrapper--invalid"]]: invalid,
 		[selectStyles["select-inner-wrapper--disabled"]]: disabled
 	}, className);
-	const selectClasses = cn(selectStyles.select, {
+	const selectClasses = classNames(selectStyles.select, {
 		[selectStyles["select--on-blueberry"]]: onBlueberry,
 		[selectStyles["select--invalid"]]: invalid
 	});
-	const selectWrapperClasses = cn(selectStyles["select-wrapper"], wrapperClassName);
+	const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
 		className: errorWrapperClassName,
 		errorText,

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 React from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: 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    ...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, selectId, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={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":";;;;;;;;;;;;AAmDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAa,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;CACxH,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,iBACA,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,GAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,GAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,GAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY,OAAO,UAAU,QAAuB,EACrD,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,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;MACM,CAAA;KACL,CAAA;IACF;GACO;EAEjB;AC9IF,IAAA,mBDgJe"}
+{"version":3,"file":"Select.js","names":[],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: 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    ...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, selectId, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={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":";;;;;;;;;;;;AAmDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAa,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;CACxH,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,iBACA,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;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY,OAAO,UAAU,QAAuB,EACrD,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,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;MACM,CAAA;KACL,CAAA;IACF;GACO;EAEjB;AC9IF,IAAA,mBDgJe"}

package/lib/SingleSelectItem.js

@@ -1,6 +1,6 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
 import React, { useId } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
 var SingleSelectContext = React.createContext(null);
@@ -42,8 +42,8 @@ const SingleSelectItem = React.forwardRef((props, ref) => {
 		group,
 		optionValue
 	]);
-	const contentClasses = cn(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
-	const dotClasses = cn(styles["single-select-item__dot"], {
+	const contentClasses = classNames(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
+	const dotClasses = classNames(styles["single-select-item__dot"], {
 		[styles["single-select-item__dot--disabled"]]: isDisabled,
 		[styles["single-select-item__dot--checked"]]: isSelected
 	});

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":["SingleSelect: React.FC<SingleSelectProps>"],"sources":["../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\ntype SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nconst SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSingleSelect } from './SingleSelect';\nimport AsChildSlot, { AsChildSlotHandle } 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}\n\nexport const SingleSelectItem = React.forwardRef((props: SingleSelectItemProps, ref: React.Ref<HTMLElement>) => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...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\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref as React.Ref<HTMLElement>,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childElement,\n        content,\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 as React.Ref<HTMLButtonElement>,\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":";;;;;AAUA,IAAM,sBAAsB,MAAM,cAA8C,KAAK;AAUrF,MAAaA,gBAA6C,EAAE,MAAM,UAAU,cAAc,eAAe,eAAe;CACtH,MAAM,CAAC,UAAU,eAAe,MAAM,SAA6B,aAAa;CAEhF,MAAM,UAAU,MAAM,eACb;EACL;EACA;EACA,OAAO;EACP,gBAAgB,GAAG,MAAY;AAC7B,eAAY,EAAE;AACd,mBAAgB,GAAG,EAAE;;EAExB,GACD;EAAC;EAAM;EAAU;EAAU;EAAc,CAC1C;AAED,QAAO,oBAAC,oBAAoB,UAAA;EAAS,OAAO;EAAU;GAAwC;;AAGhG,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;ACX1G,MAAa,mBAAmB,MAAM,YAAY,OAA8B,QAAgC;CAC9G,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,gBAAiB,GAAG,SAAS;CAE/F,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;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,GAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,GAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAE3C,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACV;EACD,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;EAER;AAEF,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}
+{"version":3,"file":"SingleSelectItem.js","names":["SingleSelect: React.FC<SingleSelectProps>"],"sources":["../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\ntype SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nconst SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSingleSelect } from './SingleSelect';\nimport AsChildSlot, { AsChildSlotHandle } 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}\n\nexport const SingleSelectItem = React.forwardRef((props: SingleSelectItemProps, ref: React.Ref<HTMLElement>) => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...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\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref as React.Ref<HTMLElement>,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childElement,\n        content,\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 as React.Ref<HTMLButtonElement>,\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":";;;;;AAUA,IAAM,sBAAsB,MAAM,cAA8C,KAAK;AAUrF,MAAaA,gBAA6C,EAAE,MAAM,UAAU,cAAc,eAAe,eAAe;CACtH,MAAM,CAAC,UAAU,eAAe,MAAM,SAA6B,aAAa;CAEhF,MAAM,UAAU,MAAM,eACb;EACL;EACA;EACA,OAAO;EACP,gBAAgB,GAAG,MAAY;AAC7B,eAAY,EAAE;AACd,mBAAgB,GAAG,EAAE;;EAExB,GACD;EAAC;EAAM;EAAU;EAAU;EAAc,CAC1C;AAED,QAAO,oBAAC,oBAAoB,UAAA;EAAS,OAAO;EAAU;GAAwC;;AAGhG,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;ACX1G,MAAa,mBAAmB,MAAM,YAAY,OAA8B,QAAgC;CAC9G,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,gBAAiB,GAAG,SAAS;CAE/F,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;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,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,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAE3C,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACV;EACD,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;EAER;AAEF,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}

package/lib/Slider.js

@@ -7,7 +7,7 @@ import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { t as useSize } from "./useSize.js";
 import { t as Title_default } from "./Title2.js";
 import React, { useEffect, useId, useRef, useState } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Slider/styles.module.scss";
 var useSafeNumberValue = (initial, min, max) => {
@@ -229,14 +229,14 @@ const Slider = React.forwardRef((props, ref) => {
 						renderEmojies(),
 						/* @__PURE__ */ jsxs("div", {
 							ref: trackRef,
-							className: cn(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
 							onClick: handleTrackClick,
 							onPointerDown: handlePointerDown,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: cn(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
 								children: renderSteps()
 							}), /* @__PURE__ */ jsx("div", {
-								className: cn(styles.slider__marker, {
+								className: classNames(styles.slider__marker, {
 									[styles["slider__marker--disabled"]]: disabled,
 									[styles["slider__marker--selected"]]: selectedState,
 									[styles["slider__marker--invalid"]]: invalid,

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/lib/Spacer.js

@@ -1,12 +1,12 @@
 import { n as AnalyticsId } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
 var Spacer_default$1 = React.forwardRef(function SpacerForwardedRef(props, ref) {
 	const { size = "s", className, testId } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(spacerStyles.spacer, {
+		className: classNames(spacerStyles.spacer, {
 			[spacerStyles["spacer--4xs"]]: size === "4xs",
 			[spacerStyles["spacer--3xs"]]: size === "3xs",
 			[spacerStyles["spacer--2xs"]]: size === "2xs",

package/lib/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;;ACEA,IAAA,mBDgBe,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CACpH,MAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAqB1C,QAAO,oBAAC,QAAA;EAAK,WApBS,GACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;EACnH"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;;ACEA,IAAA,mBDgBe,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CACpH,MAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAqB1C,QAAO,oBAAC,QAAA;EAAK,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;EACnH"}

package/lib/StatusDot.js

@@ -2,7 +2,7 @@ import { a as IconSize, n as AnalyticsId, r as FormOnColor } from "./constants2.
 import { t as getColor } from "./color.js";
 import { n as LazyIcon } from "./LazyIcon.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StatusDot/styles.module.scss";
 let StatusDotOnColor = /* @__PURE__ */ function(StatusDotOnColor$1) {
@@ -37,7 +37,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
 		size: IconSize.XXSmall,
 		onColor,
-		className: cn({
+		className: classNames({
 			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
 			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
 		})
@@ -124,8 +124,8 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 };
 var StatusDot_default$1 = React.forwardRef(function StatusDotForwardedRef(props, ref) {
 	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;
-	const statusDotClasses = cn(styles["statusdot"], className);
-	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	const statusDotClasses = classNames(styles["statusdot"], className);
+	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
 	return /* @__PURE__ */ jsxs("span", {
 		id,
 		ref,

package/lib/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: StatusDotType"],"sources":["../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport type StatusDotType = React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLElement>>;\nconst StatusDot: StatusDotType = React.forwardRef(function StatusDotForwardedRef(\n  props: StatusDotProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n});\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: StatusDotType"],"sources":["../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport type StatusDotType = React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLElement>>;\nconst StatusDot: StatusDotType = React.forwardRef(function StatusDotForwardedRef(\n  props: StatusDotProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n});\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/StatusDotList.js

@@ -1,13 +1,13 @@
 import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
 const StatusDotList = (props) => {
 	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-testid": testId,
-		className: cn(styles["statusdotlist"], className),
+		className: classNames(styles["statusdotlist"], className),
 		children: [
 			topStatusDot,
 			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {

package/lib/StatusDotList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDotList.js","names":["StatusDotList: StatusDotListType"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotProps, StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = React.FC<StatusDotListProps>;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: StatusDotListType = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;;AA6BA,MAAaA,iBAAmC,UAAS;CACvD,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,GAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}
+{"version":3,"file":"StatusDotList.js","names":["StatusDotList: StatusDotListType"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotProps, StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = React.FC<StatusDotListProps>;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: StatusDotListType = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;;AA6BA,MAAaA,iBAAmC,UAAS;CACvD,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}

package/lib/StepButtons.js

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StepButtons/styles.module.scss";
 const StepButtons = (props) => {
 	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
-	const navigationClasses = cn(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
 	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
 		className: navigationClasses,
 		"data-testid": testId,
@@ -15,14 +15,14 @@ const StepButtons = (props) => {
 				className: styles.stepbuttons__buttons,
 				children: [backButton && React.cloneElement(backButton, {
 					variant: "outline",
-					wrapperClassName: cn(styles["stepbuttons__button--back"])
+					wrapperClassName: classNames(styles["stepbuttons__button--back"])
 				}), forwardButton && React.cloneElement(forwardButton, {
 					variant: "fill",
-					wrapperClassName: cn(styles["stepbuttons__button--forward"])
+					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
 				})]
 			}),
 			additionalButtons && /* @__PURE__ */ jsx("div", {
-				className: cn(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
 				children: additionalButtons
 			}),
 			cancelButton && /* @__PURE__ */ jsx("div", {