@helsenorge/designsystem-react 5.0.0-beta.0 → 5.0.0

package/components/FormGroup/FormGroup.d.ts

@@ -24,8 +24,10 @@ export interface FormGroupProps {
     testId?: string;
     /** Sets the data-testid attribute for the error-wrapper. */
     errorWrapperTestId?: string;
-    /** Unique identifyer for the child input tags */
+    /** Unique name for the child input element */
     name?: string;
+    /** Unique name for the fieldset */
+    fieldsetName?: string;
     /** Sets div instead of fieldset tag */
     htmlMarkup?: FormGroupTags;
     /** Renders the error component (Default: true) */

package/components/FormGroup/FormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAYrE,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,uFAmHpB,CAAC;AAIH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAYrE,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,uFAmHpB,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/components/FormGroup/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"title for the the fieldset","name":"title","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"legend":{"defaultValue":null,"description":"text placed in the legend tag of the fieldset","name":"legend","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Items in the FormGroup component","name":"children","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"errorWrapperClassName":{"defaultValue":null,"description":"Adds custom classes to the errorWrapper.","name":"errorWrapperClassName","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"fieldsetClassName":{"defaultValue":null,"description":"Adds custom classes to the fieldset element.","name":"fieldsetClassName","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the formgroup","name":"mode","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the formgroup","name":"variant","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"error":{"defaultValue":null,"description":"Error message","name":"error","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"errorWrapperTestId":{"defaultValue":null,"description":"Sets the data-testid attribute for the error-wrapper.","name":"errorWrapperTestId","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"Unique identifyer for the child input tags","name":"name","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"htmlMarkup":{"defaultValue":null,"description":"Sets div instead of fieldset tag","name":"htmlMarkup","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"FormGroupTags","value":[{"value":"\"fieldset\""},{"value":"\"div\""}]}},"renderError":{"defaultValue":null,"description":"Renders the error component (Default: true)","name":"renderError","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"title":{"defaultValue":null,"description":"title for the the fieldset","name":"title","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"legend":{"defaultValue":null,"description":"text placed in the legend tag of the fieldset","name":"legend","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Items in the FormGroup component","name":"children","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"errorWrapperClassName":{"defaultValue":null,"description":"Adds custom classes to the errorWrapper.","name":"errorWrapperClassName","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"fieldsetClassName":{"defaultValue":null,"description":"Adds custom classes to the fieldset element.","name":"fieldsetClassName","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the formgroup","name":"mode","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the formgroup","name":"variant","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"error":{"defaultValue":null,"description":"Error message","name":"error","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"errorWrapperTestId":{"defaultValue":null,"description":"Sets the data-testid attribute for the error-wrapper.","name":"errorWrapperTestId","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"Unique name for the child input element","name":"name","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"fieldsetName":{"defaultValue":null,"description":"Unique name for the fieldset","name":"fieldsetName","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"string"}},"htmlMarkup":{"defaultValue":null,"description":"Sets div instead of fieldset tag","name":"htmlMarkup","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"enum","raw":"FormGroupTags","value":[{"value":"\"fieldset\""},{"value":"\"div\""}]}},"renderError":{"defaultValue":null,"description":"Renders the error component (Default: true)","name":"renderError","parent":{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"},"declarations":[{"fileName":"src/components/FormGroup/FormGroup.tsx","name":"FormGroupProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import{H as o}from"../../HelpBubble.js";import{a as G}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{G as HelpBubbleVariant,o as default};
+import{H as o}from"../../HelpBubble.js";import{a as I}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{I as HelpBubbleVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js

@@ -1,2 +1,2 @@
-import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},w=a;export{w as default};
+import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},z=a;export{z as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble","HelpBubbleExample$1"],"mappings":"+9BAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAGhD,OAAAC,EAAA,cAAC,MACC,KAAAA,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACAA,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAChE,CAAA,EAAA,0BACH,EACAE,EAAA,cAACC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QAAA,CAEX,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ,EAEAE,EAAeN"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble","HelpBubbleExample$1"],"mappings":"ugCAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAGhD,OAAAC,EAAA,cAAC,MACC,KAAAA,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACAA,EAAA,cAAC,MAAI,CAAA,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAChE,CAAA,EAAA,0BACH,EACAE,EAAA,cAACC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QAAA,CAEX,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ,EAEAE,EAAeN"}

package/components/HelpPanel/HelpPanel.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HighlightBoxSize } from '../HighlightBox';
+interface HelpPanelProps {
+    /** What's in the box? */
+    children: React.ReactNode;
+    /** Changes the size. Default: medium */
+    size?: keyof typeof HighlightBoxSize;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets title if needed */
+    title?: string;
+}
+declare const HelpPanel: React.FC<HelpPanelProps>;
+export default HelpPanel;
+//# sourceMappingURL=HelpPanel.d.ts.map

package/components/HelpPanel/HelpPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpPanel.d.ts","sourceRoot":"","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKjE,UAAU,cAAc;IACtB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAevC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/HelpPanel/componentdata.json

@@ -0,0 +1 @@
+{"props":{"children":{"defaultValue":null,"description":"What's in the box?","name":"children","parent":{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},"declarations":[{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Changes the size. Default: medium","name":"size","parent":{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},"declarations":[{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\" | \"fluid\"","value":[{"value":"\"medium\""},{"value":"\"large\""},{"value":"\"fluid\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},"declarations":[{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},"declarations":[{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"}],"required":false,"type":{"name":"string"}},"title":{"defaultValue":null,"description":"Sets title if needed","name":"title","parent":{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"},"declarations":[{"fileName":"src/components/HelpPanel/HelpPanel.tsx","name":"HelpPanelProps"}],"required":false,"type":{"name":"string"}}}}

package/components/HelpPanel/index.d.ts

@@ -0,0 +1,4 @@
+import HelpPanel from './HelpPanel';
+export * from './HelpPanel';
+export default HelpPanel;
+//# sourceMappingURL=index.d.ts.map

package/components/HelpPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,eAAe,SAAS,CAAC"}

package/components/HelpPanel/index.js

@@ -0,0 +1,2 @@
+import i from"react";import l from"classnames";import{H as s}from"../../HighlightBox.js";import n from"../Icons/HandWaving.js";import t from"./styles.module.scss";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../Title.js";import"../Title/styles.module.scss";import"../HighlightBox/styles.module.scss";const c=({className:o,testId:r,size:e,children:m,title:p})=>{const a=l(t["help-panel"],o);return i.createElement(s,{className:a,contentWrapperClassName:t["help-panel"],testId:r,size:e,svgIcon:n,title:p},m)},I=c;export{I as default};
+//# sourceMappingURL=index.js.map

package/components/HelpPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\ninterface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":"sdAsBA,MAAMA,EAAsC,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,EAAU,MAAAC,KAAY,CAC5F,MAAMC,EAAqBC,EAAWC,EAAO,YAAY,EAAGP,CAAS,EAGnE,OAAAQ,EAAA,cAACC,EAAA,CACC,UAAWJ,EACX,wBAAyBE,EAAO,YAAY,EAC5C,OAAAN,EACA,KAAAC,EACA,QAASQ,EACT,MAAAN,CAAA,EAECD,CAAA,CAGP,EAEAQ,EAAeZ"}

package/components/HelpPanel/styles.module.scss

@@ -0,0 +1,5 @@
+@import '../../scss/palette';
+
+.help-panel {
+  background-color: $plum50 !important;
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'help-panel': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+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;
+//# sourceMappingURL=HelpQuestion.d.ts.map

package/components/HelpQuestion/HelpQuestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpQuestion.d.ts","sourceRoot":"","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,eAAe,CAAC;IACjH;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,6FAqBjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/components/HelpQuestion/componentdata.json

@@ -0,0 +1 @@
+{"props":{"children":{"defaultValue":null,"description":"Help question contents","name":"children","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":true,"type":{"name":"string"}},"selected":{"defaultValue":{"value":"false"},"description":"Indicates that the help question is in use.","name":"selected","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Classname will be applied to the button element.","name":"className","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"},"declarations":[{"fileName":"src/components/HelpQuestion/HelpQuestion.tsx","name":"HelpQuestionProps"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLButtonElement>"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}

package/components/HelpQuestion/index.d.ts

@@ -0,0 +1,4 @@
+import HelpQuestion from './HelpQuestion';
+export * from './HelpQuestion';
+export default HelpQuestion;
+//# sourceMappingURL=index.d.ts.map

package/components/HelpQuestion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpQuestion/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/components/HelpQuestion/index.js

@@ -0,0 +1,2 @@
+import e from"react";import u from"classnames";import{AnalyticsId as c}from"../../constants.js";import{usePseudoClasses as d}from"../../hooks/usePseudoClasses.js";import{mergeRefs as y}from"../../utils/refs.js";import{T as H}from"../../Trigger.js";import o from"./styles.module.scss";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/accessibility.js";import"../Trigger/styles.module.scss";const r=e.forwardRef(({children:i,selected:t=!1,className:s,onClick:m,testId:p},a)=>{const{isHovered:n,refObject:l}=d(),f=u(o.helpquestion,t&&o["helpquestion--selected"],s);return e.createElement("button",{type:"button","data-testid":p,className:f,onClick:m,ref:y([a,l]),"aria-expanded":t,"data-analyticsid":c.HelpQuestion},e.createElement(H,{variant:"help",htmlMarkup:"span",selected:t,isHovered:n}),i)});r.displayName="HelpQuestion";const P=r;export{P as default};
+//# sourceMappingURL=index.js.map

package/components/HelpQuestion/index.js.map

@@ -0,0 +1 @@
+{"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 Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\ninterface 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        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger","HelpQuestion$1"],"mappings":"mpBA8BA,MAAMA,EAAeC,EAAM,WACzB,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,GAAO,UAAAC,EAAW,QAAAC,EAAS,OAAAC,CAAO,EAAGC,IAAQ,CACnE,KAAM,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAAIC,EAAoC,EAE/DC,EAAUC,EAAWC,EAAO,aAAcV,GAAYU,EAAO,wBAAwB,EAAGT,CAAS,EAGrG,OAAAH,EAAA,cAAC,SAAA,CACC,KAAK,SACL,cAAaK,EACb,UAAWK,EACX,QAAAN,EACA,IAAKS,EAAU,CAACP,EAAKE,CAAS,CAAC,EAC/B,gBAAeN,EACf,mBAAkBY,EAAY,YAAA,kBAE7BC,EAAQ,CAAA,QAAQ,OAAO,WAAW,OAAO,SAAAb,EAAoB,UAAAK,EAAsB,EACnFN,CAAA,CAGP,CACF,EAEAF,EAAa,YAAc,eAE3B,MAAAiB,EAAejB"}

package/components/HelpQuestion/styles.module.scss

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

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

@@ -0,0 +1,10 @@
+export type Styles = {
+  helpquestion: string;
+  'helpquestion--selected': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HighlightBox/HighlightBox.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icons';
+import { TitleTags } from '../Title';
 export type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;
 export declare enum HighlightBoxSize {
     medium = "medium",
@@ -21,8 +22,14 @@ interface HighlightBoxProps {
     htmlMarkup?: HighlightBoxTags;
     /** Adds custom classes to the element. */
     className?: string;
+    /** Adds custom classes to the content-wrapper */
+    contentWrapperClassName?: string;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Element that is set after the icon-element in the DOM, often a title-element */
+    title?: string;
+    /** Markup props for title */
+    titleHtmlMarkup?: TitleTags;
 }
 declare const HighlightBox: React.FC<HighlightBoxProps>;
 export default HighlightBox;

package/components/HighlightBox/HighlightBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAInD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAErG,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"HighlightBox.d.ts","sourceRoot":"","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AACnD,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAErG,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,MAAM,qBAAqB,EAC3B,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAC1E,CAAC;AAEF,UAAU,iBAAiB;IACzB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACrC,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAiCD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8G7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/HighlightBox/componentdata.json

@@ -1 +1 @@
-{"props":{"children":{"defaultValue":null,"description":"What's in the box?","name":"children","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"color":{"defaultValue":null,"description":"Changes the background color. Default: white","name":"color","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxColors","value":[{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"neutral\""},{"value":"\"white\""}]}},"size":{"defaultValue":null,"description":"Changes the size. Default: medium","name":"size","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\" | \"fluid\"","value":[{"value":"\"medium\""},{"value":"\"large\""},{"value":"\"fluid\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the highlightbox.","name":"svgIcon","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"SvgIcon"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element. Default: div","name":"htmlMarkup","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxTags","value":[{"value":"\"object\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"article\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"button\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"dialog\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"figure\""},{"value":"\"footer\""},{"value":"\"form\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"head\""},{"value":"\"header\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"img\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"link\""},{"value":"\"main\""},{"value":"\"map\""},{"value":"\"mark\""},{"value":"\"menu\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"option\""},{"value":"\"output\""},{"value":"\"p\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"slot\""},{"value":"\"small\""},{"value":"\"source\""},{"value":"\"span\""},{"value":"\"strong\""},{"value":"\"style\""},{"value":"\"sub\""},{"value":"\"summary\""},{"value":"\"sup\""},{"value":"\"table\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"template\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"time\""},{"value":"\"title\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"children":{"defaultValue":null,"description":"What's in the box?","name":"children","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"color":{"defaultValue":null,"description":"Changes the background color. Default: white","name":"color","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxColors","value":[{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"neutral\""},{"value":"\"white\""}]}},"size":{"defaultValue":null,"description":"Changes the size. Default: medium","name":"size","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"\"medium\" | \"large\" | \"fluid\"","value":[{"value":"\"medium\""},{"value":"\"large\""},{"value":"\"fluid\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the highlightbox.","name":"svgIcon","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"SvgIcon"}},"htmlMarkup":{"defaultValue":null,"description":"Changes the underlying element. Default: div","name":"htmlMarkup","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"HighlightBoxTags","value":[{"value":"\"object\""},{"value":"\"title\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"article\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"button\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"dialog\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"figure\""},{"value":"\"footer\""},{"value":"\"form\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"head\""},{"value":"\"header\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"img\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"link\""},{"value":"\"main\""},{"value":"\"map\""},{"value":"\"mark\""},{"value":"\"menu\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"option\""},{"value":"\"output\""},{"value":"\"p\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"slot\""},{"value":"\"small\""},{"value":"\"source\""},{"value":"\"span\""},{"value":"\"strong\""},{"value":"\"style\""},{"value":"\"sub\""},{"value":"\"summary\""},{"value":"\"sup\""},{"value":"\"table\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"template\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"time\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"contentWrapperClassName":{"defaultValue":null,"description":"Adds custom classes to the content-wrapper","name":"contentWrapperClassName","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"title":{"defaultValue":null,"description":"Element that is set after the icon-element in the DOM, often a title-element","name":"title","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Markup props for title","name":"titleHtmlMarkup","parent":{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"},"declarations":[{"fileName":"src/components/HighlightBox/HighlightBox.tsx","name":"HighlightBoxProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}}}}

package/components/HighlightBox/index.js

@@ -1,2 +1,2 @@
-import e from"react";import l from"classnames";import"../../theme/grid.js";import{useBreakpoint as E,Breakpoint as N}from"../../hooks/useBreakpoint.js";import{AnalyticsId as g,IconSize as p}from"../../constants.js";import{Icon as v}from"../Icons/Icon.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";var w=(i=>(i.medium="medium",i.large="large",i.fluid="fluid",i))(w||{});const d=({className:i,size:r,children:h})=>e.createElement("div",{className:i,"data-testid":"highlightbox-wrapper"},e.createElement("div",{className:t.highlightbox__row},e.createElement("div",{className:l(t.highlightbox__col,r==="medium"&&t["highlightbox__col--offset"])},h))),_=({children:i})=>e.createElement("div",{className:t["highlightbox__content-wrapper"]},e.createElement("div",{className:l(t.highlightbox__row)},i)),y=i=>{const{children:r,color:h="white",size:a="medium",testId:o,svgIcon:n,htmlMarkup:x="div",className:f}=i,u=E(),c=l(t.highlightbox,t[`highlightbox--${h}`],t[`highlightbox--${a}`],n&&t["highlightbox--has-icon"],{container:a==="medium"||a==="large"},f),m=()=>{if(n){const b=a==="large"&&u&&u>=N.md?p.Medium:p.Small;return e.createElement(e.Fragment,null,e.createElement("div",{className:t.highlightbox__icon},e.createElement(v,{svgIcon:n,size:b})),e.createElement("div",{className:t.highlightbox__content},r))}return r},s=x;return a==="medium"?e.createElement(d,{className:c,size:a},e.createElement(s,{className:t["highlightbox__content-wrapper"],"data-testid":o,"data-analyticsid":g.HighlightBox},m())):a==="large"&&n?e.createElement(d,{className:c,size:a},e.createElement(_,null,e.createElement(s,{className:l(t.highlightbox__col,t["highlightbox__col--large-with-icon"]),"data-testid":o,"data-analyticsid":g.HighlightBox},m()))):a==="large"?e.createElement(d,{className:c,size:a},e.createElement(_,null,e.createElement(s,{className:l(t.highlightbox__col,t["highlightbox__col--offset"]),"data-testid":o,"data-analyticsid":g.HighlightBox},m()))):a==="fluid"?e.createElement(s,{className:c,"data-testid":o},m()):null},F=y;export{w as HighlightBoxSize,F as default};
+import{H as i}from"../../HighlightBox.js";import{a as d}from"../../HighlightBox.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{d as HighlightBoxSize,i as default};
 //# sourceMappingURL=index.js.map

package/components/HighlightBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst ContentWrapper: React.FC = ({ children }) => (\n  <div className={styles['highlightbox__content-wrapper']}>\n    <div className={classNames(styles.highlightbox__row)}>{children}</div>\n  </div>\n);\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const { children, color = 'white', size = HighlightBoxSize.medium, testId, svgIcon, htmlMarkup = 'div', className } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n          </div>\n          <div className={styles.highlightbox__content}>{children}</div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={styles['highlightbox__content-wrapper']} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","HighlightBox","props","color","testId","svgIcon","htmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"2XAaY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAiCZ,MAAMC,EAAkC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,SAAAC,CAC1D,IAAAC,EAAA,cAAC,MAAI,CAAA,UAAAH,EAAsB,cAAa,sBAAA,kBACrC,MAAI,CAAA,UAAWI,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,2BAA2B,CAAC,GACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,KAClCC,EAAA,cAAC,OAAI,UAAWC,EAAO,+BAA+B,CACpD,EAAAD,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,iBAAiB,CAAA,EAAIF,CAAS,CAClE,EAGIK,EAAqDC,GAAA,CACnD,KAAA,CAAE,SAAAN,EAAU,MAAAO,EAAQ,QAAS,KAAAR,EAAO,SAAyB,OAAAS,EAAQ,QAAAC,EAAS,WAAAC,EAAa,MAAO,UAAAZ,CAAA,EAAcQ,EAChHK,EAAaC,IAEbC,EAAqBV,EACzBD,EAAO,aACPA,EAAO,iBAAiBK,GAAO,EAC/BL,EAAO,iBAAiBH,GAAM,EAC9BU,GAAWP,EAAO,wBAAwB,EAC1C,CAAE,UAAWH,IAAS,UAAYA,IAAS,OAAQ,EACnDD,CAAA,EAGIgB,EAAgB,IAAM,CAC1B,GAAIL,EAAS,CACL,MAAAM,EAAWhB,IAAS,SAA0BY,GAAcA,GAAcK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAC3H,uCAEKhB,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,kBAAA,kBACpBgB,EAAK,CAAA,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,EAIG,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,yBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,GACtCE,EAAA,cAACkB,GAAU,UAAWjB,EAAO,+BAA+B,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,YAC/G,EAAAN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,kBAElCZ,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,oCAAoC,CAAC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,2BAA2B,CAAC,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERoB,EAAU,CAAA,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,GACH,EAIG,IACT,EAEAO,EAAehB"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/HighlightBox/styles.module.scss

@@ -3,6 +3,7 @@
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 @import '../../scss/grid';
+@import '../../scss/screen-reader';
 
 @mixin content-wrapper-with-icon-flex {
   display: flex;
@@ -210,3 +211,17 @@
     }
   }
 }
+
+.mobile {
+  display: flex;
+  align-items: center;
+  @media screen and (min-width: 768px) {
+    @include sr-only;
+  }
+}
+.desktop {
+  display: none;
+  @media screen and (min-width: 768px) {
+    display: flex;
+  }
+}

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

@@ -1,4 +1,5 @@
 export type Styles = {
+  desktop: string;
   highlightbox__col: string;
   'highlightbox__col--large-with-icon': string;
   'highlightbox__col--offset': string;
@@ -14,6 +15,7 @@ export type Styles = {
   'highlightbox--medium': string;
   'highlightbox--neutral': string;
   'highlightbox--white': string;
+  mobile: string;
 };
 
 export type ClassNames = keyof Styles;