@helsenorge/designsystem-react 15.4.0 → 15.5.0

package/lib/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n  emphasized?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/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  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    emphasized = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames(styles['expander__button-container'], {\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      emphasized && styles['expander__content--emphasized'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(\n      size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n    );\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}
+{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n  emphasized?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/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  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    emphasized = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames(styles['expander__button-container'], {\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      emphasized && styles['expander__content--emphasized'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(\n      size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n    );\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}

package/lib/FilterButton.js

@@ -4,7 +4,7 @@ import { t as Icon_default } from "./Icon.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import Filter from "./components/Icons/Filter.js";
 import { t as getResources } from "./resourceHelper.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButton/styles.module.scss";
@@ -23,7 +23,7 @@ var FilterButton = (props) => {
 		className: styles["filter-button"],
 		ref: buttonRef,
 		children: /* @__PURE__ */ jsxs("span", {
-			className: cn(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
+			className: classNames(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
 			children: [/* @__PURE__ */ jsx(Icon_default, {
 				svgIcon: Filter,
 				isHovered,

package/lib/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,GAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}
+{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}

package/lib/FilterButtonAndChipsWrapper.js

@@ -1,7 +1,7 @@
 import { LanguageLocales } from "./constants.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import { t as getResources } from "./resourceHelper.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButtonAndChipsWrapper/styles.module.scss";
 //#region src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx
@@ -12,7 +12,7 @@ var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId,
 		...resources
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["filter-chip-bar"]),
+		className: classNames(styles["filter-chip-bar"]),
 		"data-testid": testId,
 		children: [filterButtonComponent, /* @__PURE__ */ jsx("ul", {
 			"aria-label": mergedResources.activeFiltersListLabel,

package/lib/FilterButtonAndChipsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n  filterButtonComponent,\n  filterChips,\n  testId,\n  resources,\n}) => {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n        {filterChips.map((activefilter, index) => (\n          <li key={index}>{activefilter}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}
+{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n  filterButtonComponent,\n  filterChips,\n  testId,\n  resources,\n}) => {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n        {filterChips.map((activefilter, index) => (\n          <li key={index}>{activefilter}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}

package/lib/FilterLinkList.js

@@ -2,7 +2,7 @@ import { AnalyticsId, IconSize } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterLinkList/FilterLinkList.module.scss";
@@ -10,8 +10,8 @@ import styles from "./components/Filter/FilterLinkList/FilterLinkList.module.scs
 var Link = (props) => {
 	const { children, title, chips, className = "", linkRef, testId, ref, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
-	const liClasses = cn(styles["link-list__item"]);
-	const linkClasses = cn(styles["link-list__button"], className);
+	const liClasses = classNames(styles["link-list__item"]);
+	const linkClasses = classNames(styles["link-list__button"], className);
 	return /* @__PURE__ */ jsx("li", {
 		className: liClasses,
 		ref,
@@ -45,7 +45,7 @@ var LinkListComponent = (props) => {
 	const { children, className = "", testId, ref } = props;
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: cn(styles["link-list"], className),
+		className: classNames(styles["link-list"], className),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.LinkList,
 		children: React.Children.map(children, (child) => {

package/lib/FilterLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: string;\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,GAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,GAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;eAC9D,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;gBACnB;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,GAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}
+{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: string;\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,WAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,WAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;eAC9D,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;gBACnB;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}

package/lib/FilterOverviewSearch.js

@@ -1,12 +1,12 @@
 import { t as FilterSearch } from "./FilterSearch.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterOverviewSearch/styles.module.scss";
 //#region src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx
 var FilterOverviewSearch = (props) => {
 	const { wrapperClassName, testId, ...filterSearchProps } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["filter-overview-search"], wrapperClassName),
+		className: classNames(styles["filter-overview-search"], wrapperClassName),
 		"data-testid": testId,
 		children: /* @__PURE__ */ jsx(FilterSearch, { ...filterSearchProps })
 	});

package/lib/FilterOverviewSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}
+{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}

package/lib/FilterSearch.js

@@ -7,13 +7,13 @@ import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import X from "./components/Icons/X.js";
 import { t as getResources } from "./resourceHelper.js";
 import Search from "./components/Icons/Search.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterSearch/styles.module.scss";
 //#region src/components/Filter/FilterSearch/FilterSearch.tsx
 var FilterSearch = (props) => {
-	const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;
+	const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, withSearchButton = false, ...inputProps } = props;
 	const inputRef = useRef(null);
 	const inputWrapperRef = useRef(null);
 	const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);
@@ -29,22 +29,35 @@ var FilterSearch = (props) => {
 	};
 	const inputHasValue = !!value;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["filter-search__wrapper"], className),
+		className: classNames(styles["filter-search__wrapper"], className),
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				className: styles["filter-search__input-wrapper"],
 				ref: inputWrapperRef,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: styles["filter-search__input__label"],
-					children: inputProps["aria-label"] ?? mergedResources.searchPlaceholder
-				}), /* @__PURE__ */ jsx("input", {
-					...inputProps,
-					ref: mergeRefs([inputRef, ref]),
-					value,
-					onChange,
-					className: cn(styles["filter-search__input"], { [styles["filter-search__input--hovered"]]: isWrapperHovered }),
-					placeholder: mergedResources.searchPlaceholder
-				})]
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: styles["filter-search__input__label"],
+						children: inputProps["aria-label"] ?? mergedResources.searchPlaceholder
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: styles["filter-search__input__icon"],
+						children: !withSearchButton && /* @__PURE__ */ jsx(Icon_default, {
+							svgIcon: Search,
+							size: isMobile ? IconSize.XXSmall : IconSize.XSmall
+						})
+					}),
+					/* @__PURE__ */ jsx("input", {
+						...inputProps,
+						ref: mergeRefs([inputRef, ref]),
+						value,
+						onChange,
+						className: classNames(styles["filter-search__input"], {
+							[styles["filter-search__input--hovered"]]: isWrapperHovered,
+							[styles["filter-search__input--with-search-button"]]: withSearchButton
+						}),
+						placeholder: mergedResources.searchPlaceholder
+					})
+				]
 			}),
 			inputHasValue && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -56,22 +69,22 @@ var FilterSearch = (props) => {
 					inputRef.current?.focus();
 				},
 				ref: clearButtonRef,
-				className: cn(styles["filter-search__clear-button"], clearButtonProps?.className),
+				className: classNames(styles["filter-search__clear-button"], clearButtonProps?.className),
 				children: /* @__PURE__ */ jsx(Icon_default, {
 					svgIcon: X,
 					size: IconSize.XXSmall,
 					isHovered: !isMobile && isClearButtonHovered
 				})
 			}),
-			/* @__PURE__ */ jsx("button", {
+			withSearchButton && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": mergedResources.searchButtonAriaLabel,
 				disabled: inputProps.disabled,
 				...buttonProps,
 				ref: buttonRef,
-				className: cn(styles["filter-search__search-button"], buttonProps?.className),
+				className: classNames(styles["filter-search__search-button"], buttonProps?.className),
 				children: /* @__PURE__ */ jsx("div", {
-					className: cn(styles["filter-search__search-button--inner"]),
+					className: classNames(styles["filter-search__search-button--inner"]),
 					children: /* @__PURE__ */ jsx(Icon_default, {
 						svgIcon: Search,
 						size: isMobile ? IconSize.XXSmall : IconSize.XSmall,

package/lib/FilterSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSearch.js","names":[],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n  /** Adds custom classes to the component */\n  className?: string;\n  /** The value given by the user in the input field */\n  value: string | undefined;\n  /** onChange handler for the input field */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Props for the search button */\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Props for the clear button */\n  clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n  const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputWrapperRef = useRef<HTMLLabelElement>(null);\n  const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n  const clearButtonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n  const isMobile = useIsMobileBreakpoint();\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const inputHasValue = !!value;\n\n  return (\n    <div className={classNames(styles['filter-search__wrapper'], className)}>\n      <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n        <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n        <input\n          {...inputProps}\n          ref={mergeRefs([inputRef, ref])}\n          value={value}\n          onChange={onChange}\n          className={classNames(styles['filter-search__input'], {\n            [styles['filter-search__input--hovered']]: isWrapperHovered,\n          })}\n          placeholder={mergedResources.searchPlaceholder}\n        />\n      </label>\n      {inputHasValue && (\n        <button\n          type=\"button\"\n          aria-label={mergedResources.searchClearButtonAriaLabel}\n          disabled={inputProps.disabled}\n          {...clearButtonProps}\n          onClick={e => {\n            clearButtonProps?.onClick?.(e);\n            inputRef.current?.focus();\n          }}\n          ref={clearButtonRef}\n          className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n        >\n          <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n        </button>\n      )}\n      <button\n        type={'button'}\n        aria-label={mergedResources.searchButtonAriaLabel}\n        disabled={inputProps.disabled}\n        {...buttonProps}\n        ref={buttonRef}\n        className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n      >\n        <div className={classNames(styles['filter-search__search-button--inner'])}>\n          <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} isHovered={!inputProps.disabled && isButtonHovered} />\n        </div>\n      </button>\n    </div>\n  );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;;AAmCA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,GAAG,eAAe;CAErG,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,eAAe;CACxE,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,SAAS;CACjE,MAAM,iBAAiB,OAA0B,IAAI;CACrD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,cAAc;CAE3E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAW,OAAO,2BAA2B,SAAS;YAAtE;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;cAA/D,CACE,oBAAC,QAAD;KAAM,WAAW,OAAO;eAAiC,WAAW,iBAAiB,gBAAgB;IAAwB,CAAA,GAC7H,oBAAC,SAAD;KACE,GAAI;KACJ,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;KACvB;KACG;KACV,WAAW,GAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,iBAC7C,CAAC;KACD,aAAa,gBAAgB;IAC9B,CAAA,CACI;;GACN,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,CAAC;KAC7B,SAAS,SAAS,MAAM;IAC1B;IACA,KAAK;IACL,WAAW,GAAW,OAAO,gCAAgC,kBAAkB,SAAS;cAExF,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;IAAuB,CAAA;GACnF,CAAA;GAEV,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,GAAW,OAAO,iCAAiC,aAAa,SAAS;cAEpF,oBAAC,OAAD;KAAK,WAAW,GAAW,OAAO,sCAAsC;eACtE,oBAAC,cAAD;MAAM,SAAS;MAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAQ,WAAW,CAAC,WAAW,YAAY;KAAkB,CAAA;IAC9H,CAAA;GACC,CAAA;EACL;;AAET"}
+{"version":3,"file":"FilterSearch.js","names":[],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n  /** Adds custom classes to the component */\n  className?: string;\n  /** The value given by the user in the input field */\n  value: string | undefined;\n  /** onChange handler for the input field */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Props for the search button */\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Props for the clear button */\n  clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n  /** If the input field should have a separate search/submit button or not */\n  withSearchButton?: boolean;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n  const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, withSearchButton = false, ...inputProps } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputWrapperRef = useRef<HTMLLabelElement>(null);\n  const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n  const clearButtonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n  const isMobile = useIsMobileBreakpoint();\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const inputHasValue = !!value;\n\n  return (\n    <div className={classNames(styles['filter-search__wrapper'], className)}>\n      <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n        <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n        <div className={styles['filter-search__input__icon']}>\n          {!withSearchButton && <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} />}\n        </div>\n        <input\n          {...inputProps}\n          ref={mergeRefs([inputRef, ref])}\n          value={value}\n          onChange={onChange}\n          className={classNames(styles['filter-search__input'], {\n            [styles['filter-search__input--hovered']]: isWrapperHovered,\n            [styles['filter-search__input--with-search-button']]: withSearchButton,\n          })}\n          placeholder={mergedResources.searchPlaceholder}\n        />\n      </label>\n      {inputHasValue && (\n        <button\n          type=\"button\"\n          aria-label={mergedResources.searchClearButtonAriaLabel}\n          disabled={inputProps.disabled}\n          {...clearButtonProps}\n          onClick={e => {\n            clearButtonProps?.onClick?.(e);\n            inputRef.current?.focus();\n          }}\n          ref={clearButtonRef}\n          className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n        >\n          <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n        </button>\n      )}\n      {withSearchButton && (\n        <button\n          type={'button'}\n          aria-label={mergedResources.searchButtonAriaLabel}\n          disabled={inputProps.disabled}\n          {...buttonProps}\n          ref={buttonRef}\n          className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n        >\n          <div className={classNames(styles['filter-search__search-button--inner'])}>\n            <Icon\n              svgIcon={Search}\n              size={isMobile ? IconSize.XXSmall : IconSize.XSmall}\n              isHovered={!inputProps.disabled && isButtonHovered}\n            />\n          </div>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;;AAqCA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,mBAAmB,OAAO,GAAG,eAAe;CAE/H,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,eAAe;CACxE,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,SAAS;CACjE,MAAM,iBAAiB,OAA0B,IAAI;CACrD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,cAAc;CAE3E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,2BAA2B,SAAS;YAAtE;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;cAA/D;KACE,oBAAC,QAAD;MAAM,WAAW,OAAO;gBAAiC,WAAW,iBAAiB,gBAAgB;KAAwB,CAAA;KAC7H,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,CAAC,oBAAoB,oBAAC,cAAD;OAAM,SAAS;OAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAS,CAAA;KAChG,CAAA;KACL,oBAAC,SAAD;MACE,GAAI;MACJ,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;MACvB;MACG;MACV,WAAW,WAAW,OAAO,yBAAyB;QACnD,OAAO,mCAAmC;QAC1C,OAAO,8CAA8C;MACxD,CAAC;MACD,aAAa,gBAAgB;KAC9B,CAAA;IACI;;GACN,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,CAAC;KAC7B,SAAS,SAAS,MAAM;IAC1B;IACA,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,SAAS;cAExF,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;IAAuB,CAAA;GACnF,CAAA;GAET,oBACC,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,SAAS;cAEpF,oBAAC,OAAD;KAAK,WAAW,WAAW,OAAO,sCAAsC;eACtE,oBAAC,cAAD;MACE,SAAS;MACT,MAAM,WAAW,SAAS,UAAU,SAAS;MAC7C,WAAW,CAAC,WAAW,YAAY;KACpC,CAAA;IACE,CAAA;GACC,CAAA;EAEP;;AAET"}

package/lib/FormFieldTag.js

@@ -1,6 +1,6 @@
 import { AnalyticsId, LanguageLocales } from "./constants.js";
 import { useLanguage } from "./hooks/useLanguage.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/FormFieldTag/styles.module.scss";
 var HN_Designsystem_FormFieldTag_en_GB_default = {
@@ -73,7 +73,7 @@ var FormFieldTag = (props) => {
 		id,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.FormFieldTag,
-		className: cn(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: isOptional }),
+		className: classNames(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: isOptional }),
 		children: textMap[level]
 	});
 };

package/lib/FormFieldTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTag.js","names":[],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAA0D;CACrF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACUA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;CAC9C;CAEA,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,WAAW,CAAC;YAEnG,QAAQ;CACL,CAAA;AAEV;;;AC5DA,IAAA,uBAAe"}
+{"version":3,"file":"FormFieldTag.js","names":[],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAA0D;CACrF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACUA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;CAC9C;CAEA,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,WAAW,CAAC;YAEnG,QAAQ;CACL,CAAA;AAEV;;;AC5DA,IAAA,uBAAe"}

package/lib/FormGroup.js

@@ -11,7 +11,7 @@ import { t as Input } from "./Input.js";
 import { t as RadioButton } from "./RadioButton.js";
 import { t as Slider_default } from "./Slider.js";
 import { t as Textarea_default } from "./Textarea.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
@@ -22,11 +22,11 @@ var FormGroup = (props) => {
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onDark = onColor === FormOnColor.ondark;
-	const formGroupWrapperClasses = cn(formGroupStyles["form-group-wrapper"], className);
-	const titleClasses = cn({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
+	const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
+	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
 	const CustomTagForLegend = legendHtmlMarkup;
-	const legendClasses = cn(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
-	const fieldsetClasses = cn(formGroupStyles["field-set"], fieldsetClassName);
+	const legendClasses = classNames(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
+	const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
 	const mapFormComponent = (child, index) => {
 		if (isComponent(child, FormLayout_default)) return React.cloneElement(child, {
 			size,

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const radioGroupId = useId();\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      const groupChecked =\n        child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        checked: groupChecked,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,IAAa,aAAuC,UAA0B;CAC5E,MAAM,EACJ,gBACA,WACA,aAAa,iBACb,mBACA,cACA,iBACA,UACA,UAAU,YAAY,SACtB,OAAO,SAAS,QAChB,OACA,MACA,aAAa,YACb,cAAc,MACd,uBACA,oBACA,iBACA,mBAAmB,MACnB,kBAAkB,SAChB;CACJ,MAAM,eAAe,MAAM;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,0BAA0B,GAAW,gBAAgB,uBAAuB,SAAS;CAC3F,MAAM,eAAe,GAAW,GAC7B,gBAAgB,wCAAwC,UAAU,CAAC,MACtE,CAAC;CAED,MAAM,qBAAqB;CAE3B,MAAM,gBAAgB,GACpB,gBAAgB,sBAChB,GACG,gBAAgB,gCAAgC,UAAU,CAAC,MAC9D,GACA,eACF;CAEA,MAAM,kBAAkB,GAAW,gBAAgB,cAAc,iBAAiB;CAElF,MAAM,oBAAoB,OAAwB,UAAmC;EACnF,IAAI,YAA6B,OAAO,kBAAU,GAChD,OAAO,MAAM,aAAa,OAAO;GAC/B;GACA,WAAW;EACb,CAAC;OACI,IAAI,YAA4B,OAAO,SAAS,GACrD,OAAO,MAAM,aAAa,OAAO;GAC/B;GACA;GACA;GACA,aAAa;GACA;EACf,CAAC;OACI,IAAI,YAA2B,OAAO,QAAQ,GACnD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAA8B,OAAO,WAAW,GAAG;GAC5D,MAAM,UAAU,OAAO,MAAM,MAAM,YAAY,cAAc,eAAe,QAAQ,MAAM,MAAM;GAChG,MAAM,eACJ,MAAM,MAAM,YAAY,KAAA,IAAY,MAAM,MAAM,UAAU,mBAAmB,KAAA,IAAY,mBAAmB,UAAU,KAAA;GACxH,OAAO,MAAM,aAAa,OAAO;IAC/B,SAAS;IACT,MAAM,QAAQ,MAAM,MAAM;IAC1B;IACA;IACA,SAAS;IACT,WAAW,UAA+C;KACxD,kBAAkB,MAAM,OAAO,EAAE;KACjC,IAAI,MAAM,MAAM,UAAU,MAAM,MAAM,SAAS,KAAK;IACtD;IACA,OAAO,CAAC,CAAC;IACI;GACf,CAAC;EACH,OAAO,IAAI,YAAwB,OAAO,KAAK,GAC7C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAA2B,OAAO,gBAAQ,GACnD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAAyB,OAAO,cAAM,GAC/C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;EACf,CAAC;OACI,IAAI,YAAyB,OAAO,cAAM,GAC/C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B,OAAO,CAAC,CAAC;GACI;EACf,CAAC;EAEH,OAAO;CACT;CAEA,MAAM,yBAA0C;EAC9C,OACE,qBAAC,OAAD,EAAA,UAAA,CACG,eAAe,SACd,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,oBAAD;IAAoB,IAAI;IAAU,WAAW;cAA7C,CACG,MAAM,QACN,gBAAgB,YAA+B,cAAc,oBAAY,KAAK,MAAM,aAAa,YAAY,CAC5F;MACpB,CAAA,GAEH,MAAM,SAAS,IAAI,MAAM,UAAU,gBAAgB,CACjD;MAEN,eAAe,cACd,qBAAC,YAAD;GAAU,mBAAiB;GAAgB,MAAM,MAAM;GAAc,WAAW;aAAhF,CACG,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,UAAD;IAAQ,IAAI;IAAU,WAAW;cAAjC,CACG,MAAM,QACN,gBAAgB,YAA+B,cAAc,oBAAY,KAAK,MAAM,aAAa,YAAY,CACxG;MACR,CAAA,GAEH,MAAM,SAAS,IAAI,MAAM,UAAU,gBAAgB,CAC5C;IAET,EAAA,CAAA;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAW,WAAW;YAApF,CACG,MAAM,SACL,oBAAC,eAAD;GACE,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,QAAQ;IAAE,WAAW;IAAG,cAAc,QAAQ,IAAI;GAAE;aAEnD,MAAM;EACF,CAAA,GAET,oBAAC,sBAAD;GACE,WAAW;GACX,WAAW;GACX,QAAQ;GACK;GACI;GACJ;aAEZ,iBAAiB;EACN,CAAA,CACX;;AAET;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const radioGroupId = useId();\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      const groupChecked =\n        child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        checked: groupChecked,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/lib/FormLayout.js

@@ -1,5 +1,5 @@
 import { AnalyticsId, FormSize } from "./constants.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormLayout/styles.module.scss";
@@ -17,8 +17,8 @@ var FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns) {
 var FormLayout = (props) => {
 	const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;
 	const cssVariable = { "--min-col-width": `${colMinWidth}px` };
-	const formLayoutContainerClasses = cn(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
-	const formLayoutChildClasses = cn(formGroupStyles["form-layout-child"], {
+	const formLayoutContainerClasses = classNames(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
+	const formLayoutChildClasses = classNames(formGroupStyles["form-layout-child"], {
 		[formGroupStyles["form-layout-child--two"]]: columns === FormLayoutColumns.two,
 		[formGroupStyles["form-layout-child--three"]]: columns === FormLayoutColumns.three,
 		[formGroupStyles["form-layout-child--four"]]: columns === FormLayoutColumns.four,

package/lib/FormLayout.js.map

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

package/lib/HelpDetails.js

@@ -1,5 +1,5 @@
 import { _ as autoUpdate, d as arrow, g as size, m as offset, o as useFloating, t as FloatingArrow } from "./floating-ui.react.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpDetails/styles.module.scss";
@@ -19,15 +19,16 @@ var HelpDetails = (props) => {
 				setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);
 				const { reference, floating } = rects;
 				const controllerBottom = reference.y + reference.height;
-				setArrowYOffsetValue(floating.y - controllerBottom + BUBBLE_Y_OFFSET);
+				const distance = floating.y - controllerBottom + BUBBLE_Y_OFFSET;
+				setArrowYOffsetValue(distance);
 			} })
 		],
 		placement: "bottom",
 		whileElementsMounted: autoUpdate,
 		elements: { reference: controllerRef?.current }
 	});
-	const helpDetailsClasses = cn(styles["help-details"], controllerRef ? styles["help-details--inline"] : styles["help-details--standalone"]);
-	const contentClasses = cn(controllerRef ? styles["help-details__content--inline"] : styles["help-details__content--standalone"]);
+	const helpDetailsClasses = classNames(styles["help-details"], controllerRef ? styles["help-details--inline"] : styles["help-details--standalone"]);
+	const contentClasses = classNames(controllerRef ? styles["help-details__content--inline"] : styles["help-details__content--standalone"]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: helpDetailsClasses,
 		"data-testid": testId,

package/lib/HelpDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpDetails.js","names":[],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n  const { children, controllerRef, testId, ref } = props;\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAM,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,IAAI;CAC9E,MAAM,CAAC,mBAAmB,wBAAwB,SAAiB;CAEnE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,iBAAiB;GACxB,iBAAiB,MAAM,EAAE,SAAS,SAAS,CAAC;GAC5C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,CAAC;IAG/D,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAGjD,qBAFkB,SAAS,IACE,mBAAmB,eACnB;GAC/B,EACF,CAAC;EACH;EACA,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,QAC5B;CACF,CAAC;CAED,MAAM,qBAAqB,GACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,2BAC1D;CACA,MAAM,iBAAiB,GAAW,gBAAgB,OAAO,mCAAmC,OAAO,oCAAoC;CAEvI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,EAAU;YAJ9F,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA;EAEA,CAAA,GACL,oBAAC,OAAD;GAAK,WAAW;GAAiB;EAAc,CAAA,CAC5C;;AAET;AAEA,YAAY,cAAc"}
+{"version":3,"file":"HelpDetails.js","names":[],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n  const { children, controllerRef, testId, ref } = props;\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAM,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,IAAI;CAC9E,MAAM,CAAC,mBAAmB,wBAAwB,SAAiB;CAEnE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,iBAAiB;GACxB,iBAAiB,MAAM,EAAE,SAAS,SAAS,CAAC;GAC5C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,CAAC;IAG/D,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAEjD,MAAM,WADY,SAAS,IACE,mBAAmB;IAChD,qBAAqB,QAAQ;GAC/B,EACF,CAAC;EACH;EACA,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,QAC5B;CACF,CAAC;CAED,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,2BAC1D;CACA,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,oCAAoC;CAEvI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,EAAU;YAJ9F,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA;EAEA,CAAA,GACL,oBAAC,OAAD;GAAK,WAAW;GAAiB;EAAc,CAAA,CAC5C;;AAET;AAEA,YAAY,cAAc"}

package/lib/HelpTriggerIcon.js

@@ -3,7 +3,7 @@ import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
 import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerIcon/styles.module.scss";
@@ -154,7 +154,7 @@ var HelpTriggerIconInternal = (props) => {
 		weight
 	});
 	const isButton = htmlMarkup === "button";
-	const iconClasses = cn(styles["help-trigger-icon"], {
+	const iconClasses = classNames(styles["help-trigger-icon"], {
 		[styles["help-trigger-icon--strong"]]: weight === "strong",
 		[styles["help-trigger-icon--is-button"]]: isButton
 	}, styles[`help-trigger-icon--${size}`], className);