@helsenorge/designsystem-react 15.5.0 → 15.6.0

package/lib/components/HelpPanel/index.js

@@ -1,17 +1,57 @@
-import { t as HighlightPanel_default } from "../../HighlightPanel.js";
+import { IconSize } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import Title_default from "../Title/index.js";
 import HandWaving from "../Icons/HandWaving.js";
 import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/HelpPanel/HelpPanel.tsx
 var HelpPanel = ({ className, variant = "normal", testId, children, title }) => {
-	return /* @__PURE__ */ jsx(HighlightPanel_default, {
-		className: classNames([styles["help-panel"]], className),
-		testId,
-		svgIcon: HandWaving,
-		title,
-		variant,
-		children
+	const isMobile = useIsMobileBreakpoint();
+	const containerClassName = classNames(styles["help-panel"], {
+		[styles["help-panel--compact"]]: variant === "compact",
+		[styles["help-panel--subdued"]]: variant === "subdued"
+	}, className);
+	const renderContent = () => {
+		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
+			testId: "titleId",
+			htmlMarkup: "h2",
+			appearance: "title6",
+			children: title
+		});
+		const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;
+		if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: classNames(styles["help-panel__icon"], styles["help-panel__icon--compact"]),
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: HandWaving,
+				size: iconSize
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classNames(styles["help-panel__content"], styles["help-panel__content--compact"]),
+			children: [title && /* @__PURE__ */ jsx("div", {
+				className: styles["help-panel__title-wrapper"],
+				children: titleElement
+			}), children]
+		})] });
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: styles["help-panel__icon"],
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: HandWaving,
+				size: iconSize
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles["help-panel__content"],
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles["help-panel__title-wrapper"],
+				children: titleElement
+			}), children]
+		})] });
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: containerClassName,
+		"data-testid": testId,
+		children: renderContent()
 	});
 };
 //#endregion

package/lib/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport HighlightPanel from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames([styles['help-panel']], className)}\n      testId={testId}\n      svgIcon={HandWaving}\n      title={title}\n      variant={variant}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;AAsBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,OACE,oBAAC,wBAAD;EACE,WAAW,WAAW,CAAC,OAAO,aAAa,GAAG,SAAS;EAC/C;EACR,SAAS;EACF;EACE;EAER;CACa,CAAA;AAEpB;;;AChCA,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact' | 'subdued';\n\nexport interface HelpPanelProps {\n  /** The content of the component */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const containerClassName = classNames(\n    styles['help-panel'],\n    {\n      [styles['help-panel--compact']]: variant === 'compact',\n      [styles['help-panel--subdued']]: variant === 'subdued',\n    },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={'h2'} appearance={'title6'}>\n        {title}\n      </Title>\n    );\n\n    const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n    if (variant === 'compact') {\n      return (\n        <>\n          <div className={classNames(styles['help-panel__icon'], styles['help-panel__icon--compact'])}>\n            <Icon svgIcon={HandWaving} size={iconSize} />\n          </div>\n          <div className={classNames(styles['help-panel__content'], styles['help-panel__content--compact'])}>\n            {title && <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        <div className={styles['help-panel__icon']}>{<Icon svgIcon={HandWaving} size={iconSize} />}</div>\n        <div className={styles['help-panel__content']}>\n          <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>\n          {children}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <div className={containerClassName} data-testid={testId}>\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,MAAM,WAAW,sBAAsB;CAEvC,MAAM,qBAAqB,WACzB,OAAO,eACP;GACG,OAAO,yBAAyB,YAAY;GAC5C,OAAO,yBAAyB,YAAY;CAC/C,GACA,SACF;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAM,YAAY;GACnD,UAAA;EACI,CAAA;EAGT,MAAM,WAAW,WAAW,SAAS,SAAS,SAAS;EAEvD,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,qBAAqB,OAAO,4BAA4B;GACxF,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EACzC,CAAA,GACL,qBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,wBAAwB,OAAO,+BAA+B;GAAhG,UAAA,CACG,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACjF,QACE;EACL,CAAA,CAAA,EAAA,CAAA;EAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAsB,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EAAO,CAAA,GAChG,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACvE,QACE;EACL,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAoB,eAAa;EAC9C,UAAA,cAAc;CACZ,CAAA;AAET;;;AC1EA,IAAA,oBAAe"}

package/lib/components/HelpPanel/styles.module.scss

@@ -1,6 +1,70 @@
+@use 'sass:map';
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .help-panel {
-  background-color: var(--color-help-background-normal) !important;
-  border: 1px solid var(--color-help-border-subtle-wcag) !important;
+  display: flex;
+  flex-direction: row;
+  padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+  background-color: var(--color-help-background-normal);
+  border: 1px solid var(--color-help-border-subtle-wcag);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-m);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-m);
+  }
+
+  &--compact {
+    padding: var(--core-space-2xs) var(--core-space-s);
+  }
+
+  &--subdued {
+    background-color: transparent;
+  }
+
+  &--white {
+    background-color: var(--color-base-background-white);
+    border: 1px solid var(--color-base-border-onlight-subtle);
+  }
+
+  &__content {
+    @include fonts.help-text;
+
+    margin-top: 0.625rem;
+
+    &--compact {
+      margin-top: 0.625rem;
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    gap: var(--core-space-xs);
+    margin-right: var(--core-space-3xs);
+    margin-bottom: 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      margin-right: var(--core-space-s);
+    }
+
+    &--compact {
+      margin-right: var(--core-space-2xs);
+      margin-bottom: 0;
+    }
+  }
+
+  &__title-wrapper {
+    display: flex;
+    align-items: center;
+  }
 }

package/lib/components/HelpPanel/styles.module.scss.d.ts

