@helsenorge/designsystem-react 15.0.0-beta.1 → 15.1.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  /** 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    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({\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      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\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  /** 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    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({\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      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\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.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,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;CAEjD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,WAC5C,CAAC;aAHJ,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;IAAU,CAAA,EACtE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;IAAwB,CAAA,CACpF;;EACA,CAAA;;;;AC1Cb,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.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 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}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      {filterChips}\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;AAeA,IAAM,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;CAClI,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,mBAAmB;EAAE,eAAa;YAApE,CACG,uBACA,YACG;;;;;AClBV,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 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}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      {filterChips}\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;AAeA,IAAM,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;CAClI,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACA,WACE;;AAET;;;ACpBA,IAAA,sCAAe"}

package/lib/FilterDrawer.js

@@ -4,6 +4,7 @@ import { t as Button_default } from "./Button.js";
 import { formatResource } from "./utils/resource.js";
 import { t as DrawerNavigation } from "./DrawerNavigation.js";
 import { t as getResources } from "./resourceHelper.js";
+import { t as LoaderSpinner } from "./LoaderSpinner.js";
 import { Children, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterDrawer/styles.module.scss";
@@ -21,7 +22,7 @@ function FilterDrawerOverview(_props) {
 function FilterDrawerView(_props) {
 	return null;
 }
-function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources, children }) {
+function FilterDrawer({ drawer, onClose, footer, isLoading, onReset, resultCount, resources, children }) {
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
 	const mergedResources = {
 		...getResources(language),
@@ -31,33 +32,42 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 		if (onClose) onClose();
 		else drawer.close();
 	};
-	const showResultButtonText = resultCount !== void 0 ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;
 	const defaultResetButton = onReset && /* @__PURE__ */ jsx(Button_default, {
 		onClick: onReset,
 		variant: "borderless",
 		children: mergedResources.resetButtonText
 	});
