@helsenorge/designsystem-react 8.4.0 → 8.5.1

package/Expander.js

@@ -0,0 +1,108 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useRef as C } from "react";
+import i from "classnames";
+import { ZIndex as O, AnalyticsId as z, IconSize as c } from "./constants.js";
+import { useExpand as U } from "./hooks/useExpand.js";
+import { useHover as Z } from "./hooks/useHover.js";
+import { useSticky as q } from "./hooks/useSticky.js";
+import { B as F } from "./Button.js";
+import { I as x } from "./Icon.js";
+import E from "./components/Icons/ChevronDown.js";
+import b from "./components/Icons/ChevronUp.js";
+import { L as G } from "./LazyIcon.js";
+import e from "./components/Expander/styles.module.scss";
+var J = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(J || {});
+const ie = (s) => {
+  const {
+    title: g,
+    children: k,
+    size: n = "small",
+    color: _,
+    contentClassNames: $,
+    svgIcon: a,
+    expanded: S = !1,
+    noNestedLine: w = !1,
+    sticky: L = !1,
+    testId: f,
+    onExpand: W,
+    renderChildrenWhenClosed: X = !1,
+    zIndex: B = O.ExpanderTrigger
+  } = s, [r, u] = U(S, W), v = C(null), d = C(null), { isHovered: l } = Z(d), { isOutsideWindow: H, isLeavingWindow: h, offsetHeight: y, contentWidth: I } = q(v, d), o = L && r && H, N = (p) => /* @__PURE__ */ t("span", { className: i(e.expander__icon, e[`expander__icon--${p}`]), children: /* @__PURE__ */ t(x, { svgIcon: r ? b : E, size: c.XSmall, isHovered: l }) }), R = i(
+    e.expander__trigger,
+    n === "large" && e[`expander__trigger--${n}`],
+    n === "large" && e[`expander__trigger--${_ || "neutral"}`],
+    n === "large" && a && e["expander__trigger--icon"],
+    r && e["expander__trigger--expanded"],
+    o && !h && e["expander__trigger--sticky"]
+  ), T = () => /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      className: R,
+      style: {
+        zIndex: l || o ? B : void 0,
+        width: o && I ? `${I}px` : void 0
+      },
+      "aria-expanded": r,
+      ref: d,
+      onClick: () => u(!r),
+      "data-testid": f,
+      "data-analyticsid": z.Expander,
+      children: [
+        n === "small" && N("left"),
+        a && /* @__PURE__ */ t("span", { className: i(e.expander__icon, e["expander__icon--left"]), children: typeof a == "string" ? /* @__PURE__ */ t(G, { iconName: a, size: c.XSmall, isHovered: l }) : /* @__PURE__ */ t(x, { svgIcon: a, size: c.XSmall, isHovered: l }) }),
+        g,
+        n === "large" && N("right")
+      ]
+    }
+  ), j = i(
+    e.expander__button,
+    r && e["expander__button--expanded"],
+    o && !h && e["expander__button--sticky"]
+  ), A = () => /* @__PURE__ */ m(
+    F,
+    {
+      variant: "borderless",
+      className: j,
+      "aria-expanded": r,
+      ref: d,
+      onClick: () => u(!r),
+      testId: f,
+      "data-analyticsid": z.Expander,
+      children: [
+        /* @__PURE__ */ t(x, { svgIcon: r ? b : E, size: c.XSmall }),
+        g
+      ]
+    }
+  ), D = () => {
+    if (!X && !r)
+      return null;
+    const p = i(
+      e.expander__content,
+      e[`expander__content--${n}`],
+      n === "large" && e[`expander__content--${_ || "neutral"}`],
+      n === "large" && a && e["expander__content--icon"],
+      r && e["expander__content--expanded"],
+      n === "small" && !w && e["expander__content--nested-line"],
+      $
+    );
+    return /* @__PURE__ */ t("div", { className: p, children: k });
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: e.expander,
+      ref: v,
+      style: { paddingTop: o && y ? `${y}px` : void 0 },
+      children: [
+        n === "large" ? T() : A(),
+        D()
+      ]
+    }
+  );
+};
+export {
+  ie as E,
+  J as a
+};
+//# sourceMappingURL=Expander.js.map

package/Expander.js.map

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

package/FormGroup.js

