@helsenorge/designsystem-react 13.4.0 → 14.0.0-beta.0

package/lib/PanelOld.js

@@ -1,322 +0,0 @@
-import { a as IconSize, n as AnalyticsId } from "./constants2.js";
-import { t as palette } from "./palette.js";
-import { t as Icon_default } from "./Icon.js";
-import { t as Badge_default } from "./Badge.js";
-import { t as ArrowRight_default } from "./ArrowRight.js";
-import { t as Button_default } from "./Button.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
-import { t as Title_default } from "./Title2.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 { t as AlertSignFill_default } from "./AlertSignFill.js";
-import { t as Calendar_default } from "./Calendar.js";
-import { t as Pencil_default } from "./Pencil.js";
-import { t as Watch_default } from "./Watch.js";
-import React, { useId } from "react";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import panelStyles from "./components/PanelOld/styles.module.scss";
-let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
-	PanelOldStatus$1["normal"] = "normal";
-	PanelOldStatus$1["new"] = "new";
-	PanelOldStatus$1["error"] = "error";
-	PanelOldStatus$1["draft"] = "draft";
-	return PanelOldStatus$1;
-}({});
-let PanelOldVariant = /* @__PURE__ */ function(PanelOldVariant$1) {
-	PanelOldVariant$1["fill"] = "fill";
-	PanelOldVariant$1["white"] = "white";
-	PanelOldVariant$1["stroke"] = "stroke";
-	PanelOldVariant$1["line"] = "line";
-	return PanelOldVariant$1;
-}({});
-let PanelOldLayout = /* @__PURE__ */ function(PanelOldLayout$1) {
-	PanelOldLayout$1["layout1"] = "layout1";
-	PanelOldLayout$1["layout2"] = "layout2";
-	PanelOldLayout$1["layout3a"] = "layout3a";
-	PanelOldLayout$1["layout3b"] = "layout3b";
-	PanelOldLayout$1["layout3c"] = "layout3c";
-	return PanelOldLayout$1;
-}({});
-var StatusText = ({ status, statusMessage }) => {
-	const statusIcon = () => {
-		if (status === PanelOldStatus.error) return {
-			color: palette.cherry500,
-			svgIcon: AlertSignFill_default
-		};
-		return {
-			color: palette.black,
-			svgIcon: Pencil_default
-		};
-	};
-	const statusMessageClass = classNames(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
-	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
-		className: statusMessageClass,
-		"data-testid": "display-status",
-		children: [
-			/* @__PURE__ */ jsx(Icon_default, {
-				...statusIcon(),
-				size: IconSize.XSmall
-			}),
-			" ",
-			/* @__PURE__ */ jsx("span", { children: statusMessage })
-		]
-	});
-	return null;
-};
-var PreContainer = ({ children }) => {
-	if (typeof children === "undefined") return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: panelStyles["header-container"],
-		children
-	});
-};
-var DateTime = ({ date, time }) => {
-	if (date || time) return /* @__PURE__ */ jsxs("div", {
-		className: panelStyles["datetime-container"],
-		"data-testid": "datetime",
-		children: [date && /* @__PURE__ */ jsxs("div", {
-			className: panelStyles["datetime-container__icon"],
-			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: Calendar_default,
-				size: IconSize.XSmall
-			}), /* @__PURE__ */ jsx("span", { children: date })]
-		}), time && /* @__PURE__ */ jsxs("div", {
-			className: panelStyles["datetime-container__icon"],
-			children: [/* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: Watch_default,
-				size: IconSize.XSmall
-			}), /* @__PURE__ */ jsx("span", { children: time })]
-		})]
-	});
-	return null;
-};
-var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	return /* @__PURE__ */ jsxs("div", {
-		className: panelLayoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-1__content-a"],
-				children: [titleElement, contentA]
-			}),
-			contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
-			ctaContainer
-		]
-	});
-};
-var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
-	return /* @__PURE__ */ jsxs("div", {
-		className: panelLayoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-2__content-a"],
-				children: [titleElement, contentA]
-			}),
-			contentB && /* @__PURE__ */ jsx("div", {
-				className: lastColumnClass,
-				children: contentB
-			}),
-			ctaContainer && /* @__PURE__ */ jsx("div", {
-				className: lastColumnClass,
-				children: ctaContainer
-			})
-		]
-	});
-};
-var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
-	const layoutClasses = classNames(panelStyles["panel__layout-3"], {
-		[panelStyles["panel__layout-3--with-icon"]]: icon,
-		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
-		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
-		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
-	});
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
-	return /* @__PURE__ */ jsxs("div", {
-		className: layoutClasses,
-		children: [
-			/* @__PURE__ */ jsx(StatusText, {
-				status,
-				statusMessage
-			}),
-			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
-			icon && /* @__PURE__ */ jsx("div", {
-				className: iconClasses,
-				children: icon
-			}),
-			/* @__PURE__ */ jsxs("div", { children: [titleElement, contentA] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: panelStyles["panel__layout-3__last-column"],
-				children: [contentB && /* @__PURE__ */ jsx("div", {
-					className: panelStyles["panel__layout-3__last-column__content-b"],
-					children: contentB
-				}), ctaContainer]
-			})
-		]
-	});
-};
-var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref) {
-	const { buttonAriaLabel, buttonAriaLabelledById, buttonText = "Se detaljer", buttonTextClose = "Skjul detaljer", buttonHtmlMarkup = "a", buttonOnClick, children, className, containerAsButton = false, contentA, contentB, contentHeader, date, expanded = false, focusable = false, icon, layout = PanelOldLayout.layout2, noTopBorder, onExpand, renderChildrenWhenClosed = false, status = PanelOldStatus.normal, statusMessage, target = "_self", testId, time, title, titleHtmlMarkup = "h2", url, variant = PanelOldVariant.fill } = props;
-	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
-	const titleId = useId();
-	const buttonTextId = useId();
-	const hasBadge = statusMessage && status === PanelOldStatus.new;
-	const noContentB = typeof contentB === "undefined";
-	const layout1 = layout === "layout1" || noContentB;
-	const layout2 = !noContentB && layout === "layout2";
-	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
-	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
-	const panelClasses = classNames(panelStyles.panel, {
-		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
-		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
-		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
-		[panelStyles["panel--line"]]: variant === PanelOldVariant.line,
-		[panelStyles["panel--no-top-border"]]: variant === PanelOldVariant.line && noTopBorder,
-		[panelStyles["panel--selected"]]: isExpanded,
-		[panelStyles["panel--new"]]: status === PanelOldStatus.new,
-		[panelStyles["panel--draft"]]: status === PanelOldStatus.draft,
-		[panelStyles["panel--error"]]: status === PanelOldStatus.error,
-		[panelStyles["panel--status"]]: status && status !== PanelOldStatus.normal,
-		[panelStyles["panel--with-icon"]]: icon,
-		[panelStyles["panel--button"]]: containerAsButton,
-		[panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
-	});
-	const renderCTAContainer = () => {
-		const hasButton = children || url || buttonOnClick;
-		const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
-			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
-			[panelStyles["panel__btn-container--no-button"]]: !hasButton
-		});
-		return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", {
-			className: btnContainerClasses,
-			children: [/* @__PURE__ */ jsx(DateTime, {
-				date,
-				time
-			}), hasButton && /* @__PURE__ */ jsx("div", {
-				className: panelStyles["panel__details-btn"],
-				children: renderDetailsButton()
-			})]
-		});
-	};
-	const renderDetailsButton = () => {
-		const ariaLabelAttributes = getAriaLabelAttributes({
-			label: buttonAriaLabel,
-			id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
-			prefer: "label"
-		});
-		const commonProps = {
-			onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
-			className: containerAsButton ? panelStyles["panel__expand"] : void 0,
-			variant: "borderless",
-			ellipsis: true,
-			...ariaLabelAttributes
-		};
-		if (children) return /* @__PURE__ */ jsxs(Button_default, {
-			testId: "expand",
-			"aria-expanded": isExpanded,
-			...commonProps,
-			children: [/* @__PURE__ */ jsx("span", {
-				id: buttonTextId,
-				children: isExpanded ? buttonTextClose : buttonText
-			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default })]
-		});
-		return /* @__PURE__ */ jsxs(Button_default, {
-			testId: "url",
-			htmlMarkup: buttonHtmlMarkup,
-			href: url,
-			target,
-			...commonProps,
-			children: [/* @__PURE__ */ jsx("span", {
-				id: buttonTextId,
-				children: buttonText
-			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default })]
-		});
-	};
-	const renderContent = () => {
-		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
-		return /* @__PURE__ */ jsx("div", {
-			className: classNames(panelStyles["panel-details"], {
-				[panelStyles["panel-details--open"]]: isExpanded,
-				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
-				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
-			}),
-			"data-testid": "panel-details",
-			children: /* @__PURE__ */ jsx("div", { children })
-		});
-	};
-	const renderTitle = () => {
-		const titleContainerClasses = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
-		const titleClasses = classNames(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
-		return title && /* @__PURE__ */ jsxs("div", {
-			className: titleContainerClasses,
-			children: [/* @__PURE__ */ jsx(Title_default, {
-				appearance: "title3",
-				htmlMarkup: titleHtmlMarkup,
-				id: titleId,
-				className: titleClasses,
-				children: title
-			}), hasBadge && /* @__PURE__ */ jsx("div", {
-				className: panelStyles.panel__badge,
-				children: /* @__PURE__ */ jsx(Badge_default, {
-					color: "blueberry",
-					testId: "badge-status",
-					children: statusMessage
-				})
-			})]
-		});
-	};
-	const layoutProps = {
-		contentA,
-		contentB,
-		contentHeader,
-		ctaContainer: renderCTAContainer(),
-		icon,
-		status,
-		statusMessage,
-		titleElement: renderTitle()
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		tabIndex: focusable ? -1 : void 0,
-		ref,
-		"data-testid": testId,
-		className: panelWrapperClasses,
-		"data-analyticsid": AnalyticsId.PanelOld,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: panelClasses,
-			children: [
-				layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
-				layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
-				layout3 && /* @__PURE__ */ jsx(PanelLayout3, {
-					...layoutProps,
-					layout
-				})
-			]
-		}), renderContent()]
-	});
-});
-export { PanelOldVariant as i, PanelOldLayout as n, PanelOldStatus as r, PanelOld_default$1 as t };
-
-//# sourceMappingURL=PanelOld.js.map