-	const defaultShowResultsButton = showResultButtonText && /* @__PURE__ */ jsx(Button_default, {
+	const defaultShowResultsButton = /* @__PURE__ */ jsx(Button_default, {
 		onClick: handleClose,
-		children: showResultButtonText
+		children: mergedResources.showButtonText
 	});
-	const defaultFooter = onReset || showResultButtonText ? /* @__PURE__ */ jsxs("div", {
+	const resultText = resultCount !== void 0 ? /* @__PURE__ */ jsx("span", { children: formatResource(mergedResources.resultsText, resultCount) }) : void 0;
+	const resultContent = isLoading ? /* @__PURE__ */ jsx(LoaderSpinner, { resources: mergedResources }) : resultText;
+	const defaultFooterRight = (resultContent || defaultShowResultsButton) && /* @__PURE__ */ jsxs("div", {
+		className: styles["filter-drawer__footer__right"],
+		children: [resultContent, defaultShowResultsButton]
+	});
+	const defaultFooter = onReset || resultContent ? /* @__PURE__ */ jsxs("div", {
 		className: styles["filter-drawer__footer"],
-		children: [defaultResetButton, defaultShowResultsButton]
+		children: [defaultResetButton, defaultFooterRight]
 	}) : void 0;
 	const fallbackFooter = footer ?? defaultFooter;
 	const generateViewFooter = (viewOnReset, viewOnClose, noResetButton) => {
 		if (!viewOnReset && !viewOnClose && !noResetButton) return;
+		const viewShowButton = viewOnClose ? /* @__PURE__ */ jsx(Button_default, {
+			onClick: viewOnClose,
+			children: mergedResources.showButtonText
+		}) : defaultShowResultsButton;
 		return /* @__PURE__ */ jsxs("div", {
 			className: styles["filter-drawer__footer"],
 			children: [!noResetButton && (viewOnReset ? /* @__PURE__ */ jsx(Button_default, {
 				onClick: viewOnReset,
 				variant: "borderless",
 				children: mergedResources.resetButtonText
-			}) : defaultResetButton), viewOnClose ? /* @__PURE__ */ jsx(Button_default, {
-				onClick: viewOnClose,
-				children: showResultButtonText ?? mergedResources.showButtonText
-			}) : defaultShowResultsButton]
+			}) : defaultResetButton), (resultContent || viewShowButton) && /* @__PURE__ */ jsxs("div", {
+				className: styles["filter-drawer__footer__right"],
+				children: [resultContent, viewShowButton]
+			})]
 		});
 	};
 	const processedChildren = Children.map(children, (child) => {

package/lib/FilterDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n  /** The drawer state from useFilterDrawer */\n  drawer: UseFilterDrawerReturn<ViewId>;\n  /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n  onClose?: () => void;\n  /** Fully custom footer — overrides the default footer built from onReset/resultText */\n  footer?: React.ReactNode;\n  /** If provided, shows a \"Nullstill filter\" button in the default footer */\n  onReset?: () => void;\n  /** If provided, shows a result count button (e.g. \"Vis 5 treff\") that closes the drawer */\n  resultCount?: number;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** DrawerNavigation.View children defining the overview and filter views */\n  children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n  /** Hide reset button for view */\n  noResetButton?: boolean;\n  /** View specific close handler */\n  onClose?: () => void;\n  /** View specific reset handler */\n  onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n  return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n  drawer,\n  onClose,\n  footer,\n  onReset,\n  resultCount,\n  resources,\n  children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    } else {\n      drawer.close();\n    }\n  };\n\n  const showResultButtonText =\n    resultCount !== undefined ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;\n\n  const defaultResetButton = onReset && (\n    <Button onClick={onReset} variant=\"borderless\">\n      {mergedResources.resetButtonText}\n    </Button>\n  );\n  const defaultShowResultsButton = showResultButtonText && <Button onClick={handleClose}>{showResultButtonText}</Button>;\n\n  const defaultFooter =\n    onReset || showResultButtonText ? (\n      <div className={styles['filter-drawer__footer']}>\n        {defaultResetButton}\n        {defaultShowResultsButton}\n      </div>\n    ) : undefined;\n\n  const fallbackFooter = footer ?? defaultFooter;\n\n  const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n    if (!viewOnReset && !viewOnClose && !noResetButton) {\n      return undefined;\n    }\n\n    return (\n      <div className={styles['filter-drawer__footer']}>\n        {!noResetButton &&\n          (viewOnReset ? (\n            <Button onClick={viewOnReset} variant=\"borderless\">\n              {mergedResources.resetButtonText}\n            </Button>\n          ) : (\n            defaultResetButton\n          ))}\n        {viewOnClose ? (\n          <Button onClick={viewOnClose}>{showResultButtonText ?? mergedResources.showButtonText}</Button>\n        ) : (\n          defaultShowResultsButton\n        )}\n      </div>\n    );\n  };\n\n  const processedChildren = Children.map(children, child => {\n    if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id=\"overview\"\n          home\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    }\n    if (isValidElement<FilterDrawerViewProps>(child)) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id={child.props.id}\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    } else {\n      return child;\n    }\n  });\n\n  return (\n    <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n      {processedChildren}\n    </DrawerNavigation>\n  );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;AA6CA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;;;;;AAOT,SAAS,iBAAiB,QAAgD;CAExE,OAAO;;AAGT,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAE5E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,SAEjC;EACH,GAAG;EACJ;CAED,MAAM,oBAA0B;EAC9B,IAAI,SACF,SAAS;OAET,OAAO,OAAO;;CAIlB,MAAM,uBACJ,gBAAgB,KAAA,IAAY,eAAe,gBAAgB,gBAAgB,YAAY,GAAG,gBAAgB;CAE5G,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;EACV,CAAA;CAEX,MAAM,2BAA2B,wBAAwB,oBAAC,gBAAD;EAAQ,SAAS;YAAc;EAA8B,CAAA;CAEtH,MAAM,gBACJ,WAAW,uBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,oBACA,yBACG;MACJ,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;cACnC,gBAAgB;IACV,CAAA,GAET,qBAEH,cACC,oBAAC,gBAAD;IAAQ,SAAS;cAAc,wBAAwB,gBAAgB;IAAwB,CAAA,GAE/F,yBAEE;;;CAIV,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,MAAM,IAAI,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAChF,IAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAG;IACH,MAAA;IACA,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;IACR,CAAA;;EAGN,IAAI,eAAsC,MAAM,EAAE;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAChF,IAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;IACR,CAAA;SAGJ,OAAO;GAET;CAEF,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;EACgB,CAAA;;AAIvB,aAAa,WAAW;AACxB,aAAa,OAAO;;;ACpKpB,IAAA,uBAAe"}
+{"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport LoaderSpinner from '../LoaderSpinner/LoaderSpinner';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n  /** The drawer state from useFilterDrawer */\n  drawer: UseFilterDrawerReturn<ViewId>;\n  /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n  onClose?: () => void;\n  /** Fully custom footer — overrides the default footer built from onReset/resultText */\n  footer?: React.ReactNode;\n  /** Shows LoaderSpinner in the footer when turned on */\n  isLoading?: boolean;\n  /** If provided, shows a \"Nullstill filter\" button in the default footer */\n  onReset?: () => void;\n  /** If provided, shows a result count in the footer */\n  resultCount?: number;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** DrawerNavigation.View children defining the overview and filter views */\n  children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n  /** Hide reset button for view */\n  noResetButton?: boolean;\n  /** View specific close handler */\n  onClose?: () => void;\n  /** View specific reset handler */\n  onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n  return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n  drawer,\n  onClose,\n  footer,\n  isLoading,\n  onReset,\n  resultCount,\n  resources,\n  children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    } else {\n      drawer.close();\n    }\n  };\n\n  const defaultResetButton = onReset && (\n    <Button onClick={onReset} variant=\"borderless\">\n      {mergedResources.resetButtonText}\n    </Button>\n  );\n  const defaultShowResultsButton = <Button onClick={handleClose}>{mergedResources.showButtonText}</Button>;\n\n  const resultText = resultCount !== undefined ? <span>{formatResource(mergedResources.resultsText, resultCount)}</span> : undefined;\n  const resultContent = isLoading ? <LoaderSpinner resources={mergedResources} /> : resultText;\n\n  const defaultFooterRight = (resultContent || defaultShowResultsButton) && (\n    <div className={styles['filter-drawer__footer__right']}>\n      {resultContent}\n      {defaultShowResultsButton}\n    </div>\n  );\n\n  const defaultFooter =\n    onReset || resultContent ? (\n      <div className={styles['filter-drawer__footer']}>\n        {defaultResetButton}\n        {defaultFooterRight}\n      </div>\n    ) : undefined;\n\n  const fallbackFooter = footer ?? defaultFooter;\n\n  const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n    if (!viewOnReset && !viewOnClose && !noResetButton) {\n      return undefined;\n    }\n\n    const viewShowButton = viewOnClose ? <Button onClick={viewOnClose}>{mergedResources.showButtonText}</Button> : defaultShowResultsButton;\n\n    return (\n      <div className={styles['filter-drawer__footer']}>\n        {!noResetButton &&\n          (viewOnReset ? (\n            <Button onClick={viewOnReset} variant=\"borderless\">\n              {mergedResources.resetButtonText}\n            </Button>\n          ) : (\n            defaultResetButton\n          ))}\n        {(resultContent || viewShowButton) && (\n          <div className={styles['filter-drawer__footer__right']}>\n            {resultContent}\n            {viewShowButton}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const processedChildren = Children.map(children, child => {\n    if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id=\"overview\"\n          home\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    }\n    if (isValidElement<FilterDrawerViewProps>(child)) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id={child.props.id}\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    } else {\n      return child;\n    }\n  });\n\n  return (\n    <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n      {processedChildren}\n    </DrawerNavigation>\n  );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;;AAgDA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;AACT;;;;AAMA,SAAS,iBAAiB,QAAgD;CAExE,OAAO;AACT;AAEA,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,WACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,MAAM,oBAA0B;EAC9B,IAAI,SACF,QAAQ;OAER,OAAO,MAAM;CAEjB;CAEA,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;CACX,CAAA;CAEV,MAAM,2BAA2B,oBAAC,gBAAD;EAAQ,SAAS;YAAc,gBAAgB;CAAuB,CAAA;CAEvG,MAAM,aAAa,gBAAgB,KAAA,IAAY,oBAAC,QAAD,EAAA,UAAO,eAAe,gBAAgB,aAAa,WAAW,EAAQ,CAAA,IAAI,KAAA;CACzH,MAAM,gBAAgB,YAAY,oBAAC,eAAD,EAAe,WAAW,gBAAkB,CAAA,IAAI;CAElF,MAAM,sBAAsB,iBAAiB,6BAC3C,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,eACA,wBACE;;CAGP,MAAM,gBACJ,WAAW,gBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,oBACA,kBACE;MACH,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,MAAM,iBAAiB,cAAc,oBAAC,gBAAD;GAAQ,SAAS;aAAc,gBAAgB;EAAuB,CAAA,IAAI;EAE/G,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;cACnC,gBAAgB;GACX,CAAA,IAER,sBAEF,iBAAiB,mBACjB,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,eACA,cACE;KAEJ;;CAET;CAEA,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,KAAK,KAAK,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAG;IACH,MAAA;IACA,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;GACT,CAAA;EAEL;EACA,IAAI,eAAsC,KAAK,GAAG;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;GACT,CAAA;EAEL,OACE,OAAO;CAEX,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;CACe,CAAA;AAEtB;AAEA,aAAa,WAAW;AACxB,aAAa,OAAO;;;AClLpB,IAAA,uBAAe"}

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    /** 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                <div className={styles['link-list__chip-list']}>\n                  {chips.map(chip => (\n                    <span className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </span>\n                  ))}\n                </div>\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":";;;;;;;;;AAkDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,QAAQ;CAEpF,MAAM,YAAY,WAAG,OAAO,mBAAmB;CAC/C,MAAM,cAAc,WAAG,OAAO,sBAAsB,UAAU;CAE9D,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,OAAa,CAAA,EACnB,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;KAAK,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAD;MAAM,WAAW,OAAO;gBACrB;MACI,EAF0C,KAE1C,CACP;KACE,CAAA,CAEP,EAAA,CAAA,GAEH,oBAAA,UAAA,EAAG,UAAY,CAAA;IAEb,CAAA,EACN,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;IAA0C,CAAA,CACpH;;EACN,CAAA;;AAIT,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,UAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,MAAM,IAAI,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,MAAM;IAElC;EACC,CAAA;;AAIT,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    /** 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                <div className={styles['link-list__chip-list']}>\n                  {chips.map(chip => (\n                    <span className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </span>\n                  ))}\n                </div>\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":";;;;;;;;;AAkDA,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,OAAD;KAAK,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAD;MAAM,WAAW,OAAO;gBACrB;KACG,GAF2C,IAE3C,CACP;IACE,CAAA,CAEP,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/FilterOverviewLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,qBAAqB;CAE1C,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,IAAI,EACpB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,EAAE,CAAC;OAClD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,IAAI,CAAC;OAE7C,QAAQ,EAAE;EAGZ,OAAO,oBAAC,eAAe,MAAhB;GAA4C;GAAc;GAAO,eAAe,SAAS,UAAU,UAAU;GAAI,EAAvF,UAAuF;GACxH,EACa,CAAA;;;;ACxCrB,IAAA,iCAAe"}
+{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,GAAG,GACnB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,CAAC,CAAC;OACjD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,GAAG,CAAC;OAE5C,QAAQ,CAAC;EAGX,OAAO,oBAAC,eAAe,MAAhB;GAA4C;GAAc;GAAO,eAAe,SAAS,UAAU,SAAS;EAAI,GAAtF,SAAsF;CACzH,CAAC,EACa,CAAA;AAEpB;;;AC1CA,IAAA,iCAAe"}

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,WAAG,OAAO,2BAA2B,iBAAiB;EAAE,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,mBAAqB,CAAA;EACnC,CAAA;;;;ACnBV,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/FilterResultCountAndSortWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;GAAmB,CAAA,EAC5F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;GAAqB,CAAA,CACzF;;;;;ACdV,IAAA,0CAAe"}
+{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;EAAkB,CAAA,GAC3F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;EAAoB,CAAA,CACzF;;AAET;;;AChBA,IAAA,0CAAe"}

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,KAAK;CAC/C,MAAM,kBAAkB,OAAyB,KAAK;CACtD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,gBAAgB;CACzE,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,UAAU;CAClE,MAAM,iBAAiB,OAA0B,KAAK;CACtD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,eAAe;CAE5E,MAAM,WAAW,uBAAuB;CAExC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,2BAA2B,UAAU;YAAvE;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;cAA/D,CACE,oBAAC,QAAD;KAAM,WAAW,OAAO;eAAiC,WAAW,iBAAiB,gBAAgB;KAAyB,CAAA,EAC9H,oBAAC,SAAD;KACE,GAAI;KACJ,KAAK,UAAU,CAAC,UAAU,IAAI,CAAC;KACxB;KACG;KACV,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,kBAC5C,CAAC;KACF,aAAa,gBAAgB;KAC7B,CAAA,CACI;;GACP,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,EAAE;KAC9B,SAAS,SAAS,OAAO;;IAE3B,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,UAAU;cAEzF,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;KAAwB,CAAA;IACnF,CAAA;GAEX,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,UAAU;cAErF,oBAAC,OAAD;KAAK,WAAW,WAAW,OAAO,uCAAuC;eACvE,oBAAC,cAAD;MAAM,SAAS;MAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAQ,WAAW,CAAC,WAAW,YAAY;MAAmB,CAAA;KAC9H,CAAA;IACC,CAAA;GACL"}
+{"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,WAAW,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,WAAW,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,WAAW,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,WAAW,OAAO,iCAAiC,aAAa,SAAS;cAEpF,oBAAC,OAAD;KAAK,WAAW,WAAW,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"}

package/lib/FilterSort.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSort.js","names":[],"sources":["../src/components/Filter/FilterSort/FilterSort.tsx","../src/components/Filter/FilterSort/index.ts"],"sourcesContent":["import type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport Label from '../../Label';\nimport Select, { type SelectProps } from '../../Select';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSortProps extends SelectProps {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterSort: React.FC<FilterSortProps> = props => {\n  const { children, 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  return (\n    <Select\n      {...props}\n      label={<Label labelTexts={[{ text: `${mergedResources.sortLabel}:`, type: 'subdued' }]} />}\n      labelClassName={styles['select__label']}\n      className={styles['select']}\n      wrapperClassName={styles['select__wrapper']}\n    >\n      {children}\n    </Select>\n  );\n};\n\nexport default FilterSort;\n","import FilterSort from './FilterSort';\nexport * from './FilterSort';\nexport default FilterSort;\n"],"mappings":";;;;;;;;AAeA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,OAAO,oBAAC,eAAD,EAAO,YAAY,CAAC;GAAE,MAAM,GAAG,gBAAgB,UAAU;GAAI,MAAM;GAAW,CAAC,EAAI,CAAA;EAC1F,gBAAgB,OAAO;EACvB,WAAW,OAAO;EAClB,kBAAkB,OAAO;EAExB;EACM,CAAA;;;;ACjCb,IAAA,qBAAe"}
+{"version":3,"file":"FilterSort.js","names":[],"sources":["../src/components/Filter/FilterSort/FilterSort.tsx","../src/components/Filter/FilterSort/index.ts"],"sourcesContent":["import type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport Label from '../../Label';\nimport Select, { type SelectProps } from '../../Select';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSortProps extends SelectProps {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterSort: React.FC<FilterSortProps> = props => {\n  const { children, 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  return (\n    <Select\n      {...props}\n      label={<Label labelTexts={[{ text: `${mergedResources.sortLabel}:`, type: 'subdued' }]} />}\n      labelClassName={styles['select__label']}\n      className={styles['select']}\n      wrapperClassName={styles['select__wrapper']}\n    >\n      {children}\n    </Select>\n  );\n};\n\nexport default FilterSort;\n","import FilterSort from './FilterSort';\nexport * from './FilterSort';\nexport default FilterSort;\n"],"mappings":";;;;;;;;AAeA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,OAAO,oBAAC,eAAD,EAAO,YAAY,CAAC;GAAE,MAAM,GAAG,gBAAgB,UAAU;GAAI,MAAM;EAAU,CAAC,EAAI,CAAA;EACzF,gBAAgB,OAAO;EACvB,WAAW,OAAO;EAClB,kBAAkB,OAAO;EAExB;CACK,CAAA;AAEZ;;;ACnCA,IAAA,qBAAe"}

package/lib/FilterStateWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterStateWrapper.js","names":[],"sources":["../src/components/Filter/FilterStateWrapper/FilterStateWrapper.tsx","../src/components/Filter/FilterStateWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterStateWrapperProps {\n  /** Content to be rendered inside the wrapper */\n  children: React.ReactNode;\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterStateWrapper: React.FC<FilterStateWrapperProps> = ({ children, testId }) => {\n  return (\n    <div className={styles['filter-state-wrapper']} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default FilterStateWrapper;\n","import FilterStateWrapper from './FilterStateWrapper';\nexport * from './FilterStateWrapper';\nexport default FilterStateWrapper;\n"],"mappings":";;;AAWA,IAAM,sBAAyD,EAAE,UAAU,aAAa;CACtF,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAyB,eAAa;EAC1D;EACG,CAAA;;;;ACbV,IAAA,6BAAe"}
+{"version":3,"file":"FilterStateWrapper.js","names":[],"sources":["../src/components/Filter/FilterStateWrapper/FilterStateWrapper.tsx","../src/components/Filter/FilterStateWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterStateWrapperProps {\n  /** Content to be rendered inside the wrapper */\n  children: React.ReactNode;\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterStateWrapper: React.FC<FilterStateWrapperProps> = ({ children, testId }) => {\n  return (\n    <div className={styles['filter-state-wrapper']} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default FilterStateWrapper;\n","import FilterStateWrapper from './FilterStateWrapper';\nexport * from './FilterStateWrapper';\nexport default FilterStateWrapper;\n"],"mappings":";;;AAWA,IAAM,sBAAyD,EAAE,UAAU,aAAa;CACtF,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAyB,eAAa;EAC1D;CACE,CAAA;AAET;;;ACfA,IAAA,6BAAe"}

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;;;;;ACYb,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;CAED,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;EACJ,CAAA;;;;AC1DX,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

@@ -8,7 +8,7 @@ import Title_default from "./components/Title/index.js";
 import { t as Select_default } from "./Select.js";
 import { t as FormLayout_default } from "./FormLayout.js";
 import { t as Input } from "./Input.js";
-import { n as RadioButton, t as getRadioLabelClasses } from "./utils3.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 classNames from "classnames";
@@ -18,11 +18,10 @@ import formGroupStyles from "./components/FormGroup/styles.module.scss";
 //#region src/components/FormGroup/FormGroup.tsx
 var FormGroup = (props) => {
 	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, legendId, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
-	const [checkedRadioId, setCheckedRadioId] = useState();
 	const radioGroupId = useId();
+	const [checkedRadioId, setCheckedRadioId] = useState();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onDark = onColor === FormOnColor.ondark;
-	const isLarge = size === FormSize.large;
 	const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
 	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
 	const CustomTagForLegend = legendHtmlMarkup;
@@ -49,18 +48,19 @@ var FormGroup = (props) => {
 		});
 		else if (isComponent(child, RadioButton)) {
 			const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
+			const groupChecked = child.props.checked !== void 0 ? child.props.checked : checkedRadioId !== void 0 ? checkedRadioId === radioId : void 0;
 			return React.cloneElement(child, {
 				inputId: radioId,
 				name: name ?? child.props.name,
 				onColor,
 				size,
+				checked: groupChecked,
 				onChange: (event) => {
 					setCheckedRadioId(event.target.id);
 					if (child.props.onChange) child.props.onChange(event);
 				},
 				error: !!error,
-				errorTextId,
-				labelClassNames: getRadioLabelClasses(radioId, onColor, isLarge, checkedRadioId)
+				errorTextId
 			});
 		} else if (isComponent(child, Input)) return React.cloneElement(child, {
 			name: name ?? child.props.name,

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 { getRadioLabelClasses } from '../RadioButton/utils';\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 [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\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      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\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        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\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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"}
+{"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.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,SAAM;CACN,kBAAA,SAAM;CACN,kBAAA,WAAQ;CACR,kBAAA,UAAO;CACP,kBAAA,UAAO;;KACR;;;ACsBD,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,KAAK;CAC7D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,OACtE,EACD,UACD;CACD,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;EAC7E,CAAC;CAEF,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,MAAM,GAAG;IAAY,CAAA;IAClG;EACE,CAAA;;AAIV,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.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,KAAK;CAC7B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,KAAK;CAC/E,MAAM,CAAC,mBAAmB,wBAAwB,UAAkB;CAEpE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,kBAAkB;GACzB,iBAAiB,MAAM,EAAE,SAAS,UAAU,CAAC;GAC7C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,EAAE;IAGhE,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAGjD,qBAFkB,SAAS,IACE,mBAAmB,gBAClB;MAEjC,CAAC;GACH;EACD,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,SAC3B;EACF,CAAC;CAEF,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,4BACzD;CACD,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,qCAAqC;CAExI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,GAAW;YAJ/F,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;IACb,CAAA;GAEA,CAAA,EACN,oBAAC,OAAD;GAAK,WAAW;GAAiB;GAAe,CAAA,CAC5C;;;AAIV,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;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,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"}