@helsenorge/designsystem-react 14.7.2 → 15.0.0-beta.0

package/lib/ElementHeader.js

@@ -1,19 +1,20 @@
-import { a as IconSize } from "./constants2.js";
+import { IconSize } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
 import { n as AvatarSize, t as Avatar_default } from "./Avatar.js";
 import { t as Badge_default } from "./Badge.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
-import { n as isComponentWithChildren, t as isComponent } from "./component.js";
-import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
+import { isComponent, isComponentWithChildren } from "./utils/component.js";
+import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
 import { t as StatusDot_default } from "./StatusDot.js";
 import { t as Highlighter_default } from "./Highlighter.js";
-import { n as ElementHeaderText, r as ElementHeaderText_default } from "./ElementHeaderText.js";
+import { n as ElementHeaderText } from "./ElementHeaderText.js";
 import { n as StatusDotList, t as StatusDotList_default } from "./StatusDotList.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
-const mapChildren = (children, isJsxChild = false) => {
+//#region src/components/ElementHeader/utils.tsx
+var mapChildren = (children, isJsxChild = false) => {
 	let avatarChild;
 	const badgeChildren = [];
 	const statusDotChildren = [];
@@ -44,9 +45,9 @@ const mapChildren = (children, isJsxChild = false) => {
 	};
 	if (isComponentWithChildren(remainingChildren[0])) return mapChildren(remainingChildren[0]?.props?.children, true);
 };
-const renderElementHeader = (element, options) => {
+var renderElementHeader = (element, options) => {
 	const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;
-	if (isComponent(element, ElementHeader_default)) return React.cloneElement(element, {
+	if (isComponent(element, ElementHeader)) return React.cloneElement(element, {
 		chevronIcon,
 		icon,
 		isHovered,
@@ -55,7 +56,7 @@ const renderElementHeader = (element, options) => {
 		highlightText,
 		closeButton
 	});
-	if (element) return /* @__PURE__ */ jsx(ElementHeader_default, {
+	if (element) return /* @__PURE__ */ jsx(ElementHeader, {
 		highlightText,
 		titleHtmlMarkup,
 		parentType,
@@ -67,7 +68,9 @@ const renderElementHeader = (element, options) => {
 		children: element
 	});
 };
-const ElementHeaderRoot = (props) => {
+//#endregion
+//#region src/components/ElementHeader/ElementHeader.tsx
+var ElementHeaderRoot = (props) => {
 	const { className = "", titleHtmlMarkup = "h2", parentType = "linklist", chevronIcon, closeButton, children, icon, isHovered, size, testId, highlightText } = props;
 	const breakpoint = useBreakpoint();
 	const showIcon = size !== "small" && !!icon;
@@ -161,11 +164,11 @@ const ElementHeaderRoot = (props) => {
 };
 ElementHeaderRoot.displayName = "ElementHeader";
 var ElementHeader = ElementHeaderRoot;
-ElementHeader.Text = ElementHeaderText_default;
+ElementHeader.Text = ElementHeaderText;
 ElementHeader.Text.displayName = "ElementHeader.Text";
 ElementHeader.StatusDotList = StatusDotList_default;
 ElementHeader.StatusDotList.displayName = "ElementHeader.StatusDotList";
-var ElementHeader_default = ElementHeader;
-export { renderElementHeader as i, ElementHeader_default as n, mapChildren as r, ElementHeaderRoot as t };
+//#endregion
+export { renderElementHeader as i, ElementHeaderRoot as n, mapChildren as r, ElementHeader as t };
 
 //# sourceMappingURL=ElementHeader.js.map

package/lib/ElementHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeader.js","names":["mapChildren: ChildrenMapper","avatarChild: React.ReactElement<AvatarProps> | undefined","badgeChildren: React.ReactElement<BadgeProps>[]","statusDotChildren: React.ReactElement<StatusDotProps>[]","statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined","elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[]","stringChildren: string[]","remainingChildren: React.ReactNode[]","ElementHeaderRoot: ElementHeaderType"],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
+{"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}

package/lib/ElementHeaderText.js

@@ -2,16 +2,16 @@ import { t as Highlighter_default } from "./Highlighter.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
-const ElementHeaderText = (props) => {
+//#region src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx
+var ElementHeaderText = (props) => {
 	const { firstText, firstTextEmphasised = false, secondText = void 0, secondTextEmphasised = false, subText = false, className = "", testId, titleHtmlMarkup = "span", highlightText } = props;
 	const headerTextWrapperClasses = classNames(className, styles["text-wrapper"], { [styles["text-wrapper--sub-level"]]: subText });
 	const firstHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised });
 	const secondHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised });
-	const CustomTag = titleHtmlMarkup;
 	return /* @__PURE__ */ jsx("span", {
 		"data-testid": testId,
 		className: headerTextWrapperClasses,
-		children: /* @__PURE__ */ jsx(CustomTag, {
+		children: /* @__PURE__ */ jsx(titleHtmlMarkup, {
 			className: styles["element-header__title"],
 			children: /* @__PURE__ */ jsxs(Highlighter_default, {
 				searchText: highlightText,
@@ -26,8 +26,10 @@ const ElementHeaderText = (props) => {
 		})
 	});
 };
+//#endregion
+//#region src/components/ElementHeader/ElementHeaderText/index.ts
 var ElementHeaderText_default = ElementHeaderText;
-var ElementHeaderText_default$1 = ElementHeaderText_default;
-export { ElementHeaderText as n, ElementHeaderText_default as r, ElementHeaderText_default$1 as t };
+//#endregion
+export { ElementHeaderText as n, ElementHeaderText_default as t };
 
 //# sourceMappingURL=ElementHeaderText.js.map

package/lib/ElementHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeaderText.js","names":["ElementHeaderText: React.FC<ElementHeaderTextProps>"],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;AA8BA,MAAaA,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CACF,MAAM,YAAY;AAElB,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW;YACpC,oBAAC,WAAA;GAAU,WAAW,OAAO;aAC3B,qBAAC,qBAAA;IAAY,YAAY;eACvB,oBAAC,QAAA;KAAK,WAAW;eAAgC;MAAiB,EACjE,cAAc,oBAAC,QAAA;KAAK,WAAW;eAAiC;MAAkB,CAAA;KACvE;IACJ;GACP;;AAIX,IAAA,4BAAe;AChEf,IAAA,8BAAe"}
+{"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CAGF,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;KAAiB,CAAA,EACjE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;KAAkB,CAAA,CACvE;;GACJ,CAAA;EACP,CAAA;;;;AC5DX,IAAA,4BAAe"}

package/lib/{_rolldown_dynamic_import_helper.js → ErrorBoundary.js}

@@ -1,4 +1,15 @@
 import React from "react";
+//#region \0rolldown_dynamic_import_helper.js
+var _rolldown_dynamic_import_helper_default = (glob, path, segments) => {
+	const query = path.lastIndexOf("?");
+	const v = glob[query === -1 || query < path.lastIndexOf("/") ? path : path.slice(0, query)];
+	if (v) return typeof v === "function" ? v() : Promise.resolve(v);
+	return new Promise((_, reject) => {
+		(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + path + (path.split("/").length !== segments ? ". Note that variables only represent file names one level deep." : ""))));
+	});
+};
+//#endregion
+//#region src/components/LazyIcon/ErrorBoundary.tsx
 var ErrorBoundary = class extends React.Component {
 	constructor(props) {
 		super(props);
@@ -14,15 +25,7 @@ var ErrorBoundary = class extends React.Component {
 		return this.state.error ? this.props.fallback : this.props.children;
 	}
 };
-var ErrorBoundary_default = ErrorBoundary;
-var __rolldown_dynamic_import_helper_default = (glob, path, segments) => {
-	const query = path.lastIndexOf("?");
-	const v = glob[query === -1 || query < path.lastIndexOf("/") ? path : path.slice(0, query)];
-	if (v) return typeof v === "function" ? v() : Promise.resolve(v);
-	return new Promise((_, reject) => {
-		(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + path + (path.split("/").length !== segments ? ". Note that variables only represent file names one level deep." : ""))));
-	});
-};
-export { ErrorBoundary_default as n, __rolldown_dynamic_import_helper_default as t };
+//#endregion
+export { _rolldown_dynamic_import_helper_default as n, ErrorBoundary as t };
 
-//# sourceMappingURL=_rolldown_dynamic_import_helper.js.map
+//# sourceMappingURL=ErrorBoundary.js.map

package/lib/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,gBAAN,cAA+B,MAAM,UAAqD;CACxF,YAAY,OAA8B;EACxC,MAAM,MAAM;EACZ,KAAK,QAAQ,EACX,OAAO,OACR;;CAGH,oBAA0B;EACxB,KAAK,SAAS,EAAE,OAAO,MAAM,CAAC;;CAGhC,mBAAmB,WAAkD;EACnE,IAAI,UAAU,UAAU,KAAK,MAAM,OACjC,KAAK,SAAS,EAAE,OAAO,OAAO,CAAC;;CAInC,SAA0B;EACxB,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM"}

package/lib/ErrorWrapper.js

@@ -1,7 +1,8 @@
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ErrorWrapper/styles.module.scss";
-const ErrorWrapper = (props) => {
+//#region src/components/ErrorWrapper/ErrorWrapper.tsx
+var ErrorWrapper = (props) => {
 	const { renderError = true } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
@@ -17,7 +18,10 @@ const ErrorWrapper = (props) => {
 		}), props.children]
 	});
 };
-var ErrorWrapper_default$1 = ErrorWrapper;
-export { ErrorWrapper as n, ErrorWrapper_default$1 as t };
+//#endregion
+//#region src/components/ErrorWrapper/index.ts
+var ErrorWrapper_default = ErrorWrapper;
+//#endregion
+export { ErrorWrapper as n, ErrorWrapper_default as t };
 
 //# sourceMappingURL=ErrorWrapper.js.map

package/lib/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","names":["ErrorWrapper: React.FC<ErrorWrapperProps>"],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;AAyBA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;AAI/B,QACE,qBAAC,OAAA;EAAI,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAAU;EAG/E,eAAa,MAAM;aACtD,oBAAC,QAAA;GAAK,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAA;IAAE,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;KACL;IAED,EACN,MAAM,SAAA;GACH;;ACtCV,IAAA,yBD0Ce"}
+{"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;IACL,CAAA;GAED,CAAA,EACN,MAAM,SACH;;;;;ACtCV,IAAA,uBAAe"}

package/lib/Expander.js

@@ -1,21 +1,24 @@
-import { a as IconSize, n as AnalyticsId } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { t as Button_default } from "./Button.js";
-import { t as useSize } from "./useSize.js";
-import { t as ChevronDown_default } from "./ChevronDown.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as useExpand } from "./useExpand.js";
+import { useSize } from "./hooks/useSize.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { useExpand } from "./hooks/useExpand.js";
 import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Expander/styles.module.scss";
-let ExpanderSize = /* @__PURE__ */ function(ExpanderSize$1) {
-	ExpanderSize$1["small"] = "small";
-	ExpanderSize$1["large"] = "large";
-	return ExpanderSize$1;
+//#region src/components/Expander/constants.ts
+var ExpanderSize = /* @__PURE__ */ function(ExpanderSize) {
+	ExpanderSize["small"] = "small";
+	ExpanderSize["large"] = "large";
+	return ExpanderSize;
 }({});
+//#endregion
+//#region src/components/Expander/Expander.tsx
 var Expander = (props) => {
 	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
 	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
@@ -28,7 +31,7 @@ var Expander = (props) => {
 	const renderChevron = (align) => /* @__PURE__ */ jsx("span", {
 		className: classNames(styles["expander__icon"], styles[`expander__icon--${align}`]),
 		children: /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
+			svgIcon: isExpanded ? ChevronUp : ChevronDown,
 			size: IconSize.XSmall,
 			isHovered
 		})
@@ -83,7 +86,7 @@ var Expander = (props) => {
 			testId,
 			"data-analyticsid": AnalyticsId.Expander,
 			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
+				svgIcon: isExpanded ? ChevronUp : ChevronDown,
 				size: IconSize.XSmall
 			}), title]
 		})
@@ -105,7 +108,10 @@ var Expander = (props) => {
 		children: [size === ExpanderSize.large ? renderTrigger() : renderButton(), renderContent()]
 	});
 };
-var Expander_default$1 = Expander;
-export { ExpanderSize as n, Expander_default$1 as t };
+//#endregion
+//#region src/components/Expander/index.ts
+var Expander_default = Expander;
+//#endregion
+export { ExpanderSize as n, Expander_default as t };
 
 //# sourceMappingURL=Expander.js.map

package/lib/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","names":["Expander: React.FC<ExpanderProps>"],"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

@@ -1,13 +1,14 @@
-import { a as IconSize, s as LanguageLocales } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { IconSize, LanguageLocales } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as Filter_default } from "./Filter.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import Filter from "./components/Icons/Filter.js";
 import { t as getResources } from "./resourceHelper.js";
 import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButton/styles.module.scss";
+//#region src/components/Filter/FilterButton/FilterButton.tsx
 var FilterButton = (props) => {
 	const { resources } = props;
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
@@ -24,7 +25,7 @@ var FilterButton = (props) => {
 		children: /* @__PURE__ */ jsxs("span", {
 			className: classNames(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
 			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: Filter_default,
+				svgIcon: Filter,
 				isHovered,
 				size: IconSize.XSmall
 			}), /* @__PURE__ */ jsx("span", {
@@ -34,7 +35,10 @@ var FilterButton = (props) => {
 		})
 	});
 };
-var FilterButton_default$1 = FilterButton;
-export { FilterButton_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterButton/index.ts
+var FilterButton_default = FilterButton;
+//#endregion
+export { FilterButton_default as t };
 
 //# sourceMappingURL=FilterButton.js.map

package/lib/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","names":["FilterButton: React.FC<FilterButtonProps>"],"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,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;AAEjD,QACE,oBAAC,UAAA;EAAO,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAA;GACC,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,WAC5C,CAAC;cAEF,oBAAC,cAAA;IAAK,SAAS;IAAmB;IAAW,MAAM,SAAS;KAAU,EACtE,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAyB,gBAAgB;KAAwB,CAAA;IACpF;GACA;;AC1Cb,IAAA,yBD8Ce"}
+{"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"}

package/lib/FilterButtonAndChipsWrapper.js

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButtonAndChipsWrapper/styles.module.scss";
+//#region src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx
 var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames(styles["filter-chip-bar"]),
@@ -8,7 +9,10 @@ var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId
 		children: [filterButtonComponent, filterChips]
 	});
 };
