@helsenorge/designsystem-react 5.0.0-beta.1 → 5.1.2

package/ListHeaderText.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import{S as E}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const h=e.forwardRef((m,N)=>{const{firstText:l,firstTextEmphasised:n=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:p=!1,statusDotVariant:r,className:c="",testId:i,titleHtmlMarkup:d="span"}=m,x=s(c,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:p}),f=s({[t["text-wrapper__text--emphasised"]]:n}),T=s({[t["text-wrapper__text--emphasised"]]:o}),u=d;return e.createElement("div",{"data-testid":i,className:x},r!==void 0&&e.createElement("span",null,e.createElement(E,{text:"",variant:r})),e.createElement(u,{className:t["list-header__title"]},e.createElement("span",{className:f},l),a&&e.createElement("span",{className:T},a)))}),C=h;export{C as L,h as a};
+import e from"react";import s from"classnames";import{S as N}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const m=e.forwardRef((l,h)=>{const{firstText:n,firstTextEmphasised:p=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:c=!1,statusDotVariant:r,className:i="",testId:d,titleHtmlMarkup:x="span"}=l,f=s(i,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:c}),T=s({[t["text-wrapper__text--emphasised"]]:p}),u=s({[t["text-wrapper__text--emphasised"]]:o}),E=x;return e.createElement("span",{"data-testid":d,className:f},r!==void 0&&e.createElement("span",null,e.createElement(N,{text:"",variant:r})),e.createElement(E,{className:t["list-header__title"]},e.createElement("span",{className:T},n),a&&e.createElement("span",{className:u},a)))});m.displayName="ListHeaderText";const C=m;export{C as L,m as a};
 //# sourceMappingURL=ListHeaderText.js.map

package/ListHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <div data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </div>\n  );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot","ListHeaderText$1"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,cAAc,EAAG,CACrE,CAACA,EAAO,yBAAyB,CAAC,EAAGP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,gCAAgC,CAAC,EAAGV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,gCAAgC,CAAC,EAAGR,CAAA,CAC7C,EACKW,EAAYN,EAElB,uBACG,MAAI,CAAA,cAAaD,EAAQ,UAAWE,GAClCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,qBACEkB,EAAU,CAAA,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,oBAAoB,CAC/C,EAAAd,EAAA,cAAC,QAAK,UAAWe,GAAgCZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAiC,EAAAX,CAAW,CAC9E,CACF,CAEJ,CAAC,EAEDc,EAAepB"}
+{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </span>\n  );\n});\n\nListHeaderText.displayName = 'ListHeaderText';\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot","ListHeaderText$1"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,cAAc,EAAG,CACrE,CAACA,EAAO,yBAAyB,CAAC,EAAGP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,gCAAgC,CAAC,EAAGV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,gCAAgC,CAAC,EAAGR,CAAA,CAC7C,EACKW,EAAYN,EAElB,uBACG,OAAK,CAAA,cAAaD,EAAQ,UAAWE,GACnCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,qBACEkB,EAAU,CAAA,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,oBAAoB,CAC/C,EAAAd,EAAA,cAAC,QAAK,UAAWe,GAAgCZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAiC,EAAAX,CAAW,CAC9E,CACF,CAEJ,CAAC,EAEDN,EAAe,YAAc,iBAE7B,MAAAoB,EAAepB"}