@@ -1,5 +1,13 @@
 export type Styles = {
   'help-panel': string;
+  'help-panel__content': string;
+  'help-panel__content--compact': string;
+  'help-panel__icon': string;
+  'help-panel__icon--compact': string;
+  'help-panel__title-wrapper': string;
+  'help-panel--compact': string;
+  'help-panel--subdued': string;
+  'help-panel--white': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/HelpTeaser/HelpTeaser.d.ts

@@ -1,13 +1,14 @@
 import { HNDesignsystemInfoTeaser } from '../../resources/Resources';
-import { InfoTeaserTags } from '../InfoTeaser';
 import { TitleTags } from '../Title';
+export type HelpTeaserVariants = 'normal' | 'subdued';
+export type HelpTeaserTags = 'div' | 'section' | 'aside' | 'article';
 export interface HelpTeaserProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Override the default max height for collapsed teaser. Default is 12.25rem */
     collapsedMaxHeight?: string;
     /** Changes the underlying element of the wrapper */
-    htmlMarkup?: InfoTeaserTags;
+    htmlMarkup?: HelpTeaserTags;
     /** Resources for component */
     resources?: Partial<HNDesignsystemInfoTeaser>;
     /** Sets the data-testid attribute */
@@ -16,6 +17,8 @@ export interface HelpTeaserProps {
     title: string;
     /** Markup props for title */
     titleHtmlMarkup?: TitleTags;
+    /** Sets the visual variant */
+    variant?: HelpTeaserVariants;
 }
 declare const HelpTeaser: React.FC<HelpTeaserProps>;
 export default HelpTeaser;

package/lib/components/HelpTeaser/index.js

@@ -1,21 +1,66 @@
+import { IconSize, LanguageLocales } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { useLanguage } from "../../hooks/useLanguage.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import Title_default from "../Title/index.js";
+import { useExpand } from "../../hooks/useExpand.js";
 import HandWaving from "../Icons/HandWaving.js";
-import { t as InfoTeaser_default } from "../../InfoTeaser.js";
-import { jsx } from "react/jsx-runtime";
+import { t as getResources } from "../../resourceHelper2.js";
+import classNames from "classnames";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/HelpTeaser/HelpTeaser.tsx
 var HelpTeaser = (props) => {
-	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;
-	return /* @__PURE__ */ jsx(InfoTeaser_default, {
-		testId,
-		htmlMarkup,
-		className: styles.helpteaser,
-		title,
-		titleHtmlMarkup,
-		resources,
-		svgIcon: HandWaving,
-		buttonClassName: styles["helpteaser__button"],
-		collapsedMaxHeight,
-		children
+	const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight, variant = "normal" } = props;
+	const [isExpanded, setIsExpanded] = useExpand(false);
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const defaultResources = getResources(language);
+	const helpTeaserTextId = useId();
+	const isMobile = useIsMobileBreakpoint();
+	const mergedResources = {
+		...defaultResources,
+		...resources
+	};
+	return /* @__PURE__ */ jsxs(htmlMarkup ?? "div", {
+		className: styles.wrapper,
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(styles.helpteaser, {
+				[styles["helpteaser--collapsed"]]: !isExpanded,
+				[styles["helpteaser--subdued"]]: variant === "subdued"
+			}),
+			style: { maxHeight: !isExpanded ? collapsedMaxHeight ?? "12.25rem" : void 0 },
+			children: [
+				/* @__PURE__ */ jsx(Icon_default, {
+					svgIcon: HandWaving,
+					size: isMobile ? IconSize.XSmall : IconSize.Small,
+					className: styles["helpteaser__icon"]
+				}),
+				title && typeof title !== "undefined" && /* @__PURE__ */ jsx(Title_default, {
+					testId: "titleId",
+					htmlMarkup: titleHtmlMarkup ?? "h2",
+					appearance: "title6",
+					className: styles["helpteaser__title"],
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: styles["helpteaser__text"],
+					"aria-hidden": isExpanded ? false : true,
+					id: helpTeaserTextId,
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: styles["helpteaser__button"],
+			onClick: () => {
+				setIsExpanded(!isExpanded);
+			},
+			"aria-expanded": isExpanded,
+			"aria-controls": helpTeaserTextId,
+			children: isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose
+		})]
 	});
 };
 //#endregion

package/lib/components/HelpTeaser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { InfoTeaserTags } from '../InfoTeaser';\nimport type { TitleTags } from '../Title';\n\nimport HandWaving from '../Icons/HandWaving';\nimport InfoTeaser from '../InfoTeaser';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight } = props;\n  return (\n    <InfoTeaser\n      testId={testId}\n      htmlMarkup={htmlMarkup}\n      className={styles.helpteaser}\n      title={title}\n      titleHtmlMarkup={titleHtmlMarkup}\n      resources={resources}\n      svgIcon={HandWaving}\n      buttonClassName={styles['helpteaser__button']}\n      collapsedMaxHeight={collapsedMaxHeight}\n    >\n      {children}\n    </InfoTeaser>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;;AA0BA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,iBAAiB,uBAAuB;CAChG,OACE,oBAAC,oBAAD;EACU;EACI;EACZ,WAAW,OAAO;EACX;EACU;EACN;EACX,SAAS;EACT,iBAAiB,OAAO;EACJ;EAEnB;CACS,CAAA;AAEhB;;;ACzCA,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTeaser/HelpTeaser.tsx","../../../src/components/HelpTeaser/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport { getResources } from '../InfoTeaser/resourceHelper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTeaserVariants = 'normal' | 'subdued';\nexport type HelpTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface HelpTeaserProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: HelpTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Sets the visual variant */\n  variant?: HelpTeaserVariants;\n}\n\nconst HelpTeaser: React.FC<HelpTeaserProps> = props => {\n  const { children, htmlMarkup, resources, testId, title, titleHtmlMarkup, collapsedMaxHeight, variant = 'normal' } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const helpTeaserTextId = useId();\n  const isMobile = useIsMobileBreakpoint();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup ?? 'div';\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId}>\n      <div\n        className={classNames(styles.helpteaser, {\n          [styles['helpteaser--collapsed']]: !isExpanded,\n          [styles['helpteaser--subdued']]: variant === 'subdued',\n        })}\n        style={{ maxHeight: !isExpanded ? (collapsedMaxHeight ?? '12.25rem') : undefined }}\n      >\n        <Icon svgIcon={HandWaving} size={isMobile ? IconSize.XSmall : IconSize.Small} className={styles['helpteaser__icon']} />\n        {title && typeof title !== 'undefined' && (\n          <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup ?? 'h2'} appearance=\"title6\" className={styles['helpteaser__title']}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['helpteaser__text']} aria-hidden={isExpanded ? false : true} id={helpTeaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={styles['helpteaser__button']}\n        onClick={() => {\n          setIsExpanded(!isExpanded);\n        }}\n        aria-expanded={isExpanded}\n        aria-controls={helpTeaserTextId}\n      >\n        {isExpanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default HelpTeaser;\n","import HelpTeaser from './HelpTeaser';\nexport * from './HelpTeaser';\nexport default HelpTeaser;\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,YAAY,WAAW,QAAQ,OAAO,iBAAiB,oBAAoB,UAAU,aAAa;CAEpH,MAAM,CAAC,YAAY,iBAAiB,UAAU,KAAK;CACnD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,mBAAmB,MAAM;CAC/B,MAAM,WAAW,sBAAsB;CAEvC,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;CACL;CAIA,OACE,qBAHiB,cAAc,OAG/B;EAAY,WAAW,OAAO;EAAS,eAAa;EAApD,UAAA,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY;KACtC,OAAO,2BAA2B,CAAC;KACnC,OAAO,yBAAyB,YAAY;GAC/C,CAAC;GACD,OAAO,EAAE,WAAW,CAAC,aAAc,sBAAsB,aAAc,KAAA,EAAU;GALnF,UAAA;IAOE,oBAAC,cAAD;KAAM,SAAS;KAAY,MAAM,WAAW,SAAS,SAAS,SAAS;KAAO,WAAW,OAAO;IAAsB,CAAA;IACrH,SAAS,OAAO,UAAU,eACzB,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY,mBAAmB;KAAM,YAAW;KAAS,WAAW,OAAO;KAChG,UAAA;IACI,CAAA;IAET,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAqB,eAAa,aAAa,QAAQ;KAAM,IAAI;KACrF;IACE,CAAA;GACF;EACL,CAAA,GAAA,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,OAAO;GAClB,eAAe;IACb,cAAc,CAAC,UAAU;GAC3B;GACA,iBAAe;GACf,iBAAe;GAEd,UAAA,aAAa,gBAAgB,mBAAmB,gBAAgB;EAC3D,CAAA,CACE;;AAEhB;;;ACvFA,IAAA,qBAAe"}

package/lib/components/HelpTeaser/styles.module.scss

@@ -1,14 +1,111 @@
+@use 'sass:map';
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+.wrapper {
+  position: relative;
+}
 
 .helpteaser {
+  display: grid;
+  grid-template-columns: [icon] auto [content] 1fr;
+  width: 100%;
+  overflow: hidden;
   background-color: var(--color-help-background-normal);
   border: 1px solid var(--color-help-border-subtle-wcag);
+  padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-m);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: var(--core-space-s) var(--core-space-s) var(--core-space-l);
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-l);
+  }
 