package/lib/PanelOld.js.map

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

package/lib/Pencil.js

@@ -1,27 +0,0 @@
-import { r as getIcon } from "./Icon.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var Pencil = ({ size, isHovered }) => {
-	return getIcon({
-		size,
-		isHovered,
-		normal: /* @__PURE__ */ jsx("path", { d: "M38.485 15.54l-.757.757-6.035-6.034.757-.758a4.275 4.275 0 016.035 0 4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.619 1.62zM19.927 34.098l-2.66-2.66L32.14 16.773l2.555 2.556-14.768 14.768zm-6.683 3.13l-2.47-2.472 2.416-5.558 5.604 5.604-5.55 2.425zm-4.373 1.908l1.475-3.394 1.914 1.914-3.389 1.48zm19.79-25.84l2.772 2.771L16.56 30.73l-2.667-2.667 14.768-14.768zm10.743-4.71a5.575 5.575 0 00-7.873 0L12.514 27.603a.655.655 0 00-.136.201l-5.359 12.33a.65.65 0 00.857.855l12.312-5.377a.63.63 0 00.199-.136L39.404 16.46a5.574 5.574 0 000-7.873z" }),
-		normalHover: /* @__PURE__ */ jsx("path", { d: "M44.486 15.537l-.757.757-6.035-6.034.757-.758a4.244 4.244 0 013.017-1.25c1.14 0 2.212.445 3.018 1.25a4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.62 1.62zM25.928 34.096l-2.66-2.661L38.14 16.771l2.556 2.556-14.768 14.768zm-6.683 3.128l-2.47-2.47 2.415-5.56 5.605 5.606-5.55 2.424zm-4.373 1.91l1.474-3.395 1.914 1.915-3.388 1.48zm19.79-25.841l2.77 2.77-14.871 14.664-2.667-2.666 14.768-14.768zm10.743-4.71l-.46.46.459-.46a5.53 5.53 0 00-3.936-1.63 5.534 5.534 0 00-3.936 1.63L18.515 27.6a.655.655 0 00-.136.201l-5.192 11.945H7.615v1.3h6v-.005a.663.663 0 00.262-.054l12.312-5.378a.63.63 0 00.199-.136l19.017-19.017a5.574 5.574 0 000-7.872z" }),
-		xSmall: /* @__PURE__ */ jsx("path", { d: "M38.188 15.243l-.754.754-5.702-5.703.753-.755c1.522-1.523 4.178-1.522 5.703 0a4.04 4.04 0 010 5.704zm-3.08 3.08l-5.702-5.704 1.61-1.61 5.703 5.703-1.61 1.61zM19.796 33.633l-2.49-2.49 14.702-14.493 2.387 2.385-14.599 14.598zm-6.856 3.28l-2.117-2.118 2.313-5.32 5.118 5.118-5.314 2.32zm-3.75 1.638l1.2-2.758 1.554 1.555-2.753 1.203zm19.501-25.218l2.602 2.602L16.592 30.43l-2.499-2.499 14.598-14.597zM39.438 8.29V8.29a5.768 5.768 0 00-4.102-1.699 5.765 5.765 0 00-4.102 1.699L12.216 27.306a.895.895 0 00-.184.274L6.673 39.91a.884.884 0 001.165 1.163l12.312-5.377a.888.888 0 00.271-.186l19.017-19.017a5.808 5.808 0 000-8.203z" }),
-		xSmallHover: /* @__PURE__ */ jsx("path", { d: "M44.188 15.871l-.753.753-5.703-5.702.753-.754a4.04 4.04 0 015.703 0 4.003 4.003 0 011.182 2.852 4 4 0 01-1.182 2.851zM41.11 18.95l-5.703-5.702 1.61-1.612 5.703 5.703-1.61 1.61zM25.798 34.263l-2.491-2.49L38.009 17.28l2.386 2.384-14.597 14.599zm-6.857 3.28l-2.118-2.117 2.313-5.322 5.12 5.119-5.315 2.32zm-3.749 1.637l1.199-2.757 1.555 1.555-2.754 1.202zm19.5-25.217l2.602 2.602-14.702 14.493-2.497-2.498 14.597-14.597zm10.747-5.045a5.81 5.81 0 00-8.205 0L18.218 27.934a.895.895 0 00-.185.274l-5.13 11.805h-5.42v1.768h6.001v-.006c.12 0 .242-.024.355-.073l12.312-5.378a.888.888 0 00.272-.185l19.016-19.017a5.764 5.764 0 001.7-4.102c0-1.55-.605-3.006-1.7-4.102z" }),
-		xxSmall: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: "M32.326 9.147a4 4 0 0 0-5.617.01l-17.2 17.019L8 38.555l12.152-1.803 17.13-17.066A4 4 0 0 0 37.263 14l-4.937-4.853ZM29.522 12l4.937 4.853-2.338 2.329-4.902-4.903L29.522 12Zm-5.146 5.093L13.31 28.04l-.705 5.787 5.656-.84 11.026-10.983-4.913-4.912Z"
-		}),
-		xxSmallHover: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: "M24.043 6.492a4 4 0 0 0-4.86 2.817l-6.387 23.339 4.883 11.474 9.623-7.637 6.303-23.344a4 4 0 0 0-2.86-4.915l-6.702-1.734Zm-1.002 3.872 6.702 1.734-.86 3.186-6.697-1.794.855-3.126Zm-1.911 6.984-4.108 15.014 2.282 5.364 4.48-3.555 4.056-15.025-6.71-1.798Z"
-		})
-	});
-};
-var Pencil_default = Pencil;
-export { Pencil_default as t };
-
-//# sourceMappingURL=Pencil.js.map

