@helsenorge/designsystem-react 11.2.0 → 12.0.0-beta.0

package/hooks/useHover.d.ts

@@ -4,7 +4,7 @@ import { RefObject } from 'react';
  * @param ref Element som skal observeres
  * @returns Objekt med ref og om objekt er hovered/focused
  */
-export declare const useHover: <T extends HTMLElement | SVGElement>(ref?: RefObject<T>) => {
+export declare const useHover: <T extends HTMLElement | SVGElement>(ref?: RefObject<T>, includeFocus?: boolean) => {
     hoverRef: RefObject<T>;
     isHovered: boolean;
 };

package/hooks/useHover.js

@@ -1,7 +1,7 @@
 import { usePseudoClasses } from "./usePseudoClasses.js";
-const useHover = (ref) => {
+const useHover = (ref, includeFocus = true) => {
   const { refObject, isHovered, isFocused } = usePseudoClasses(ref);
-  return { hoverRef: refObject, isHovered: isHovered || isFocused };
+  return { hoverRef: refObject, isHovered: isHovered || includeFocus && isFocused };
 };
 export {
   useHover

package/hooks/useHover.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHover.js","sources":["../../src/hooks/useHover.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { usePseudoClasses } from './usePseudoClasses';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const useHover = <T extends HTMLElement | SVGElement>(ref?: RefObject<T>): { hoverRef: RefObject<T>; isHovered: boolean } => {\n  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);\n\n  return { hoverRef: refObject, isHovered: isHovered || isFocused };\n};\n"],"names":[],"mappings":";AASa,MAAA,WAAW,CAAqC,QAAuE;AAClI,QAAM,EAAE,WAAW,WAAW,UAAU,IAAI,iBAAiB,GAAG;AAEhE,SAAO,EAAE,UAAU,WAAW,WAAW,aAAa,UAAU;AAClE;"}
+{"version":3,"file":"useHover.js","sources":["../../src/hooks/useHover.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { usePseudoClasses } from './usePseudoClasses';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const useHover = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T>,\n  includeFocus: boolean = true\n): { hoverRef: RefObject<T>; isHovered: boolean } => {\n  const { refObject, isHovered, isFocused } = usePseudoClasses(ref);\n\n  return { hoverRef: refObject, isHovered: isHovered || (includeFocus && isFocused) };\n};\n"],"names":[],"mappings":";AASO,MAAM,WAAW,CACtB,KACA,eAAwB,SAC2B;AACnD,QAAM,EAAE,WAAW,WAAW,UAAU,IAAI,iBAAiB,GAAG;AAEhE,SAAO,EAAE,UAAU,WAAW,WAAW,aAAc,gBAAgB,UAAW;AACpF;"}

package/package.json

@@ -7,10 +7,11 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.2.0",
+  "version": "12.0.0-beta.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/react": "^0.27.8",
     "motion": "^11.14.3"
   },
   "peerDependencies": {

package/scss/_font-mixins.scss

@@ -238,3 +238,25 @@
     line-height: 1.625rem;
   }
 }
+
+@mixin help-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.575rem;
+  }
+}
+
+@mixin help-trigger-text {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}

package/scss/supernova/styles/colors.css

@@ -75,9 +75,9 @@
   --color-base-border-ondark: #d6d4d3;
   --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background: #efe4fd;
-  --color-help-graphics: #5b22a6;
-  --color-help-border: #5b22a6;
+  --color-help-background-normal: #efe4fd;
+  --color-help-graphics-normal: #5b22a6;
+  --color-help-border-normal: #5b22a6;
   --core-color-blueberry-100: #cae7ed;
   --core-color-blueberry-200: #afdae3;
   --core-color-blueberry-300: #7abecc;
@@ -172,8 +172,6 @@
   --color-placeholder-text-onlight: #62625f;
   --color-base-border-onlight-subtle: #d6d4d3;
   --color-base-border-neutral: #d6d4d3;
-
-  /* Subtle border for Blueberry 50 background */
   --color-base-border-blueberry: #afdae3;
   --color-base-border-cherry: #eec0a5;
 
@@ -186,4 +184,18 @@
   --color-notification-text-success: #078141;
   --color-base-border-neutral-emphasized: #bdbab9;
   --color-notification-status-draft: #7d7c79;
