@helsenorge/designsystem-react 12.4.0 → 12.7.0

package/components/RadioButton/styles.module.scss

@@ -11,11 +11,30 @@ $padding-clickable-area-left: 8px;
 
 @mixin dashed-border() {
   box-shadow: none;
+  position: relative;
 
-  $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+  &::after {
+    position: absolute;
+    content: '';
 
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23" + $encoded-color + "' stroke-width='4' stroke-dasharray='0.5, 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-  border-radius: 100px;
+    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+
+    // Variabler for å lettere styre dashen i background-imaget under
+    $stroke: 4;
+    $dash: 0.2;
+    $gap: 7;
+    $scale: 1;
+    $stroke-scaled: $stroke * $scale;
+    $dash-scaled: $dash * $scale;
+    $gap-scaled: $gap * $scale;
+
+    border-radius: 100px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    width: 28px;
+    height: 28px;
+    inset: -2px;
+  }
 }
 
 .radio-button-errors {
@@ -26,7 +45,6 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button-wrapper {
-  cursor: pointer;
   margin-left: -$padding-clickable-area-left;
 
   &__large {

package/components/StickyNote/Close.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface CloseProps {
+    /** Function is called when user clicks the button */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
+export default Close;

package/components/StickyNote/Triangle.d.ts

@@ -1,5 +1,9 @@
+import { default as React } from 'react';
 interface TriangleProps {
-    type: 'default' | 'active' | 'error';
+    isHover: boolean;
+    isFocus: boolean;
+    isActive: boolean;
+    isError: boolean;
 }
 export interface Palette {
     border: string;

package/components/StickyNote/index.js

@@ -1,46 +1,107 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useLayoutEffect } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useLayoutEffect } from "react";
 import classNames from "classnames";
 import { useHover } from "../../hooks/useHover.js";
-import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
+import { mergeRefs } from "../../utils/refs.js";
 import { I as Icon } from "../../Icon.js";
-import { IconSize } from "../../constants.js";
-import { useUuid } from "../../hooks/useUuid.js";
-import { getAriaDescribedBy } from "../../utils/accessibility.js";
 import X from "../Icons/X.js";
 import styles from "./styles.module.scss";
-const Triangle = ({ type }) => {
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getAriaDescribedBy } from "../../utils/accessibility.js";
+const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
+  const { testId, ariaLabel = "Lukk", onClick } = props;
+  const { hoverRef, isHovered } = useHover();
+  const iconSize = useIsMobileBreakpoint() ? 38 : 48;
+  const closeClasses = classNames(styles.close);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: mergeRefs([ref, hoverRef]),
+      "data-testid": testId,
+      className: closeClasses,
+      "aria-label": ariaLabel,
+      onClick,
+      type: "button",
+      children: /* @__PURE__ */ jsx("span", { className: classNames(styles["close__inner-container"]), children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: "black", size: iconSize, isHovered }) })
+    }
+  );
+});
+const Triangle = ({ isHover, isFocus, isActive, isError }) => {
   const palette = (() => {
-    switch (type) {
-      case "active":
-        return {
-          border: "#C59302",
-          background: "#F5E080"
-        };
-      case "error":
-        return {
-          border: "#C83521",
-          background: "#EEC0A5"
-        };
-      default:
-        return {
-          border: "#F5E080",
-          background: "#F5E080"
-        };
+    const colors = {
+      border: "var(--component-stickynote-border-normal)",
+      background: "var(--component-stickynote-background-fold-normal-light)"
+    };
+    if (!isError) {
+      if (isHover) {
+        colors.background = "var(--component-stickynote-background-fold-normal-medium)";
+      }
+      if (isFocus) {
+        colors.border = "var(--color-action-border-onlight-focus)";
+        colors.background = "var(--component-stickynote-background-fold-normal-medium)";
+      }
+      if (isActive) {
+        colors.background = "var(--component-stickynote-background-fold-normal-dark)";
+      }
+    } else {
+      colors.border = "var(--component-stickynote-border-error)";
+      colors.background = "var(--component-stickynote-background-fold-error-light)";
+      if (isHover) {
+        colors.background = "var(--component-stickynote-background-fold-error-medium)";
+      }
+      if (isFocus) {
+        colors.border = "var(--color-action-border-onlight-focus)";
+        colors.background = "var(--component-stickynote-background-fold-error-medium)";
+      }
+      if (isActive) {
+        colors.background = "var(--component-stickynote-background-fold-error-dark)";
+      }
     }
+    return colors;
   })();
-  return /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_1_44", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z" }) }),
-    /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z", fill: palette.background }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z",
-        fill: palette.border,
-        mask: "url(#path-1-inside-1_1_44)"
-      }
-    )
-  ] });
+  let svg;
+  if (isFocus) {
+    svg = /* @__PURE__ */ jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_7753_1401", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z" }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z",
+          fill: palette.background
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z",
+          fill: palette.border,
+          mask: "url(#path-1-inside-1_7753_1401)"
+        }
+      )
+    ] });
+  } else {
+    svg = /* @__PURE__ */ jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_7717_293537", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z" }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z",
+          fill: palette.background
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z",
+          fill: palette.border,
+          mask: "url(#path-1-inside-1_7717_293537)"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: svg });
 };
 const StickyNote = (props) => {
   const {
@@ -60,8 +121,7 @@ const StickyNote = (props) => {
   const stickynoteRef = useRef(null);
   const textareaRef = useRef(null);
   const { isFocused: isTextareaFocused } = usePseudoClasses(textareaRef);
-  const { isHovered } = useHover(stickynoteRef);
-  const triangleType = error ? "error" : isTextareaFocused ? "active" : "default";
+  const { isHovered, isActive } = usePseudoClasses(stickynoteRef);
   const handleWrapperClick = (event) => {
     var _a;
     if (event.target.closest("button")) {
@@ -99,6 +159,7 @@ const StickyNote = (props) => {
         ref: stickynoteRef,
         className: classNames(styles["sticky-note"], wrapperClassName, {
           [styles["sticky-note--focused"]]: isTextareaFocused,
+          [styles["sticky-note--active"]]: isActive,
           [styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
           [styles["sticky-note--error"]]: error
         }),
@@ -123,19 +184,9 @@ const StickyNote = (props) => {
               "aria-describedby": getAriaDescribedBy(props, errorTextUuid)
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onXButtonClick,
-              "aria-label": arialabelXButton,
-              "data-testid": "closeButton",
-              className: classNames(styles["sticky-note__x-button"]),
-              type: "button",
-              children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: "black", size: IconSize.XXSmall })
-            }
-          ),
+          /* @__PURE__ */ jsx(Close, { onClick: onXButtonClick, ariaLabel: arialabelXButton, testId: "closeButton" }),
           /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__footer"]), children: footerText && /* @__PURE__ */ jsx("span", { children: footerText }) }),
-          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__triangle"]), children: /* @__PURE__ */ jsx(Triangle, { type: triangleType }) })
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__triangle"]), children: /* @__PURE__ */ jsx(Triangle, { isHover: isHovered, isActive, isFocus: isTextareaFocused, isError: !!error }) })
         ]
       }
     ),

package/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { testId, ariaLabel = 'Lukk', onClick } = props;\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n});\n\nexport default Close;\n","import React from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7753_1401\" fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7753_1401)\"\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7717_293537\" fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7717_293537)\"\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,QAAQA,eAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AACxH,QAAM,EAAE,QAAQ,YAAY,QAAQ,YAAY;AAChD,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,QAAM,WAAW,0BAA0B,KAAK;AAEhD,QAAM,eAAe,WAAW,OAAO,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,8BAAC,QAAA,EAAK,WAAW,WAAW,OAAO,wBAAwB,CAAC,GAC1D,UAAA,oBAAC,MAAA,EAAK,SAAS,GAAG,OAAM,SAAQ,MAAM,UAAU,WAAsB,EAAA,CACxE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;ACnCD,MAAM,WAAoC,CAAC,EAAE,SAAS,SAAS,UAAU,cAAc;AACrF,QAAM,WAAW,MAAe;AAC9B,UAAM,SAAkB;AAAA,MACtB,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAGd,QAAI,CAAC,SAAS;AACZ,UAAI,SAAS;AACX,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,SAAS;AACX,eAAO,SAAS;AAChB,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,UAAU;AACZ,eAAO,aAAa;AAAA,MACtB;AAAA,IACF,OAAO;AACL,aAAO,SAAS;AAChB,aAAO,aAAa;AACpB,UAAI,SAAS;AACX,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,SAAS;AACX,eAAO,SAAS;AAChB,eAAO,aAAa;AAAA,MACtB;AACA,UAAI,UAAU;AACZ,eAAO,aAAa;AAAA,MACtB;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAA;AAEA,MAAI;AAEJ,MAAI,SAAS;AACX,UACE,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAChE,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,IAAG,6BAA4B,MAAK,SACxC,UAAA,oBAAC,QAAA,EAAK,GAAE,0GAAA,CAA0G,EAAA,CACpH;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAM,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAM,QAAQ;AAAA,UACd,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GACF;AAAA,EAEJ,OAAO;AACL,UACE,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAChE,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,IAAG,+BAA8B,MAAK,SAC1C,UAAA,oBAAC,QAAA,EAAK,GAAE,uGAAA,CAAuG,EAAA,CACjH;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAM,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAM,QAAQ;AAAA,UACd,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GACF;AAAA,EAEJ;AAEA,yCAAU,UAAA,IAAA,CAAI;AAChB;ACrDA,MAAM,aAAwC,CAAC,UAA2B;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,gBAAgB,OAAuB,IAAI;AACjD,QAAM,cAAc,OAA4B,IAAI;AACpD,QAAM,EAAE,WAAW,sBAAsB,iBAAsC,WAAW;AAC1F,QAAM,EAAE,WAAW,aAAa,iBAAiC,aAAa;AAE9E,QAAM,qBAAqB,CAAC,UAAwF;;AAClH,QAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;AACnD;AAAA,IACF;AACA,QAAI,cAAc,UAAU;AAC1B,UAAI,qBAAsB,sBAAA;AAC1B;AAAA,IACF;AACA,sBAAY,YAAZ,mBAAqB;AAAA,EACvB;AAEA,QAAM,iBAAiB,MAAY;AACjC,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,iBAAa,QAAQ;AAAA,EACvB;AAEA,QAAM,eAAe,CAAC,WAAsC;AAE1D,WAAO,MAAM,SAAS;AAEtB,WAAO,MAAM,SAAS,GAAG,OAAO,YAAY;AAAA,EAC9C;AAEA,kBAAgB,MAAM;AACpB,mBAAA;AAEA,eAAW,MAAM,eAAA,GAAkB,GAAI;AAAA,EACzC,GAAG,CAAA,CAAE;AAEL,QAAM,eAAe,CAAC,MAAoD;AACxE,UAAM,WAAW,EAAE;AACnB,iBAAa,QAAQ;AACrB,QAAI,cAAc,SAAU,eAAc,SAAS,CAAC;AAAA,EACtD;AAEA,8BACG,OAAA,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,aAAa,GAAG,kBAAkB;AAAA,UAC7D,CAAC,OAAO,sBAAsB,CAAC,GAAG;AAAA,UAClC,CAAC,OAAO,qBAAqB,CAAC,GAAG;AAAA,UACjC,CAAC,OAAO,sBAAsB,CAAC,GAAG,aAAa,CAAC,qBAAqB,CAAC,cAAc;AAAA,UACpF,CAAC,OAAO,oBAAoB,CAAC,GAAG;AAAA,QAAA,CACjC;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAA,MAAK;AACd,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,+BAAmB,CAAwC;AAAA,UAC7D;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,qBAAqB,CAAC,GACrD,UAAA,aAAa,oBAAC,UAAK,WAAW,OAAO,gCAAgC,GAAI,qBAAU,GACtF;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,eAAa,GAAG,MAAM;AAAA,cACtB,WAAW,WAAW,OAAO,uBAAuB,GAAG,cAAc,SAAS;AAAA,cAC7E,GAAG;AAAA,cACJ,UAAU;AAAA,cACV,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,8BAE1D,OAAA,EAAM,SAAS,gBAAgB,WAAW,kBAAkB,QAAO,eAAc;AAAA,UAClF,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,qBAAqB,CAAC,GAAI,UAAA,cAAc,oBAAC,QAAA,EAAM,UAAA,WAAA,CAAW,GAAQ;AAAA,8BACnG,OAAA,EAAI,WAAW,WAAW,OAAO,uBAAuB,CAAC,GACxD,UAAA,oBAAC,YAAS,SAAS,WAAW,UAAoB,SAAS,mBAAmB,SAAS,CAAC,CAAC,OAAO,EAAA,CAClG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,6BACE,KAAA,EAAE,WAAW,OAAO,yBAAyB,GAAG,IAAI,aAClD,UAAA,UAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/components/StickyNote/styles.module.scss

