@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/FormExample/styles.module.scss

@@ -1,12 +1,12 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .date-time {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) {
+  @media (min-width: map.get($grid-breakpoints, sm)) {
     flex-direction: row;
     align-items: flex-end;
   }
@@ -20,7 +20,7 @@
     align-items: flex-end;
     padding-top: getSpacer(m);
 
-    @media (min-width: map-get($grid-breakpoints, sm)) {
+    @media (min-width: map.get($grid-breakpoints, sm)) {
       padding-top: 0;
     }
   }

package/components/FormGroup/FormGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode, FormVariant } from '../../constants';
-export declare type FormGroupTags = 'fieldset' | 'div';
+export type FormGroupTags = 'fieldset' | 'div';
 export interface FormGroupProps {
     /** title for the the fieldset */
     title?: string;

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;AAM1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AASrE,oBAAY,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;AAEH,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,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;AAEH,eAAe,SAAS,CAAC"}

package/components/FormGroup/index.js

@@ -1,2 +1,2 @@
-import"../../FormGroup.js";import{F as L,F as M}from"../../FormGroup.js";import"react";import"classnames";import"./styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"../../Select.js";import"../Select/styles.module.scss";import"../Icons/ChevronDown.js";import"../../utils/component.js";export{L as FormGroup,M as default};
+import{F as r}from"../../FormGroup.js";import{a as L}from"../../FormGroup.js";import"react";import"classnames";import"../../constants.js";import"../../utils/component.js";import"../../Checkbox.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Select.js";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{L as FormGroup,r as default};
 //# sourceMappingURL=index.js.map

package/components/FormGroup/styles.module.scss

@@ -1,7 +1,7 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .form-group-wrapper {
   &__title {
@@ -19,6 +19,7 @@
   border: none;
   padding: 0;
   margin: 0;
+
   > div {
     padding-bottom: 0;
   }

package/components/FormLayout/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../src/components/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAe,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE3D,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IAC5C,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CACzD;AAED,eAAO,MAAM,UAAU,qFAyBrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../src/components/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAe,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI3D,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IAC5C,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CACzD;AAED,eAAO,MAAM,UAAU,qFAyBrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/components/FormLayout/index.js

@@ -1,2 +1,2 @@
-import"../../FormLayout.js";import{F as s,a as u,F as f}from"../../FormLayout.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";export{s as FormLayout,u as FormLayoutColumns,f as default};
+import{F as r}from"../../FormLayout.js";import{b as u,a as F}from"../../FormLayout.js";import"react";import"classnames";import"../../constants.js";import"./styles.module.scss";export{u as FormLayout,F as FormLayoutColumns,r as default};
 //# sourceMappingURL=index.js.map

package/components/FormLayout/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .form-layout-container {
   // Settes med harde verdier fordi calc() lenger nede ikke støtter getSpacer()
@@ -22,12 +22,15 @@
   &--two {
     flex-basis: calc(50% - var(--column-gap));
   }
+
   &--three {
     flex-basis: calc(33% - var(--column-gap));
   }
+
   &--four {
     flex-basis: calc(25% - var(--column-gap));
   }
+
   &--five {
     flex-basis: calc(20% - var(--column-gap));
   }

package/components/GridExample/index.js

@@ -1,2 +1,2 @@
-import e from"react";const c=({children:a})=>e.createElement("div",{className:"container"},e.createElement("div",{className:"row"},e.createElement("div",{className:"col"},a)));export{c as GridExample,c as default};
+import e from"react";const t=({children:a})=>e.createElement("div",{className:"container"},e.createElement("div",{className:"row"},e.createElement("div",{className:"col"},a))),l=t;export{t as GridExample,l as default};
 //# sourceMappingURL=index.js.map

package/components/GridExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React"],"mappings":"qBAEO,MAAMA,EAAwB,CAAC,CAAE,SAAAC,CAAA,IACrCC,EAAA,cAAA,MAAA,CAAI,UAAU,WAAA,EACZA,EAAA,cAAA,MAAA,CAAI,UAAU,KAAA,EACZA,EAAA,cAAA,MAAA,CAAI,UAAU,KAAA,EAAOD,CAAS,CACjC,CACF"}
+{"version":3,"file":"index.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React","GridExample$1"],"mappings":"qBAEO,MAAMA,EAAwB,CAAC,CAAE,SAAAC,CACtC,IAAAC,EAAA,cAAC,OAAI,UAAU,WAAA,kBACZ,MAAI,CAAA,UAAU,OACZA,EAAA,cAAA,MAAA,CAAI,UAAU,OAAOD,CAAS,CACjC,CACF,EAGFE,EAAeH"}

package/components/HelpBubble/HelpBubble.d.ts

@@ -1,11 +1,8 @@
 import React from 'react';
-export declare enum HelpBubbleVariant {
-    positionautomatic = "positionautomatic",
-    positionbelow = "positionbelow",
-    positionabove = "positionabove"
-}
-declare type HelpBubbleRole = 'tooltip';
-export interface HelpBubbleProps {
+import { PopOverProps, PopOverVariant } from '../PopOver';
+export declare const HelpBubbleVariant: typeof PopOverVariant;
+type HelpBubbleRole = 'tooltip';
+export interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {
     /** Id of the HelpBubble */
     helpBubbleId?: string;
     /** Content shown inside HelpBubble. Note that if role="tooltip", you must not include interactive/focusable elements. */
@@ -35,6 +32,6 @@ export interface HelpBubbleProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-declare const HelpBubble: React.ForwardRefExoticComponent<HelpBubbleProps & React.RefAttributes<HTMLDivElement>>;
+declare const HelpBubble: React.ForwardRefExoticComponent<HelpBubbleProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
 export default HelpBubble;
 //# sourceMappingURL=HelpBubble.d.ts.map

package/components/HelpBubble/HelpBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D,oBAAY,iBAAiB;IAC3B,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,aAAK,cAAc,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yHAAyH;IACzH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,wFA2Gd,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAInE,eAAO,MAAM,iBAAiB,uBAAiB,CAAC;AAEhD,KAAK,cAAc,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,eAAe,GAAG,MAAM,CAAC;IAC5G,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yHAAyH;IACzH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,wGA6Ed,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import"../../HelpBubble.js";import{a as E,H as F}from"../../HelpBubble.js";import"classnames";import"react";import"../../constants.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"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";export{E as HelpBubbleVariant,F as default};
+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};
 //# sourceMappingURL=index.js.map

package/components/HelpBubble/styles.module.scss

@@ -1,40 +1,21 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../AnchorLink/styles.module.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .helpbubble {
   $bubble: &;
+
   display: flex;
-  position: fixed;
   align-items: flex-start !important;
-  max-width: 373px;
   text-align: start;
   font-family: inherit;
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-  background-color: $white;
-  z-index: 3;
-  visibility: hidden;
-
-  & + &__arrow {
-    visibility: hidden;
-  }
-
-  &--visible {
-    visibility: visible;
-
-    & + #{$bubble}__arrow {
-      visibility: visible;
-    }
-  }
 
-  border: getSpacer(4xs) solid $plum600;
-  border-radius: 9px;
-  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.15);
-
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-md;
   }
@@ -42,7 +23,6 @@
   &__content {
     order: 1;
     display: flex;
-    width: max-content;
     flex-direction: column;
     align-items: flex-start;
     overflow-wrap: anywhere;
@@ -60,33 +40,12 @@
 
   &__link {
     all: unset;
+
     @include anchorlink;
   }
 
   &__close {
     order: 2;
-    padding: getSpacer(2xs) getSpacer(2xs) 0px 0px;
-  }
-
-  &__arrow {
-    width: 0;
-    height: 0;
-    position: fixed;
-    border-style: solid;
-    border-color: transparent;
-    z-index: 3;
-
-    &--over {
-      border-width: 10px 10px;
-      border-bottom-color: $white;
-      -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
-      filter: drop-shadow(0px -0.185rem 0px $plum600);
-    }
-    &--under {
-      border-width: 10px 10px;
-      border-top-color: $white;
-      -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
-      filter: drop-shadow(0px 0.2rem 0px $plum600);
-    }
+    padding: getSpacer(2xs) getSpacer(2xs) 0 0;
   }
 }

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

@@ -3,15 +3,11 @@ export type Styles = {
   anchorlink__icon: string;
   'anchorlink-wrapper': string;
   helpbubble: string;
-  helpbubble__arrow: string;
-  'helpbubble__arrow--over': string;
-  'helpbubble__arrow--under': string;
   helpbubble__close: string;
   helpbubble__content: string;
   'helpbubble__content--close': string;
   helpbubble__link: string;
   helpbubble__link__icon: string;
-  'helpbubble--visible': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HelpBubbleExample/componentdata.json

@@ -1 +1 @@
-{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble. Default: automatic positioning.","name":"variant","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Show the bubble. Default: false.","name":"showBubble","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\".","name":"noCloseButton","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link. Link is never rendered if role=\"tooltip\".","name":"linkText","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Sets role of the HelpBubble element. If set to \"tooltip\",","name":"role","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements.","name":"children","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble. Default: automatic positioning.","name":"variant","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Show the bubble. Default: false.","name":"showBubble","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\".","name":"noCloseButton","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link. Link is never rendered if role=\"tooltip\".","name":"linkText","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Sets role of the HelpBubble element. If set to \"tooltip\",","name":"role","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"tooltip\"","value":[{"value":"\"tooltip\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}

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"../../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"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";const J=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."))};export{J 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"../../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};
 //# 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"],"mappings":"g6BAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAElD,uBACG,MACC,KAAAC,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACCA,EAAA,cAAA,MAAA,CAAI,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAAM,CACtE,EAAA,0BACH,EACCE,EAAA,cAAAC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QACT,CACF,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ"}
+{"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"}

package/components/HighlightBox/HighlightBox.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icons';
-export declare type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;
+export type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;
 export declare enum HighlightBoxSize {
     medium = "medium",
     large = "large",
     fluid = "fluid"
 }
-export declare type HighlightBoxTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'>;
+export type HighlightBoxTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'>;
 interface HighlightBoxProps {
     /** What's in the box? */
     children: React.ReactNode;

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;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,OAAa,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAGnD,oBAAY,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,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;AAInD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvH,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"}

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":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"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":"s/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":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"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"}}}}

package/components/HighlightBox/index.js

@@ -1,2 +1,2 @@
-import e from"react";import l from"classnames";import t from"./styles.module.scss";import{AnalyticsId as g,IconSize as p}from"../../constants.js";import{Icon as E}from"../Icons/Icon.js";import"../../theme/grid.js";import{useBreakpoint as N,Breakpoint as v}from"../../hooks/useBreakpoint.js";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)),A=i=>{const{children:r,color:h="white",size:a="medium",testId:o,svgIcon:n,htmlMarkup:x="div",className:f}=i,u=N(),m=l(t.highlightbox,t[`highlightbox--${h}`],t[`highlightbox--${a}`],n&&t["highlightbox--has-icon"],{container:a==="medium"||a==="large"},f),c=()=>{if(n){const b=a==="large"&&u&&u>=v.md?p.Medium:p.Small;return e.createElement(e.Fragment,null,e.createElement("div",{className:t.highlightbox__icon},e.createElement(E,{svgIcon:n,size:b})),e.createElement("div",{className:t.highlightbox__content},r))}return r},s=x;return a==="medium"?e.createElement(d,{className:m,size:a},e.createElement(s,{className:t["highlightbox__content-wrapper"],"data-testid":o,"data-analyticsid":g.HighlightBox},c())):a==="large"&&n?e.createElement(d,{className:m,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},c()))):a==="large"?e.createElement(d,{className:m,size:a},e.createElement(_,null,e.createElement(s,{className:l(t.highlightbox__col,t["highlightbox__col--offset"]),"data-testid":o,"data-analyticsid":g.HighlightBox},c()))):a==="fluid"?e.createElement(s,{className:m,"data-testid":o},c()):null};export{w as HighlightBoxSize,A as default};
+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};
 //# 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';\nimport classNames from 'classnames';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\nimport { useBreakpoint, Breakpoint } from '../..';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;\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"],"mappings":"2XAWY,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,CAAA,IACzDC,EAAA,cAAA,MAAA,CAAI,UAAAH,EAAsB,cAAa,sBAAA,EACrCG,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,4BAA4B,CAAA,EACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,CAAA,IACjCC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,gCAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,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,KACxBL,EAAO,iBAAiBH,KACxBU,GAAWP,EAAO,0BAClB,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,EACpBD,EAAA,cAAAiB,EAAA,CAAK,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,CAEJ,CAEO,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,SAERE,EAAA,cAAAJ,EAAA,CAAQ,UAAWgB,EAAoB,KAAAd,CAAA,EACrCE,EAAA,cAAAkB,EAAA,CAAU,UAAWjB,EAAO,iCAAkC,cAAaM,EAAQ,mBAAkBY,EAAY,YAAA,EAC/GN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,EAElCR,EAAA,cAAAJ,EAAA,CAAQ,UAAWgB,EAAoB,KAAAd,CAAA,EACtCE,EAAA,cAACG,OACEH,EAAA,cAAAkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,qCAAqC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAA,CACH,CACF,CACF,EAIAf,IAAS,QAERE,EAAA,cAAAJ,EAAA,CAAQ,UAAWgB,EAAoB,KAAAd,CAAA,EACtCE,EAAA,cAACG,OACEH,EAAA,cAAAkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,4BAA4B,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAA,CACH,CACF,CACF,EAIAf,IAAS,QAERE,EAAA,cAAAkB,EAAA,CAAU,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,EACH,CAAA,EAIG,IACT"}
+{"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' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;\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"}