@@ -0,0 +1,113 @@
+import { jsxs as i, jsx as p } from "react/jsx-runtime";
+import t, { useState as A } from "react";
+import f from "classnames";
+import { FormMode as E, FormSize as k, AnalyticsId as D } from "./constants.js";
+import { useUuid as F } from "./hooks/useUuid.js";
+import { isComponent as s } from "./utils/component.js";
+import { C as H } from "./Checkbox.js";
+import { E as h } from "./ErrorWrapper.js";
+import { F as q } from "./FormLayout.js";
+import { I as J } from "./Input.js";
+import { R as K, g as O } from "./RadioButton.js";
+import { S as P } from "./Select.js";
+import { T as Q } from "./Textarea.js";
+import { T as V } from "./Title.js";
+import d from "./components/FormGroup/styles.module.scss";
+const G = t.forwardRef((r, R) => {
+  const {
+    className: y,
+    fieldsetClassName: _,
+    mode: a = E.onwhite,
+    size: m = k.medium,
+    error: o,
+    errorTextId: S,
+    name: l,
+    htmlMarkup: c = "fieldset",
+    renderError: b = !0,
+    errorWrapperClassName: w,
+    errorWrapperTestId: W
+  } = r, [v, L] = A(), M = F(), n = F(S), I = a === E.ondark, j = m === k.large, z = f(d["form-group-wrapper"], y), B = f({
+    [d["form-group-wrapper__title--on-dark"]]: I && !o
+  }), g = f(d["field-set__legend"], {
+    [d["field-set__legend--on-dark"]]: I && !o
+  }), C = f(d["field-set"], _), u = (e, U) => {
+    if (s(e, q))
+      return t.cloneElement(e, {
+        size: m,
+        mapHelper: u
+      });
+    if (s(e, G))
+      return t.cloneElement(e, {
+        mode: a,
+        size: m,
+        error: o,
+        renderError: !1,
+        errorTextId: n
+      });
+    if (s(e, H))
+      return t.cloneElement(e, {
+        name: l ?? e.props.name,
+        mode: a,
+        size: m,
+        error: !!o,
+        errorTextId: n
+      });
+    if (s(e, K)) {
+      const T = typeof e.props.inputId > "u" ? M + U : e.props.inputId;
+      return t.cloneElement(e, {
+        inputId: T,
+        name: l ?? e.props.name,
+        mode: a,
+        size: m,
+        onChange: (N) => {
+          L(N.target.id), e.props.onChange && e.props.onChange(N);
+        },
+        error: !!o,
+        errorTextId: n,
+        labelClassNames: O(T, a, j, v)
+      });
+    } else {
+      if (s(e, J))
+        return t.cloneElement(e, {
+          name: l ?? e.props.name,
+          mode: a,
+          size: m,
+          error: !!o,
+          errorTextId: n
+        });
+      if (s(e, Q))
+        return t.cloneElement(e, {
+          name: l ?? e.props.name,
+          mode: a,
+          error: !!o,
+          errorTextId: n
+        });
+      if (s(e, P))
+        return t.cloneElement(e, {
+          name: l ?? e.props.name,
+          mode: a,
+          error: !!o,
+          errorTextId: n
+        });
+    }
+    return e;
+  }, x = () => /* @__PURE__ */ i("div", { children: [
+    c === "div" && /* @__PURE__ */ i("div", { className: C, children: [
+      r.legend && /* @__PURE__ */ p("h5", { className: g, children: r.legend }),
+      t.Children.map(r.children, u)
+    ] }),
+    c === "fieldset" && /* @__PURE__ */ i("fieldset", { name: r.fieldsetName, className: C, children: [
+      r.legend && /* @__PURE__ */ p("legend", { className: g, children: r.legend }),
+      t.Children.map(r.children, u)
+    ] })
+  ] });
+  return /* @__PURE__ */ i("div", { "data-testid": r.testId, "data-analyticsid": D.FormGroup, className: z, ref: R, tabIndex: -1, children: [
+    r.title && /* @__PURE__ */ p(V, { className: B, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 }, children: r.title }),
+    b ? /* @__PURE__ */ p(h, { className: w, errorText: o, testId: W, errorTextId: n, children: x() }) : x()
+  ] });
+});
+G.displayName = "FormGroup";
+export {
+  G as F
+};
+//# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    size = FormSize.medium,\n    error,\n    errorTextId,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useUuid();\n  const errorTextUuid = useUuid(errorTextId);\n  const onDark = mode === FormMode.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        mode,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          child.props.onChange && child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextUuid,\n        labelClassNames: getRadioLabelClasses(radioId, mode as FormMode, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId} errorTextId={errorTextUuid}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","size","FormSize","error","errorTextId","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","checkedRadioId","setCheckedRadioId","useState","radioGroupId","useUuid","errorTextUuid","onDark","isLarge","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","legendClasses","fieldsetClasses","mapFormComponent","child","index","isComponent","FormLayout","Checkbox","RadioButton","radioId","event","getRadioLabelClasses","Input","Textarea","Select","formGroupContent","jsxs","jsx","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}