+
+  /* hoverstate on help components on white background */
+  --color-help-background-transparent-onlight-hover: #6c36b31a;
+  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-background-transparent-onlight-active: #6c38b34d;
+  --color-action-background-transparent-onlight-active: #126f874d;
+
+  /* Background outside of modal and bottomsheet to mask inactive screen-area */
+  --color-shadow-pagemask: #2c2b2cb8;
+  --color-help-border-subtle-wcag: #9153e2;
+  --color-help-graphics-dark: #4c1b8c;
+  --color-help-border-dark: #4c1b8c;
+  --color-help-graphics-verydark: #3c1471;
+  --color-help-border-verydark: #3c1471;
 }

package/scss/supernova/styles/typography.css

@@ -97,13 +97,13 @@
   /* Renders clumping in ordinary clumps */
   --mobile-textlist: 400 1.125rem/120% "Source Sans Pro";
 
-  /* For use as body text in help components */
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
   --desktop-help-text: 400 1.125rem/140% "Source Sans Pro";
 
   /* For use in Help trigger components */
   --desktop-help-trigger-text: 600 1.125rem/130% "Source Sans 3";
 
-  /* For use as body text in help components */
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
   --mobile-help-text: 400 1rem/150% "Source Sans Pro";
 
   /* For use in Help trigger components */

package/scss/typography.module.scss

@@ -132,6 +132,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.definition-list-data;
 }
 