package/lib/Pencil.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pencil.js","names":["Pencil: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Pencil.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Pencil: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M38.485 15.54l-.757.757-6.035-6.034.757-.758a4.275 4.275 0 016.035 0 4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.619 1.62zM19.927 34.098l-2.66-2.66L32.14 16.773l2.555 2.556-14.768 14.768zm-6.683 3.13l-2.47-2.472 2.416-5.558 5.604 5.604-5.55 2.425zm-4.373 1.908l1.475-3.394 1.914 1.914-3.389 1.48zm19.79-25.84l2.772 2.771L16.56 30.73l-2.667-2.667 14.768-14.768zm10.743-4.71a5.575 5.575 0 00-7.873 0L12.514 27.603a.655.655 0 00-.136.201l-5.359 12.33a.65.65 0 00.857.855l12.312-5.377a.63.63 0 00.199-.136L39.404 16.46a5.574 5.574 0 000-7.873z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M44.486 15.537l-.757.757-6.035-6.034.757-.758a4.244 4.244 0 013.017-1.25c1.14 0 2.212.445 3.018 1.25a4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.62 1.62zM25.928 34.096l-2.66-2.661L38.14 16.771l2.556 2.556-14.768 14.768zm-6.683 3.128l-2.47-2.47 2.415-5.56 5.605 5.606-5.55 2.424zm-4.373 1.91l1.474-3.395 1.914 1.915-3.388 1.48zm19.79-25.841l2.77 2.77-14.871 14.664-2.667-2.666 14.768-14.768zm10.743-4.71l-.46.46.459-.46a5.53 5.53 0 00-3.936-1.63 5.534 5.534 0 00-3.936 1.63L18.515 27.6a.655.655 0 00-.136.201l-5.192 11.945H7.615v1.3h6v-.005a.663.663 0 00.262-.054l12.312-5.378a.63.63 0 00.199-.136l19.017-19.017a5.574 5.574 0 000-7.872z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M38.188 15.243l-.754.754-5.702-5.703.753-.755c1.522-1.523 4.178-1.522 5.703 0a4.04 4.04 0 010 5.704zm-3.08 3.08l-5.702-5.704 1.61-1.61 5.703 5.703-1.61 1.61zM19.796 33.633l-2.49-2.49 14.702-14.493 2.387 2.385-14.599 14.598zm-6.856 3.28l-2.117-2.118 2.313-5.32 5.118 5.118-5.314 2.32zm-3.75 1.638l1.2-2.758 1.554 1.555-2.753 1.203zm19.501-25.218l2.602 2.602L16.592 30.43l-2.499-2.499 14.598-14.597zM39.438 8.29V8.29a5.768 5.768 0 00-4.102-1.699 5.765 5.765 0 00-4.102 1.699L12.216 27.306a.895.895 0 00-.184.274L6.673 39.91a.884.884 0 001.165 1.163l12.312-5.377a.888.888 0 00.271-.186l19.017-19.017a5.808 5.808 0 000-8.203z\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M44.188 15.871l-.753.753-5.703-5.702.753-.754a4.04 4.04 0 015.703 0 4.003 4.003 0 011.182 2.852 4 4 0 01-1.182 2.851zM41.11 18.95l-5.703-5.702 1.61-1.612 5.703 5.703-1.61 1.61zM25.798 34.263l-2.491-2.49L38.009 17.28l2.386 2.384-14.597 14.599zm-6.857 3.28l-2.118-2.117 2.313-5.322 5.12 5.119-5.315 2.32zm-3.749 1.637l1.199-2.757 1.555 1.555-2.754 1.202zm19.5-25.217l2.602 2.602-14.702 14.493-2.497-2.498 14.597-14.597zm10.747-5.045a5.81 5.81 0 00-8.205 0L18.218 27.934a.895.895 0 00-.185.274l-5.13 11.805h-5.42v1.768h6.001v-.006c.12 0 .242-.024.355-.073l12.312-5.378a.888.888 0 00.272-.185l19.016-19.017a5.764 5.764 0 001.7-4.102c0-1.55-.605-3.006-1.7-4.102z\" />\n  );\n\n  const xxSmall = (\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M32.326 9.147a4 4 0 0 0-5.617.01l-17.2 17.019L8 38.555l12.152-1.803 17.13-17.066A4 4 0 0 0 37.263 14l-4.937-4.853ZM29.522 12l4.937 4.853-2.338 2.329-4.902-4.903L29.522 12Zm-5.146 5.093L13.31 28.04l-.705 5.787 5.656-.84 11.026-10.983-4.913-4.912Z\"\n    />\n  );\n\n  const xxSmallHover = (\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M24.043 6.492a4 4 0 0 0-4.86 2.817l-6.387 23.339 4.883 11.474 9.623-7.637 6.303-23.344a4 4 0 0 0-2.86-4.915l-6.702-1.734Zm-1.002 3.872 6.702 1.734-.86 3.186-6.697-1.794.855-3.126Zm-1.911 6.984-4.108 15.014 2.282 5.364 4.48-3.555 4.056-15.025-6.71-1.798Z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default Pencil;\n"],"mappings":";;;AAIA,IAAMA,UAAkC,EAAE,MAAM,gBAAkD;AAiChG,QAAO,QAAQ;EAAE;EAAM;EAAW,QA/BhC,oBAAC,QAAA,EAAK,GAAE,gkBAAA,CAAikB;EA+BjiB,aA3BxC,oBAAC,QAAA,EAAK,GAAE,gqBAAA,CAAiqB;EA2BpnB,QAvBrD,oBAAC,QAAA,EAAK,GAAE,inBAAA,CAAknB;EAuB7jB,aAnB7D,oBAAC,QAAA,EAAK,GAAE,qpBAAA,CAAspB;EAmBplB,SAf1E,oBAAC,QAAA;GACC,UAAS;GACT,UAAS;GACT,GAAE;IACF;EAWiF,cAPnF,oBAAC,QAAA;GACC,UAAS;GACT,UAAS;GACT,GAAE;IACF;EAG+F,CAAC;;AAGtG,IAAA,iBAAe"}