package/FormLayout.js

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import l from "react";
+import s from "classnames";
+import { FormSize as p, AnalyticsId as v } from "./constants.js";
+import r from "./components/FormLayout/styles.module.scss";
+var w = /* @__PURE__ */ ((o) => (o.one = "one", o.two = "two", o.three = "three", o.four = "four", o.five = "five", o))(w || {});
+const N = l.forwardRef((o, m) => {
+  const { maxColumns: e = "one", colMinWidth: c = 300, size: f, className: n, mapHelper: t } = o, d = { "--min-col-width": `${c}px` }, h = s(
+    r["form-layout-container"],
+    {
+      [r["form-layout-container--large"]]: f === p.large
+    },
+    n
+  ), u = s(r["form-layout-child"], {
+    [r["form-layout-child--two"]]: e === "two",
+    [r["form-layout-child--three"]]: e === "three",
+    [r["form-layout-child--four"]]: e === "four",
+    [r["form-layout-child--five"]]: e === "five"
+    /* five */
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-testid": o.testId,
+      "data-analyticsid": v.FormLayout,
+      style: d,
+      className: h,
+      ref: m,
+      children: l.Children.map(o.children, (a, y) => /* @__PURE__ */ i("div", { className: u, children: t ? t(a, y) : a }))
+    }
+  );
+});
+N.displayName = "FormLayout";
+export {
+  N as F,
+  w as a
+};
+//# sourceMappingURL=FormLayout.js.map

package/FormLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","size","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormSize","formLayoutChildClasses","jsx","AnalyticsId","child","index"],"mappings":";;;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,OAAO,QALGA,IAAAA,KAAA,CAAA,CAAA;AAyBL,MAAMC,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AACxG,QAAA,EAAE,YAAYC,IAAU,OAAuB,aAAAC,IAAc,KAAK,MAAAC,GAAM,WAAAC,GAAW,WAAAC,EAAc,IAAAN,GAEjGO,IAAc,EAAE,mBAAmB,GAAGJ,CAAW,QACjDK,IAA6BC;AAAA,IACjCC,EAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAACA,EAAgB,8BAA8B,CAAC,GAAGN,MAASO,EAAS;AAAA,IACvE;AAAA,IACAN;AAAA,EAAA,GAEIO,IAAyBH,EAAWC,EAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAACA,EAAgB,wBAAwB,CAAC,GAAGR,MAAY;AAAA,IACzD,CAACQ,EAAgB,0BAA0B,CAAC,GAAGR,MAAY;AAAA,IAC3D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IAC1D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAab,EAAM;AAAA,MACnB,oBAAkBc,EAAY;AAAA,MAC9B,OAAOP;AAAA,MACP,WAAWC;AAAA,MACX,KAAAP;AAAA,MAEC,YAAM,SAAS,IAAID,EAAM,UAAU,CAACe,GAAwBC,MACpD,gBAAAH,EAAC,SAAI,WAAWD,GAAyB,cAAYN,EAAUS,GAAOC,CAAK,IAAID,EAAM,CAAA,CAC7F;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDjB,EAAW,cAAc;"}

package/HelpBubble.js

