@helsenorge/designsystem-react 13.0.0-workspaces-beta.5 → 13.0.0-workspaces-beta.7

package/lib/PanelOld.js

@@ -14,7 +14,7 @@ import { t as Calendar_default } from "./Calendar.js";
 import { t as Pencil_default } from "./Pencil.js";
 import { t as Watch_default } from "./Watch.js";
 import React, { useId } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import panelStyles from "./components/PanelOld/styles.module.scss";
 let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
@@ -50,7 +50,7 @@ var StatusText = ({ status, statusMessage }) => {
 			svgIcon: Pencil_default
 		};
 	};
-	const statusMessageClass = classNames(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
+	const statusMessageClass = cn(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
 	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
 		className: statusMessageClass,
 		"data-testid": "display-status",
@@ -93,8 +93,8 @@ var DateTime = ({ date, time }) => {
 	return null;
 };
 var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const panelLayoutClasses = cn(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	return /* @__PURE__ */ jsxs("div", {
 		className: panelLayoutClasses,
 		children: [
@@ -117,8 +117,8 @@ var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, sta
 	});
 };
 var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const panelLayoutClasses = cn(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
 	return /* @__PURE__ */ jsxs("div", {
 		className: panelLayoutClasses,
@@ -148,13 +148,13 @@ var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, sta
 	});
 };
 var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
-	const layoutClasses = classNames(panelStyles["panel__layout-3"], {
+	const layoutClasses = cn(panelStyles["panel__layout-3"], {
 		[panelStyles["panel__layout-3--with-icon"]]: icon,
 		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
 		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
 		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
 	});
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	return /* @__PURE__ */ jsxs("div", {
 		className: layoutClasses,
 		children: [
@@ -188,8 +188,8 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	const layout1 = layout === "layout1" || noContentB;
 	const layout2 = !noContentB && layout === "layout2";
 	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
-	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
-	const panelClasses = classNames(panelStyles.panel, {
+	const panelWrapperClasses = cn(panelStyles["panel-wrapper"], className);
+	const panelClasses = cn(panelStyles.panel, {
 		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
 		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
 		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
@@ -206,7 +206,7 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	});
 	const renderCTAContainer = () => {
 		const hasButton = children || url || buttonOnClick;
-		const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
+		const btnContainerClasses = cn(panelStyles["panel__btn-container"], {
 			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
 			[panelStyles["panel__btn-container--no-button"]]: !hasButton
 		});
@@ -258,7 +258,7 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	const renderContent = () => {
 		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
 		return /* @__PURE__ */ jsx("div", {
-			className: classNames(panelStyles["panel-details"], {
+			className: cn(panelStyles["panel-details"], {
 				[panelStyles["panel-details--open"]]: isExpanded,
 				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
 				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
@@ -268,8 +268,8 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 		});
 	};
 	const renderTitle = () => {
-		const titleContainerClasses = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
-		const titleClasses = classNames(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
+		const titleContainerClasses = cn(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
+		const titleClasses = cn(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
 		return title && /* @__PURE__ */ jsxs("div", {
 			className: titleContainerClasses,
 			children: [/* @__PURE__ */ jsx(Title_default, {

package/lib/PanelOld.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelOld.js","names":["StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }>","PreContainer: React.FC<{ children?: React.ReactNode }>","DateTime: React.FC<{ date?: string; time?: string }>","PanelLayout1: React.FC<LayoutProps>","PanelLayout2: React.FC<LayoutProps>","PanelLayout3: React.FC<LayoutProps>","commonProps: Partial<ButtonProps> & AriaLabelAttributes","layoutProps: LayoutProps"],"sources":["../src/components/PanelOld/PanelOld.tsx","../src/components/PanelOld/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useId();\n  const buttonTextId = useId();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n","import PanelOld from './PanelOld';\nexport * from './PanelOld';\nexport default PanelOld;\n"],"mappings":"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"}
+{"version":3,"file":"PanelOld.js","names":["StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }>","PreContainer: React.FC<{ children?: React.ReactNode }>","DateTime: React.FC<{ date?: string; time?: string }>","PanelLayout1: React.FC<LayoutProps>","PanelLayout2: React.FC<LayoutProps>","PanelLayout3: React.FC<LayoutProps>","commonProps: Partial<ButtonProps> & AriaLabelAttributes","layoutProps: LayoutProps"],"sources":["../src/components/PanelOld/PanelOld.tsx","../src/components/PanelOld/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useId();\n  const buttonTextId = useId();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n","import PanelOld from './PanelOld';\nexport * from './PanelOld';\nexport default PanelOld;\n"],"mappings":"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"}

package/lib/PanelTitle.js

@@ -1,13 +1,13 @@
 import { t as Title_default } from "./Title2.js";
 import { t as Highlighter_default } from "./Highlighter.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Panel/PanelTitle/styles.module.scss";
 var PanelTitle = (props) => {
 	const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
+		className: cn(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
 		"data-testid": testId,
 		children: [icon && /* @__PURE__ */ jsx("div", {
 			className: styles["paneltitle__icon"],

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,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"}
+{"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"}

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 classNames from "classnames";
+import cn 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: classNames(styles.popover, className),
+			className: cn(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,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"}
+{"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"}

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 classNames from "classnames";
+import cn 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 classNames({
+	return cn({
 		[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,
@@ -21,7 +21,7 @@ const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
 	});
 };
 const RadioButton = React.forwardRef((props, ref) => {
-	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames,...rest } = props;
+	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ...rest } = props;
 	const invalid = error || onColor === FormOnColor.oninvalid;
 	const onDark = onColor === FormOnColor.ondark;
 	const onBlueberry = onColor === FormOnColor.onblueberry;
@@ -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 = classNames(radioButtonStyles["radio-button-wrapper"], {
+	const radioButtonWrapperClasses = cn(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 = classNames(radioButtonStyles["radio-button-label"], {
+	const radioButtonLabelClasses = cn(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 = classNames(radioButtonStyles["radio-button"], {
+	const radioButtonClasses = cn(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,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"}
+{"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,iBACA,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"}

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 classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import selectStyles from "./components/Select/styles.module.scss";
 var getSelectMaxWidth = (characters) => {
@@ -17,24 +17,24 @@ var getIconColor = (invalid, disabled) => {
 	return disabled ? getColor("neutral", 500) : getColor(invalid ? "cherry" : "blueberry", 600);
 };
 const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
-	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName,...rest } = props;
+	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ...rest } = props;
 	const selectId = useIdWithFallback(selectIdProp);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onBlueberry = onColor === "onblueberry";
 	const invalid = onColor === "oninvalid" || !!errorText || !!error;
 	const iconColor = getIconColor(invalid, !!disabled);
 	const maxWidth = width ? getSelectMaxWidth(width) : void 0;
-	const selectInnerWrapperClasses = classNames(selectStyles["select-inner-wrapper"], {
+	const selectInnerWrapperClasses = cn(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 = classNames(selectStyles.select, {
+	const selectClasses = cn(selectStyles.select, {
 		[selectStyles["select--on-blueberry"]]: onBlueberry,
 		[selectStyles["select--invalid"]]: invalid
 	});
-	const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
+	const selectWrapperClasses = cn(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,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"}
+{"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,kBACA,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"}

package/lib/SingleSelectItem.js

@@ -1,6 +1,6 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
 import React, { useId } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
 var SingleSelectContext = React.createContext(null);
@@ -27,7 +27,7 @@ const SingleSelect = ({ name, disabled, defaultValue, onValueChange, children })
 };
 const useSingleSelect = () => React.useContext(SingleSelectContext);
 const SingleSelectItem = React.forwardRef((props, ref) => {
-	const { text, value, testId, asChild = false, children, disabled, defaultSelected,...rest } = props;
+	const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...rest } = props;
 	const generatedId = useId();
 	const inputId = props.inputId ?? generatedId;
 	const group = useSingleSelect();
@@ -42,8 +42,8 @@ const SingleSelectItem = React.forwardRef((props, ref) => {
 		group,
 		optionValue
 	]);
-	const contentClasses = classNames(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
-	const dotClasses = classNames(styles["single-select-item__dot"], {
+	const contentClasses = cn(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
+	const dotClasses = cn(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,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"}
+{"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,iBAAiB,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"}

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 classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Slider/styles.module.scss";
 var useSafeNumberValue = (initial, min, max) => {
@@ -23,7 +23,7 @@ var useSafeNumberValue = (initial, min, max) => {
 	return [value, setSafeValue];
 };
 const Slider = React.forwardRef((props, ref) => {
-	const { title, ariaLabel, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, labelLeft, labelRight, disabled = false, onChange, steps, step = 1, minValue = 0, maxValue = steps ? steps.length - 1 : 100, selected = true, testId, value,...rest } = props;
+	const { title, ariaLabel, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, labelLeft, labelRight, disabled = false, onChange, steps, step = 1, minValue = 0, maxValue = steps ? steps.length - 1 : 100, selected = true, testId, value, ...rest } = props;
 	const [isMoving, setIsMoving] = useState(false);
 	const [selectedState, setSelectedState] = useState(typeof value === "undefined" ? selected : true);
 	const [valueState, setValueState] = useSafeNumberValue(typeof value === "undefined" ? (maxValue - minValue) / 2 + minValue : value, minValue, maxValue);
@@ -229,14 +229,14 @@ const Slider = React.forwardRef((props, ref) => {
 						renderEmojies(),
 						/* @__PURE__ */ jsxs("div", {
 							ref: trackRef,
-							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							className: cn(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
 							onClick: handleTrackClick,
 							onPointerDown: handlePointerDown,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								className: cn(styles.slider__track, disabled && styles["slider__track--disabled"]),
 								children: renderSteps()
 							}), /* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__marker, {
+								className: cn(styles.slider__marker, {
 									[styles["slider__marker--disabled"]]: disabled,
 									[styles["slider__marker--selected"]]: selectedState,
 									[styles["slider__marker--invalid"]]: invalid,