@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/components/Progressbar/index.js

@@ -0,0 +1,131 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { ZIndex } from "../../constants.js";
+import { palette } from "../../theme/palette.js";
+import styles from "./styles.module.scss";
+var ProgressbarSize = /* @__PURE__ */ ((ProgressbarSize2) => {
+  ProgressbarSize2["small"] = "small";
+  ProgressbarSize2["medium"] = "medium";
+  ProgressbarSize2["large"] = "large";
+  return ProgressbarSize2;
+})(ProgressbarSize || {});
+var ProgressBarMode = /* @__PURE__ */ ((ProgressBarMode2) => {
+  ProgressBarMode2["ondark"] = "ondark";
+  ProgressBarMode2["onlight"] = "onlight";
+  return ProgressBarMode2;
+})(ProgressBarMode || {});
+var Overlay = /* @__PURE__ */ ((Overlay2) => {
+  Overlay2["screen"] = "screen";
+  Overlay2["parent"] = "parent";
+  return Overlay2;
+})(Overlay || {});
+const Progressbar = ({
+  value,
+  size = "large",
+  mode = "onlight",
+  overlay,
+  testId,
+  ariaLabel
+}) => {
+  if (overlay) {
+    mode = "ondark";
+  }
+  value = Math.max(0, Math.min(value, 100));
+  let width;
+  if (size === "large") {
+    width = 96;
+  } else if (size === "medium") {
+    width = 50;
+  } else {
+    width = 44;
+  }
+  const totalRadius = width / 2;
+  const strokeWidth = 8;
+  const radius = totalRadius - strokeWidth / 2;
+  const viewBoxSize = totalRadius * 2;
+  const viewBoxCenter = totalRadius;
+  const circleBackgroundColor = mode === "onlight" ? palette.blueberry100 : palette.neutral700;
+  const mainColor = mode === "onlight" ? palette.blueberry600 : palette.white;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - value / 100 * circumference;
+  const valueText = `${value}%`;
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if (overlay === "parent" && ((_b = (_a = wrapperRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style)) {
+      wrapperRef.current.parentElement.style.position = "relative";
+    }
+  }, []);
+  const wrapperClasses = classNames({
+    [styles["progressbar--overlay"]]: overlay,
+    [styles["progressbar--overlay-screen"]]: overlay === "screen",
+    [styles["progressbar--overlay-parent"]]: overlay === "parent"
+    /* parent */
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: wrapperRef,
+        className: wrapperClasses,
+        "data-testid": testId,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": value,
+        "aria-label": ariaLabel,
+        style: overlay === "screen" ? { zIndex: ZIndex.OverlayScreen } : {},
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            role: "presentation",
+            width: viewBoxSize,
+            height: viewBoxSize,
+            viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+            className: styles["progressbar__svg"],
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: viewBoxCenter, cy: viewBoxCenter, r: radius, stroke: circleBackgroundColor, strokeWidth, fill: "none" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: viewBoxCenter,
+                  cy: viewBoxCenter,
+                  r: radius,
+                  stroke: mainColor,
+                  strokeWidth,
+                  fill: "none",
+                  strokeDasharray: circumference,
+                  strokeDashoffset,
+                  className: styles["progressbar__progress-circle"],
+                  transform: `rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: "progress-wheel__text--large",
+                  fontSize: "1.5rem",
+                  fill: mainColor,
+                  x: viewBoxCenter,
+                  y: viewBoxCenter,
+                  textAnchor: "middle",
+                  alignmentBaseline: "middle",
+                  children: size === "large" && valueText
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles["progressbar__sr-only-text"], "aria-live": "assertive", "aria-atomic": "true", children: valueText })
+  ] });
+};
+export {
+  Overlay,
+  ProgressBarMode,
+  ProgressbarSize,
+  Progressbar as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n  const valueText = `${value}%`;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={wrapperClasses}\n        data-testid={testId}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n      >\n        <svg\n          role=\"presentation\"\n          width={viewBoxSize}\n          height={viewBoxSize}\n          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n          className={styles['progressbar__svg']}\n        >\n          <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n          <circle\n            cx={viewBoxCenter}\n            cy={viewBoxCenter}\n            r={radius}\n            stroke={mainColor}\n            strokeWidth={strokeWidth}\n            fill=\"none\"\n            strokeDasharray={circumference}\n            strokeDashoffset={strokeDashoffset}\n            className={styles['progressbar__progress-circle']}\n            transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n          />\n          <text\n            className=\"progress-wheel__text--large\"\n            fontSize={'1.5rem'}\n            fill={mainColor}\n            x={viewBoxCenter}\n            y={viewBoxCenter}\n            textAnchor=\"middle\"\n            alignmentBaseline=\"middle\"\n          >\n            {size === ProgressbarSize.large && valueText}\n          </text>\n        </svg>\n      </div>\n      <div className={styles['progressbar__sr-only-text']} aria-live=\"assertive\" aria-atomic=\"true\">\n        {valueText}\n      </div>\n    </>\n  );\n};\n\nexport default Progressbar;\n"],"names":["ProgressbarSize","ProgressBarMode","Overlay"],"mappings":"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"}

package/lib/components/PromoPanel/PromoPanel.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';
+import { TitleTags } from '../Title';
+export type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;
+export interface PromoPanelProps {
+    /** Used as the link text if set. title or children must be set for the link to have accessible text. */
+    title?: string;
+    /** Used as the link text if title is not set. */
+    children?: string;
+    /** Illustration element */
+    illustration?: 'Doctor' | 'HealthcarePersonnel';
+    /** Changes the underlying element of the title. */
+    titleHtmlMarkup?: TitleTags;
+    /** Changes the background color. Default: white */
+    color?: PromoPanelColors;
+    /** Not used if linkComponent is set */
+    href?: string;
+    /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */
+    target?: AnchorLinkTargets;
+    /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */
+    linkHtmlMarkup?: AnchorLinkTags;
+    /** Function that is called when clicked. Not used if linkComponent is set. */
+    linkOnClick?: () => void;
+    /** Custom link component. Must be "a" a or "button" element with no styling. */
+    linkComponent?: React.ReactElement;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const PromoPanel: React.FC<PromoPanelProps>;
+export default PromoPanel;

package/lib/components/PromoPanel/PromoPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/PromoPanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PromoPanel } from './PromoPanel';
+export * from './PromoPanel';
+export default PromoPanel;

package/lib/components/PromoPanel/index.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { getColor } from "../../theme/currys/color.js";
+import { I as Icon } from "../../Icon.js";
+import ArrowRight from "../Icons/ArrowRight.js";
+import ArrowUpRight from "../Icons/ArrowUpRight.js";
+import { L as LazyIllustration } from "../../LazyIllustration.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+const PromoPanelLink = (props) => {
+  if (props.linkComponent) {
+    return React__default.cloneElement(props.linkComponent, { children: props.children });
+  }
+  if (props.linkHtmlMarkup === "button") {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: props.linkOnClick, children: props.children });
+  }
+  return /* @__PURE__ */ jsx("a", { href: props.href, target: props.target, onClick: props.linkOnClick, children: props.children });
+};
+const PromoPanel = (props) => {
+  const { isHovered, hoverRef } = useHover();
+  const { color = "neutral", titleHtmlMarkup = "h2", linkHtmlMarkup = "a" } = props;
+  const breakpoint = useBreakpoint();
+  const promoPanelClasses = classNames(
+    styles.promopanel,
+    styles[`promopanel--${color}`],
+    !props.illustration && styles["promopanel--no-illustration"]
+  );
+  const promoPanelLink = /* @__PURE__ */ jsx(
+    PromoPanelLink,
+    {
+      href: props.href,
+      target: props.target,
+      linkComponent: props.linkComponent,
+      linkHtmlMarkup,
+      linkOnClick: props.linkOnClick,
+      children: props.title || props.children
+    }
+  );
+  const illustrationSize = (() => {
+    if (breakpoint >= Breakpoint.md) {
+      return 156;
+    }
+    return 110;
+  })();
+  return /* @__PURE__ */ jsxs("div", { className: promoPanelClasses, "data-testid": props.testId, "data-analyticsid": AnalyticsId.PromoPanel, ref: hoverRef, children: [
+    props.illustration && /* @__PURE__ */ jsx(
+      LazyIllustration,
+      {
+        illustrationName: props.illustration,
+        size: illustrationSize,
+        color,
+        className: styles.promopanel__illustration
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.promopanel__content, children: [
+      props.title && /* @__PURE__ */ jsx(Title, { htmlMarkup: titleHtmlMarkup, appearance: "title3", children: promoPanelLink }),
+      !props.title ? promoPanelLink : props.children
+    ] }),
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: styles.promopanel__icon,
+        svgIcon: props.target === "_blank" ? ArrowUpRight : ArrowRight,
+        size: breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall,
+        isHovered,
+        color: getColor("blueberry", 500),
+        hoverColor: getColor("blueberry", 600)
+      }
+    )
+  ] });
+};
+export {
+  PromoPanel as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,iBAAgD,CAAA,UAAS;AAC7D,MAAI,MAAM,eAAe;AACvB,WAAOA,eAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU;AAAA,EAC7E;AAEA,MAAI,MAAM,mBAAmB,UAAU;AACrC,WACE,oBAAC,YAAO,MAAM,UAAU,SAAS,MAAM,aACpC,gBAAM,SAAA,CACT;AAAA,EAEJ;AACA,SACE,oBAAC,KAAA,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM,QAAQ,SAAS,MAAM,aACvD,UAAA,MAAM,UACT;AAEJ;AAEA,MAAM,aAAwC,CAAA,UAAS;AACrD,QAAM,EAAE,WAAW,SAAA,IAAa,SAAA;AAEhC,QAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;AAE5E,QAAM,aAAa,cAAA;AAEnB,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,OAAO,eAAe,KAAK,EAAE;AAAA,IAC7B,CAAC,MAAM,gBAAgB,OAAO,6BAA6B;AAAA,EAAA;AAG7D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,eAAe,MAAM;AAAA,MACrB;AAAA,MACA,aAAa,MAAM;AAAA,MAElB,UAAA,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAI1B,QAAM,oBAAoB,MAAc;AACtC,QAAI,cAAc,WAAW,IAAI;AAC/B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAA;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,mBAAmB,eAAa,MAAM,QAAQ,oBAAkB,YAAY,YAAY,KAAK,UAC1G,UAAA;AAAA,IAAA,MAAM,gBACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB,MAAM;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtB,qBAAC,OAAA,EAAI,WAAW,OAAO,qBACpB,UAAA;AAAA,MAAA,MAAM,SACL,oBAAC,OAAA,EAAM,YAAY,iBAAiB,YAAY,UAC7C,UAAA,eAAA,CACH;AAAA,MAED,CAAC,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAAA,GACzC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,SAAS,MAAM,WAAW,WAAW,eAAe;AAAA,QACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;AAAA,QAC9D;AAAA,QACA,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}

package/lib/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { FormOnColor, FormSize } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+export interface RadioButtonProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
+    label: React.ReactNode;
+    /** Adds custom classes to the label element. */
+    labelClassNames?: string;
+    /** input id of the radioButton */
+    inputId?: string;
+    /** Changes the visuals of the radioButton */
+    onColor?: keyof typeof FormOnColor;
+    /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */
+    size?: keyof typeof FormSize;
+    /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const getRadioLabelClasses: (radioId: string, onColor: FormOnColor, large: boolean, checkedRadioId?: string) => string | undefined;
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioButton;

package/lib/components/RadioButton/RadioButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/RadioButton/index.d.ts

@@ -0,0 +1,3 @@
+import { default as RadioButton } from './RadioButton';
+export * from './RadioButton';
+export default RadioButton;

package/lib/components/RadioButton/index.js

@@ -0,0 +1,8 @@
+import { R as RadioButton } from "../../RadioButton.js";
+import { g } from "../../RadioButton.js";
+export {
+  RadioButton,
+  RadioButton as default,
+  g as getRadioLabelClasses
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FormOnColor } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+type SelectConcept = 'normal' | 'transparent';
+export interface SelectProps extends ErrorWrapperClassNameProps, Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'> {
+    /** Sets the content of the select element. */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the component */
+    concept?: SelectConcept;
+    /** The label text above the select */
+    label?: React.ReactNode;
+    /** Changes the visuals of the component */
+    onColor?: keyof typeof FormOnColor;
+    /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** select id of the select element */
+    selectId?: string;
+    /** Width of select in characters (approximate) */
+    width?: number;
+    /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
+    defaultValue?: string | number;
+    /** Adds custom classes to the wrapper tag */
+    wrapperClassName?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/lib/components/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Select } from './Select';
+export * from './Select';
+export default Select;

package/lib/components/Select/index.js

@@ -0,0 +1,6 @@
+import { S as Select } from "../../Select.js";
+export {
+  Select,
+  Select as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/components/ServiceMessage/ServiceMessage.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { AnchorLinkTargets } from '../AnchorLink';
+import { NotificationPanelVariants } from '../NotificationPanel';
+export interface ServiceMessageProps {
+    /** Sets a label for the notification panel. */
+    label: string;
+    /** String displayed in service-message when expanded */
+    info?: string;
+    /** String displayed in service-message when expanded, with a smaller font */
+    extraInfo?: string;
+    /** function that runs on dismiss */
+    onDismiss?: () => void;
+    /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */
+    dismissable?: boolean;
+    /** Makes expander be open from start. */
+    expanderOpenFromStart?: boolean;
+    /** Name that describes a url-link for the user*/
+    urlTitle?: string;
+    /** Url for further information*/
+    url?: string;
+    /** Sets target for the anchorlink to the url*/
+    target?: AnchorLinkTargets;
+    /** Text on close-button in service messages. */
+    closeBtnText?: string;
+    /** Changes the visual representation. */
+    variant?: NotificationPanelVariants;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const ServiceMessage: React.FC<ServiceMessageProps>;
+export default ServiceMessage;

package/lib/components/ServiceMessage/ServiceMessage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/ServiceMessage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ServiceMessage } from './ServiceMessage';
+export * from './ServiceMessage';
+export default ServiceMessage;

package/lib/components/ServiceMessage/index.js

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getColor } from "../../theme/currys/color.js";
+import { breakpoints } from "../../theme/grid.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { N as NotificationBadge } from "../../NotificationBadge.js";
+import { C as Close } from "../../Close.js";
+import { I as Icon } from "../../Icon.js";
+import { IconSize } from "../../constants.js";
+import ChevronDown from "../Icons/ChevronDown.js";
+import ChevronUp from "../Icons/ChevronUp.js";
+import Forward from "../Icons/Forward.js";
+import X from "../Icons/X.js";
+import styles from "./styles.module.scss";
+const Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
+  const breakpoint = useBreakpoint();
+  const { isHovered, hoverRef } = useHover();
+  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
+  const CustomTag = hasExpander ? "button" : "span";
+  const labelContainerClasses = classNames(
+    styles["service-message__label-container"],
+    hasExpander && styles[`service-message__label-container--has-expander`]
+  );
+  return /* @__PURE__ */ jsx("div", { className: labelContainerClasses, ref: hoverRef, children: /* @__PURE__ */ jsx("div", { className: styles["service-message__container"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__row"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__col"], children: /* @__PURE__ */ jsxs("div", { className: styles["service-message__label"], children: [
+    /* @__PURE__ */ jsx(NotificationBadge, { variant, size: iconSize, isHovered }),
+    /* @__PURE__ */ jsx("h1", { className: styles["service-message__title"], id, children: /* @__PURE__ */ jsx(
+      CustomTag,
+      {
+        className: styles["service-message__toggle"],
+        onClick: hasExpander ? onExpand : void 0,
+        "aria-expanded": hasExpander ? isExpanded : void 0,
+        children: label
+      }
+    ) }),
+    hasExpander && /* @__PURE__ */ jsx(Icon, { size: iconSize, svgIcon: isExpanded ? ChevronUp : ChevronDown, isHovered }),
+    !hasExpander && dismissable && /* @__PURE__ */ jsx(Close, { onClick: onDismiss, ariaLabel: closeBtnText, className: styles["service-message__close"] })
+  ] }) }) }) }) });
+};
+const Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {
+  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover();
+  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover();
+  const hasUrl = url && urlTitle;
+  return /* @__PURE__ */ jsx("div", { className: styles["service-message__container"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__row"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__col"], children: /* @__PURE__ */ jsxs("div", { className: styles["service-message__content"], children: [
+    info && /* @__PURE__ */ jsx("p", { className: styles["service-message__info"], children: info }),
+    extraInfo && /* @__PURE__ */ jsx("p", { className: classNames(styles["service-message__info"], styles["service-message__info--extra"]), children: extraInfo }),
+    /* @__PURE__ */ jsxs("div", { className: styles["service-message__actions"], children: [
+      hasUrl && /* @__PURE__ */ jsxs("a", { className: styles["service-message__action"], href: url, ref: readMoreRef, target, children: [
+        urlTitle,
+        /* @__PURE__ */ jsx(Icon, { size: IconSize.XSmall, svgIcon: Forward, color: getColor("blueberry", 700), isHovered: readMoreHoverRefIsHovered })
+      ] }),
+      dismissable && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: closeButtonRef,
+          className: classNames(styles["service-message__action"], styles["service-message__action--close"]),
+          "aria-label": closeBtnText,
+          onClick: onDismiss,
+          children: [
+            closeBtnText,
+            /* @__PURE__ */ jsx(Icon, { size: IconSize.XSmall, svgIcon: X, color: getColor("blueberry", 700), isHovered: closeButtonIsHovered })
+          ]
+        }
+      )
+    ] })
+  ] }) }) }) });
+};
+const ServiceMessage = ({
+  label,
+  dismissable = true,
+  onDismiss,
+  info,
+  extraInfo,
+  urlTitle,
+  url,
+  target = "_self",
+  closeBtnText = "fjern melding",
+  expanderOpenFromStart = false,
+  variant = "error",
+  testId
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanderOpenFromStart);
+  const labelId = useUuid();
+  const hasExpander = !!info || !!extraInfo;
+  const ariaRole = variant === "error" ? "alert" : "region";
+  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });
+  const handleClick = () => {
+    if (hasExpander) setIsExpanded(!isExpanded);
+  };
+  const classes = classNames(styles["service-message"], styles[`service-message--${variant}`]);
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: ariaRole, ...ariaLabelAttributes, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        label,
+        variant,
+        id: labelId,
+        hasExpander,
+        isExpanded,
+        dismissable,
+        onExpand: handleClick,
+        onDismiss,
+        closeBtnText
+      }
+    ),
+    hasExpander && isExpanded && /* @__PURE__ */ jsx(
+      Content,
+      {
+        info,
+        extraInfo,
+        urlTitle,
+        url,
+        target,
+        dismissable,
+        onDismiss,
+        closeBtnText
+      }
+    )
+  ] });
+};
+export {
+  ServiceMessage as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":[],"mappings":"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"}

package/lib/components/SharingStatus/SharingStatus.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icon';
+export type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;
+export interface SharingStatusProps {
+    /** Color choices represent variants of sharingstatus */
+    color?: SharingStatusColor;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Icon to be displayed next to the sharingstatus */
+    icon: SvgIcon;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the text placed to the right of the sharingstatus */
+    children: string;
+    /** turn on and off word wrapping */
+    wrapText?: boolean;
+}
+declare const SharingStatus: React.FC<SharingStatusProps>;
+export default SharingStatus;

package/lib/components/SharingStatus/SharingStatus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/SharingStatus/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SharingStatus } from './SharingStatus';
+export * from './SharingStatus';
+export default SharingStatus;

package/lib/components/SharingStatus/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { palette } from "../../theme/palette.js";
+import { I as Icon } from "../../Icon.js";
+import styles from "./styles.module.scss";
+const SharingStatus = (props) => {
+  const { color = "neutral", icon, children, className, testId, wrapText } = props;
+  const sharingStatusClasses = classNames(styles["sharing-status"], className);
+  const dotClasses = classNames(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
+  const labelClasses = classNames(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], {
+    [styles["sharing-status__label--wrap"]]: wrapText
+  });
+  return /* @__PURE__ */ jsxs("span", { className: sharingStatusClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.SharingStatus, children: [
+    /* @__PURE__ */ jsx("span", { className: dotClasses, children: /* @__PURE__ */ jsx(Icon, { color: palette.white, svgIcon: icon, size: IconSize.XXSmall }) }),
+    /* @__PURE__ */ jsx("span", { className: labelClasses, children })
+  ] });
+};
+export {
+  SharingStatus as default
+};
+//# sourceMappingURL=index.js.map