@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Title/Title.js

@@ -1,9 +1,9 @@
 import a from "react";
-import T from "classnames";
-import { AnalyticsId as u } from "../../constants.js";
+import u from "classnames";
+import { AnalyticsId as y } from "../../constants.js";
 import t from "../Title/styles.module.scss";
-const y = a.forwardRef(function(r, o) {
-  const { id: n, children: m, className: s, htmlMarkup: c = "h1", appearance: e = "title1", margin: i = 0, testId: p } = r, d = T(
+const $ = a.forwardRef(function(r, o) {
+  const { id: m, children: n, className: s, htmlMarkup: c = "h1", appearance: e = "title1", margin: i = 0, testId: p } = r, d = u(
     t.title,
     {
       [t["title--feature"]]: e === "titleFeature",
@@ -14,12 +14,12 @@ const y = a.forwardRef(function(r, o) {
       [t["title--title5"]]: e === "title5"
     },
     s
-  ), f = c, g = h(i) ? { marginTop: `${i.marginTop}rem`, marginBottom: `${i.marginBottom}rem` } : { marginTop: `${i}rem`, marginBottom: `${i}rem` };
-  return /* @__PURE__ */ a.createElement(f, { id: n, className: d, style: g, ref: o, "data-testid": p, "data-analyticsid": u.Title }, m);
-}), h = (l) => Object.prototype.hasOwnProperty.call(l, "marginTop") && Object.prototype.hasOwnProperty.call(l, "marginBottom"), N = y;
+  ), f = c, g = T(i) ? { marginTop: `${i.marginTop}rem`, marginBottom: `${i.marginBottom}rem` } : { marginTop: `${i}rem`, marginBottom: `${i}rem` };
+  return /* @__PURE__ */ a.createElement(f, { id: m, className: d, style: g, ref: o, "data-testid": p, "data-analyticsid": y.Title }, n);
+}), T = (l) => Object.prototype.hasOwnProperty.call(l, "marginTop") && Object.prototype.hasOwnProperty.call(l, "marginBottom");
 export {
-  y as Title,
-  N as default,
-  h as instanceOfTitleMargin
+  $ as Title,
+  $ as default,
+  T as instanceOfTitleMargin
 };
 //# sourceMappingURL=Title.js.map

package/components/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["Title","React","props","ref","id","children","className","htmlMarkup","appearance","margin","testId","titleClasses","classNames","titleStyles","CustomTag","inlineStyle","instanceOfTitleMargin","AnalyticsId","Title$1"],"mappings":";;;;AA2BO,MAAMA,IAAQC,EAAM,WAAW,SAA2BC,GAAmBC,GAA6C;AACzH,QAAA,EAAE,IAAAC,GAAI,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,MAAM,YAAAC,IAAa,UAAU,QAAAC,IAAS,GAAG,QAAAC,EAAA,IAAWR,GAC5FS,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,gBAAgB,CAAC,GAAGL,MAAe;AAAA,MAChD,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,IACjD;AAAA,IACAF;AAAA,EAAA,GAEIQ,IAAYP,GAEZQ,IAAcC,EAAsBP,CAAM,IAC5C,EAAE,WAAW,GAAGA,EAAO,SAAS,OAAO,cAAc,GAAGA,EAAO,YAAY,MAC3E,IAAA,EAAE,WAAW,GAAGA,CAAM,OAAO,cAAc,GAAGA,CAAM,MAAM;AAE9D,SACGR,gBAAAA,EAAA,cAAAa,GAAA,EAAU,IAAAV,GAAQ,WAAWO,GAAc,OAAOI,GAAa,KAAAZ,GAAU,eAAaO,GAAQ,oBAAkBO,EAAY,SAC1HZ,CACH;AAEJ,CAAC,GAOYW,IAAwB,CAACP,MAC7B,OAAO,UAAU,eAAe,KAAKA,GAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAKA,GAAQ,cAAc,GAGjIS,IAAelB;"}
+{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["Title","React","props","ref","id","children","className","htmlMarkup","appearance","margin","testId","titleClasses","classNames","titleStyles","CustomTag","inlineStyle","instanceOfTitleMargin","AnalyticsId"],"mappings":";;;;AA2BO,MAAMA,IAAQC,EAAM,WAAW,SAA2BC,GAAmBC,GAA6C;AACzH,QAAA,EAAE,IAAAC,GAAI,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,MAAM,YAAAC,IAAa,UAAU,QAAAC,IAAS,GAAG,QAAAC,EAAA,IAAWR,GAC5FS,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,gBAAgB,CAAC,GAAGL,MAAe;AAAA,MAChD,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,IACjD;AAAA,IACAF;AAAA,EAAA,GAEIQ,IAAYP,GAEZQ,IAAcC,EAAsBP,CAAM,IAC5C,EAAE,WAAW,GAAGA,EAAO,SAAS,OAAO,cAAc,GAAGA,EAAO,YAAY,MAC3E,IAAA,EAAE,WAAW,GAAGA,CAAM,OAAO,cAAc,GAAGA,CAAM,MAAM;AAE9D,SACGR,gBAAAA,EAAA,cAAAa,GAAA,EAAU,IAAAV,GAAQ,WAAWO,GAAc,OAAOI,GAAa,KAAAZ,GAAU,eAAaO,GAAQ,oBAAkBO,EAAY,SAC1HZ,CACH;AAEJ,CAAC,GAOYW,IAAwB,CAACP,MAC7B,OAAO,UAAU,eAAe,KAAKA,GAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAKA,GAAQ,cAAc;"}

package/components/Title/index.js

@@ -1,8 +1,8 @@
-import e from "./Title.js";
-import { Title as o, instanceOfTitleMargin as a } from "./Title.js";
+import { Title as e } from "./Title.js";
+import { instanceOfTitleMargin as o } from "./Title.js";
 export {
-  o as Title,
+  e as Title,
   e as default,
-  a as instanceOfTitleMargin
+  o as instanceOfTitleMargin
 };
 //# sourceMappingURL=index.js.map

package/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import D from "./TooltipWord/TooltipWord.js";
 import { useDelayedState as v } from "../../hooks/useDelayedState.js";
 import { useUuid as B } from "../../hooks/useUuid.js";
 import R from "../HelpBubble/HelpBubble.js";
-const x = 200, _ = ({ children: s, description: r, testId: i }) => {
+const x = 200, I = ({ children: s, description: r, testId: i }) => {
   const n = B(), a = y(null), { currentTooltip: l, setCurrentTooltip: u } = C(T), [{ showTooltip: p, keepOpen: m }, h, o] = v(
     { showTooltip: !1, keepOpen: !1 },
     x
@@ -46,10 +46,10 @@ const x = 200, _ = ({ children: s, description: r, testId: i }) => {
 }), K = ({ children: s }) => {
   const [r, i] = b();
   return /* @__PURE__ */ t.createElement(T.Provider, { value: { currentTooltip: r, setCurrentTooltip: i } }, s);
-}, P = _;
+};
 export {
-  _ as Tooltip,
+  I as Tooltip,
   K as TooltipOpenProvider,
-  P as default
+  I as default
 };
 //# sourceMappingURL=Tooltip.js.map

package/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\nexport const TooltipOpenProvider: React.FC = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState","Tooltip$1"],"mappings":";;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,EAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA;AAEL,QAAMC,IAAqB,MAAY;AACtB,IAAAL,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,EAAA,GAGhGG,IAAc,MAAY;AAC9B,IAAKb,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,EAC1F,GAGII,IAAa,MAAY;AAC7B,IAAAP,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EAAA,GAG9EK,IAAgB,CAAC,MAAkD;AACnE,IAAA,EAAE,QAAQ,WACGR,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAEIS,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKnB;AAAA,MACL,SAASc;AAAA,MACT,SAASC;AAAA,MACT,QAAQC;AAAA,MACR,WAAWC;AAAA,MACX,mBAAmBnB;AAAA,MACnB,QAAAD;AAAA,IAAA;AAAA,IAECF;AAAA,EAAA,GAEHuB,gBAAAA,EAAA,cAACE,GAAW,EAAA,cAAAtB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,EACvG,GAAAX,CACH,CACF;AAEJ,GAOMS,IAAqBa,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAEYG,IAAgC,CAAC,EAAE,UAAA1B,QAAe;AAC7D,QAAM,CAACO,GAAgBC,CAAiB,IAAImB,EAAiB;AAEtD,SAAAJ,gBAAAA,EAAA,cAACb,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,IAAkB,GAAIR,CAAS;AAC9F,GAEA4B,IAAe7B;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\nexport const TooltipOpenProvider: React.FC = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState"],"mappings":";;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,EAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA;AAEL,QAAMC,IAAqB,MAAY;AACtB,IAAAL,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,EAAA,GAGhGG,IAAc,MAAY;AAC9B,IAAKb,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,EAC1F,GAGII,IAAa,MAAY;AAC7B,IAAAP,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EAAA,GAG9EK,IAAgB,CAAC,MAAkD;AACnE,IAAA,EAAE,QAAQ,WACGR,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAEIS,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKnB;AAAA,MACL,SAASc;AAAA,MACT,SAASC;AAAA,MACT,QAAQC;AAAA,MACR,WAAWC;AAAA,MACX,mBAAmBnB;AAAA,MACnB,QAAAD;AAAA,IAAA;AAAA,IAECF;AAAA,EAAA,GAEHuB,gBAAAA,EAAA,cAACE,GAAW,EAAA,cAAAtB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,EACvG,GAAAX,CACH,CACF;AAEJ,GAOMS,IAAqBa,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAEYG,IAAgC,CAAC,EAAE,UAAA1B,QAAe;AAC7D,QAAM,CAACO,GAAgBC,CAAiB,IAAImB,EAAiB;AAEtD,SAAAJ,gBAAAA,EAAA,cAACb,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,IAAkB,GAAIR,CAAS;AAC9F;"}

package/components/Tooltip/TooltipWord/TooltipWord.js

@@ -1,28 +1,27 @@
-import a from "react";
-import { AnalyticsId as p } from "../../../constants.js";
-import c from "../../Tooltip/TooltipWord/styles.module.scss";
-const e = a.forwardRef(
-  ({ children: r, onClick: d, onFocus: t, onBlur: o, onKeyDown: i, testId: s, ariaDescribedById: l }, m) => /* @__PURE__ */ a.createElement(
+import e from "react";
+import { AnalyticsId as m } from "../../../constants.js";
+import p from "../../Tooltip/TooltipWord/styles.module.scss";
+const f = e.forwardRef(
+  ({ children: o, onClick: r, onFocus: t, onBlur: a, onKeyDown: d, testId: i, ariaDescribedById: s }, l) => /* @__PURE__ */ e.createElement(
     "button",
     {
-      className: c.word,
-      ref: m,
-      onClick: d,
+      className: p.word,
+      ref: l,
+      onClick: r,
       onMouseEnter: t,
-      onMouseLeave: o,
+      onMouseLeave: a,
       onFocus: t,
-      onBlur: o,
-      onKeyDown: i,
-      "aria-describedby": l,
-      "data-testid": s,
-      "data-analyticsid": p.Tooltip
+      onBlur: a,
+      onKeyDown: d,
+      "aria-describedby": s,
+      "data-testid": i,
+      "data-analyticsid": m.Tooltip
     },
-    r
+    o
   )
 );
-e.displayName = "TooltipWord";
-const T = e;
+f.displayName = "TooltipWord";
 export {
-  T as default
+  f as default
 };
 //# sourceMappingURL=TooltipWord.js.map

package/components/Tooltip/TooltipWord/TooltipWord.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipWord.js","sources":["../../../../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\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 TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\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.Tooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["TooltipWord","React","children","onClick","onFocus","onBlur","onKeyDown","testId","ariaDescribedById","ref","styles","AnalyticsId","TooltipWord$1"],"mappings":";;;AAuBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,GAAQ,mBAAAC,EAAkB,GAAGC,MAC7ER,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAO;AAAA,MAClB,KAAAD;AAAA,MACA,SAAAN;AAAA,MACA,cAAcC;AAAA,MACd,cAAcC;AAAA,MACd,SAAAD;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBE;AAAA,MAClB,eAAaD;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BT;AAAA,EACH;AAEJ;AAEAF,EAAY,cAAc;AAE1B,MAAAY,IAAeZ;"}
+{"version":3,"file":"TooltipWord.js","sources":["../../../../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\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 TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\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.Tooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["TooltipWord","React","children","onClick","onFocus","onBlur","onKeyDown","testId","ariaDescribedById","ref","styles","AnalyticsId"],"mappings":";;;AAuBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,GAAQ,mBAAAC,EAAkB,GAAGC,MAC7ER,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAO;AAAA,MAClB,KAAAD;AAAA,MACA,SAAAN;AAAA,MACA,cAAcC;AAAA,MACd,cAAcC;AAAA,MACd,SAAAD;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBE;AAAA,MAClB,eAAaD;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BT;AAAA,EACH;AAEJ;AAEAF,EAAY,cAAc;"}

package/components/Tooltip/index.js

@@ -1,8 +1,8 @@
-import p from "./Tooltip.js";
-import { Tooltip as e, TooltipOpenProvider as i } from "./Tooltip.js";
+import { Tooltip as r } from "./Tooltip.js";
+import { TooltipOpenProvider as e } from "./Tooltip.js";
 export {
-  e as Tooltip,
-  i as TooltipOpenProvider,
-  p as default
+  r as Tooltip,
+  e as TooltipOpenProvider,
+  r as default
 };
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/TooltipExample.js

@@ -1,8 +1,8 @@
 import e from "react";
-import { longLoremText as o } from "../../utils/loremtext.js";
-import l, { TooltipOpenProvider as r } from "../Tooltip/Tooltip.js";
-const n = (t) => /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(l, { ...t }, "Et tooltip her."), " " + o, /* @__PURE__ */ e.createElement("button", null, "Knapp"), "Dette er ", /* @__PURE__ */ e.createElement(l, { ...t }, t.children), " som skal ha nærmere forklaring.", o, /* @__PURE__ */ e.createElement(l, { ...t }, "Enda et tooltip her."))), c = n;
+import { longLoremText as r } from "../../utils/loremtext.js";
+import { TooltipOpenProvider as o, Tooltip as l } from "../Tooltip/Tooltip.js";
+const i = (t) => /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(l, { ...t }, "Et tooltip her."), " " + r, /* @__PURE__ */ e.createElement("button", null, "Knapp"), "Dette er ", /* @__PURE__ */ e.createElement(l, { ...t }, t.children), " som skal ha nærmere forklaring.", r, /* @__PURE__ */ e.createElement(l, { ...t }, "Enda et tooltip her.")));
 export {
-  c as default
+  i as default
 };
 //# sourceMappingURL=TooltipExample.js.map

package/components/TooltipExample/TooltipExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipExample.js","sources":["../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport longLoremText from '../../utils/loremtext';\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        <button>{'Knapp'}</button>\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["TooltipExample","props","React","TooltipOpenProvider","Tooltip","longLoremText","TooltipExample$1"],"mappings":";;;AAKA,MAAMA,IAAyC,CAASC,MAEnDC,gBAAAA,EAAA,cAAAC,GAAA,MAEGD,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,KAAQ,iBAAkB,GACtC,MAAMI,GACPH,gBAAAA,EAAA,cAAC,gBAAQ,OAAQ,GAChB,aACDA,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,EAAQ,GAAAA,EAAM,QAAS,GACnC,oCACAI,GACDH,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,EAAQ,GAAA,sBAAuB,CAC9C,CACF,GAIJK,IAAeN;"}
+{"version":3,"file":"TooltipExample.js","sources":["../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport longLoremText from '../../utils/loremtext';\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        <button>{'Knapp'}</button>\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["TooltipExample","props","React","TooltipOpenProvider","Tooltip","longLoremText"],"mappings":";;;AAKA,MAAMA,IAAyC,CAASC,MAEnDC,gBAAAA,EAAA,cAAAC,GAAA,MAEGD,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,KAAQ,iBAAkB,GACtC,MAAMI,GACPH,gBAAAA,EAAA,cAAC,gBAAQ,OAAQ,GAChB,aACDA,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,EAAQ,GAAAA,EAAM,QAAS,GACnC,oCACAI,GACDH,gBAAAA,EAAA,cAACE,GAAS,EAAA,GAAGH,EAAQ,GAAA,sBAAuB,CAC9C,CACF;"}

package/components/Trigger/HelpSign.js

@@ -1,7 +1,7 @@
 import c from "react";
-import { getIcon as a } from "../Icon/Icon.js";
-const t = ({ size: l, isHovered: e }) => a({ size: l, isHovered: e, normal: /* @__PURE__ */ c.createElement("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" }), normalHover: /* @__PURE__ */ c.createElement("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" }), xSmall: /* @__PURE__ */ c.createElement("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" }), xSmallHover: /* @__PURE__ */ c.createElement("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" }) }), s = t;
+import { getIcon as e } from "../Icon/Icon.js";
+const p = ({ size: l, isHovered: a }) => e({ size: l, isHovered: a, normal: /* @__PURE__ */ c.createElement("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" }), normalHover: /* @__PURE__ */ c.createElement("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" }), xSmall: /* @__PURE__ */ c.createElement("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" }), xSmallHover: /* @__PURE__ */ c.createElement("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" }) });
 export {
-  s as default
+  p as default
 };
 //# sourceMappingURL=HelpSign.js.map