package/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","MaxCharacters$1"],"mappings":"sJAqBA,MAAMA,EAA8C,CAAC,CAAE,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,KAAe,CAC1G,MAAMC,EAAWH,EAASF,EAEpBM,EAAmBC,EAAWC,EAAO,gBAAgB,EAAG,CAC5D,CAACA,EAAO,yBAAyB,CAAC,EAAGL,IAASM,EAAS,OACvD,CAACD,EAAO,yBAAyB,CAAC,EAAGH,EAAW,CAAA,CACjD,EAEKK,EAAYL,EAAW,IAAO,SAAW,MAE/C,uBACG,MAAI,CAAA,YAAWK,EAAW,cAAa,OAAQ,UAAWJ,EAAkB,MAAO,CAAE,SAAAF,IACnF,GAAGF,KAAUF,KAAiBC,GAAoB,QACrD,CAEJ,EAEAU,EAAeZ"}
+{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","React","MaxCharacters$1"],"mappings":"sJAqBA,MAAMA,EAA8C,CAAC,CAAE,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,KAAe,CAC1G,MAAMC,EAAWH,EAASF,EAEpBM,EAAmBC,EAAWC,EAAO,gBAAgB,EAAG,CAC5D,CAACA,EAAO,yBAAyB,CAAC,EAAGL,IAASM,EAAS,OACvD,CAACD,EAAO,yBAAyB,CAAC,EAAGH,EAAW,CAAA,CACjD,EAEKK,EAAYL,EAAW,IAAO,SAAW,MAG7C,OAAAM,EAAA,cAAC,OAAI,YAAWD,EAAW,cAAa,OAAQ,UAAWJ,EAAkB,MAAO,CAAE,SAAAF,IACnF,GAAGF,CAAM,IAAIF,CAAa,IAAIC,GAAoB,MAAM,EAC3D,CAEJ,EAEAW,EAAeb"}

package/Modal.js

@@ -1,2 +1,2 @@
-import t,{useEffect as N}from"react";import n from"classnames";import{ZIndex as R,AnalyticsId as P,IconSize as c}from"./constants.js";import{useFocusTrap as $}from"./hooks/useFocusTrap.js";import{useIsVisible as I}from"./hooks/useIsVisible.js";import{palette as u}from"./theme/palette.js";import{a as A}from"./uuid.js";import{B as w}from"./Button.js";import{C as F}from"./Close.js";import{Icon as _}from"./components/Icons/Icon.js";import H from"./components/Icons/AlertSignFill.js";import K from"./components/Icons/AlertSignStroke.js";import M from"./components/Icons/CheckOutline.js";import O from"./components/Portal/index.js";import{T as D}from"./Title.js";import a from"./components/Modal/styles.module.scss";var V=(e=>(e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image",e))(V||{}),Z=(e=>(e.large="large",e.medium="medium",e))(Z||{});const j={variant:"normal",primaryButtonText:"OK",titleId:A(),className:"",size:"large",zIndex:R.Modal},q=e=>e==="error"?t.createElement(_,{size:c.Small,svgIcon:H,color:u.cherry500}):e==="warning"?t.createElement(_,{size:c.Small,svgIcon:K,color:u.black}):e==="success"?t.createElement(_,{size:c.Small,svgIcon:M,color:u.kiwi900}):null,G=(e,r)=>{const o=q(e);return o?t.createElement("div",{className:a.modal__iconWrapper},o):r?t.createElement("div",{className:a.modal__iconWrapper},t.cloneElement(r,{size:c.Small})):null},B=e=>{var C,h;const r=t.useRef(null),o=t.useRef(null),m=t.useRef(null);$(m,!0);const k=I(r),f=t.useRef(null),x=I(f),s=o.current&&o.current.scrollHeight>o.current.clientHeight;function v(l){l.key==="Escape"&&e.onClose&&(l.stopPropagation(),e.onClose())}function E(l){l.target&&d.current===l.target&&e.onClose&&(l.stopPropagation(),e.onClose())}function L(){document.body.style.overflow="hidden"}function S(){document.body.style.removeProperty("overflow")}const i=e.variant==="image",d=t.useRef(null),g=e.secondaryButtonText&&((C=e.secondaryButtonText)==null?void 0:C.length)>0||e.onSuccess,T=e.ariaLabelledBy?void 0:e.ariaLabel,y=e.ariaLabelledBy?e.ariaLabelledBy:e.ariaLabel?void 0:e.titleId;N(()=>{const l=d.current;return L(),!e.disableCloseEvents&&l&&(l.addEventListener("keydown",v),l.addEventListener("click",E)),()=>{S(),!e.disableCloseEvents&&l&&(l.removeEventListener("keydown",v),l.removeEventListener("click",E))}},[e.disableCloseEvents]),N(()=>{var l;(l=m.current)==null||l.focus()},[]);const W=n(e.className,a.modal,a[`modal--${e.variant}`],a[`modal--${e.size}`],s&&!g&&a["modal--no-actions"]),z=n({[a["modal__title--error"]]:e.variant==="error",[a["modal__title--success"]]:e.variant==="success"}),b=t.createElement("div",{"data-testid":"dialog-container"},t.createElement("div",{ref:d,className:a["modal-overlay"],"data-testid":e.testId,"data-analyticsid":P.Modal,style:{zIndex:e.zIndex}},t.createElement("div",{className:a.align},t.createElement("div",{className:W,role:"dialog","aria-modal":"true",tabIndex:-1,"aria-label":T,"aria-labelledby":y,ref:m},t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--top"],{[a["modal__shadow--show"]]:!k&&s})}),t.createElement("div",{className:n(a.modal__contentWrapper,{[a["modal__contentWrapper--image"]]:i}),ref:o},!e.noCloseButton&&t.createElement("div",{className:a.modal__closeWrapper},t.createElement("div",{className:n(a.modal__closeWrapper__close)},t.createElement(F,{onClick:e.onClose,ariaLabel:e.ariaLabelCloseBtn}))),t.createElement("div",{className:n(a[`modal__contentWrapper__scroll--${e.size}`],{[a["modal__contentWrapper__scroll--image"]]:i})},t.createElement("div",{ref:r}),t.createElement("div",{className:a.modal__contentWrapper__title},G(e.variant,e.icon),t.createElement(D,{id:y,htmlMarkup:"h3",appearance:"title3",className:z},e.title),e.afterTitleChildren&&t.createElement("div",{className:a.modal__afterTitleChildren},e.afterTitleChildren)),i&&t.createElement("div",null,t.createElement("div",{className:a.modal__contentWrapper__imageWrapper},e.children),t.createElement("span",{className:a.modal__contentWrapper__imageDescription},e.description)),!i&&e.children&&t.createElement("div",null,e.children),!i&&!e.children&&t.createElement("p",{className:a.modal__description},e.description),t.createElement("div",{ref:f}))),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--bottom"],{[a["modal__shadow--show"]]:!x&&s})}),g&&t.createElement("div",{className:n(a["modal__call-to-action"],a[`modal__call-to-action--${e.size}`])},e.onSuccess&&t.createElement(w,{onClick:e.onSuccess},e.primaryButtonText),e.secondaryButtonText&&((h=e.secondaryButtonText)==null?void 0:h.length)>0&&t.createElement(w,{variant:"borderless",onClick:e.onClose},e.secondaryButtonText))))));if(e.printable){const l="print-modal";return t.createElement(O,{className:l,testId:"print-modal"},t.createElement("style",{media:"print"},`body > *:not(.${l}) {display: none;}`),b)}return b};B.defaultProps=j;const se=B;export{se as M,V as a,Z as b};
+import t,{useEffect as N}from"react";import n from"classnames";import{ZIndex as R,AnalyticsId as P,IconSize as c}from"./constants.js";import{useFocusTrap as $}from"./hooks/useFocusTrap.js";import{useIsVisible as I}from"./hooks/useIsVisible.js";import{palette as u}from"./theme/palette.js";import{u as A}from"./uuid.js";import{B as w}from"./Button.js";import{C as F}from"./Close.js";import{Icon as _}from"./components/Icons/Icon.js";import H from"./components/Icons/AlertSignFill.js";import K from"./components/Icons/AlertSignStroke.js";import M from"./components/Icons/CheckOutline.js";import O from"./components/Portal/index.js";import{T as D}from"./Title.js";import a from"./components/Modal/styles.module.scss";var V=(e=>(e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image",e))(V||{}),Z=(e=>(e.large="large",e.medium="medium",e))(Z||{});const j={variant:"normal",primaryButtonText:"OK",titleId:A(),className:"",size:"large",zIndex:R.Modal},q=e=>e==="error"?t.createElement(_,{size:c.Small,svgIcon:H,color:u.cherry500}):e==="warning"?t.createElement(_,{size:c.Small,svgIcon:K,color:u.black}):e==="success"?t.createElement(_,{size:c.Small,svgIcon:M,color:u.kiwi900}):null,G=(e,r)=>{const o=q(e);return o?t.createElement("div",{className:a.modal__iconWrapper},o):r?t.createElement("div",{className:a.modal__iconWrapper},t.cloneElement(r,{size:c.Small})):null},B=e=>{var C,h;const r=t.useRef(null),o=t.useRef(null),m=t.useRef(null);$(m,!0);const k=I(r),f=t.useRef(null),x=I(f),s=o.current&&o.current.scrollHeight>o.current.clientHeight;function v(l){l.key==="Escape"&&e.onClose&&(l.stopPropagation(),e.onClose())}function E(l){l.target&&d.current===l.target&&e.onClose&&(l.stopPropagation(),e.onClose())}function L(){document.body.style.overflow="hidden"}function S(){document.body.style.removeProperty("overflow")}const i=e.variant==="image",d=t.useRef(null),g=e.secondaryButtonText&&((C=e.secondaryButtonText)==null?void 0:C.length)>0||e.onSuccess,T=e.ariaLabelledBy?void 0:e.ariaLabel,y=e.ariaLabelledBy?e.ariaLabelledBy:e.ariaLabel?void 0:e.titleId;N(()=>{const l=d.current;return L(),!e.disableCloseEvents&&l&&(l.addEventListener("keydown",v),l.addEventListener("click",E)),()=>{S(),!e.disableCloseEvents&&l&&(l.removeEventListener("keydown",v),l.removeEventListener("click",E))}},[e.disableCloseEvents]),N(()=>{var l;(l=m.current)==null||l.focus()},[]);const W=n(e.className,a.modal,a[`modal--${e.variant}`],a[`modal--${e.size}`],s&&!g&&a["modal--no-actions"]),z=n({[a["modal__title--error"]]:e.variant==="error",[a["modal__title--success"]]:e.variant==="success"}),b=t.createElement("div",{"data-testid":"dialog-container"},t.createElement("div",{ref:d,className:a["modal-overlay"],"data-testid":e.testId,"data-analyticsid":P.Modal,style:{zIndex:e.zIndex}},t.createElement("div",{className:a.align},t.createElement("div",{className:W,role:"dialog","aria-modal":"true",tabIndex:-1,"aria-label":T,"aria-labelledby":y,ref:m},t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--top"],{[a["modal__shadow--show"]]:!k&&s})}),t.createElement("div",{className:n(a.modal__contentWrapper,{[a["modal__contentWrapper--image"]]:i}),ref:o},!e.noCloseButton&&t.createElement("div",{className:a.modal__closeWrapper},t.createElement("div",{className:n(a.modal__closeWrapper__close)},t.createElement(F,{onClick:e.onClose,ariaLabel:e.ariaLabelCloseBtn}))),t.createElement("div",{className:n(a[`modal__contentWrapper__scroll--${e.size}`],{[a["modal__contentWrapper__scroll--image"]]:i})},t.createElement("div",{ref:r}),t.createElement("div",{className:a.modal__contentWrapper__title},G(e.variant,e.icon),t.createElement(D,{id:y,htmlMarkup:"h3",appearance:"title3",className:z},e.title),e.afterTitleChildren&&t.createElement("div",{className:a.modal__afterTitleChildren},e.afterTitleChildren)),i&&t.createElement("div",null,t.createElement("div",{className:a.modal__contentWrapper__imageWrapper},e.children),t.createElement("span",{className:a.modal__contentWrapper__imageDescription},e.description)),!i&&e.children&&t.createElement("div",null,e.children),!i&&!e.children&&t.createElement("p",{className:a.modal__description},e.description),t.createElement("div",{ref:f}))),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--bottom"],{[a["modal__shadow--show"]]:!x&&s})}),g&&t.createElement("div",{className:n(a["modal__call-to-action"],a[`modal__call-to-action--${e.size}`])},e.onSuccess&&t.createElement(w,{onClick:e.onSuccess},e.primaryButtonText),e.secondaryButtonText&&((h=e.secondaryButtonText)==null?void 0:h.length)>0&&t.createElement(w,{variant:"borderless",onClick:e.onClose},e.secondaryButtonText))))));if(e.printable){const l="print-modal";return t.createElement(O,{className:l,testId:"print-modal"},t.createElement("style",{media:"print"},`body > *:not(.${l}) {display: none;}`),b)}return b};B.defaultProps=j;const se=B;export{se as M,V as a,Z as b};
 //# sourceMappingURL=Modal.js.map