-  &::after {
-    background: linear-gradient(180deg, #f4ecfe40 0%, #f4ecfe 80%);
+  &--subdued {
+    background-color: var(--color-base-background-white);
+  }
+
+  &--collapsed {
+    &::after {
+      content: '';
+      position: absolute;
+      height: 5.875rem;
+      background: linear-gradient(180deg, #f4ecfe40 0%, #f4ecfe 80%);
+
+      /* 1px på hver side for å ikke ligge over border */
+      bottom: 1px;
+      left: 1px;
+      width: calc(100% - 2px);
+    }
+  }
+
+  &--collapsed#{&}--subdued {
+    &::after {
+      background: linear-gradient(180deg, #fff6 0%, #fff 80%);
+    }
+  }
+
+  &__title {
+    grid-column: content;
+    grid-row: 1;
+    align-self: center;
+    padding: var(--core-space-2xs) 0;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding-top: 0.62rem;
+    }
+  }
+
+  &__icon {
+    grid-column: icon;
+    grid-row: 1;
+    align-self: center;
+    margin-right: var(--core-space-3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-right: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+      margin-right: var(--core-space-s);
+    }
+  }
+
+  &__text {
+    @include fonts.help-text;
+
+    grid-column: content;
+    overflow: hidden;
+    height: inherit;
   }
 
   &__button {
+    position: absolute;
+    right: calc(50%);
+    border: none;
+    width: fit-content;
+    white-space: nowrap;
+    border-radius: 1.25rem;
+    color: var(--core-color-white, #fff);
+    padding: 0.375rem 1rem;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+    cursor: pointer;
+
+    /* @todo Mobile/HelpTriggerText */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%; // 1.2rem
     background-color: var(--color-help-graphics-normal);
 
     &:hover {
@@ -18,5 +115,11 @@
     &:active {
       background-color: var(--color-help-graphics-dark);
     }
+
+    &:focus-visible {
+      border: 1px solid var(--color-base-graphics-ondark);
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+    }
   }
 }

package/lib/components/HelpTeaser/styles.module.scss.d.ts

@@ -1,6 +1,12 @@
 export type Styles = {
   helpteaser: string;
   helpteaser__button: string;
+  helpteaser__icon: string;
+  helpteaser__text: string;
+  helpteaser__title: string;
+  'helpteaser--collapsed': string;
+  'helpteaser--subdued': string;
+  wrapper: string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/HelpTooltip/index.js

@@ -13,10 +13,13 @@ var HelpTooltip = ({ children, description, testId }) => {
 		elements: { reference: wordRef.current },
 		onOpenChange: setShowTooltip
 	});
+	const hover = useHover(context, { move: false });
+	const focus = useFocus(context);
+	const dismiss = useDismiss(context);
 	const { getReferenceProps } = useInteractions([
-		useHover(context, { move: false }),
-		useFocus(context),
-		useDismiss(context)
+		hover,
+		focus,
+		dismiss
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DictionaryTrigger_default, {
 		ref: wordRef,

package/lib/components/HelpTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTooltip/HelpTooltip.tsx","../../../src/components/HelpTooltip/index.ts"],"sourcesContent":["import { useState, useRef, useId } from 'react';\n\nimport { useFloating, useHover, useFocus, useDismiss, useInteractions, FloatingDelayGroup } from '@floating-ui/react';\n\nimport DictionaryTrigger from '../DictionaryTrigger';\nimport PopOver from '../PopOver';\n\nexport interface HelpTooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */\n  children: React.ReactNode;\n  /** Teksten som skal vises i boblen som åpnes */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, description, testId }) => {\n  const popoverId = useId();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { refs, context } = useFloating({\n    open: showTooltip,\n    elements: {\n      reference: wordRef.current,\n    },\n    onOpenChange: setShowTooltip,\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps } = useInteractions([hover, focus, dismiss]);\n\n  return (\n    <>\n      <DictionaryTrigger ref={wordRef} {...getReferenceProps()} selected={showTooltip} aria-describedby={popoverId} data-testid={testId}>\n        {children}\n      </DictionaryTrigger>\n      <PopOver role=\"tooltip\" ref={refs.setFloating} id={popoverId} show={showTooltip} testId={testId} controllerRef={wordRef}>\n        {description}\n      </PopOver>\n    </>\n  );\n};\n\nexport const HelpTooltipDelayGroup = FloatingDelayGroup;\n\nexport default HelpTooltip;\n","import HelpTooltip from './HelpTooltip';\nexport * from './HelpTooltip';\nexport default HelpTooltip;\n"],"mappings":";;;;;;AAgBA,IAAa,eAA2C,EAAE,UAAU,aAAa,aAAa;CAC5F,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,EAAE,MAAM,YAAY,YAAY;EACpC,MAAM;EACN,UAAU,EACR,WAAW,QAAQ,QACrB;EACA,cAAc;CAChB,CAAC;CAMD,MAAM,EAAE,sBAAsB,gBAAgB;EAJhC,SAAS,SAAS,EAAE,MAAM,MAAM,CAIC;EAHjC,SAAS,OAG+B;EAFtC,WAAW,OAEkC;CAAO,CAAC;CAErE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,2BAAD;EAAmB,KAAK;EAAS,GAAI,kBAAkB;EAAG,UAAU;EAAa,oBAAkB;EAAW,eAAa;EACxH;CACgB,CAAA,GACnB,oBAAC,iBAAD;EAAS,MAAK;EAAU,KAAK,KAAK;EAAa,IAAI;EAAW,MAAM;EAAqB;EAAQ,eAAe;YAC7G;CACM,CAAA,CACT,EAAA,CAAA;AAEN;AAEA,IAAa,wBAAwB;;;AC7CrC,IAAA,sBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTooltip/HelpTooltip.tsx","../../../src/components/HelpTooltip/index.ts"],"sourcesContent":["import { useState, useRef, useId } from 'react';\n\nimport { useFloating, useHover, useFocus, useDismiss, useInteractions, FloatingDelayGroup } from '@floating-ui/react';\n\nimport DictionaryTrigger from '../DictionaryTrigger';\nimport PopOver from '../PopOver';\n\nexport interface HelpTooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */\n  children: React.ReactNode;\n  /** Teksten som skal vises i boblen som åpnes */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, description, testId }) => {\n  const popoverId = useId();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { refs, context } = useFloating({\n    open: showTooltip,\n    elements: {\n      reference: wordRef.current,\n    },\n    onOpenChange: setShowTooltip,\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps } = useInteractions([hover, focus, dismiss]);\n\n  return (\n    <>\n      <DictionaryTrigger ref={wordRef} {...getReferenceProps()} selected={showTooltip} aria-describedby={popoverId} data-testid={testId}>\n        {children}\n      </DictionaryTrigger>\n      <PopOver role=\"tooltip\" ref={refs.setFloating} id={popoverId} show={showTooltip} testId={testId} controllerRef={wordRef}>\n        {description}\n      </PopOver>\n    </>\n  );\n};\n\nexport const HelpTooltipDelayGroup = FloatingDelayGroup;\n\nexport default HelpTooltip;\n","import HelpTooltip from './HelpTooltip';\nexport * from './HelpTooltip';\nexport default HelpTooltip;\n"],"mappings":";;;;;;AAgBA,IAAa,eAA2C,EAAE,UAAU,aAAa,aAAa;CAC5F,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,EAAE,MAAM,YAAY,YAAY;EACpC,MAAM;EACN,UAAU,EACR,WAAW,QAAQ,QACrB;EACA,cAAc;CAChB,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,EAAE,MAAM,MAAM,CAAC;CAC/C,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,sBAAsB,gBAAgB;EAAC;EAAO;EAAO;CAAO,CAAC;CAErE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,2BAAD;EAAmB,KAAK;EAAS,GAAI,kBAAkB;EAAG,UAAU;EAAa,oBAAkB;EAAW,eAAa;EACxH;CACgB,CAAA,GACnB,oBAAC,iBAAD;EAAS,MAAK;EAAU,KAAK,KAAK;EAAa,IAAI;EAAW,MAAM;EAAqB;EAAQ,eAAe;EAC7G,UAAA;CACM,CAAA,CACT,EAAA,CAAA;AAEN;AAEA,IAAa,wBAAwB;;;AC7CrC,IAAA,sBAAe"}

package/lib/components/HelpTriggerInline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx","../../../src/components/HelpTriggerInline/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerInline: React.FC<HelpTriggerInlineProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.HelpTriggerInline}\n      className={helpTriggerInlineStyles}\n      ref={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <span className={styles['help-trigger-inline__text']}>{children}</span>\n      <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} isHovered={isHovered} />\n    </button>\n  );\n};\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n","import HelpTriggerInline from './HelpTriggerInline';\nexport * from './HelpTriggerInline';\nexport default HelpTriggerInline;\n"],"mappings":";;;;;;;;;AA0CA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAC7F,MAAM,0BAA0B,WAAW,OAAO,wBAAwB,SAAS;CACnF,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CAEzG,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,GAAG,CAAC;EAC/B,GAAI;EACJ,GAAI;YARN,CAUE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAA+B;EAAe,CAAA,GACtE,oBAAC,yBAAD;GAAiC;GAAQ,MAAM;GAAW,YAAY;GAAmB;EAAY,CAAA,CAC/F;;AAEZ;AAEA,kBAAkB,cAAc;;;AC/DhC,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx","../../../src/components/HelpTriggerInline/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerInline: React.FC<HelpTriggerInlineProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.HelpTriggerInline}\n      className={helpTriggerInlineStyles}\n      ref={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <span className={styles['help-trigger-inline__text']}>{children}</span>\n      <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} isHovered={isHovered} />\n    </button>\n  );\n};\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n","import HelpTriggerInline from './HelpTriggerInline';\nexport * from './HelpTriggerInline';\nexport default HelpTriggerInline;\n"],"mappings":";;;;;;;;;AA0CA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAC7F,MAAM,0BAA0B,WAAW,OAAO,wBAAwB,SAAS;CACnF,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CAEzG,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,GAAG,CAAC;EAC/B,GAAI;EACJ,GAAI;EARN,UAAA,CAUE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAA+B;EAAe,CAAA,GACtE,oBAAC,yBAAD;GAAiC;GAAQ,MAAM;GAAW,YAAY;GAAmB;EAAY,CAAA,CAC/F;;AAEZ;AAEA,kBAAkB,cAAc;;;AC/DhC,IAAA,4BAAe"}