@@ -1,52 +1,51 @@
+@use 'sass:map';
 @use '../../scss/font-settings' as font-settings;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
 
 .sticky-note {
+  $sticky-note: &;
+
   position: relative;
-  background-color: var(--core-color-banana-50);
+  background-color: var(--component-stickynote-background-normal-light);
   width: 100%;
-  border: var(--core-color-banana-300) 1px solid;
+  max-width: 32rem;
+  border: var(--component-stickynote-border-normal) 1px solid;
   padding: 12px;
   overflow: hidden;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
 
   &--focused {
-    background-color: var(--core-color-banana-50);
-    border-color: var(--core-color-banana-600);
+    box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-onlight-focus);
+    background-color: var(--component-stickynote-background-normal-medium);
   }
 
   &--hovered {
-    background-color: var(--core-color-banana-100);
-    border: var(--core-color-banana-100) 1px solid;
+    background-color: var(--component-stickynote-background-normal-medium);
   }
 
-  &--error {
-    background-color: var(--core-color-cherry-50);
-    border: var(--core-color-cherry-300) 1px solid;
+  &--active {
+    background-color: var(--component-stickynote-background-normal-dark);
   }
 
-  &__x-button {
-    cursor: pointer;
-    background-color: transparent;
-    color: var(--color-base-text-onlight);
-    border: 0;
-    width: 2.75rem;
-    height: 2.75rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 2px;
-    right: 2px;
+  &--error {
+    background-color: var(--component-stickynote-background-error-light);
+    border: var(--component-stickynote-border-error) 1px solid;
+
+    &#{$sticky-note}--hovered {
+      background-color: var(--component-stickynote-background-error-medium);
+    }
 
-    &:hover {
-      background-color: var(--core-color-banana-200); // todo: bestem farge her
-      outline: 1px solid var(--core-color-banana-500); // todo: bestem farge her
+    &#{$sticky-note}--focused {
+      box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-onlight-focus);
+      background-color: var(--component-stickynote-background-error-medium);
     }
 
-    &:focus-visible {
-      background-color: var(--color-action-background-transparent-onlight-hoverselected);
-      outline: 2px solid var(--color-action-border-onlight-focus);
+    &#{$sticky-note}--active {
+      background-color: var(--component-stickynote-background-error-dark);
     }
   }
 