+.help-text {
+  @include fonts.help-text;
+}
+
+.help-trigger-text {
+  @include fonts.help-trigger-text;
+}
+
 .anchorlink-wrapper {
   a {
     display: inline;

package/scss/typography.module.scss.d.ts

@@ -6,6 +6,8 @@ export type Styles = {
   'definition-list-type': string;
   'focused-content': string;
   form: string;
+  'help-text': string;
+  'help-trigger-text': string;
   'image-caption': string;
   'image-credit': string;
   'input-text': string;

package/scss/typography.stories.tsx

@@ -121,6 +121,14 @@ export const DefinitionListData: Story = {
   render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
 };
 
+export const HelpText: Story = {
+  render: args => <div className={designsystemtypography['help-text']}>{args.tekst}</div>,
+};
+
+export const HelpTriggerText: Story = {
+  render: args => <div className={designsystemtypography['help-trigger-text']}>{args.tekst}</div>,
+};
+
 export const AnchorlinkWrapper: Story = {
   render: args => (
     <div className={designsystemtypography['anchorlink-wrapper']}>

package/HelpBubble.js

@@ -1,78 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { AnalyticsId } from "./constants.js";
-import { A as AnchorLink } from "./AnchorLink.js";
-import { C as Close } from "./Close.js";
-import { P as PopOverVariant, a as PopOver } from "./PopOver.js";
-import styles from "./components/HelpBubble/styles.module.scss";
-const HelpBubbleVariant = PopOverVariant;
-const HelpBubble = React__default.forwardRef((props, ref) => {
-  const {
-    children,
-    className = "",
-    noCloseButton,
-    linkText = "Mer hjelp",
-    linkUrl,
-    linkTarget,
-    onLinkClick,
-    onClose,
-    closeAriaLabel,
-    // Props passed on to PopOver
-    showBubble,
-    helpBubbleId,
-    variant,
-    controllerRef,
-    role,
-    testId
-  } = props;
-  const isTooltip = role === "tooltip";
-  if (!showBubble && !isTooltip) {
-    return null;
-  }
-  const helpBubbleClasses = classNames(styles.helpbubble, className);
-  const contentClasses = classNames(styles.helpbubble__content, {
-    [styles["helpbubble__content--close"]]: !noCloseButton && !isTooltip
-  });
-  const renderLink = () => {
-    if (isTooltip) {
-      return;
-    }
-    if (onLinkClick && linkText) {
-      return /* @__PURE__ */ jsx("button", { className: styles.helpbubble__link, onClick: onLinkClick, type: "button", children: linkText });
-    } else if (linkUrl && linkText) {
-      return /* @__PURE__ */ jsx(AnchorLink, { href: linkUrl, target: linkTarget, children: linkText });
-    }
-  };
-  const renderCloseButton = () => {
-    if (noCloseButton || isTooltip) {
-      return;
-    }
-    return /* @__PURE__ */ jsx("div", { className: styles.helpbubble__close, children: /* @__PURE__ */ jsx(Close, { small: true, onClick: onClose, ariaLabel: closeAriaLabel }) });
-  };
-  return /* @__PURE__ */ jsx(
-    PopOver,
-    {
-      id: helpBubbleId,
-      variant,
-      controllerRef,
-      role,
-      ref,
-      show: isTooltip && showBubble,
-      testId,
-      children: /* @__PURE__ */ jsxs("div", { className: helpBubbleClasses, "data-analyticsid": AnalyticsId.HelpBubble, children: [
-        renderCloseButton(),
-        /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
-          children,
-          renderLink()
-        ] })
-      ] })
-    }
-  );
-});
-HelpBubble.displayName = "HelpBubble";
-export {
-  HelpBubble as H,
-  HelpBubbleVariant as a
-};
-//# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -1 +0,0 @@
-{"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":["React"],"mappings":";;;;;;;;AAWO,MAAM,oBAAoB;AAqCjC,MAAM,aAAaA,eAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,SAAS;AAEvB,MAAA,CAAC,cAAc,CAAC,WAAW;AACtB,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,qBAAqB;AAAA,IAC5D,CAAC,OAAO,4BAA4B,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAAA,EAAA,CAC5D;AAED,QAAM,aAAa,MAA+B;AAEhD,QAAI,WAAW;AACb;AAAA,IAAA;AAEF,QAAI,eAAe,UAAU;AAEzB,aAAA,oBAAC,YAAO,WAAW,OAAO,kBAAkB,SAAS,aAAa,MAAK,UACpE,UACH,SAAA,CAAA;AAAA,IAAA,WAEO,WAAW,UAAU;AAC9B,iCACG,YAAW,EAAA,MAAM,SAAS,QAAQ,YAChC,UACH,UAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,oBAAoB,MAA+B;AACvD,QAAI,iBAAiB,WAAW;AAC9B;AAAA,IAAA;AAEF,WACG,oBAAA,OAAA,EAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,OAAM,EAAA,OAAK,MAAC,SAAS,SAAS,WAAW,eAAgB,CAAA,GAC5D;AAAA,EAEJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa;AAAA,MACnB;AAAA,MAEA,+BAAC,OAAI,EAAA,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,QAAkB,kBAAA;AAAA,QACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW;AAAA,QAAA,EACd,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/HelpTooltipWord.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React__default from "react";
-import { AnalyticsId } from "./constants.js";
-import styles from "./components/HelpTooltip/HelpTooltipWord/styles.module.scss";
-const HelpTooltipWord = React__default.forwardRef(
-  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: styles.word,
-      ref,
-      onClick,
-      onMouseEnter: onFocus,
-      onMouseLeave: onBlur,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      "aria-describedby": ariaDescribedById,
-      "data-testid": testId,
-      "data-analyticsid": AnalyticsId.HelpTooltip,
-      children
-    }
-  )
-);
-HelpTooltipWord.displayName = "TooltipWord";
-export {
-  HelpTooltipWord as H
-};
-//# sourceMappingURL=HelpTooltipWord.js.map

package/HelpTooltipWord.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HelpTooltipWord.js","sources":["../src/components/HelpTooltip/HelpTooltipWord/HelpTooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst HelpTooltipWord = React.forwardRef<HTMLButtonElement, HelpTooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <button\n      className={styles.word}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.HelpTooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nHelpTooltipWord.displayName = 'TooltipWord';\n\nexport default HelpTooltipWord;\n"],"names":["React"],"mappings":";;;;AAuBA,MAAM,kBAAkBA,eAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,SAAS,SAAS,QAAQ,WAAW,QAAQ,qBAAqB,QAC7E;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,gBAAgB,cAAc;"}

package/HelpTrigger.js

@@ -1,80 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { g as getIcon, I as Icon } from "./Icon.js";
-import { AnalyticsId, IconSize } from "./constants.js";
-import { useHover } from "./hooks/useHover.js";
-import { getColor } from "./theme/currys/color.js";
-import { getAriaLabelAttributes } from "./utils/accessibility.js";
-import { mergeRefs } from "./utils/refs.js";
-import styles from "./components/HelpTrigger/styles.module.scss";
-const HelpSign = ({ size, isHovered }) => {
-  const normal = /* @__PURE__ */ jsx("path", { d: "M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z" });
-  const normalHover = /* @__PURE__ */ jsx("path", { d: "M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z" });
-  const xSmall = /* @__PURE__ */ jsx("path", { d: "M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678" });
-  const xSmallHover = /* @__PURE__ */ jsx("path", { d: "M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z" });
-  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });
-};
-const iconSizeMap = {
-  medium: IconSize.XSmall,
-  large: IconSize.Small
-};
-const getIconColor = (onColor, isActive) => {
-  if (onColor === "ondark") {
-    return "white";
-  }
-  const depth = isActive ? 800 : 600;
-  return getColor("plum", depth);
-};
-const HelpTrigger = React__default.forwardRef(
-  ({
-    ariaLabel,
-    ariaLabelledById,
-    onColor = "onlight",
-    size = "medium",
-    selected = false,
-    isHovered,
-    htmlMarkup = "button",
-    className,
-    testId,
-    ...rest
-  }, ref) => {
-    const { isHovered: buttonIsHovered, hoverRef } = useHover();
-    const triggerClasses = classNames(
-      styles["help-trigger"],
-      onColor === "onlight" && styles[`help-trigger--help`],
-      // variants look the same when onColor=ondark
-      onColor === "ondark" && styles[`help-trigger--${onColor}`],
-      styles[`help-trigger--${size}`],
-      isHovered && styles[`help-trigger--hovered`],
-      selected && styles[`help-trigger--selected`],
-      className
-    );
-    const iconColor = getIconColor(onColor, isHovered || buttonIsHovered || selected);
-    const icon = /* @__PURE__ */ jsx(Icon, { svgIcon: HelpSign, size: iconSizeMap[size], color: iconColor, isHovered: isHovered || buttonIsHovered });
-    if (htmlMarkup === "span") {
-      return /* @__PURE__ */ jsx("span", { "data-testid": testId, "data-analyticsid": AnalyticsId.Trigger, className: triggerClasses, children: icon });
-    }
-    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-label": ariaLabel,
-        type: "button",
-        "data-testid": testId,
-        "data-analyticsid": AnalyticsId.Trigger,
-        className: triggerClasses,
-        ref: mergeRefs([ref, hoverRef]),
-        "aria-expanded": selected,
-        ...ariaLabelAttributes,
-        ...rest,
-        children: icon
-      }
-    );
-  }
-);
-HelpTrigger.displayName = "HelpTrigger";
-export {
-  HelpTrigger as H
-};
-//# sourceMappingURL=HelpTrigger.js.map