package/lib/Table.js

@@ -1,126 +0,0 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
-import { t as useIsVisible } from "./useIsVisible.js";
-import { t as useLayoutEvent } from "./useLayoutEvent.js";
-import { t as HorizontalScroll_default } from "./HorizontalScroll.js";
-import { t as isTouchDevice } from "./device.js";
-import React, { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
-var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
-var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
-var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
-var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
-var getConfigForBreakpoint = (config, breakpoint) => {
-	if (Array.isArray(config)) {
-		config.sort(sortByBreakpointsDescending);
-		return config.find((x) => isValidForCurrentBreakpoint(x, breakpoint));
-	} else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
-};
-const getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
-	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
-	const canUseHorizontalScroll = isTouchDevice();
-	const canUseCenteredOverflow = tableWidth <= windowWidth;
-	if (!breakpointConfig) return;
-	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
-		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow) return {
-		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
-		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
-		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
-		breakpoint: breakpointConfig.breakpoint
-	};
-	return breakpointConfig;
-};
-const getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
-const getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
-	if (parentWidth >= tableWidth) return;
-	return { left: `${(parentWidth - tableWidth) / 2 - 8}px` };
-};
-let ResponsiveTableVariant = /* @__PURE__ */ function(ResponsiveTableVariant$1) {
-	ResponsiveTableVariant$1["none"] = "none";
-	ResponsiveTableVariant$1["centeredoverflow"] = "centeredoverflow";
-	ResponsiveTableVariant$1["horizontalscroll"] = "horizontalscroll";
-	ResponsiveTableVariant$1["block"] = "block";
-	return ResponsiveTableVariant$1;
-}({});
-let ModeType = /* @__PURE__ */ function(ModeType$1) {
-	ModeType$1["compact"] = "compact";
-	ModeType$1["normal"] = "normal";
-	return ModeType$1;
-}({});
-const defaultConfig = [{
-	breakpoint: "xl",
-	variant: ResponsiveTableVariant.centeredoverflow,
-	fallbackVariant: ResponsiveTableVariant.horizontalscroll
-}];
-const simpleConfig = [{
-	breakpoint: "xl",
-	variant: ResponsiveTableVariant.centeredoverflow,
-	fallbackVariant: ResponsiveTableVariant.horizontalscroll
-}, {
-	breakpoint: "sm",
-	variant: ResponsiveTableVariant.centeredoverflow,
-	fallbackVariant: ResponsiveTableVariant.block
-}];
-const Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
-	const [currentConfig, setCurrentConfig] = useState();
-	const [tableWidth, setTableWidth] = useState(0);
-	const [parentWidth, setParentWidth] = useState(0);
-	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-	const tableRef = useRef(null);
-	const tableIsVisible = useIsVisible(tableRef, 0);
-	const breakpoint = useBreakpoint();
-	useEffect(() => {
-		setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));
-	}, [
-		breakpointConfig,
-		breakpoint,
-		tableWidth,
-		windowWidth
-	]);
-	useEffect(() => {
-		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow || currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
-		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);
-	}, [currentConfig, breakpoint]);
-	useLayoutEvent(() => setWindowWidth(window.innerWidth), ["resize"], 100);
-	useEffect(() => {
-		if (tableWidth === 0 && tableIsVisible) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
-	}, [tableWidth, tableIsVisible]);
-	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
-	const breakpointClass = getBreakpointClass(currentConfig);
-	const table = /* @__PURE__ */ jsx("table", {
-		className: classNames(tableStyles.table, breakpointClass, className),
-		id,
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.Table,
-		ref: tableRef,
-		style: tableStyle,
-		...rest,
-		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
-	});
-	const ariaLabelAttributes = getAriaLabelAttributes({
-		label: scrollAriaLabel,
-		id: scrollAriaLabelledById
-	});
-	if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) return /* @__PURE__ */ jsx(HorizontalScroll_default, {
-		childWidth: tableWidth,
-		testId: "horizontal-scroll",
-		...ariaLabelAttributes,
-		children: table
-	});
-	return table;
-};
-export { simpleConfig as a, defaultConfig as i, ResponsiveTableVariant as n, Table as r, ModeType as t };
-
-//# sourceMappingURL=Table.js.map