package/components/Trigger/HelpSign.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpSign.js","sources":["../../../src/components/Trigger/HelpSign.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"],"names":["HelpSign","size","isHovered","getIcon","React","HelpSign$1"],"mappings":";;AAIA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QAiBzCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAfhCE,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA,GAejhB,aAXxCA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA,GAWrgB,QAPrDA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA,GAOpe,aAH7DA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA,GAGpf,GAG9EC,IAAeL;"}
+{"version":3,"file":"HelpSign.js","sources":["../../../src/components/Trigger/HelpSign.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"],"names":["HelpSign","size","isHovered","getIcon","React"],"mappings":";;AAIA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QAiBzCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAfhCE,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA,GAejhB,aAXxCA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA,GAWrgB,QAPrDA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA,GAOpe,aAH7DA,gBAAAA,EAAA,cAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA,GAGpf;"}

package/components/Trigger/Trigger.js

@@ -2,19 +2,19 @@ import a from "react";
 import N from "classnames";
 import R from "./HelpSign.js";
 import { IconSize as f, AnalyticsId as d } from "../../constants.js";
-import { useHover as $ } from "../../hooks/useHover.js";
+import { useHover as T } from "../../hooks/useHover.js";
 import { getColor as u } from "../../theme/currys/color.js";
 import { getAriaLabelAttributes as E } from "../../utils/accessibility.js";
 import { mergeRefs as H } from "../../utils/refs.js";