package/HelpTrigger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HelpTrigger.js","sources":["../src/components/HelpTrigger/HelpSign.tsx","../src/components/HelpTrigger/HelpTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerTags = 'button' | 'span';\n\nexport type HelpTriggerSize = 'medium' | 'large';\n\nexport type HelpTriggerOnColor = 'onlight' | 'ondark';\n\nexport interface HelpTriggerProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Changes the design based on the background the help trigger is placed on. Default: onlight.\n   */\n  onColor?: HelpTriggerOnColor;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: HelpTriggerSize;\n  /**\n   * Indicates that the help trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the help trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconSizeMap: Record<HelpTriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (onColor: HelpTriggerOnColor, isActive: boolean): string | undefined => {\n  if (onColor === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n  return getColor('plum', depth);\n};\n\nconst HelpTrigger = React.forwardRef<HTMLButtonElement, HelpTriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      onColor = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles['help-trigger'],\n      onColor === 'onlight' && styles[`help-trigger--help`], // variants look the same when onColor=ondark\n      onColor === 'ondark' && styles[`help-trigger--${onColor}`],\n      styles[`help-trigger--${size}`],\n      isHovered && styles[`help-trigger--hovered`],\n      selected && styles[`help-trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(onColor, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={HelpSign} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nHelpTrigger.displayName = 'HelpTrigger';\n\nexport default HelpTrigger;\n"],"names":["React"],"mappings":";;;;;;;;;;AAIA,MAAM,WAAmC,CAAC,EAAE,MAAM,gBAAkD;AAClG,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA;AAG3jB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA;AAG5jB,QAAM,SACJ,oBAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA;AAGniB,QAAM,cACJ,oBAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA;AAGzjB,SAAA,QAAQ,EAAE,MAAM,WAAW,QAAQ,aAAa,QAAQ,aAAa;AAC9E;ACsCA,MAAM,cAAiD;AAAA,EACrD,QAAQ,SAAS;AAAA,EACjB,OAAO,SAAS;AAClB;AAEA,MAAM,eAAe,CAAC,SAA6B,aAA0C;AAC3F,MAAI,YAAY,UAAU;AACjB,WAAA;AAAA,EAAA;AAGH,QAAA,QAAQ,WAAW,MAAM;AACxB,SAAA,SAAS,QAAQ,KAAK;AAC/B;AAEA,MAAM,cAAcA,eAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,WAAW,iBAAiB,SAAA,IAAa,SAA4B;AAE7E,UAAM,iBAAiB;AAAA,MACrB,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa,OAAO,oBAAoB;AAAA;AAAA,MACpD,YAAY,YAAY,OAAO,iBAAiB,OAAO,EAAE;AAAA,MACzD,OAAO,iBAAiB,IAAI,EAAE;AAAA,MAC9B,aAAa,OAAO,uBAAuB;AAAA,MAC3C,YAAY,OAAO,wBAAwB;AAAA,MAC3C;AAAA,IACF;AAEA,UAAM,YAAY,aAAa,SAAS,aAAa,mBAAmB,QAAQ;AAEhF,UAAM,OAAO,oBAAC,MAAK,EAAA,SAAS,UAAU,MAAM,YAAY,IAAI,GAAG,OAAO,WAAW,WAAW,aAAa,iBAAiB;AAE1H,QAAI,eAAe,QAAQ;AAEvB,aAAA,oBAAC,UAAK,eAAa,QAAQ,oBAAkB,YAAY,SAAS,WAAW,gBAC1E,UACH,KAAA,CAAA;AAAA,IAAA;AAIJ,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAG3F,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,QAC9B,iBAAe;AAAA,QACd,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,YAAY,cAAc;"}

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-export interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
-    /**
-     * Help question contents
-     */
-    children: string;
-    /**
-     * Indicates that the help question is in use.
-     */
-    selected?: boolean;
-    /**
-     * Classname will be applied to the button element.
-     */
-    className?: string;
-    /**
-     * Sets the data-testid attribute.
-     */
-    testId?: string;
-}
-declare const HelpQuestion: React.ForwardRefExoticComponent<HelpQuestionProps & React.RefAttributes<HTMLButtonElement>>;
-export default HelpQuestion;