@@ -57,8 +56,9 @@
     align-items: center;
 
     &__timestamp {
+      @include fonts.compact-data;
+
       color: var(--color-placeholder-text-onlight);
-      font-size: 1rem;
     }
   }
 
@@ -79,9 +79,9 @@
   }
 
   &__footer {
+    @include fonts.image-credit;
+
     color: var(--color-placeholder-text-onlight);
-    font-size: 0.75rem;
-    font-style: italic;
   }
 
   &__triangle {
@@ -93,9 +93,81 @@
   }
 
   &__error-text {
+    @include fonts.sublabel-subdued;
+
     color: var(--color-notification-status-error);
-    line-height: 1.875rem;
-    font-size: font-settings.$font-size-sm;
-    margin-top: 0.75rem;
+    margin-top: 0.5rem;
+  }
+}
+
+$desktop-size: 3rem;
+$mobile-inner-size: 2.375rem;
+$mobile-outer-size: 2.75rem;
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  height: $mobile-outer-size;
+  width: $mobile-outer-size;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $desktop-size;
+    width: $desktop-size;
+  }
+
+  &--small {
+    height: $mobile-outer-size;
+    width: $mobile-outer-size;
+  }
+
+  &__inner-container {
+    width: $mobile-inner-size;
+    height: $mobile-inner-size;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $desktop-size;
+      width: $desktop-size;
+    }
+
+    &--small {
+      width: $mobile-inner-size;
+      height: $mobile-inner-size;
+    }
+
+    :hover > & {
+      background-color: var(--component-stickynote-background-transparent-onlight-hover);
+    }
+
+    :active > & {
+      background-color: var(--component-stickynote-background-transparent-onlight-active);
+    }
+
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+      border-radius: 0;
+      border: 0;
+    }
+
+    &--error {
+      :hover > & {
+        background-color: var(--component-stickynote-background-transparent-error-hover);
+      }
+
+      :active > & {
+        background-color: var(--component-stickynote-background-transparent-error-active);
+      }
+    }
   }
 }