package/lib/components/HighlightPanel/index.js

@@ -1,2 +1,80 @@
-import { t as HighlightPanel_default } from "../../HighlightPanel.js";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { t as Icon_default } from "../../Icon.js";
+import { t as LazyIcon_default } from "../../LazyIcon.js";
+import { Breakpoint, useBreakpoint } from "../../hooks/useBreakpoint.js";
+import Title_default from "../Title/index.js";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/HighlightPanel/HighlightPanel.tsx
+var HighlightPanel = (props) => {
+	const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, variant = "normal", title, titleHtmlMarkup = "h2" } = props;
+	const breakpoint = useBreakpoint();
+	const containerClassName = classNames(styles.highlightpanel, styles[`highlightpanel--${color}`], svgIcon && styles["highlightpanel--has-icon"], className, { [styles["highlightpanel--compact"]]: variant === "compact" });
+	const renderContent = () => {
+		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
+			testId: "titleId",
+			htmlMarkup: titleHtmlMarkup,
+			appearance: variant === "compact" ? "title6" : "title4",
+			children: title
+		});
+		if (svgIcon) {
+			const iconSize = IconSize.Small;
+			if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: classNames(styles.highlightpanel__icon, styles["highlightpanel__icon--compact"]),
+				children: typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: svgIcon,
+					size: iconSize
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon,
+					size: iconSize
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: classNames(styles.highlightpanel__content, styles["highlightpanel__content--compact"]),
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__content__children--compact"],
+					children
+				})]
+			})] });
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.highlightpanel__icon,
+				children: [typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: svgIcon,
+					size: iconSize
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon,
+					size: iconSize
+				}), title && breakpoint < Breakpoint.md && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: styles.highlightpanel__content,
+				children: [title && breakpoint >= Breakpoint.md && /* @__PURE__ */ jsx("div", {
+					className: styles["highlightpanel__title-wrapper"],
+					children: titleElement
+				}), children]
+			})] });
+		}
+		return /* @__PURE__ */ jsxs(Fragment, { children: [title && /* @__PURE__ */ jsx("div", {
+			className: styles.highlightpanel__content,
+			children: /* @__PURE__ */ jsx("div", { children: titleElement })
+		}), children] });
+	};
+	return /* @__PURE__ */ jsx(htmlMarkup, {
+		className: containerClassName,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.HighlightPanel,
+		children: renderContent()
+	});
+};
+//#endregion
+//#region src/components/HighlightPanel/index.ts
+var HighlightPanel_default = HighlightPanel;
+//#endregion
 export { HighlightPanel_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/HighlightPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HighlightPanel/HighlightPanel.tsx","../../../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport type HighlightPanelVariants = 'normal' | 'compact';\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles.highlightpanel,\n    styles[`highlightpanel--${color}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    className,\n    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={classNames(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={containerClassName} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n      {renderContent()}\n    </CustomTag>\n  );\n};\n\nexport default HighlightPanel;\n","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;;AA6CA,IAAM,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,cAAc;CAEjC,MAAM,qBAAqB,WACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,UAAU,CAC/D;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;GACjG,UAAA;EACI,CAAA;EAGT,IAAI,SAAS;GACX,MAAM,WAAW,SAAS;GAE1B,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,sBAAsB,OAAO,gCAAgC;IAC5F,UAAA,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;IAAW,CAAA,IAAI,oBAAC,cAAD;KAAe;KAAS,MAAM;IAAW,CAAA;GACvH,CAAA,GACL,qBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,yBAAyB,OAAO,mCAAmC;IAArG,UAAA,CACG,SAAS,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,GACtF,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAgD;IAAc,CAAA,CAClF;GACL,CAAA,CAAA,EAAA,CAAA;GAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;IAAW,CAAA,IAAI,oBAAC,cAAD;KAAe;KAAS,MAAM;IAAW,CAAA,GACzH,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,CACjH;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAmC,UAAA;IAAkB,CAAA,GACpH,QACE;GACL,CAAA,CAAA,EAAA,CAAA;EAEN;EAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA;EACrB,CAAA,GAEN,QACD,EAAA,CAAA;CAEN;CAIA,OACE,oBAAC,YAAD;EAAW,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;EAC1F,UAAA,cAAc;CACN,CAAA;AAEf;;;AC1HA,IAAA,yBAAe"}

package/lib/components/Icons/AlarmClock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlarmClock.js","names":[],"sources":["../../../src/components/Icons/AlarmClock.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst AlarmClock: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <g fillRule=\"evenodd\">\n      <path d=\"M24.65 25.937h-4.88v-1.3h3.58v-4.862h1.3zM16.272 36.651l-.954-.883 2.632-2.845.954.883zM31.728 36.651l-2.632-2.845.954-.883 2.632 2.845z\" />\n      <path d=\"M24 14.602c-5.447 0-9.879 4.432-9.879 9.88 0 5.446 4.432 9.877 9.879 9.877 5.447 0 9.878-4.43 9.878-9.878 0-5.447-4.431-9.879-9.878-9.879m0 21.057c-6.164 0-11.179-5.015-11.179-11.178 0-6.164 5.015-11.179 11.179-11.179 6.164 0 11.178 5.015 11.178 11.18 0 6.162-5.014 11.177-11.178 11.177\" />\n      <path d=\"M16.287 12.44h-.005a3.418 3.418 0 00-2.435 1.013 3.435 3.435 0 00.557 5.306 11.19 11.19 0 014.936-4.43 3.407 3.407 0 00-3.053-1.89zm-1.33 8.03l-.556-.241a4.74 4.74 0 01-2.859-4.336 4.707 4.707 0 011.384-3.357 4.715 4.715 0 013.354-1.396h.007c2.08 0 3.892 1.344 4.513 3.346l.18.579-.565.219a9.885 9.885 0 00-5.178 4.649l-.28.538zm13.704-6.14a11.179 11.179 0 014.935 4.428 3.438 3.438 0 001.563-2.879 3.45 3.45 0 00-3.446-3.44h-.006a3.407 3.407 0 00-3.046 1.89zm4.382 6.14l-.28-.537a9.884 9.884 0 00-5.178-4.649l-.563-.22.179-.578a4.713 4.713 0 014.504-3.346h.008a4.75 4.75 0 014.745 4.737 4.738 4.738 0 01-2.86 4.35l-.555.242z\" />\n    </g>\n  );\n\n  const normalHover = (\n    <g fillRule=\"evenodd\">\n      <path d=\"M24.65 25.937h-4.88v-1.3h3.58v-4.862h1.3zM16.272 36.651l-.954-.883 2.632-2.845.954.883zM31.728 36.651l-2.632-2.845.954-.883 2.632 2.845z\" />\n      <path d=\"M24 14.602c-5.447 0-9.88 4.432-9.88 9.88 0 5.446 4.433 9.877 9.88 9.877 5.447 0 9.878-4.43 9.878-9.878 0-5.447-4.431-9.879-9.878-9.879m0 21.057c-6.164 0-11.18-5.015-11.18-11.178 0-6.164 5.016-11.179 11.18-11.179s11.178 5.015 11.178 11.18c0 6.162-5.014 11.177-11.178 11.177\" />\n      <path d=\"M28.66 14.329a11.184 11.184 0 014.936 4.43 3.437 3.437 0 00-1.878-6.319h-.006a3.407 3.407 0 00-3.052 1.889zm4.383 6.142l-.28-.538a9.88 9.88 0 00-5.179-4.649l-.564-.22.18-.578c.621-2.002 2.434-3.346 4.512-3.346h.008a4.715 4.715 0 013.354 1.396 4.71 4.71 0 011.384 3.357 4.742 4.742 0 01-2.859 4.336l-.556.242zm7.718-7.195l-1.3-.008c.014-2.44-1.794-5.082-4.737-5.1l.008-1.3c3.746.022 6.047 3.343 6.03 6.408\" />\n      <path d=\"M43.778 13.225l-1.3-.008c.011-1.962-.72-3.954-2.006-5.465-.99-1.163-2.744-2.552-5.477-2.568l.008-1.299c2.516.014 4.81 1.088 6.46 3.024 1.484 1.744 2.328 4.046 2.315 6.316m-27.491-.785h-.005a3.418 3.418 0 00-2.435 1.013 3.435 3.435 0 00.557 5.306 11.179 11.179 0 014.936-4.43 3.407 3.407 0 00-3.053-1.89zm-1.33 8.03l-.556-.241a4.74 4.74 0 01-2.86-4.336 4.707 4.707 0 011.385-3.357 4.715 4.715 0 013.354-1.396h.007c2.079 0 3.892 1.344 4.513 3.346l.179.579-.564.219a9.882 9.882 0 00-5.178 4.649l-.28.538zm-7.718-7.194c-.018-3.065 2.283-6.386 6.03-6.407l.008 1.3c-2.944.017-4.752 2.66-4.738 5.099l-1.3.008z\" />\n      <path d=\"M4.254 13.006c-.025-4.378 3.256-9.122 8.6-9.152l.007 1.3c-4.54.025-7.328 4.092-7.307 7.844l-1.3.008z\" />\n    </g>\n  );\n\n  const xSmall = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M23.869 33.994c-5.32 0-9.646-4.326-9.646-9.644a9.588 9.588 0 011.98-5.83c.03-.04.06-.082.09-.12a9.601 9.601 0 011.07-1.15l.13-.118a9.554 9.554 0 011.375-1.013 9.573 9.573 0 015-1.413 9.577 9.577 0 014.997 1.41l.108.066a9.63 9.63 0 011.397 1.066c.387.354.747.737 1.072 1.15.032.04.061.082.092.122a9.576 9.576 0 011.98 5.83c0 5.318-4.327 9.644-9.645 9.644zM12.945 15.76a3.187 3.187 0 01.936-2.272 3.19 3.19 0 012.27-.944h.006c1.137 0 2.158.599 2.726 1.549-.028.012-.05.031-.077.044a11.47 11.47 0 00-2.445 1.64c-.08.07-.156.14-.233.21-.32.297-.628.61-.913.942-.03.035-.062.065-.091.1-.312.372-.596.769-.859 1.18-.019.028-.043.053-.062.084a3.196 3.196 0 01-1.258-2.533zm18.632-3.216h.005c.855 0 1.66.332 2.266.936a3.196 3.196 0 01-.315 4.811c-.019-.03-.044-.056-.063-.087-.264-.41-.548-.806-.86-1.178l-.082-.09c-.29-.337-.6-.653-.925-.954l-.223-.203a11.462 11.462 0 00-2.445-1.64c-.027-.013-.053-.032-.08-.046a3.165 3.165 0 012.722-1.549zm3.705 11.807c0-1.593-.33-3.11-.923-4.488a4.95 4.95 0 00.738-7.635 4.947 4.947 0 00-3.515-1.452h-.008a4.926 4.926 0 00-4.37 2.661 11.37 11.37 0 00-6.67 0 4.924 4.924 0 00-4.377-2.661h-.009a4.945 4.945 0 00-3.519 1.464 4.94 4.94 0 00-1.454 3.523 4.968 4.968 0 002.202 4.101 11.33 11.33 0 00-.922 4.487c0 3.686 1.763 6.96 4.484 9.048l-1.925 2.08 1.299 1.2 2.122-2.294a11.34 11.34 0 005.434 1.379c1.965 0 3.817-.5 5.434-1.379l2.12 2.294 1.3-1.2-1.926-2.08c2.72-2.088 4.485-5.362 4.485-9.048zm-12.297-.078h-3.346v1.768h5.114v-6.395h-1.768v4.627z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M33.534 18.292c-.021-.033-.048-.062-.07-.095-.26-.404-.539-.795-.847-1.162-.037-.043-.077-.082-.114-.125a11.665 11.665 0 00-1.134-1.14 11.395 11.395 0 00-2.434-1.632c-.028-.013-.053-.032-.08-.046a3.168 3.168 0 012.725-1.549h.006a3.192 3.192 0 012.27.944 3.198 3.198 0 01-.322 4.805zm-9.666 15.702c-5.318 0-9.644-4.326-9.644-9.644a9.578 9.578 0 011.98-5.83l.09-.121a9.623 9.623 0 011.072-1.15 9.615 9.615 0 011.5-1.128 9.58 9.58 0 015.002-1.415 9.58 9.58 0 014.996 1.41l.111.067c.447.28.868.598 1.262.944l.142.129a9.7 9.7 0 011.058 1.137c.036.045.07.093.105.139a9.573 9.573 0 011.97 5.818c0 5.318-4.326 9.644-9.644 9.644zM12.945 15.759a3.213 3.213 0 013.204-3.216h.007c1.138 0 2.158.599 2.727 1.549-.026.012-.048.03-.075.043a11.458 11.458 0 00-3.595 2.796c-.028.033-.06.063-.087.096-.313.373-.597.77-.861 1.18-.02.03-.043.056-.062.085a3.196 3.196 0 01-1.258-2.533zm23.616.003a4.947 4.947 0 00-1.453-3.523 4.945 4.945 0 00-3.52-1.464h-.008c-1.87 0-3.53 1.04-4.378 2.661a11.355 11.355 0 00-3.334-.499c-1.16 0-2.278.176-3.333.5a4.926 4.926 0 00-4.38-2.662h-.008a4.986 4.986 0 00-4.97 4.987 4.963 4.963 0 002.2 4.101 11.352 11.352 0 00-.921 4.487c0 3.686 1.763 6.959 4.483 9.048l-1.925 2.079 1.297 1.202 2.123-2.295c1.617.88 3.469 1.38 5.434 1.38 1.966 0 3.816-.5 5.433-1.38l2.124 2.295 1.297-1.202-1.925-2.08c2.72-2.088 4.484-5.361 4.484-9.047 0-1.593-.33-3.109-.922-4.487a4.963 4.963 0 002.202-4.101zm2.661-7.097c-1.18-1.383-2.82-2.152-4.62-2.162l-.01 1.768c1.638.01 2.689.844 3.284 1.541a5.158 5.158 0 011.218 3.323l1.77.01a6.96 6.96 0 00-1.642-4.48zM13.137 6.503c-3.892.022-6.282 3.466-6.264 6.643l1.768-.01c-.013-2.327 1.707-4.849 4.504-4.865l-.008-1.768zm9.846 17.768h-3.345v1.769h5.115v-6.395h-1.77v4.626z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default AlarmClock;\n"],"mappings":";;;AAIA,IAAM,cAAsC,EAAE,MAAM,gBAAkD;CAiCpG,OAAO,QAAQ;EAAE;EAAM;EAAW,QA/BhC,qBAAC,KAAD;GAAG,UAAS;aAAZ;IACE,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;IACpJ,oBAAC,QAAD,EAAM,GAAE,iSAAkS,CAAA;IAC1S,oBAAC,QAAD,EAAM,GAAE,onBAAqnB,CAAA;GAC5nB;GA2B6B;EAAQ,aAvBxC,qBAAC,KAAD;GAAG,UAAS;aAAZ;IACE,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;IACpJ,oBAAC,QAAD,EAAM,GAAE,mRAAoR,CAAA;IAC5R,oBAAC,QAAD,EAAM,GAAE,uZAAwZ,CAAA;IACha,oBAAC,QAAD,EAAM,GAAE,6lBAA8lB,CAAA;IACtmB,oBAAC,QAAD,EAAM,GAAE,uGAAwG,CAAA;GAC/G;GAiBqC;EAAa,QAbrD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;EACH,CAUoD;EAAQ,aAN7D,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;EACH,CAG4D;CAAY,CAAC;AAC9E"}
+{"version":3,"file":"AlarmClock.js","names":[],"sources":["../../../src/components/Icons/AlarmClock.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst AlarmClock: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <g fillRule=\"evenodd\">\n      <path d=\"M24.65 25.937h-4.88v-1.3h3.58v-4.862h1.3zM16.272 36.651l-.954-.883 2.632-2.845.954.883zM31.728 36.651l-2.632-2.845.954-.883 2.632 2.845z\" />\n      <path d=\"M24 14.602c-5.447 0-9.879 4.432-9.879 9.88 0 5.446 4.432 9.877 9.879 9.877 5.447 0 9.878-4.43 9.878-9.878 0-5.447-4.431-9.879-9.878-9.879m0 21.057c-6.164 0-11.179-5.015-11.179-11.178 0-6.164 5.015-11.179 11.179-11.179 6.164 0 11.178 5.015 11.178 11.18 0 6.162-5.014 11.177-11.178 11.177\" />\n      <path d=\"M16.287 12.44h-.005a3.418 3.418 0 00-2.435 1.013 3.435 3.435 0 00.557 5.306 11.19 11.19 0 014.936-4.43 3.407 3.407 0 00-3.053-1.89zm-1.33 8.03l-.556-.241a4.74 4.74 0 01-2.859-4.336 4.707 4.707 0 011.384-3.357 4.715 4.715 0 013.354-1.396h.007c2.08 0 3.892 1.344 4.513 3.346l.18.579-.565.219a9.885 9.885 0 00-5.178 4.649l-.28.538zm13.704-6.14a11.179 11.179 0 014.935 4.428 3.438 3.438 0 001.563-2.879 3.45 3.45 0 00-3.446-3.44h-.006a3.407 3.407 0 00-3.046 1.89zm4.382 6.14l-.28-.537a9.884 9.884 0 00-5.178-4.649l-.563-.22.179-.578a4.713 4.713 0 014.504-3.346h.008a4.75 4.75 0 014.745 4.737 4.738 4.738 0 01-2.86 4.35l-.555.242z\" />\n    </g>\n  );\n\n  const normalHover = (\n    <g fillRule=\"evenodd\">\n      <path d=\"M24.65 25.937h-4.88v-1.3h3.58v-4.862h1.3zM16.272 36.651l-.954-.883 2.632-2.845.954.883zM31.728 36.651l-2.632-2.845.954-.883 2.632 2.845z\" />\n      <path d=\"M24 14.602c-5.447 0-9.88 4.432-9.88 9.88 0 5.446 4.433 9.877 9.88 9.877 5.447 0 9.878-4.43 9.878-9.878 0-5.447-4.431-9.879-9.878-9.879m0 21.057c-6.164 0-11.18-5.015-11.18-11.178 0-6.164 5.016-11.179 11.18-11.179s11.178 5.015 11.178 11.18c0 6.162-5.014 11.177-11.178 11.177\" />\n      <path d=\"M28.66 14.329a11.184 11.184 0 014.936 4.43 3.437 3.437 0 00-1.878-6.319h-.006a3.407 3.407 0 00-3.052 1.889zm4.383 6.142l-.28-.538a9.88 9.88 0 00-5.179-4.649l-.564-.22.18-.578c.621-2.002 2.434-3.346 4.512-3.346h.008a4.715 4.715 0 013.354 1.396 4.71 4.71 0 011.384 3.357 4.742 4.742 0 01-2.859 4.336l-.556.242zm7.718-7.195l-1.3-.008c.014-2.44-1.794-5.082-4.737-5.1l.008-1.3c3.746.022 6.047 3.343 6.03 6.408\" />\n      <path d=\"M43.778 13.225l-1.3-.008c.011-1.962-.72-3.954-2.006-5.465-.99-1.163-2.744-2.552-5.477-2.568l.008-1.299c2.516.014 4.81 1.088 6.46 3.024 1.484 1.744 2.328 4.046 2.315 6.316m-27.491-.785h-.005a3.418 3.418 0 00-2.435 1.013 3.435 3.435 0 00.557 5.306 11.179 11.179 0 014.936-4.43 3.407 3.407 0 00-3.053-1.89zm-1.33 8.03l-.556-.241a4.74 4.74 0 01-2.86-4.336 4.707 4.707 0 011.385-3.357 4.715 4.715 0 013.354-1.396h.007c2.079 0 3.892 1.344 4.513 3.346l.179.579-.564.219a9.882 9.882 0 00-5.178 4.649l-.28.538zm-7.718-7.194c-.018-3.065 2.283-6.386 6.03-6.407l.008 1.3c-2.944.017-4.752 2.66-4.738 5.099l-1.3.008z\" />\n      <path d=\"M4.254 13.006c-.025-4.378 3.256-9.122 8.6-9.152l.007 1.3c-4.54.025-7.328 4.092-7.307 7.844l-1.3.008z\" />\n    </g>\n  );\n\n  const xSmall = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M23.869 33.994c-5.32 0-9.646-4.326-9.646-9.644a9.588 9.588 0 011.98-5.83c.03-.04.06-.082.09-.12a9.601 9.601 0 011.07-1.15l.13-.118a9.554 9.554 0 011.375-1.013 9.573 9.573 0 015-1.413 9.577 9.577 0 014.997 1.41l.108.066a9.63 9.63 0 011.397 1.066c.387.354.747.737 1.072 1.15.032.04.061.082.092.122a9.576 9.576 0 011.98 5.83c0 5.318-4.327 9.644-9.645 9.644zM12.945 15.76a3.187 3.187 0 01.936-2.272 3.19 3.19 0 012.27-.944h.006c1.137 0 2.158.599 2.726 1.549-.028.012-.05.031-.077.044a11.47 11.47 0 00-2.445 1.64c-.08.07-.156.14-.233.21-.32.297-.628.61-.913.942-.03.035-.062.065-.091.1-.312.372-.596.769-.859 1.18-.019.028-.043.053-.062.084a3.196 3.196 0 01-1.258-2.533zm18.632-3.216h.005c.855 0 1.66.332 2.266.936a3.196 3.196 0 01-.315 4.811c-.019-.03-.044-.056-.063-.087-.264-.41-.548-.806-.86-1.178l-.082-.09c-.29-.337-.6-.653-.925-.954l-.223-.203a11.462 11.462 0 00-2.445-1.64c-.027-.013-.053-.032-.08-.046a3.165 3.165 0 012.722-1.549zm3.705 11.807c0-1.593-.33-3.11-.923-4.488a4.95 4.95 0 00.738-7.635 4.947 4.947 0 00-3.515-1.452h-.008a4.926 4.926 0 00-4.37 2.661 11.37 11.37 0 00-6.67 0 4.924 4.924 0 00-4.377-2.661h-.009a4.945 4.945 0 00-3.519 1.464 4.94 4.94 0 00-1.454 3.523 4.968 4.968 0 002.202 4.101 11.33 11.33 0 00-.922 4.487c0 3.686 1.763 6.96 4.484 9.048l-1.925 2.08 1.299 1.2 2.122-2.294a11.34 11.34 0 005.434 1.379c1.965 0 3.817-.5 5.434-1.379l2.12 2.294 1.3-1.2-1.926-2.08c2.72-2.088 4.485-5.362 4.485-9.048zm-12.297-.078h-3.346v1.768h5.114v-6.395h-1.768v4.627z\"\n    />\n  );\n\n  const xSmallHover = (\n    <path\n      fillRule=\"evenodd\"\n      d=\"M33.534 18.292c-.021-.033-.048-.062-.07-.095-.26-.404-.539-.795-.847-1.162-.037-.043-.077-.082-.114-.125a11.665 11.665 0 00-1.134-1.14 11.395 11.395 0 00-2.434-1.632c-.028-.013-.053-.032-.08-.046a3.168 3.168 0 012.725-1.549h.006a3.192 3.192 0 012.27.944 3.198 3.198 0 01-.322 4.805zm-9.666 15.702c-5.318 0-9.644-4.326-9.644-9.644a9.578 9.578 0 011.98-5.83l.09-.121a9.623 9.623 0 011.072-1.15 9.615 9.615 0 011.5-1.128 9.58 9.58 0 015.002-1.415 9.58 9.58 0 014.996 1.41l.111.067c.447.28.868.598 1.262.944l.142.129a9.7 9.7 0 011.058 1.137c.036.045.07.093.105.139a9.573 9.573 0 011.97 5.818c0 5.318-4.326 9.644-9.644 9.644zM12.945 15.759a3.213 3.213 0 013.204-3.216h.007c1.138 0 2.158.599 2.727 1.549-.026.012-.048.03-.075.043a11.458 11.458 0 00-3.595 2.796c-.028.033-.06.063-.087.096-.313.373-.597.77-.861 1.18-.02.03-.043.056-.062.085a3.196 3.196 0 01-1.258-2.533zm23.616.003a4.947 4.947 0 00-1.453-3.523 4.945 4.945 0 00-3.52-1.464h-.008c-1.87 0-3.53 1.04-4.378 2.661a11.355 11.355 0 00-3.334-.499c-1.16 0-2.278.176-3.333.5a4.926 4.926 0 00-4.38-2.662h-.008a4.986 4.986 0 00-4.97 4.987 4.963 4.963 0 002.2 4.101 11.352 11.352 0 00-.921 4.487c0 3.686 1.763 6.959 4.483 9.048l-1.925 2.079 1.297 1.202 2.123-2.295c1.617.88 3.469 1.38 5.434 1.38 1.966 0 3.816-.5 5.433-1.38l2.124 2.295 1.297-1.202-1.925-2.08c2.72-2.088 4.484-5.361 4.484-9.047 0-1.593-.33-3.109-.922-4.487a4.963 4.963 0 002.202-4.101zm2.661-7.097c-1.18-1.383-2.82-2.152-4.62-2.162l-.01 1.768c1.638.01 2.689.844 3.284 1.541a5.158 5.158 0 011.218 3.323l1.77.01a6.96 6.96 0 00-1.642-4.48zM13.137 6.503c-3.892.022-6.282 3.466-6.264 6.643l1.768-.01c-.013-2.327 1.707-4.849 4.504-4.865l-.008-1.768zm9.846 17.768h-3.345v1.769h5.115v-6.395h-1.77v4.626z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default AlarmClock;\n"],"mappings":";;;AAIA,IAAM,cAAsC,EAAE,MAAM,gBAAkD;CAiCpG,OAAO,QAAQ;EAAE;EAAM;EAAW,QA/BhC,qBAAC,KAAD;GAAG,UAAS;GAAZ,UAAA;IACE,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;IACpJ,oBAAC,QAAD,EAAM,GAAE,iSAAkS,CAAA;IAC1S,oBAAC,QAAD,EAAM,GAAE,onBAAqnB,CAAA;GAC5nB;EA2B6B,CAAA;EAAQ,aAvBxC,qBAAC,KAAD;GAAG,UAAS;GAAZ,UAAA;IACE,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;IACpJ,oBAAC,QAAD,EAAM,GAAE,mRAAoR,CAAA;IAC5R,oBAAC,QAAD,EAAM,GAAE,uZAAwZ,CAAA;IACha,oBAAC,QAAD,EAAM,GAAE,6lBAA8lB,CAAA;IACtmB,oBAAC,QAAD,EAAM,GAAE,uGAAwG,CAAA;GAC/G;EAiBqC,CAAA;EAAa,QAbrD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;EACH,CAUoD;EAAQ,aAN7D,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;EACH,CAG4D;CAAY,CAAC;AAC9E"}