-var FilterButtonAndChipsWrapper_default$1 = FilterButtonAndChipsWrapper;
-export { FilterButtonAndChipsWrapper_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterButtonAndChipsWrapper/index.ts
+var FilterButtonAndChipsWrapper_default = FilterButtonAndChipsWrapper;
+//#endregion
+export { FilterButtonAndChipsWrapper_default as t };
 
 //# sourceMappingURL=FilterButtonAndChipsWrapper.js.map

package/lib/FilterButtonAndChipsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":["FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps>"],"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,IAAMA,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;AAClI,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,mBAAmB;EAAE,eAAa;aACjE,uBACA,YAAA;GACG;;AClBV,IAAA,wCDsBe"}
+{"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"}

package/lib/FilterDrawer.js

@@ -1,15 +1,23 @@
-import { s as LanguageLocales } from "./constants2.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { t as Button_default } from "./Button.js";
-import { t as formatResource } from "./resource.js";
-import { t as DrawerNavigation_default } from "./DrawerNavigation.js";
+import { formatResource } from "./utils/resource.js";
+import { t as DrawerNavigation } from "./DrawerNavigation.js";
 import { t as getResources } from "./resourceHelper.js";
 import { Children, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterDrawer/styles.module.scss";
+//#region src/components/Filter/FilterDrawer/FilterDrawer.tsx
+/**
+* Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View
+* with id="overview" and home=true.
+*/
 function FilterDrawerOverview(_props) {
 	return null;
 }
+/**
+* Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView
+*/
 function FilterDrawerView(_props) {
 	return null;
 }
@@ -55,7 +63,7 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 	const processedChildren = Children.map(children, (child) => {
 		if (isValidElement(child) && child.type === FilterDrawerOverview) {
 			const viewFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton) ?? child.props.footer ?? fallbackFooter;
-			return /* @__PURE__ */ jsx(DrawerNavigation_default.View, {
+			return /* @__PURE__ */ jsx(DrawerNavigation.View, {
 				id: "overview",
 				home: true,
 				title: child.props.title,
@@ -66,7 +74,7 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 		}
 		if (isValidElement(child)) {
 			const viewFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton) ?? child.props.footer ?? fallbackFooter;
-			return /* @__PURE__ */ jsx(DrawerNavigation_default.View, {
+			return /* @__PURE__ */ jsx(DrawerNavigation.View, {
 				id: child.props.id,
 				title: child.props.title,
 				children: child.props.children,
@@ -75,7 +83,7 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 			});
 		} else return child;
 	});
-	return /* @__PURE__ */ jsx(DrawerNavigation_default, {
+	return /* @__PURE__ */ jsx(DrawerNavigation, {
 		isOpen: drawer.isOpen,
 		initialView: drawer.initialView,
 		onCloseButton: handleClose,
@@ -85,7 +93,10 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 }
 FilterDrawer.Overview = FilterDrawerOverview;
 FilterDrawer.View = FilterDrawerView;
-var FilterDrawer_default$1 = FilterDrawer;
-export { FilterDrawer_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterDrawer/index.ts
+var FilterDrawer_default = FilterDrawer;
+//#endregion
+export { FilterDrawer_default as t };
 
 //# sourceMappingURL=FilterDrawer.js.map