@@ -0,0 +1,68 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import x from "react";
+import b from "classnames";
+import { AnalyticsId as A } from "./constants.js";
+import { A as j } from "./AnchorLink.js";
+import { C as w } from "./Close.js";
+import { P as I, a as P } from "./PopOver.js";
+import r from "./components/HelpBubble/styles.module.scss";
+const D = I, R = x.forwardRef((p, u) => {
+  const {
+    children: m,
+    className: d = "",
+    noCloseButton: o,
+    linkText: t = "Mer hjelp",
+    linkUrl: n,
+    linkTarget: h,
+    onLinkClick: s,
+    onClose: f,
+    closeAriaLabel: k,
+    // Props passed on to PopOver
+    showBubble: i,
+    helpBubbleId: C,
+    variant: B,
+    controllerRef: _,
+    role: a,
+    testId: N
+  } = p, e = a === "tooltip";
+  if (!i && !e)
+    return null;
+  const v = b(r.helpbubble, d), y = b(r.helpbubble__content, {
+    [r["helpbubble__content--close"]]: !o && !e
+  }), H = () => {
+    if (!e) {
+      if (s && t)
+        return /* @__PURE__ */ l("button", { className: r.helpbubble__link, onClick: s, type: "button", children: t });
+      if (n && t)
+        return /* @__PURE__ */ l(j, { href: n, target: h, children: t });
+    }
+  }, L = () => {
+    if (!(o || e))
+      return /* @__PURE__ */ l("div", { className: r.helpbubble__close, children: /* @__PURE__ */ l(w, { small: !0, onClick: f, ariaLabel: k }) });
+  };
+  return /* @__PURE__ */ l(
+    P,
+    {
+      id: C,
+      variant: B,
+      controllerRef: _,
+      role: a,
+      ref: u,
+      show: e && i,
+      testId: N,
+      children: /* @__PURE__ */ c("div", { className: v, "data-analyticsid": A.HelpBubble, children: [
+        L(),
+        /* @__PURE__ */ c("div", { className: y, children: [
+          m,
+          H()
+        ] })
+      ] })
+    }
+  );
+});
+R.displayName = "HelpBubble";
+export {
+  R as H,
+  D as a
+};
+//# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","PopOverVariant","HelpBubble","React","props","ref","children","className","noCloseButton","linkText","linkUrl","linkTarget","onLinkClick","onClose","closeAriaLabel","showBubble","helpBubbleId","variant","controllerRef","role","testId","isTooltip","helpBubbleClasses","classNames","styles","contentClasses","renderLink","jsx","AnchorLink","renderCloseButton","Close","PopOver","AnalyticsId","jsxs"],"mappings":";;;;;;;;AAWO,MAAMA,IAAoBC,GAqC3BC,IAAaC,EAAM,WAA4D,CAACC,GAAOC,MAAQ;AAC7F,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAhB,GAEEiB,IAAYF,MAAS;AAEvB,MAAA,CAACJ,KAAc,CAACM;AACX,WAAA;AAGT,QAAMC,IAAoBC,EAAWC,EAAO,YAAYjB,CAAS,GAE3DkB,IAAiBF,EAAWC,EAAO,qBAAqB;AAAA,IAC5D,CAACA,EAAO,4BAA4B,CAAC,GAAG,CAAChB,KAAiB,CAACa;AAAA,EAAA,CAC5D,GAEKK,IAAa,MAA+B;AAEhD,QAAI,CAAAL,GAGJ;AAAA,UAAIT,KAAeH;AAEf,eAAA,gBAAAkB,EAAC,YAAO,WAAWH,EAAO,kBAAkB,SAASZ,GAAa,MAAK,UACpE,UACHH,EAAA,CAAA;AAEJ,UAAWC,KAAWD;AACpB,iCACGmB,GAAW,EAAA,MAAMlB,GAAS,QAAQC,GAChC,UACHF,EAAA,CAAA;AAAA;AAAA,EAEJ,GAGIoB,IAAoB,MAA+B;AACvD,QAAI,EAAArB,KAAiBa;AAGrB,aACG,gBAAAM,EAAA,OAAA,EAAI,WAAWH,EAAO,mBACrB,UAAA,gBAAAG,EAACG,GAAM,EAAA,OAAK,IAAC,SAASjB,GAAS,WAAWC,GAAgB,EAC5D,CAAA;AAAA,EAAA;AAKF,SAAA,gBAAAa;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,IAAIf;AAAA,MACJ,SAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC;AAAA,MACA,KAAAd;AAAA,MACA,MAAMgB,KAAaN;AAAA,MACnB,QAAAK;AAAA,MAEA,4BAAC,OAAI,EAAA,WAAWE,GAAmB,oBAAkBU,EAAY,YAC9D,UAAA;AAAA,QAAkBH,EAAA;AAAA,QACnB,gBAAAI,EAAC,OAAI,EAAA,WAAWR,GACb,UAAA;AAAA,UAAAnB;AAAA,UACAoB,EAAW;AAAA,QAAA,GACd;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDxB,EAAW,cAAc;"}