package/components/HelpQuestion/index.d.ts

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

package/components/HelpQuestion/index.js

@@ -1,35 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { AnalyticsId } from "../../constants.js";
-import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
-import { mergeRefs } from "../../utils/refs.js";
-import { H as HelpTrigger } from "../../HelpTrigger.js";
-import styles from "./styles.module.scss";
-const HelpQuestion = React__default.forwardRef(
-  ({ children, selected = false, className, onClick, testId }, ref) => {
-    const { isHovered, refObject } = usePseudoClasses();
-    const classes = classNames(styles.helpquestion, selected && styles["helpquestion--selected"], className);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "data-testid": testId,
-        className: classes,
-        onClick,
-        ref: mergeRefs([ref, refObject]),
-        "aria-expanded": selected,
-        "data-analyticsid": AnalyticsId.HelpQuestion,
-        children: [
-          /* @__PURE__ */ jsx(HelpTrigger, { htmlMarkup: "span", selected, isHovered }),
-          children
-        ]
-      }
-    );
-  }
-);
-HelpQuestion.displayName = "HelpQuestion";
-export {
-  HelpQuestion as default
-};
-//# sourceMappingURL=index.js.map

package/components/HelpQuestion/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport HelpTrigger from '../HelpTrigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <HelpTrigger htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["React"],"mappings":";;;;;;;;AA8BA,MAAM,eAAeA,eAAM;AAAA,EACzB,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,SAAS,OAAO,GAAG,QAAQ;AACnE,UAAM,EAAE,WAAW,UAAU,IAAI,iBAAoC;AAE/D,UAAA,UAAU,WAAW,OAAO,cAAc,YAAY,OAAO,wBAAwB,GAAG,SAAS;AAGrG,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX;AAAA,QACA,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;AAAA,QAC/B,iBAAe;AAAA,QACf,oBAAkB,YAAY;AAAA,QAE9B,UAAA;AAAA,UAAA,oBAAC,aAAY,EAAA,YAAW,QAAO,UAAoB,WAAsB;AAAA,UACxE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}

package/components/HelpQuestion/styles.module.scss