package/components/StickyNote/styles.module.scss.d.ts

@@ -1,4 +1,9 @@
 export type Styles = {
+  close: string;
+  'close__inner-container': string;
+  'close__inner-container--error': string;
+  'close__inner-container--small': string;
+  'close--small': string;
   'sticky-note': string;
   'sticky-note__error-text': string;
   'sticky-note__footer': string;
@@ -6,7 +11,7 @@ export type Styles = {
   'sticky-note__header__timestamp': string;
   'sticky-note__textarea': string;
   'sticky-note__triangle': string;
-  'sticky-note__x-button': string;
+  'sticky-note--active': string;
   'sticky-note--error': string;
   'sticky-note--focused': string;
   'sticky-note--hovered': string;

package/components/Tabs/Tabs.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { default as Tab } from './Tab';
+import { HNDesignsystemTabs } from '../../resources/Resources';
 import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
@@ -20,14 +21,16 @@ export interface TabsProps {
     sticky?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /** Sets aria label on the "scroll to the right" button in TabList */
+    /** @deprecated Sets aria label on the "scroll to the right" button in TabList */
     ariaLabelRightButton?: string;
-    /** Sets aria label on the "scroll to the left" button in TabList */
+    /** @deprecated Sets aria label on the "scroll to the left" button in TabList */
     ariaLabelLeftButton?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemTabs>;
     /** Overrides the default z-index of the tabs header */
     zIndex?: number;
 }
-declare const TabsRoot: React.FC<TabsProps>;
+export declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {
     Tab: typeof Tab;
 };

package/components/Tabs/index.js

@@ -1,10 +1,33 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useState, useRef } from "react";
 import classNames from "classnames";
+import { LanguageLocales } from "../../constants.js";
 import { T as TabList, a as Tab } from "../../TabList.js";
 import { T as TabPanel } from "../../TabPanel.js";
 import designsystemlayout from "../../scss/layout.module.scss";
+import { useLanguage } from "../../utils/language.js";
 import styles from "./styles.module.scss";
+const ariaLabelRightButton$1 = "Scroll right";
+const ariaLabelLeftButton$1 = "Scroll left";
+const enGB = {
+  ariaLabelRightButton: ariaLabelRightButton$1,
+  ariaLabelLeftButton: ariaLabelLeftButton$1
+};
+const ariaLabelRightButton = "Scroll til høyre";
+const ariaLabelLeftButton = "Scroll til venstre";
+const nbNO = {
+  ariaLabelRightButton,
+  ariaLabelLeftButton
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const TabsRoot = ({
   activeTab,
   children,
@@ -14,8 +37,9 @@ const TabsRoot = ({
   onColor = "onwhite",
   sticky = true,
   testId,
-  ariaLabelRightButton,
-  ariaLabelLeftButton,
+  ariaLabelRightButton: ariaLabelRightButton2,
+  ariaLabelLeftButton: ariaLabelLeftButton2,
+  resources,
   zIndex
 }) => {
   const isControlled = activeTab !== void 0;
@@ -23,6 +47,14 @@ const TabsRoot = ({
   const tabsRef = useRef(null);
   const tabPanelRef = useRef(null);
   const tabListRef = useRef(null);
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabelRightButton: ariaLabelRightButton2 || (resources == null ? void 0 : resources.ariaLabelRightButton) || defaultResources.ariaLabelRightButton,
+    ariaLabelLeftButton: ariaLabelLeftButton2 || (resources == null ? void 0 : resources.ariaLabelLeftButton) || defaultResources.ariaLabelLeftButton
+  };
   let onColorUsed = "onwhite";
   if (color === "white") {
     onColorUsed = onColor;
@@ -52,8 +84,8 @@ const TabsRoot = ({
               selectedTab: activeTabIndex,
               color,
               onColor: onColorUsed,
-              ariaLabelLeftButton,
-              ariaLabelRightButton,
+              ariaLabelLeftButton: mergedResources.ariaLabelLeftButton,
+              ariaLabelRightButton: mergedResources.ariaLabelRightButton,
               children
             }
           ),
@@ -65,10 +97,12 @@ const TabsRoot = ({
   ] });
 };
 const Tabs = TabsRoot;
+TabsRoot.displayName = "Tabs";
 Tabs.displayName = "Tabs";
 Tabs.Tab = Tab;
 Tabs.Tab.displayName = "Tabs.Tab";
 export {
+  TabsRoot,
   Tabs as default
 };
 //# sourceMappingURL=index.js.map