package/HighlightPanel.js

@@ -0,0 +1,71 @@
+import { jsx as e, jsxs as g, Fragment as z } from "react/jsx-runtime";
+import l from "classnames";
+import "./theme/grid.js";
+import { useBreakpoint as H, Breakpoint as M } from "./hooks/useBreakpoint.js";
+import "react";
+import { AnalyticsId as u, IconSize as I } from "./constants.js";
+import { I as x } from "./Icon.js";
+import { L as T } from "./LazyIcon.js";
+import { T as b } from "./Title.js";
+import a from "./components/HighlightPanel/styles.module.scss";
+var j = /* @__PURE__ */ ((t) => (t.medium = "medium", t.large = "large", t.fluid = "fluid", t))(j || {});
+const _ = ({ className: t, size: n, children: s }) => /* @__PURE__ */ e("div", { className: t, "data-testid": "highlightpanel-wrapper", children: /* @__PURE__ */ e("div", { className: a.highlightpanel__row, children: /* @__PURE__ */ e("div", { className: l(a.highlightpanel__col, n === "medium" && a["highlightpanel__col--offset"]), children: s }) }) }), k = (t) => {
+  const { children: n, className: s } = t, i = l(a["highlightpanel__content-wrapper"], s);
+  return /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("div", { className: l(a.highlightpanel__row), children: n }) });
+}, G = (t) => {
+  const {
+    children: n,
+    color: s = "white",
+    size: i = "medium",
+    testId: c,
+    svgIcon: r,
+    htmlMarkup: w = "div",
+    className: y,
+    contentWrapperClassName: C,
+    title: m,
+    titleHtmlMarkup: W = "h2"
+  } = t, N = H(), h = l(
+    a[`highlightpanel--${s}`],
+    a[`highlightpanel--${i}`],
+    r && a["highlightpanel--has-icon"],
+    { container: i === "medium" || i === "large" },
+    y
+  ), o = () => {
+    if (r) {
+      const f = i === "large" && N && N >= M.md ? I.Medium : I.Small, v = /* @__PURE__ */ e(b, { testId: "titleId", htmlMarkup: W, appearance: "title4", children: m });
+      return /* @__PURE__ */ g(z, { children: [
+        /* @__PURE__ */ g("div", { className: a.highlightpanel__icon, children: [
+          typeof r == "string" ? /* @__PURE__ */ e(T, { iconName: r, size: f }) : /* @__PURE__ */ e(x, { svgIcon: r, size: f }),
+          m && /* @__PURE__ */ e("div", { className: a.mobile, children: v })
+        ] }),
+        /* @__PURE__ */ g("div", { className: a.highlightpanel__content, children: [
+          m && /* @__PURE__ */ e("div", { className: a.desktop, "aria-hidden": "true", children: v }),
+          n
+        ] })
+      ] });
+    }
+    return n;
+  }, d = w, p = l(a["highlightpanel__content-wrapper"], C);
+  return i === "medium" ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(d, { className: p, "data-testid": c, "data-analyticsid": u.HighlightPanel, children: o() }) }) : i === "large" && r ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(k, { className: p, children: /* @__PURE__ */ e(
+    d,
+    {
+      className: l(a.highlightpanel__col, a["highlightpanel__col--large-with-icon"]),
+      "data-testid": c,
+      "data-analyticsid": u.HighlightPanel,
+      children: o()
+    }
+  ) }) }) : i === "large" ? /* @__PURE__ */ e(_, { className: h, size: i, children: /* @__PURE__ */ e(k, { className: p, children: /* @__PURE__ */ e(
+    d,
+    {
+      className: l(a.highlightpanel__col, a["highlightpanel__col--offset"]),
+      "data-testid": c,
+      "data-analyticsid": u.HighlightPanel,
+      children: o()
+    }
+  ) }) }) : i === "fluid" ? /* @__PURE__ */ e(d, { className: h, "data-testid": c, children: o() }) : null;
+};
+export {
+  G as H,
+  j as a
+};
+//# sourceMappingURL=HighlightPanel.js.map

package/HighlightPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\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  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\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  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\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\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\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 && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}

package/HorizontalScroll.js