package/lib/Table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.js","names":["defaultConfig: BreakpointConfig[]","simpleConfig: BreakpointConfig[]","Table: React.FC<Props>"],"sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"mappings":"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"}

package/lib/Watch.js

@@ -1,29 +0,0 @@
-import { r as getIcon } from "./Icon.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var Watch = ({ size, isHovered }) => {
-	return getIcon({
-		size,
-		isHovered,
-		normal: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			d: "M36.763 24c0-7.037-5.725-12.763-12.762-12.763-7.039 0-12.764 5.726-12.764 12.763S16.962 36.762 24 36.762 36.764 31.037 36.764 24zm1.4 0c0 7.809-6.353 14.162-14.162 14.162-7.81 0-14.164-6.353-14.164-14.162 0-7.81 6.354-14.163 14.163-14.163 7.81 0 14.163 6.353 14.163 14.163zM24.5 23.5h4.584v1H23.5v-7.126h1V23.5z"
-		}),
-		normalHover: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			d: "M36.763 24c0-7.037-5.725-12.763-12.762-12.763-7.039 0-12.764 5.726-12.764 12.763S16.962 36.762 24 36.762 36.764 31.037 36.764 24zm1.4 0c0 7.809-6.353 14.162-14.162 14.162-7.81 0-14.164-6.353-14.164-14.162 0-7.81 6.354-14.163 14.163-14.163 7.81 0 14.163 6.353 14.163 14.163zM24.5 23.793l3.448 3.449-.707.707-3.742-3.742v-6.833h1v6.419z"
-		}),
-		xSmall: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			d: "M24 36.577c-6.936 0-12.579-5.642-12.579-12.577 0-6.936 5.643-12.579 12.579-12.579 6.936 0 12.579 5.643 12.579 12.579 0 6.935-5.643 12.577-12.579 12.577zm0-26.924C16.089 9.653 9.653 16.09 9.653 24S16.09 38.346 24 38.346 38.347 31.91 38.347 24c0-7.911-6.436-14.347-14.347-14.347zm.632 7.722h-1.264v7.257h5.717v-1.264h-4.453v-5.993z"
-		}),
-		xSmallHover: /* @__PURE__ */ jsx("path", {
-			fillRule: "evenodd",
-			d: "M36.578 24c0-6.936-5.643-12.579-12.579-12.579-6.934 0-12.577 5.643-12.577 12.579 0 6.935 5.643 12.577 12.577 12.577 6.936 0 12.579-5.642 12.579-12.577zm1.768 0c0 7.911-6.435 14.346-14.347 14.346-7.91 0-14.345-6.435-14.345-14.346 0-7.911 6.435-14.347 14.345-14.347 7.912 0 14.347 6.436 14.347 14.347zm-13.715-.261l3.412 3.41-.893.893-3.782-3.78v-6.887h1.263v6.364z"
-		})
-	});
-};
-var Watch_default = Watch;
-export { Watch_default as t };
-
-//# sourceMappingURL=Watch.js.map