package/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal","Modal$1"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal","Modal$1"],"mappings":"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"}

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** A version of panel that prioritises content-B visually and audibly */\n  prioritiseMetaDataInContentB?: boolean;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Whether panel is focusable or not */\n  focusable?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    prioritiseMetaDataInContentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    focusable = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n    [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n    [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n    [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n    [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n    [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = (): JSX.Element | null => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const contentBElement = (\n    <div className={panelContentRightClass}>\n      {contentB && <div className={panelContentBClass}>{contentB}</div>}\n      {(children || url || date || time || buttonOnClick) && (\n        <div className={btnContainerClass}>\n          {<DateTime date={date} time={time} />}\n          {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClass}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          {prioritiseMetaDataInContentB && contentBElement}\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          {!prioritiseMetaDataInContentB && contentBElement}\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","focusable","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** A version of panel that prioritises content-B visually and audibly */\n  prioritiseMetaDataInContentB?: boolean;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Whether panel is focusable or not */\n  focusable?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    prioritiseMetaDataInContentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    focusable = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n    [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n    [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n    [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n    [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n    [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = (): JSX.Element | null => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const contentBElement = (\n    <div className={panelContentRightClass}>\n      {contentB && <div className={panelContentBClass}>{contentB}</div>}\n      {(children || url || date || time || buttonOnClick) && (\n        <div className={btnContainerClass}>\n          {<DateTime date={date} time={time} />}\n          {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClass}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          {prioritiseMetaDataInContentB && contentBElement}\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          {!prioritiseMetaDataInContentB && contentBElement}\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","focusable","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":"g1BAuBY,IAAAA,IAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJEA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,KAAO,OAJGA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,SAAW,WACXA,EAAA,SAAW,WALDA,IAAAA,IAAA,CAAA,CAAA,EAyEZ,MAAMC,GAAsF,CAAC,CAAE,OAAAC,EAAQ,cAAAC,KAAoB,CACzH,MAAMC,EAAa,IACbF,IAAW,QACN,CAAE,MAAOG,EAAQ,UAAW,QAASC,EAAc,EAGrD,CAAE,MAAOD,EAAQ,MAAO,QAASE,EAAO,EAG3CC,EAAqBC,EAAWC,EAAY,gBAAgB,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGR,IAAW,KAAA,CAClD,EAED,OAAKA,IAAW,SAAqBA,IAAW,UAAsBC,kBAEjE,MAAI,CAAA,UAAWK,EAAoB,cAAY,gBAAA,kBAC5CG,EAAM,CAAA,GAAGP,IAAc,KAAMQ,EAAS,MAAQ,CAAA,EAAG,IAAEC,EAAA,cAAA,OAAA,KAAMV,CAAc,CAC3E,EAIG,IACT,EAEMW,GAAuD,CAAC,CAAE,KAAAC,EAAM,KAAAC,KAChED,GAAQC,EAERH,EAAA,cAAC,OAAI,UAAWH,EAAY,oBAAoB,EAAG,cAAY,YAC5DK,GACCF,EAAA,cAAC,OAAI,UAAWH,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASM,GAAU,KAAML,EAAS,MAAQ,CAAA,kBAC/C,OAAM,KAAAG,CAAK,CACd,EAEDC,mBACE,MAAI,CAAA,UAAWN,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASO,GAAO,KAAMN,EAAS,MAAQ,CAAA,EAC5CC,EAAA,cAAA,OAAA,KAAMG,CAAK,CACd,CAEJ,EAIG,KAGHG,GAAQN,EAAM,WAAW,SAA2BO,EAAmBC,EAA6C,CAClH,KAAA,CACJ,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,6BAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,KAClB,IAAAC,EACA,OAAAC,EAAS,QACT,KAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,OACV,OAAAhC,EAAS,SACT,cAAAC,EACA,WAAAgC,EAAa,cACb,gBAAAC,EAAkB,iBAClB,uBAAAC,EACA,gBAAAC,EACA,OAAAC,EAAS,UACT,kBAAAC,EAAoB,GACpB,KAAAzB,EACA,KAAAC,EACA,YAAAyB,EACA,cAAAC,EACA,iBAAAC,EAAmB,IACnB,SAAAC,EAAW,GACX,SAAAC,EACA,yBAAAC,EAA2B,GAC3B,UAAAC,EAAY,EACV,EAAA3B,EAEE,CAAC4B,EAAYC,CAAa,EAAIC,GAAUN,EAAUC,CAAQ,EAC1DM,EAAUC,IACVC,EAAeD,IACfE,EAAWnD,GAAiBD,IAAW,MACvCqD,EAAU,CAAC,WAAqB,SAAA,EAAY,WAAqB,WAAY,WAAqB,SAAU,CAAA,EAAE,SAAShB,CAAM,EAE7HiB,EAAoB/C,EAAWC,EAAY,eAAe,EAAGgB,CAAS,EAEtE+B,EAAehD,EAAWC,EAAY,MAAO,CACjD,CAACA,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,eAAe,CAAC,EAAGwB,IAAY,SAC5C,CAACxB,EAAY,cAAc,CAAC,EAAGwB,IAAY,QAC3C,CAACxB,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QAAqBO,EACxE,CAAC/B,EAAY,iBAAiB,CAAC,EAAGsC,EAClC,CAACtC,EAAY,YAAY,CAAC,EAAGR,IAAW,MACxC,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,eAAe,CAAC,EAAGR,GAAUA,IAAW,SACrD,CAACQ,EAAY,kBAAkB,CAAC,EAAGsB,EACnC,CAACtB,EAAY,eAAe,CAAC,EAAG8B,EAChC,CAAC9B,EAAY,kBAAkB,CAAC,EAAGY,GAAYQ,GAAOe,GAAYH,GAAiBF,CAAA,CACpF,EAEKkB,EAAiBjD,EAAW,CAChC,CAACC,EAAY,gBAAmB,EAAG6B,IAAW,WAAuBf,EACrE,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6C,GAAW/B,EACvD,CAACd,EAAY,wBAAwB,CAAC,EAAGsB,EACzC,CAACtB,EAAY,gDAAgD,CAAC,EAAGe,CAAA,CAClE,EAEKkC,EAAwBlD,EAAW,CACvC,CAACC,EAAY,iBAAiB,CAAC,EAAG6B,IAAW,UAC7C,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,mDAAmD,CAAC,EAAG,CAACe,CAAA,CACtE,EAEKmC,GAAyBnD,EAAW,CACxC,CAACC,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAY+B,EAC5D,CAAC7C,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,oDAAoD,CAAC,EAAGe,CAAA,CACtE,EAEKoC,GAAqBpD,EAAWC,EAAY,iBAAiB,EAAG,CACpE,CAACA,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6C,EAC3C,CAAC7C,EAAY,+CAA+C,CAAC,EAAGe,CAAA,CACjE,EAEKqC,GAAsBrD,EAAWC,EAAY,oBAAoB,CAAC,EAClEqD,GAAetD,EAAWC,EAAY,wBAAwB,EAAG,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAG4C,CAAA,CAAU,EAE7HU,GAAsB,IAAmB,CAC7C,MAAMC,EAAsBC,GAAuB,CACjD,MAAO5B,EACP,GAAKD,GAA0B,GAAGgB,CAAY,IAAIhB,CAAsB,IAAQT,GAASuB,GAAW,GAAGE,CAAY,IAAIF,CAAO,GAC9H,OAAQ,OAAA,CACT,EAEKgB,EAA0D,CAC9D,QAASzB,IAAgC,IAAYO,EAAc,CAACD,CAAU,GAC9E,UAAWR,EAAoB9B,EAAY,cAAmB,OAC9D,QAAS,aACT,SAAU,GACV,GAAGuD,CAAA,EAGL,OAAI3C,EAEAT,EAAA,cAACuD,GAAO,OAAO,SAAS,gBAAepB,EAAa,GAAGmB,CACrD,EAAAtD,EAAA,cAAC,OAAK,CAAA,GAAIwC,GAAeL,EAAaZ,EAAkBD,CAAW,EACnEtB,EAAA,cAACF,GAAK,QAASqC,EAAaqB,GAAYC,EAAA,CAAa,CACvD,EAKFzD,EAAA,cAACuD,GAAO,OAAO,MAAM,WAAYzB,EAAkB,KAAMb,EAAK,OAAAC,EAAiB,GAAGoC,GAC/EtD,EAAA,cAAA,OAAA,CAAK,GAAIwC,CAAe,EAAAlB,CAAW,EACnCtB,EAAA,cAAAF,EAAA,CAAK,QAAS4D,EAAA,CAAY,CAC7B,CAAA,EAIEC,GAAoB/D,EAAWC,EAAY,sBAAsB,EAAG,CACxE,CAACA,EAAY,+BAA+B,CAAC,EAAG6C,EAChD,CAAC7C,EAAY,oCAAoC,CAAC,EAAG,CAACc,EACtD,CAACd,EAAY,mCAAmC,CAAC,EAAGa,GAAYC,CAAA,CACjE,EAEKiD,GAAgB,IAA0B,CAI1C,GAHA,CAACnD,GAGD,CAACwB,GAA4B,CAACE,EACzB,OAAA,KAGT,MAAM0B,EAAsBjE,EAAWC,EAAY,eAAe,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGsC,EACtC,CAACtC,EAAY,qBAAqB,CAAC,EAAGwB,IAAY,OAClD,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QACnD,CAACxB,EAAY,0BAA0B,CAAC,EAAGsB,CAAA,CAC5C,EAGC,OAAAnB,EAAA,cAAC,OAAI,UAAW6D,EAAqB,cAAY,eAC/C,EAAA7D,EAAA,cAAC,MAAK,KAAAS,CAAS,CACjB,CAAA,EAIEqD,EACH9D,EAAA,cAAA,MAAA,CAAI,UAAW+C,IACbpC,GAAaX,EAAA,cAAA,MAAA,CAAI,UAAWgD,EAAA,EAAqBrC,CAAS,GACzDF,GAAYQ,GAAOf,GAAQC,GAAQ0B,IACnC7B,EAAA,cAAC,MAAI,CAAA,UAAW2D,IACZ3D,EAAA,cAAAC,GAAA,CAAS,KAAAC,EAAY,KAAAC,CAAY,CAAA,GACjCM,GAAYQ,GAAOY,IAAkB7B,EAAA,cAAC,OAAI,UAAWiD,IAAsBE,IAAsB,CACrG,CAEJ,EAIA,OAAAnD,EAAA,cAAC,MAAA,CAEC,SAAUkC,EAAY,GAAK,OAC3B,IAAA1B,EACA,cAAaM,EACb,UAAW6B,EACX,mBAAkBoB,GAAY,KAAA,kBAE7B,MAAI,CAAA,UAAWnB,CACb,EAAAzB,GAAQ,CAACC,GAAapB,EAAA,cAAC,MAAI,CAAA,UAAWH,EAAY,WAAc,EAAAsB,CAAK,EACtEnB,EAAA,cAAC,OAAI,UAAW6C,CAAA,EACbjC,GAAgCkD,kBAChC,MAAI,CAAA,UAAWhB,GACd9C,EAAA,cAACZ,IAAW,OAAAC,EAAgB,cAAAC,EAA8B,EACzDyB,mBACE,MAAI,CAAA,UAAWlB,EAAY,kCAAkC,mBAC3DmE,GAAM,CAAA,WAAW,SAAS,WAAYhD,EAAiB,GAAIsB,EAAS,UAAWY,EAAA,EAC7EnC,CACH,EACC0B,GACEzC,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAY,YAAA,kBACzBoE,GAAM,CAAA,MAAM,YAAY,OAAO,gBAC7B3E,CACH,CACF,CAEJ,EAEDoB,CACH,EACC,CAACE,GAAgCkD,CACpC,EACC3C,GAAQC,mBAAc,MAAI,CAAA,UAAWvB,EAAY,oBAAoB,GAAIsB,CAAK,CACjF,EACCyC,GAAc,CAAA,CAGrB,CAAC,EAEDM,GAAe5D"}

package/RadioButton.js

@@ -1,2 +1,2 @@
-import s,{useState as D}from"react";import l from"classnames";import{FormMode as a,FormVariant as G,AnalyticsId as V}from"./constants.js";import{usePseudoClasses as W}from"./hooks/usePseudoClasses.js";import{isMutableRefObject as $,mergeRefs as z}from"./utils/refs.js";import{a as H}from"./uuid.js";import{g as J,r as K}from"./Label.js";import o from"./components/RadioButton/styles.module.scss";const w=s.forwardRef((g,u)=>{const{className:C,defaultChecked:_=!1,onChange:y,disabled:t,label:v,inputId:m=H(),mode:e=a.onwhite,name:R=m,variant:B,errorText:n,error:k=!!n,value:N=J(v),testId:L,required:x,...E}=g,c=k||e===a.oninvalid,h=e===a.ondark,f=e===a.onblueberry,F=e===a.ongrey,p=e===a.oninvalid,r=B===G.bigform,[i,I]=D(_),{refObject:S,isFocused:d}=W($(u)?u:null),j=z([u,S]),A=l(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:n,[o["radio-button-wrapper__bigform"]]:r,[o["radio-button-wrapper__bigform--focused"]]:r&&d,[o["radio-button-wrapper__bigform--selected"]]:r&&i&&d,[o["radio-button-wrapper__bigform--invalid"]]:r&&p&&d,[o["radio-button-wrapper__bigform--on-blueberry"]]:r&&f&&d}),M=l(o["radio-button-label"],{[o["radio-button-label--disabled"]]:t,[o["radio-button-label--on-dark"]]:h,[o["radio-button-label--invalid"]]:c,[o["radio-button-label__bigform"]]:r,[o["radio-button-label__bigform--on-grey"]]:r&&F&&!i,[o["radio-button-label__bigform--on-blueberry"]]:f&&!i&&r,[o["radio-button-label__bigform--selected"]]:r&&i&&!p,[o["radio-button-label__bigform--disabled"]]:r&&t,[o["radio-button-label__bigform--selected-invalid"]]:r&&i&&p}),O=l(o["radio-button"],{[o["radio-button--on-dark"]]:h,[o["radio-button--disabled"]]:t,[o["radio-button--on-blueberry"]]:f,[o["radio-button--invalid"]]:c,[o["radio-button__bigform"]]:r,[o["radio-button__bigform--disabled"]]:r&&t,[o["radio-button__bigform--invalid"]]:r&&c},C),P=l(o["radio-button-errors"]),T=b=>{I(b.target.checked),y&&y(b)},q=()=>s.createElement("input",{id:m,name:R,className:O,type:"radio",disabled:t,value:N,ref:j,defaultChecked:_,"aria-describedby":g["aria-describedby"]??void 0,required:x,...E,onChange:b=>T(b)});return s.createElement("div",{"data-testid":L,"data-analyticsid":V.RadioButton,className:A},n&&s.createElement("p",{className:P},n),K(v,q(),m,e,t,M,void 0,o["radiobutton-sublabel-wrapper"],r))});w.displayName="RadioButton";const eo=w;export{eo as R,w as a};
+import p,{useState as D}from"react";import s from"classnames";import{FormMode as d,FormVariant as V,AnalyticsId as W}from"./constants.js";import{usePseudoClasses as $}from"./hooks/usePseudoClasses.js";import{isMutableRefObject as z,mergeRefs as G}from"./utils/refs.js";import{u as H}from"./uuid.js";import{g as J,r as K}from"./Label.js";import o from"./components/RadioButton/styles.module.scss";const ro=(b,r,a,l)=>{const n=r==="oninvalid",e=b===l;return s({[o["radio-button-label__bigform--on-grey"]]:a&&r==="ongrey"&&!e,[o["radio-button-label__bigform--on-blueberry"]]:r==="onblueberry"&&!e&&a,[o["radio-button-label__bigform--selected"]]:a&&e&&!n,[o["radio-button-label__bigform--selected-invalid"]]:a&&e&&n})},h=p.forwardRef((b,r)=>{const{className:a,defaultChecked:l=!1,onChange:n,disabled:e,label:g,inputId:f=H(),mode:i=d.onwhite,name:C=f,variant:w,errorText:u,error:R=!!u,value:k=J(g),testId:B,required:N,labelClassNames:L,...x}=b,_=R||i===d.oninvalid,y=i===d.ondark,v=i===d.onblueberry,E=i===d.oninvalid,t=w===V.bigform,[F,I]=D(l),{refObject:S,isFocused:c}=$(z(r)?r:null),j=G([r,S]),A=s(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:u,[o["radio-button-wrapper__bigform"]]:t,[o["radio-button-wrapper__bigform--focused"]]:t&&c,[o["radio-button-wrapper__bigform--selected"]]:t&&F&&c,[o["radio-button-wrapper__bigform--invalid"]]:t&&E&&c,[o["radio-button-wrapper__bigform--on-blueberry"]]:t&&v&&c}),M=s(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:y,[o["radio-button-label--invalid"]]:_,[o["radio-button-label__bigform"]]:t,[o["radio-button-label__bigform--disabled"]]:t&&e},L),O=s(o["radio-button"],{[o["radio-button--on-dark"]]:y,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:v,[o["radio-button--invalid"]]:_,[o["radio-button__bigform"]]:t,[o["radio-button__bigform--disabled"]]:t&&e,[o["radio-button__bigform--invalid"]]:t&&_},a),P=s(o["radio-button-errors"]),T=m=>{I(m.target.checked),n&&n(m)},q=()=>p.createElement("input",{id:f,name:C,className:O,type:"radio",disabled:e,value:k,ref:j,defaultChecked:l,"aria-describedby":b["aria-describedby"]??void 0,required:N,...x,onChange:m=>T(m)});return p.createElement("div",{"data-testid":B,"data-analyticsid":W.RadioButton,className:A},u&&p.createElement("p",{className:P},u),K(g,q(),f,i,e,M,void 0,o["radiobutton-sublabel-wrapper"],t))});h.displayName="RadioButton";const ao=h;export{ao as R,h as a,ro as g};
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onGrey = mode === FormMode.ongrey;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label__bigform']]: bigform,\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, bigform: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: mode === 'onblueberry' && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__bigform']]: bigform,\n      [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","bigform","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","FormVariant","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"4YAqCO,MAAMA,GAAuB,CAACC,EAAiBC,EAAgBC,EAAkBC,IAAgD,CACtI,MAAMC,EAAWH,IAAS,YACpBI,EAAUL,IAAYG,EAE5B,OAAOG,EAAW,CAChB,CAACC,EAAkB,sCAAsC,CAAC,EAAGL,GAAWD,IAAS,UAAY,CAACI,EAC9F,CAACE,EAAkB,2CAA2C,CAAC,EAAGN,IAAS,eAAiB,CAACI,GAAWH,EACxG,CAACK,EAAkB,uCAAuC,CAAC,EAAGL,GAAWG,GAAW,CAACD,EACrF,CAACG,EAAkB,+CAA+C,CAAC,EAAGL,GAAWG,GAAWD,CAAA,CAC7F,CACH,EAEaI,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAjB,EAAOkB,EAAS,QAChB,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQC,EAAaT,CAAK,EAC1B,OAAAU,EACA,SAAAC,EACA,gBAAAC,EACA,GAAGC,CACD,EAAAnB,EACEoB,EAAUP,GAAStB,IAASkB,EAAS,UACrCY,EAAS9B,IAASkB,EAAS,OAC3Ba,EAAc/B,IAASkB,EAAS,YAChCf,EAAWH,IAASkB,EAAS,UAC7BjB,EAAUmB,IAAYY,EAAY,QAClC,CAAC5B,EAAS6B,CAAa,EAAIC,EAAkBtB,CAAc,EAC3D,CAAE,UAAAuB,EAAW,UAAAC,CAAU,EAAIC,EAAmCC,EAAmB5B,CAAG,EAAIA,EAAM,IAAI,EAClG6B,EAAaC,EAAU,CAAC9B,EAAKyB,CAAS,CAAC,EAEvCM,EAA4BpC,EAAWC,EAAkB,sBAAsB,EAAG,CACtF,CAACA,EAAkB,kCAAkC,CAAC,EAAGe,EACzD,CAACf,EAAkB,+BAA+B,CAAC,EAAGL,EACtD,CAACK,EAAkB,wCAAwC,CAAC,EAAGL,GAAWmC,EAC1E,CAAC9B,EAAkB,yCAAyC,CAAC,EAAGL,GAAWG,GAAWgC,EACtF,CAAC9B,EAAkB,wCAAwC,CAAC,EAAGL,GAAWE,GAAYiC,EACtF,CAAC9B,EAAkB,6CAA6C,CAAC,EAAGL,GAAW8B,GAAeK,CAAA,CAC/F,EACKM,EAA0BrC,EAC9BC,EAAkB,oBAAoB,EACtC,CACE,CAACA,EAAkB,8BAA8B,CAAC,EAAGQ,EACrD,CAACR,EAAkB,6BAA6B,CAAC,EAAGwB,EACpD,CAACxB,EAAkB,6BAA6B,CAAC,EAAGuB,EACpD,CAACvB,EAAkB,6BAA6B,CAAC,EAAGL,EACpD,CAACK,EAAkB,uCAAuC,CAAC,EAAGL,GAAWa,CAC3E,EACAa,CAAA,EAEIgB,EAAqBtC,EACzBC,EAAkB,cAAc,EAChC,CACE,CAACA,EAAkB,uBAAuB,CAAC,EAAGwB,EAC9C,CAACxB,EAAkB,wBAAwB,CAAC,EAAGQ,EAC/C,CAACR,EAAkB,4BAA4B,CAAC,EAAGyB,EACnD,CAACzB,EAAkB,uBAAuB,CAAC,EAAGuB,EAC9C,CAACvB,EAAkB,uBAAuB,CAAC,EAAGL,EAC9C,CAACK,EAAkB,iCAAiC,CAAC,EAAGL,GAAWa,EACnE,CAACR,EAAkB,gCAAgC,CAAC,EAAGL,GAAW4B,CACpE,EACAlB,CAAA,EAEIiC,EAAcvC,EAAWC,EAAkB,qBAAqB,CAAC,EAEjEuC,EAAUC,GAAiD,CACjDb,EAAAa,EAAE,OAAO,OAAO,EAC9BjC,GAAYA,EAASiC,CAAC,CAAA,EAGlBC,EAAkB,IACtBvC,EAAA,cAAC,QAAA,CACC,GAAIQ,EACJ,KAAAG,EACA,UAAWwB,EACX,KAAK,QACL,SAAA7B,EACA,MAAAS,EACA,IAAKgB,EACL,eAAA3B,EACA,mBAAkBH,EAAM,kBAAkB,GAAK,OAC/C,SAAAiB,EACC,GAAGE,EACJ,SAAWkB,GAAYD,EAAOC,CAAC,CAAA,CAAA,EAInC,OACGtC,EAAA,cAAA,MAAA,CAAI,cAAaiB,EAAQ,mBAAkBuB,EAAY,YAAa,UAAWP,CAAA,EAC7EpB,GAAcb,EAAA,cAAA,IAAA,CAAE,UAAWoC,CAAA,EAAcvB,CAAU,EACnD4B,EACClC,EACAgC,EAAgB,EAChB/B,EACAhB,EACAc,EACA4B,EACA,OACApC,EAAkB,8BAA8B,EAChDL,CAAA,CAEJ,CAEJ,CAAC,EAEDM,EAAY,YAAc,cAE1B,MAAA2C,GAAe3C"}

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":"sdA4CA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAmC,CAClH,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EAAOC,EAAS,QAChB,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACD,EAAAlB,EAEEmB,EAAOC,EAAQX,CAAQ,EACvBY,EAAcV,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDgB,EAAY5B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C2B,EAAWT,EAAQxB,EAAkBwB,CAAK,EAAI,OAE9CU,EAA4BC,EAChCC,EAAa,sBAAsB,EACnC,CACE,CAACA,EAAa,mCAAmC,CAAC,EAAGrB,IAAY,cACjE,CAACqB,EAAa,oCAAoC,CAAC,EAAGL,EACtD,CAACK,EAAa,+BAA+B,CAAC,EAAG/B,EACjD,CAAC+B,EAAa,gCAAgC,CAAC,EAAG9B,CACpD,EACAO,CAAA,EAGIwB,EAAgBF,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,sBAAsB,CAAC,EAAGL,EACxC,CAACK,EAAa,iBAAiB,CAAC,EAAG/B,CAAA,CACpC,EAED,uBACGiC,EAAa,CAAA,UAAArB,CAAA,kBACX,MAAI,CAAA,cAAaM,EAAQ,mBAAkBgB,EAAY,OAAQ,UAAWH,EAAa,gBAAgB,EAAG,MAAO,CAAE,SAAAH,IACjHO,EAAYtB,EAAOW,EAAMR,EAAkBf,CAAQ,EACpDG,EAAA,cAAC,OAAI,UAAWyB,mBACbO,EAAK,CAAA,UAAWL,EAAa,cAAc,EAAG,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,OAAQ,EAC9GlC,EAAA,cAAC,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIwB,EACJ,KAAAT,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAc,EACA,mBAAkBf,EAAM,kBAAkB,GAAK,OAC/C,gBAAe,CAAC,CAACe,EACjB,MAAAC,EACA,aAAAC,EACC,GAAGC,CAAA,EAEHd,CAEL,CAAA,CACF,CACF,CAEJ,CAAC,EAED8B,EAAepC"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange'\n  > {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":"sdA+CA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAErB,MAAO,QAAQD,EAAaE,CAA0B,QAAQD,CAAY,GAC5E,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAmC,CAClH,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EAAOC,EAAS,QAChB,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACD,EAAAlB,EAEEmB,EAAOC,EAAQX,CAAQ,EACvBY,EAAcV,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDgB,EAAY5B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C2B,EAAWT,EAAQxB,EAAkBwB,CAAK,EAAI,OAE9CU,EAA4BC,EAChCC,EAAa,sBAAsB,EACnC,CACE,CAACA,EAAa,mCAAmC,CAAC,EAAGrB,IAAY,cACjE,CAACqB,EAAa,oCAAoC,CAAC,EAAGL,EACtD,CAACK,EAAa,+BAA+B,CAAC,EAAG/B,EACjD,CAAC+B,EAAa,gCAAgC,CAAC,EAAG9B,CACpD,EACAO,CAAA,EAGIwB,EAAgBF,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,sBAAsB,CAAC,EAAGL,EACxC,CAACK,EAAa,iBAAiB,CAAC,EAAG/B,CAAA,CACpC,EAED,uBACGiC,EAAa,CAAA,UAAArB,CAAA,kBACX,MAAI,CAAA,cAAaM,EAAQ,mBAAkBgB,EAAY,OAAQ,UAAWH,EAAa,gBAAgB,EAAG,MAAO,CAAE,SAAAH,IACjHO,EAAYtB,EAAOW,EAAMR,EAAkBf,CAAQ,EACpDG,EAAA,cAAC,OAAI,UAAWyB,mBACbO,EAAK,CAAA,UAAWL,EAAa,cAAc,EAAG,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,OAAQ,EAC9GlC,EAAA,cAAC,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIwB,EACJ,KAAAT,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAc,EACA,mBAAkBf,EAAM,kBAAkB,GAAK,OAC/C,gBAAe,CAAC,CAACe,EACjB,MAAAC,EACA,aAAAC,EACC,GAAGC,CAAA,EAEHd,CAEL,CAAA,CACF,CACF,CAEJ,CAAC,EAED8B,EAAepC"}

package/StatusDot.js

@@ -1,2 +1,2 @@
-import s from"react";import n from"classnames";import"./theme/grid.js";import"./hooks/useBreakpoint.js";import{AnalyticsId as h,IconSize as r}from"./constants.js";import{getColor as I}from"./theme/currys/color.js";import E from"./components/Icons/Attachment.js";import X from"./components/Icons/Group.js";import{Icon as c}from"./components/Icons/Icon.js";import v from"./components/Icons/NoAccess.js";import N from"./components/Icons/Undo.js";import t from"./components/StatusDot/styles.module.scss";var b=(e=>(e.onwhite="onwhite",e.ondark="ondark",e))(b||{}),w=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e.attachment="attachment",e))(w||{});const z=({variant:e})=>e==="recurring"?s.createElement(c,{size:r.XXSmall,svgIcon:N}):e==="group"?s.createElement(c,{size:r.XXSmall,svgIcon:X}):e==="noaccess"?s.createElement(c,{size:r.XXSmall,svgIcon:v,color:I("cherry",600)}):e==="attachment"?s.createElement(c,{size:r.XXSmall,svgIcon:E}):null,C=e=>{const{id:l,mode:m="onwhite",variant:o="info",text:i,className:d,testId:p}=e,a=o==="recurring"||o==="group"||o==="noaccess"||o==="attachment",u=o==="cancelled",f=n(t.statusdot,u&&t["statusdot--cancelled"],d),g=n(t.statusdot__dot,a?t["statusdot__dot--icon"]:t[`statusdot__dot--${o}`]),_=n(t.statusdot__label,a&&t["statusdot__label--icon"],m==="ondark"&&t["statusdot__label--on-dark"]);return s.createElement("div",{id:l,className:f,"data-testid":p,"data-analyticsid":h.StatusDot},s.createElement("span",{className:g},s.createElement(z,{variant:o})),s.createElement("span",{className:_},i))},H=C;export{H as S,b as a,w as b};
+import s from"react";import n from"classnames";import"./theme/grid.js";import"./hooks/useBreakpoint.js";import{AnalyticsId as h,IconSize as r}from"./constants.js";import{getColor as I}from"./theme/currys/color.js";import E from"./components/Icons/Attachment.js";import X from"./components/Icons/Group.js";import{Icon as c}from"./components/Icons/Icon.js";import v from"./components/Icons/NoAccess.js";import N from"./components/Icons/Undo.js";import t from"./components/StatusDot/styles.module.scss";var b=(e=>(e.onwhite="onwhite",e.ondark="ondark",e))(b||{}),w=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e.attachment="attachment",e))(w||{});const z=({variant:e})=>e==="recurring"?s.createElement(c,{size:r.XXSmall,svgIcon:N}):e==="group"?s.createElement(c,{size:r.XXSmall,svgIcon:X}):e==="noaccess"?s.createElement(c,{size:r.XXSmall,svgIcon:v,color:I("cherry",600)}):e==="attachment"?s.createElement(c,{size:r.XXSmall,svgIcon:E}):null,C=e=>{const{id:l,mode:m="onwhite",variant:o="info",text:i,className:d,testId:p}=e,a=o==="recurring"||o==="group"||o==="noaccess"||o==="attachment",u=o==="cancelled",f=n(t.statusdot,u&&t["statusdot--cancelled"],d),g=n(t.statusdot__dot,a?t["statusdot__dot--icon"]:t[`statusdot__dot--${o}`]),_=n(t.statusdot__label,a&&t["statusdot__label--icon"],m==="ondark"&&t["statusdot__label--on-dark"]);return s.createElement("span",{id:l,className:f,"data-testid":p,"data-analyticsid":h.StatusDot},s.createElement("span",{className:g},s.createElement(z,{variant:o})),s.createElement("span",{className:_},i))},H=C;export{H as S,b as a,w as b};
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <div id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAkBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,4BACNC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASC,CAAM,CAAA,EAC3CH,IAAY,wBACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASE,CAAO,CAAA,EAC5CJ,IAAY,WACdK,EAAA,cAACJ,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASI,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAG,CAAA,EAC/EP,IAAY,6BACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASM,CAAY,CAAA,EAGrD,KAkBHC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAO,UAAwB,QAAAZ,EAAU,OAAuB,KAAAa,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAL,EAElGM,EACJhB,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERiB,EAAcjB,IAAY,YAE1BkB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,sBAAsB,EAAGN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,sBAAsB,EAAIA,EAAO,mBAAmBpB,GAAS,CAAC,EACjIsB,EAAeH,EACnBC,EAAO,iBACPJ,GAAWI,EAAO,wBAAwB,EAC1CR,IAAS,UAAyBQ,EAAO,2BAA2B,CAAA,EAIpE,OAAAf,EAAA,cAAC,MAAI,CAAA,GAAAM,EAAQ,UAAWO,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAC1FlB,EAAA,cAAA,OAAA,CAAK,UAAWgB,CACf,EAAAhB,EAAA,cAACN,EAAc,CAAA,QAAAC,CAAA,CAAkB,CACnC,kBACC,OAAK,CAAA,UAAWsB,CAAe,EAAAT,CAAK,CACvC,CAEJ,EAEAW,EAAef"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAkBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,4BACNC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASC,CAAM,CAAA,EAC3CH,IAAY,wBACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASE,CAAO,CAAA,EAC5CJ,IAAY,WACdK,EAAA,cAACJ,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASI,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAG,CAAA,EAC/EP,IAAY,6BACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASM,CAAY,CAAA,EAGrD,KAkBHC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAO,UAAwB,QAAAZ,EAAU,OAAuB,KAAAa,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAL,EAElGM,EACJhB,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERiB,EAAcjB,IAAY,YAE1BkB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,sBAAsB,EAAGN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,sBAAsB,EAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,EACjIsB,EAAeH,EACnBC,EAAO,iBACPJ,GAAWI,EAAO,wBAAwB,EAC1CR,IAAS,UAAyBQ,EAAO,2BAA2B,CAAA,EAIpE,OAAAf,EAAA,cAAC,OAAK,CAAA,GAAAM,EAAQ,UAAWO,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAC3FlB,EAAA,cAAA,OAAA,CAAK,UAAWgB,CACf,EAAAhB,EAAA,cAACN,EAAc,CAAA,QAAAC,CAAA,CAAkB,CACnC,kBACC,OAAK,CAAA,UAAWsB,CAAe,EAAAT,CAAK,CACvC,CAEJ,EAEAW,EAAef"}

package/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth === tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal }) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<Props>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","child","HorizontalScroll"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth === tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal }) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","child","HorizontalScroll"],"mappings":"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"}

package/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody = ({ className, children, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses}>\n      {React.Children.map(children, child => React.isValidElement<Props>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":"mIAgBa,MAAAA,EAAY,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,KAAAC,EAAOC,EAAS,UAAuC,CACtG,MAAMC,EAAmBC,EAAWC,EAAY,YAAY,EAAGN,CAAS,EAEtE,OAAAO,EAAA,cAAC,SAAM,UAAWH,CAAA,EACfG,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,eAAsBC,CAAK,GAAKD,EAAM,aAAaC,EAAO,CAAE,KAAAN,EAAM,CAAC,CAClH,CAEJ,EAEAO,EAAeV"}
+{"version":3,"file":"TableBody.js","sources":["../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody = ({ className, children, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":"mIAgBa,MAAAA,EAAY,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,KAAAC,EAAOC,EAAS,UAAuC,CACtG,MAAMC,EAAmBC,EAAWC,EAAY,YAAY,EAAGN,CAAS,EAEtE,OAAAO,EAAA,cAAC,SAAM,UAAWH,CAAA,EACfG,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,eAAoCC,CAAK,GAAKD,EAAM,aAAaC,EAAO,CAAE,KAAAN,EAAM,CAAC,CAChI,CAEJ,EAEAO,EAAeV"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import{B as E}from"./Button.js";import{Icon as x}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";import{M as c}from"./Table.js";const w=({numberOfColumns:m,expanded:t,hideDetailsText:s,toggleClick:p,children:d,className:l,mode:r=c.normal})=>{const i=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},l),b=o(a.table__cell,l,{[a["table__cell--compact"]]:r===c.compact}),_=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:i},e.createElement("td",{colSpan:m,className:b},e.createElement("div",{className:_},e.Children.map(d,n=>e.isValidElement(n)&&e.cloneElement(n,{mode:r})),e.createElement(E,{variant:"borderless",onClick:p,"aria-expanded":t,tabIndex:t?0:-1},s,e.createElement(x,{svgIcon:f})))))},y=w;export{w as T,y as a};
+import e from"react";import o from"classnames";import{B as x}from"./Button.js";import{Icon as f}from"./components/Icons/Icon.js";import w from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const C=({numberOfColumns:m,expanded:t,hideDetailsText:c,toggleClick:s,children:p,className:l,mode:d=n.normal,id:i})=>{const b=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},l),_=o(a.table__cell,l,{[a["table__cell--compact"]]:d===n.compact}),E=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:b,id:i},e.createElement("td",{colSpan:m,className:_},e.createElement("div",{className:E},e.Children.map(p,r=>e.isValidElement(r)&&e.cloneElement(r)),e.createElement(x,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},c,e.createElement(f,{svgIcon:w})))))},B=C;export{C as T,B as a};
 //# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.isValidElement<Props>(child) && React.cloneElement(child, { mode }))}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","mode","ModeType","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","child","Button","Icon","ChevronUp","TableExpandedRow$1"],"mappings":"oQA2BO,MAAMA,EAAmB,CAAC,CAC/B,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CAC9B,MAAMC,EAAgBC,EACpBC,EAAY,qBAAqB,EACjC,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAGT,CAAS,EAC3DI,CAAA,EAEIM,EAAiBF,EAAWC,EAAY,YAAgBL,EAAW,CACvE,CAACK,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EAEKK,EAAiBH,EAAWC,EAAY,+BAA+B,EAAG,CAC9E,CAACA,EAAY,yCAAyC,CAAC,EAAGT,CAAA,CAC3D,EAGC,OAAAY,EAAA,cAAC,MAAG,UAAWL,CAAA,kBACZ,KAAG,CAAA,QAASR,EAAiB,UAAWW,CACvC,EAAAE,EAAA,cAAC,OAAI,UAAWD,CAAA,EACbC,EAAM,SAAS,IAAIT,KAAmBS,EAAM,eAAsBC,CAAK,GAAKD,EAAM,aAAaC,EAAO,CAAE,KAAAR,CAAA,CAAM,CAAC,EAChHO,EAAA,cAACE,GAAO,QAAS,aAAc,QAASZ,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EACpG,EAAAC,EACAW,EAAA,cAAAG,EAAA,CAAK,QAASC,CAAW,CAAA,CAC5B,CACF,CACF,CACF,CAEJ,EAEAC,EAAenB"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","mode","ModeType","id","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","child","Button","Icon","ChevronUp","TableExpandedRow$1"],"mappings":"oQA6BO,MAAMA,EAAmB,CAAC,CAC/B,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,OAChB,GAAAC,CACF,IAAgC,CAC9B,MAAMC,EAAgBC,EACpBC,EAAY,qBAAqB,EACjC,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAGV,CAAS,EAC3DI,CAAA,EAEIO,EAAiBF,EAAWC,EAAY,YAAgBN,EAAW,CACvE,CAACM,EAAY,sBAAsB,CAAC,EAAGL,IAASC,EAAS,OAAA,CAC1D,EAEKM,EAAiBH,EAAWC,EAAY,+BAA+B,EAAG,CAC9E,CAACA,EAAY,yCAAyC,CAAC,EAAGV,CAAA,CAC3D,EAGC,OAAAa,EAAA,cAAC,MAAG,UAAWL,EAAe,GAAAD,GAC3BM,EAAA,cAAA,KAAA,CAAG,QAASd,EAAiB,UAAWY,CAAA,kBACtC,MAAI,CAAA,UAAWC,GACbC,EAAM,SAAS,IAAIV,EAAUW,GAASD,EAAM,eAAeC,CAAK,GAAKD,EAAM,aAAaC,CAAK,CAAC,EAC/FD,EAAA,cAACE,GAAO,QAAS,aAAc,QAASb,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EACpG,EAAAC,EACAY,EAAA,cAAAG,EAAA,CAAK,QAASC,CAAW,CAAA,CAC5B,CACF,CACF,CACF,CAEJ,EAEAC,EAAepB"}