@@ -0,0 +1,49 @@
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import s from "classnames";
+import { useIsVisible as c } from "./hooks/useIsVisible.js";
+import { useSize as g } from "./hooks/useSize.js";
+import { useStopPropagation as N } from "./hooks/usestopPropagation.js";
+import r from "./components/HorizontalScroll/styles.module.scss";
+const d = "3px", V = ({ children: m, childWidth: h, testId: _, ...t }) => {
+  const o = l(null), a = l(null), e = l(null), f = c(a, 1, { root: o == null ? void 0 : o.current, rootMargin: d }, !0), u = c(e, 1, { root: o == null ? void 0 : o.current, rootMargin: d }, !0), { width: v = 0 } = g(o) || {}, p = h > v, z = s(r.horizontalscroll__viewport, p && r["horizontalscroll__viewport--overflow"]), n = t["aria-label"] || t["aria-labelledby"];
+  return N(o, ["touchstart", "touchmove"]), /* @__PURE__ */ i("div", { className: r.horizontalscroll, "data-testid": _, children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: z,
+      ref: o,
+      tabIndex: n ? 0 : void 0,
+      role: n ? "region" : void 0,
+      ...t,
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: s(
+              r.horizontalscroll__indicator,
+              r["horizontalscroll__indicator--left"],
+              !f && r["horizontalscroll__indicator--visible"]
+            )
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: s(
+              r.horizontalscroll__indicator,
+              r["horizontalscroll__indicator--right"],
+              !u && r["horizontalscroll__indicator--visible"]
+            )
+          }
+        ),
+        /* @__PURE__ */ i("div", { ref: a }),
+        m,
+        /* @__PURE__ */ i("div", { ref: e })
+      ]
+    }
+  ) });
+};
+export {
+  V as H
+};
+//# sourceMappingURL=HorizontalScroll.js.map

package/HorizontalScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","useStopPropagation","jsxs","jsx"],"mappings":";;;;;;;AAYA,MAAMA,IAAqB,OAYdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,SAAAe,EAAmBd,GAAa,CAAC,cAAc,WAAW,CAAC,qBAGxD,OAAI,EAAA,WAAWY,EAAO,kBAAkB,eAAad,GAGpD,UAAA,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACTC,EAAO;AAAA,cACPA,EAAO,mCAAmC;AAAA,cAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,YACjE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACTC,EAAO;AAAA,cACPA,EAAO,oCAAoC;AAAA,cAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,YAClE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI,EAAC,OAAI,EAAA,KAAKd,EAAS,CAAA;AAAA,QAClBN;AAAA,QACD,gBAAAoB,EAAC,OAAI,EAAA,KAAKb,EAAU,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}

package/Icon.js

@@ -0,0 +1,62 @@
+import { jsxs as u, jsx as b } from "react/jsx-runtime";
+import f from "react";
+import y from "classnames";
+import { IconSize as c, AnalyticsId as v } from "./constants.js";
+import { useUuid as w } from "./hooks/useUuid.js";
+const z = ({
+  size: a,
+  isHovered: o,
+  normal: n,
+  normalHover: e,
+  xSmall: s,
+  xSmallHover: t,
+  xxSmall: i,
+  xxSmallHover: r
+}) => a <= c.XXSmall && i && r ? o ? r : i : a <= c.XSmall && s && t ? o ? t : s : o ? e : n, N = f.forwardRef((a, o) => {
+  const {
+    svgIcon: n,
+    ariaLabel: e,
+    className: s = "",
+    size: t = c.Small,
+    color: i = "black",
+    hoverColor: r = i || "black",
+    isHovered: l = !1,
+    mode: h,
+    testId: I,
+    ...g
+  } = a, p = f.createElement(n, {
+    size: t,
+    isHovered: l,
+    mode: h
+  }), d = w(), m = l ? r : i;
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      "data-testid": I,
+      "data-analyticsid": v.Icon,
+      ref: o,
+      className: y("hnds-style-icon", s),
+      role: e ? "img" : "presentation",
+      "aria-labelledby": e ? d : void 0,
+      focusable: !1,
+      "aria-hidden": e ? void 0 : !0,
+      viewBox: "0 0 48 48",
+      style: { minWidth: t, minHeight: t },
+      width: t,
+      height: t,
+      fill: m,
+      color: m,
+      ...g,
+      children: [
+        e && /* @__PURE__ */ b("title", { id: d, children: e }),
+        p
+      ]
+    }
+  );
+});
+N.displayName = "Icon";
+export {
+  N as I,
+  z as g
+};
+//# sourceMappingURL=Icon.js.map