package/lib/Watch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Watch.js","names":["Watch: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Watch.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Watch: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M36.763 24c0-7.037-5.725-12.763-12.762-12.763-7.039 0-12.764 5.726-12.764 12.763S16.962 36.762 24 36.762 36.764 31.037 36.764 24zm1.4 0c0 7.809-6.353 14.162-14.162 14.162-7.81 0-14.164-6.353-14.164-14.162 0-7.81 6.354-14.163 14.163-14.163 7.81 0 14.163 6.353 14.163 14.163zM24.5 23.5h4.584v1H23.5v-7.126h1V23.5z\"\n    />\n  );\n\n  const normalHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M36.763 24c0-7.037-5.725-12.763-12.762-12.763-7.039 0-12.764 5.726-12.764 12.763S16.962 36.762 24 36.762 36.764 31.037 36.764 24zm1.4 0c0 7.809-6.353 14.162-14.162 14.162-7.81 0-14.164-6.353-14.164-14.162 0-7.81 6.354-14.163 14.163-14.163 7.81 0 14.163 6.353 14.163 14.163zM24.5 23.793l3.448 3.449-.707.707-3.742-3.742v-6.833h1v6.419z\"\n    />\n  );\n\n  const xSmall = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M24 36.577c-6.936 0-12.579-5.642-12.579-12.577 0-6.936 5.643-12.579 12.579-12.579 6.936 0 12.579 5.643 12.579 12.579 0 6.935-5.643 12.577-12.579 12.577zm0-26.924C16.089 9.653 9.653 16.09 9.653 24S16.09 38.346 24 38.346 38.347 31.91 38.347 24c0-7.911-6.436-14.347-14.347-14.347zm.632 7.722h-1.264v7.257h5.717v-1.264h-4.453v-5.993z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule={'evenodd'}\n      d=\"M36.578 24c0-6.936-5.643-12.579-12.579-12.579-6.934 0-12.577 5.643-12.577 12.579 0 6.935 5.643 12.577 12.577 12.577 6.936 0 12.579-5.642 12.579-12.577zm1.768 0c0 7.911-6.435 14.346-14.347 14.346-7.91 0-14.345-6.435-14.345-14.346 0-7.911 6.435-14.347 14.345-14.347 7.912 0 14.347 6.436 14.347 14.347zm-13.715-.261l3.412 3.41-.893.893-3.782-3.78v-6.887h1.263v6.364z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default Watch;\n"],"mappings":";;;AAIA,IAAMA,SAAiC,EAAE,MAAM,gBAAkD;AA6B/F,QAAO,QAAQ;EAAE;EAAM;EAAW,QA3BhC,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAwBsC,aApBxC,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAiBmD,QAbrD,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAU2D,aAN7D,oBAAC,QAAA;GACC,UAAU;GACV,GAAE;IACF;EAGwE,CAAC;;AAG/E,IAAA,gBAAe"}

package/lib/__mocks__/matchMedia.d.ts

@@ -1 +0,0 @@
-export declare const mockWindowMatchMedia: import('vitest').Mock<(...args: any[]) => any>;