@@ -1,49 +0,0 @@
-@use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
-
-.helpquestion {
-  display: inline-flex;
-  align-items: center;
-  text-align: left;
-  gap: spacers.getSpacer(2xs);
-  padding: spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(3xs);
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-  color: palette.$plum600;
-  font-weight: 600;
-  font-size: font-settings.$font-size-sm;
-  line-height: font-settings.$lineheight-size-xs;
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    gap: spacers.getSpacer(2xs);
-    font-size: font-settings.$font-size-md;
-    line-height: font-settings.$lineheight-size-sm;
-  }
-
-  &:hover {
-    color: palette.$plum800;
-    background-color: rgba(palette.$plum600, 0.1);
-  }
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 3px palette.$black;
-  }
-
-  &--selected {
-    color: palette.$plum800;
-    background-color: rgba(palette.$plum600, 0.1);
-
-    &:hover {
-      background-color: rgba(palette.$plum600, 0.2);
-    }
-
-    &:focus-visible {
-      background-color: rgba(palette.$plum600, 0.1);
-    }
-  }
-}

package/components/HelpTooltip/HelpTooltipWord/HelpTooltipWord.d.ts

@@ -1,19 +0,0 @@
-import { default as React } from 'react';
-export interface HelpTooltipWordProps {
-    /** Ordet som skal ha en tilhørende tooltip */
-    children: string;
-    /** Callback når ordet klikkes på */
-    onClick: () => void;
-    /** Callback når ordet får fokus eller hovres over */
-    onFocus: () => void;
-    /** Callback når ordet mister fokus eller hover forsvinner */
-    onBlur: () => void;
-    /** Callback når det skrives på tastaturet */
-    onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
-    /** ID til element som beskriver ordet */
-    ariaDescribedById: string;
-    /** Valgfri test-id */
-    testId?: string;
-}
-declare const HelpTooltipWord: React.ForwardRefExoticComponent<HelpTooltipWordProps & React.RefAttributes<HTMLButtonElement>>;
-export default HelpTooltipWord;

package/components/HelpTooltip/HelpTooltipWord/index.d.ts

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

package/components/HelpTooltip/HelpTooltipWord/index.js

@@ -1,5 +0,0 @@
-import { H as HelpTooltipWord } from "../../../HelpTooltipWord.js";
-export {
-  HelpTooltipWord as default
-};
-//# sourceMappingURL=index.js.map

package/components/HelpTooltip/HelpTooltipWord/styles.module.scss

@@ -1,18 +0,0 @@
-@use '../../../scss/palette' as palette;
-@use '../../../scss/spacers' as spacers;
-
-.word {
-  all: unset;
-  position: relative;
-  display: inline-block;
-  cursor: help;
-
-  // bruker border istedet for text-decoration for å komme rundt text-decoraton-thickness begrensninger i safari
-  border-bottom: 0.2rem dotted palette.$plum400;
-  line-height: 1.4rem;
-
-  &:focus-visible {
-    box-shadow: 0 0 0 spacers.getSpacer(4xs) palette.$black;
-    outline: none;
-  }
-}

package/components/HelpTrigger/HelpSign.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { SvgPathProps } from '../Icon';
-declare const HelpSign: React.FC<SvgPathProps>;
-export default HelpSign;

package/components/HelpTrigger/HelpTrigger.d.ts

@@ -1,44 +0,0 @@
-import { default as React } from 'react';
-export type HelpTriggerTags = 'button' | 'span';
-export type HelpTriggerSize = 'medium' | 'large';
-export type HelpTriggerOnColor = 'onlight' | 'ondark';
-export interface HelpTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {
-    /**
-     * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!
-     */
-    ariaLabel?: string;
-    /**
-     * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!
-     */
-    ariaLabelledById?: string;
-    /**
-     * Changes the design based on the background the help trigger is placed on. Default: onlight.
-     */
-    onColor?: HelpTriggerOnColor;
-    /**
-     * Size of the trigger. Default: medium.
-     */
-    size?: HelpTriggerSize;
-    /**
-     * Indicates that the help trigger is in use.
-     */
-    selected?: boolean;
-    /**
-     * Indicates that the help trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.
-     */
-    isHovered?: boolean;
-    /**
-     * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button
-     */
-    htmlMarkup?: HelpTriggerTags;
-    /**
-     * Classname will be applied to the button element.
-     */
-    className?: string;
-    /**
-     * Optional test id.
-     */
-    testId?: string;
-}
-declare const HelpTrigger: React.ForwardRefExoticComponent<HelpTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export default HelpTrigger;

package/components/HelpTrigger/index.d.ts

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

package/components/HelpTrigger/index.js

@@ -1,5 +0,0 @@
-import { H as HelpTrigger } from "../../HelpTrigger.js";
-export {
-  HelpTrigger as default
-};
-//# sourceMappingURL=index.js.map