-import { Icon as k } from "../Icon/Icon.js";
+import { Icon as $ } from "../Icon/Icon.js";
 import e from "../Trigger/styles.module.scss";
-const v = {
+const k = {
   help: R
   //info: InfoSignStroke, // @todo Support variant='info' in later version
-}, w = {
+}, v = {
   medium: f.XSmall,
   large: f.Small
-}, x = (o, i, t) => {
+}, w = (o, i, t) => {
   if (o === "ondark")
     return "white";
   const r = t ? 800 : 600;
@@ -22,53 +22,52 @@ const v = {
     return u("plum", r);
   if (i === "info")
     return u("blueberry", r);
-}, b = a.forwardRef(
+}, x = a.forwardRef(
   ({
     ariaLabel: o,
     ariaLabelledById: i,
     variant: t = "help",
     mode: r = "onlight",
-    size: l = "medium",
+    size: s = "medium",
     selected: n = !1,
-    isHovered: s,
-    htmlMarkup: h = "button",
-    className: y,
-    testId: g,
-    ...I
-  }, S) => {
-    const { isHovered: m, hoverRef: T } = $(), c = N(
+    isHovered: l,
+    htmlMarkup: b = "button",
+    className: h,
+    testId: m,
+    ...y
+  }, I) => {
+    const { isHovered: g, hoverRef: S } = T(), c = N(
       e.trigger,
       r === "onlight" && e[`trigger--${t}`],
       // variants look the same when mode=ondark
       r === "ondark" && e[`trigger--${r}`],
-      e[`trigger--${l}`],
-      s && e["trigger--hovered"],
+      e[`trigger--${s}`],
+      l && e["trigger--hovered"],
       n && e["trigger--selected"],
-      y
-    ), A = x(r, t, s || m || n), p = /* @__PURE__ */ a.createElement(k, { svgIcon: v[t], size: w[l], color: A, isHovered: s || m });
-    if (h === "span")
-      return /* @__PURE__ */ a.createElement("span", { "data-testid": g, "data-analyticsid": d.Trigger, className: c }, p);
+      h
+    ), A = w(r, t, l || g || n), p = /* @__PURE__ */ a.createElement($, { svgIcon: k[t], size: v[s], color: A, isHovered: l || g });
+    if (b === "span")
+      return /* @__PURE__ */ a.createElement("span", { "data-testid": m, "data-analyticsid": d.Trigger, className: c }, p);
     const C = E({ label: o, id: i });
     return /* @__PURE__ */ a.createElement(
       "button",
       {
         "aria-label": o,
         type: "button",
-        "data-testid": g,
+        "data-testid": m,
         "data-analyticsid": d.Trigger,
         className: c,
-        ref: H([S, T]),
+        ref: H([I, S]),
         "aria-expanded": n,
         ...C,
-        ...I
+        ...y
       },
       p
     );
   }
 );
-b.displayName = "Trigger";
-const G = b;
+x.displayName = "Trigger";
 export {
-  G as default
+  x as default
 };
 //# sourceMappingURL=Trigger.js.map

package/components/Trigger/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["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, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps 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   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the 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?: TriggerTags;\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 iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = '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.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      mode === 'ondark' && styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} 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\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["iconMap","HelpSign","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","size","selected","isHovered","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs","Trigger$1"],"mappings":";;;;;;;;;;AAiEA,MAAMA,IAA2C;AAAA,EAC/C,MAAMC;AAAA;AAER,GAEMC,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAS,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPtB,MAAS,aAAasB,EAAO,YAAYrB,CAAO,EAAE;AAAA;AAAA,MAClDD,MAAS,YAAYsB,EAAO,YAAYtB,CAAI,EAAE;AAAA,MAC9CsB,EAAO,YAAYb,CAAI,EAAE;AAAA,MACzBE,KAAaW,EAAO,kBAAkB;AAAA,MACtCZ,KAAYY,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYxB,EAAaC,GAAMC,GAASU,KAAaM,KAAmBP,CAAQ,GAEhFc,IAAOlB,gBAAAA,EAAA,cAACmB,GAAK,EAAA,SAAS9B,EAAQM,CAAO,GAAG,MAAMJ,EAAYY,CAAI,GAAG,OAAOc,GAAW,WAAWZ,KAAaM,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAAN,gBAAAA,EAAA,cAAC,UAAK,eAAaQ,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,EAAA,GAC1EI,CACH;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOrB,GAAW,IAAIC,GAAkB;AAG3F,WAAAF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYC;AAAA,QACZ,MAAK;AAAA,QACL,eAAaO;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeR;AAAA,QACd,GAAGiB;AAAA,QACH,GAAGZ;AAAA,MAAA;AAAA,MAEHS;AAAA,IAAA;AAAA,EAGP;AACF;AAEAnB,EAAQ,cAAc;AAEtB,MAAAyB,IAAezB;"}
+{"version":3,"file":"Trigger.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["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, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps 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   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the 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?: TriggerTags;\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 iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = '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.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      mode === 'ondark' && styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} 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\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["iconMap","HelpSign","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","size","selected","isHovered","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs"],"mappings":";;;;;;;;;;AAiEA,MAAMA,IAA2C;AAAA,EAC/C,MAAMC;AAAA;AAER,GAEMC,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAS,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPtB,MAAS,aAAasB,EAAO,YAAYrB,CAAO,EAAE;AAAA;AAAA,MAClDD,MAAS,YAAYsB,EAAO,YAAYtB,CAAI,EAAE;AAAA,MAC9CsB,EAAO,YAAYb,CAAI,EAAE;AAAA,MACzBE,KAAaW,EAAO,kBAAkB;AAAA,MACtCZ,KAAYY,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYxB,EAAaC,GAAMC,GAASU,KAAaM,KAAmBP,CAAQ,GAEhFc,IAAOlB,gBAAAA,EAAA,cAACmB,GAAK,EAAA,SAAS9B,EAAQM,CAAO,GAAG,MAAMJ,EAAYY,CAAI,GAAG,OAAOc,GAAW,WAAWZ,KAAaM,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAAN,gBAAAA,EAAA,cAAC,UAAK,eAAaQ,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,EAAA,GAC1EI,CACH;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOrB,GAAW,IAAIC,GAAkB;AAG3F,WAAAF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYC;AAAA,QACZ,MAAK;AAAA,QACL,eAAaO;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeR;AAAA,QACd,GAAGiB;AAAA,QACH,GAAGZ;AAAA,MAAA;AAAA,MAEHS;AAAA,IAAA;AAAA,EAGP;AACF;AAEAnB,EAAQ,cAAc;"}

package/components/Validation/ErrorList.js

@@ -1,8 +1,8 @@
-import r from "react";
-import s from "./ErrorListItem.js";
-import e from "../List/List.js";
-const i = (o) => /* @__PURE__ */ r.createElement(e, null, Object.entries(o.errors).map(([t, m]) => /* @__PURE__ */ r.createElement(e.Item, { key: t }, /* @__PURE__ */ r.createElement(s, { name: t, error: m })))), n = i;
+import e from "react";
+import a from "./ErrorListItem.js";
+import r from "../List/List.js";
+const c = (m) => /* @__PURE__ */ e.createElement(r, null, Object.entries(m.errors).map(([t, o]) => /* @__PURE__ */ e.createElement(r.Item, { key: t }, /* @__PURE__ */ e.createElement(a, { name: t, error: o }))));
 export {
-  n as default
+  c as default
 };
 //# sourceMappingURL=ErrorList.js.map

package/components/Validation/ErrorList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorList.js","sources":["../../../src/components/Validation/ErrorList.tsx"],"sourcesContent":["import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n"],"names":["ErrorList","props","React","List","name","error","ErrorListItem","ErrorList$1"],"mappings":";;;AAUA,MAAMA,IAAsC,CAC1CC,MAAAC,gBAAAA,EAAA,cAACC,GACE,MAAA,OAAO,QAAQF,EAAM,MAAM,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAK,MAC5CH,gBAAAA,EAAA,cAAAC,EAAK,MAAL,EAAU,KAAKC,EAAA,GACbF,gBAAAA,EAAA,cAAAI,GAAA,EAAc,MAAAF,GAAY,OAAAC,EAAA,CAAc,CAC3C,CACD,CACH,GAGFE,IAAeP;"}
+{"version":3,"file":"ErrorList.js","sources":["../../../src/components/Validation/ErrorList.tsx"],"sourcesContent":["import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n"],"names":["ErrorList","props","React","List","name","error","ErrorListItem"],"mappings":";;;AAUM,MAAAA,IAAsC,CAC1CC,MAAAC,gBAAAA,EAAA,cAACC,GACE,MAAA,OAAO,QAAQF,EAAM,MAAM,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAK,MAC5CH,gBAAAA,EAAA,cAAAC,EAAK,MAAL,EAAU,KAAKC,EAAA,GACbF,gBAAAA,EAAA,cAAAI,GAAA,EAAc,MAAAF,GAAY,OAAAC,EAAA,CAAc,CAC3C,CACD,CACH;"}

package/components/Validation/ErrorListItem.js

@@ -1,12 +1,12 @@
-import c from "react";
-import t from "../AnchorLink/AnchorLink.js";
-const i = (o) => {
-  const f = (a, r) => {
-    a == null || a.preventDefault(), r != null && r.focus && (r == null || r.focus());
+import f from "react";
+import u from "../AnchorLink/AnchorLink.js";
+const t = (a) => {
+  const c = (o, r) => {
+    o == null || o.preventDefault(), r != null && r.focus && (r == null || r.focus());
   };
-  return o.error.ref ? /* @__PURE__ */ c.createElement(t, { href: `#${o.name}`, onClick: (a) => f(a, o.error.ref) }, o.error.message) : /* @__PURE__ */ c.createElement(c.Fragment, null, o.error.message);
-}, E = i;
+  return a.error.ref ? /* @__PURE__ */ f.createElement(u, { href: `#${a.name}`, onClick: (o) => c(o, a.error.ref) }, a.error.message) : /* @__PURE__ */ f.createElement(f.Fragment, null, a.error.message);
+};
 export {
-  E as default
+  t as default
 };
 //# sourceMappingURL=ErrorListItem.js.map

package/components/Validation/ErrorListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorListItem.js","sources":["../../../src/components/Validation/ErrorListItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","e","React","ErrorListItem$1"],"mappings":";;AAUA,MAAMA,IAA6C,CAASC,MAAA;AACpD,QAAAC,IAAc,CAACC,GAAgCC,MAAqC;AACxF,IAAAD,KAAA,QAAAA,EAAO,kBACEC,KAAA,QAAAA,EAAA,UAASA,KAAA,QAAAA,EAAS;AAAA,EAAM;AAG/B,SAAAH,EAAM,MAAM,sCAEXI,GAAW,EAAA,MAAM,IAAIJ,EAAM,IAAI,IAAI,SAAS,CAACK,MAAYJ,EAAYI,GAAGL,EAAM,MAAM,GAAG,EACrF,GAAAA,EAAM,MAAM,OACf,IAIGM,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGN,EAAM,MAAM,OAAQ;AAChC,GAEAO,IAAeR;"}
+{"version":3,"file":"ErrorListItem.js","sources":["../../../src/components/Validation/ErrorListItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","e","React"],"mappings":";;AAUA,MAAMA,IAA6C,CAASC,MAAA;AACpD,QAAAC,IAAc,CAACC,GAAgCC,MAAqC;AACxF,IAAAD,KAAA,QAAAA,EAAO,kBACEC,KAAA,QAAAA,EAAA,UAASA,KAAA,QAAAA,EAAS;AAAA,EAAM;AAG/B,SAAAH,EAAM,MAAM,sCAEXI,GAAW,EAAA,MAAM,IAAIJ,EAAM,IAAI,IAAI,SAAS,CAACK,MAAYJ,EAAYI,GAAGL,EAAM,MAAM,GAAG,EACrF,GAAAA,EAAM,MAAM,OACf,IAIGM,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGN,EAAM,MAAM,OAAQ;AAChC;"}

package/components/Validation/Validation.js

@@ -1,20 +1,19 @@
 import e from "react";
-import l from "classnames";
-import n from "./ValidationSummary.js";
-import { AnalyticsId as d } from "../../constants.js";
-import { isComponent as c } from "../../utils/component.js";
-import f from "../FormGroup/FormGroup.js";
+import s from "classnames";
+import l from "./ValidationSummary.js";
+import { AnalyticsId as n } from "../../constants.js";
+import { isComponent as d } from "../../utils/component.js";
+import { FormGroup as c } from "../FormGroup/FormGroup.js";
 import t from "../Validation/styles.module.scss";
-const o = e.forwardRef((r, m) => {
-  const i = r.errors || r.errorSummary ? t["form-group-wrapper--error-sibling"] : "", s = l(t["validation-errors"], r.errorSummary && t["validation-errors--visible"]);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { "data-testid": r.testId, "data-analyticsid": d.Validation, className: r.className, ref: m }, e.Children.map(r.children, (a) => c(a, f) ? e.cloneElement(a, {
-    className: i
-  }) : a)), /* @__PURE__ */ e.createElement(n, { errorTitle: r.errorTitle, errors: r.errors }, r.errorSummary && /* @__PURE__ */ e.createElement("div", { className: s }, r.errorSummary)));
+const f = e.forwardRef((r, m) => {
+  const o = r.errors || r.errorSummary ? t["form-group-wrapper--error-sibling"] : "", i = s(t["validation-errors"], r.errorSummary && t["validation-errors--visible"]);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { "data-testid": r.testId, "data-analyticsid": n.Validation, className: r.className, ref: m }, e.Children.map(r.children, (a) => d(a, c) ? e.cloneElement(a, {
+    className: o
+  }) : a)), /* @__PURE__ */ e.createElement(l, { errorTitle: r.errorTitle, errors: r.errors }, r.errorSummary && /* @__PURE__ */ e.createElement("div", { className: i }, r.errorSummary)));
 });
-o.displayName = "Validation";
-const g = o;
+f.displayName = "Validation";
 export {
-  o as Validation,
-  g as default
+  f as Validation,
+  f as default
 };
 //# sourceMappingURL=Validation.js.map

package/components/Validation/Validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Validation.js","sources":["../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /**\n   * Summary of form errors\n   * @deprecated Use errorTitle and errors instead\n   * */\n  errorSummary?: string;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const hasErrors = props.errors || props.errorSummary;\n  const formGroupClasses = hasErrors ? styles['form-group-wrapper--error-sibling'] : '';\n  const errorClasses = classNames(styles['validation-errors'], props.errorSummary && styles['validation-errors--visible']);\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => {\n          if (isComponent<FormGroupProps>(child, FormGroup)) {\n            return React.cloneElement(child, {\n              className: formGroupClasses,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors}>\n        {props.errorSummary && <div className={errorClasses}>{props.errorSummary}</div>}\n      </ValidationSummary>\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["Validation","React","props","ref","formGroupClasses","styles","errorClasses","classNames","AnalyticsId","child","isComponent","FormGroup","ValidationSummary","Validation$1"],"mappings":";;;;;;;AAgCO,MAAMA,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AAE9G,QAAMC,IADYF,EAAM,UAAUA,EAAM,eACHG,EAAO,mCAAmC,IAAI,IAC7EC,IAAeC,EAAWF,EAAO,mBAAmB,GAAGH,EAAM,gBAAgBG,EAAO,4BAA4B,CAAC;AAEvH,2DAEKJ,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaC,EAAM,QAAQ,oBAAkBM,EAAY,YAAY,WAAWN,EAAM,WAAW,KAAAC,KACnGF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACO,MAC/BC,EAA4BD,GAAOE,CAAS,IACvCV,EAAM,aAAaQ,GAAO;AAAA,IAC/B,WAAWL;AAAA,EAAA,CACZ,IAGIK,CACR,CACH,GACAR,gBAAAA,EAAA,cAACW,KAAkB,YAAYV,EAAM,YAAY,QAAQA,EAAM,UAC5DA,EAAM,gDAAiB,OAAI,EAAA,WAAWI,KAAeJ,EAAM,YAAa,CAC3E,CACF;AAEJ,CAAC;AAEDF,EAAW,cAAc;AAEzB,MAAAa,IAAeb;"}
+{"version":3,"file":"Validation.js","sources":["../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /**\n   * Summary of form errors\n   * @deprecated Use errorTitle and errors instead\n   * */\n  errorSummary?: string;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const hasErrors = props.errors || props.errorSummary;\n  const formGroupClasses = hasErrors ? styles['form-group-wrapper--error-sibling'] : '';\n  const errorClasses = classNames(styles['validation-errors'], props.errorSummary && styles['validation-errors--visible']);\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => {\n          if (isComponent<FormGroupProps>(child, FormGroup)) {\n            return React.cloneElement(child, {\n              className: formGroupClasses,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors}>\n        {props.errorSummary && <div className={errorClasses}>{props.errorSummary}</div>}\n      </ValidationSummary>\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["Validation","React","props","ref","formGroupClasses","styles","errorClasses","classNames","AnalyticsId","child","isComponent","FormGroup","ValidationSummary"],"mappings":";;;;;;;AAgCO,MAAMA,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AAE9G,QAAMC,IADYF,EAAM,UAAUA,EAAM,eACHG,EAAO,mCAAmC,IAAI,IAC7EC,IAAeC,EAAWF,EAAO,mBAAmB,GAAGH,EAAM,gBAAgBG,EAAO,4BAA4B,CAAC;AAEvH,2DAEKJ,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaC,EAAM,QAAQ,oBAAkBM,EAAY,YAAY,WAAWN,EAAM,WAAW,KAAAC,KACnGF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACO,MAC/BC,EAA4BD,GAAOE,CAAS,IACvCV,EAAM,aAAaQ,GAAO;AAAA,IAC/B,WAAWL;AAAA,EAAA,CACZ,IAGIK,CACR,CACH,GACAR,gBAAAA,EAAA,cAACW,KAAkB,YAAYV,EAAM,YAAY,QAAQA,EAAM,UAC5DA,EAAM,gDAAiB,OAAI,EAAA,WAAWI,KAAeJ,EAAM,YAAa,CAC3E,CACF;AAEJ,CAAC;AAEDF,EAAW,cAAc;"}

package/components/Validation/ValidationSummary.js

@@ -2,16 +2,16 @@ import r from "react";
 import m from "classnames";
 import o from "./ErrorList.js";
 import { useUuid as n } from "../../hooks/useUuid.js";
-import s from "../Title/Title.js";
+import { Title as s } from "../Title/Title.js";
 import a from "../Validation/styles.module.scss";
-const c = (e) => {
+const y = (e) => {
   const { errorTitleHtmlMarkup: l = "h2" } = e, t = n(), i = m(
     a["validation-summary"],
     !!e.errors && Object.entries(e.errors).length > 0 && a["validation-summary--visible"]
   );
   return /* @__PURE__ */ r.createElement("div", { role: "alert", "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": t, className: i }, !!e.errors && Object.entries(e.errors).length > 0 && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(s, { appearance: "title4", id: t, htmlMarkup: l, margin: { marginTop: 0, marginBottom: 1 } }, e.errorTitle), /* @__PURE__ */ r.createElement(o, { errors: e.errors })), e.children);
-}, b = c;
+};
 export {
-  b as default
+  y as default
 };
 //# sourceMappingURL=ValidationSummary.js.map

package/components/Validation/ValidationSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationSummary.js","sources":["../../../src/components/Validation/ValidationSummary.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const summaryClasses = classNames(\n    styles['validation-summary'],\n    !!props.errors && Object.entries(props.errors).length > 0 && styles['validation-summary--visible']\n  );\n\n  return (\n    <div role={'alert'} aria-live={'polite'} aria-relevant={'all'} aria-labelledby={titleId} className={summaryClasses}>\n      {!!props.errors && Object.entries(props.errors).length > 0 && (\n        <>\n          <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n            {props.errorTitle}\n          </Title>\n          <ErrorList errors={props.errors} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n"],"names":["ValidationSummary","props","errorTitleHtmlMarkup","titleId","useUuid","summaryClasses","classNames","styles","React","Title","ErrorList","ValidationSummary$1"],"mappings":";;;;;;AAsBA,MAAMA,IAAsD,CAASC,MAAA;AAC7D,QAAA,EAAE,sBAAAC,IAAuB,KAAS,IAAAD,GAClCE,IAAUC,KAEVC,IAAiBC;AAAA,IACrBC,EAAO,oBAAoB;AAAA,IAC3B,CAAC,CAACN,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAAKM,EAAO,6BAA6B;AAAA,EAAA;AAIjG,SAAAC,gBAAAA,EAAA,cAAC,SAAI,MAAM,SAAS,aAAW,UAAU,iBAAe,OAAO,mBAAiBL,GAAS,WAAWE,KACjG,CAAC,CAACJ,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAErDO,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,KAAM,YAAW,UAAS,IAAIN,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,OAC7GD,EAAM,UACT,GACAO,gBAAAA,EAAA,cAACE,GAAU,EAAA,QAAQT,EAAM,OAAQ,CAAA,CACnC,GAEDA,EAAM,QACT;AAEJ,GAEAU,IAAeX;"}
+{"version":3,"file":"ValidationSummary.js","sources":["../../../src/components/Validation/ValidationSummary.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const summaryClasses = classNames(\n    styles['validation-summary'],\n    !!props.errors && Object.entries(props.errors).length > 0 && styles['validation-summary--visible']\n  );\n\n  return (\n    <div role={'alert'} aria-live={'polite'} aria-relevant={'all'} aria-labelledby={titleId} className={summaryClasses}>\n      {!!props.errors && Object.entries(props.errors).length > 0 && (\n        <>\n          <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n            {props.errorTitle}\n          </Title>\n          <ErrorList errors={props.errors} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n"],"names":["ValidationSummary","props","errorTitleHtmlMarkup","titleId","useUuid","summaryClasses","classNames","styles","React","Title","ErrorList"],"mappings":";;;;;;AAsBA,MAAMA,IAAsD,CAASC,MAAA;AAC7D,QAAA,EAAE,sBAAAC,IAAuB,KAAS,IAAAD,GAClCE,IAAUC,KAEVC,IAAiBC;AAAA,IACrBC,EAAO,oBAAoB;AAAA,IAC3B,CAAC,CAACN,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAAKM,EAAO,6BAA6B;AAAA,EAAA;AAIjG,SAAAC,gBAAAA,EAAA,cAAC,SAAI,MAAM,SAAS,aAAW,UAAU,iBAAe,OAAO,mBAAiBL,GAAS,WAAWE,KACjG,CAAC,CAACJ,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAErDO,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,KAAM,YAAW,UAAS,IAAIN,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,OAC7GD,EAAM,UACT,GACAO,gBAAAA,EAAA,cAACE,GAAU,EAAA,QAAQT,EAAM,OAAQ,CAAA,CACnC,GAEDA,EAAM,QACT;AAEJ;"}

package/components/Validation/index.js

@@ -1,7 +1,6 @@
-import a from "./Validation.js";
-import { Validation as r } from "./Validation.js";
+import { Validation as o } from "./Validation.js";
 export {
-  r as Validation,
-  a as default
+  o as Validation,
+  o as default
 };
 //# sourceMappingURL=index.js.map

package/components/Validation/index.js.map

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

package/components/Validation/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FocusableElement {
     focus?: () => void;
 }

package/constants.d.ts

@@ -10,7 +10,8 @@ export declare enum ZIndex {
     Modal = 1300000,
     PopOver = 11000,
     ExpanderTrigger = 10000,
-    OverlayScreen = 9999
+    OverlayScreen = 9999,
+    TabsSticky = 10
 }
 export declare const AVERAGE_CHARACTER_WIDTH_PX = 12;
 export interface HTMLButtonProps {