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

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [4.3.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.3.0&targetVersion=GTv4.3.1) (2023-08-28)
+
+### Bug Fixes
+
+- gjorde panel focusable optional og focus border er fjernet
+  ([2fbda76](https://github.com/helsenorge/designsystem/commit/2fbda7641ed3b62ef62029611bce3b669f453a42)), closes
+  [#307802](https://github.com/helsenorge/designsystem/issues/307802)
+- windows high contrast mode checkbox og radiobutton er synlige
+  ([54acf09](https://github.com/helsenorge/designsystem/commit/54acf09210b713e4ba996a10f2fe08783e66102c)), closes
+  [#307340](https://github.com/helsenorge/designsystem/issues/307340)
+
 ## [4.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.4&targetVersion=GTv4.3.0) (2023-08-23)
 
 ### Features
@@ -811,12 +822,12 @@
 
 ### Bug Fixes
 
-- økt kontrast på understreking av lenker
-  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
-  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 - panel har avstand fra tittel til badge
   ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
   [#282359](https://github.com/helsenorge/designsystem/issues/282359)
+- økt kontrast på understreking av lenker
+  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
+  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/Close.js

@@ -1,2 +1,2 @@
-import o from"react";import d from"classnames";import{AnalyticsId as b}from"./constants.js";import{useBreakpoint as u,Breakpoint as k}from"./hooks/useBreakpoint.js";import{palette as C}from"./theme/palette.js";import{Icon as y}from"./components/Icons/Icon.js";import I from"./components/Icons/X.js";import e from"./components/Close/styles.module.scss";const B=o.forwardRef(function(s,r){const{small:t,testId:a,ariaLabel:l="Lukk",onClick:i,className:n,color:c=C.blueberry600,isHovered:m}=s,p=u()===k.xs||t?38:48,f=d(e.close,{[e["close--small"]]:t},n);return o.createElement("button",{ref:r,"data-testid":a,"data-analyticsid":b.Close,className:f,"aria-label":l,onClick:i,type:"button"},o.createElement(y,{svgIcon:I,color:c,size:p,isHovered:m}))}),F=B;export{F as C};
+import o from"react";import b from"classnames";import{AnalyticsId as k}from"./constants.js";import{useBreakpoint as C,Breakpoint as y}from"./hooks/useBreakpoint.js";import{useHover as R}from"./hooks/useHover.js";import{palette as v}from"./theme/palette.js";import{mergeRefs as I}from"./utils/refs.js";import{Icon as B}from"./components/Icons/Icon.js";import N from"./components/Icons/X.js";import t from"./components/Close/styles.module.scss";const g=o.forwardRef(function(r,s){const{small:e,testId:a,ariaLabel:m="Lukk",onClick:l,className:i,color:c=v.blueberry600}=r,n=C(),{hoverRef:f,isHovered:p}=R(),d=n===y.xs||e?38:48,u=b(t.close,{[t["close--small"]]:e},i);return o.createElement("button",{ref:I([s,f]),"data-testid":a,"data-analyticsid":k.Close,className:u,"aria-label":m,onClick:l,type:"button"},o.createElement(B,{svgIcon:N,color:c,size:d,isHovered:p}))}),$=g;export{$ as C};
 //# sourceMappingURL=Close.js.map

package/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icons';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: () => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n  /** Gives hovered effect to X icon */\n  isHovered?: boolean;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600, isHovered } = props;\n  const breakpoint = useBreakpoint();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","isHovered","iconSize","useBreakpoint","Breakpoint","closeClasses","classNames","styles","AnalyticsId","Icon","X","Close$1"],"mappings":"gWA6BA,MAAMA,EAAQC,EAAM,WAAW,SAA4BC,EAAmBC,EAA4C,CAClH,KAAA,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAY,OAAQ,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAQC,EAAQ,aAAc,UAAAC,CAAA,EAAcT,EAGrGU,EAFaC,MAEaC,EAAW,IAAMV,EAAQ,GAAK,GAExDW,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,cAAc,CAAC,EAAGb,CAAM,EAAGI,CAAS,EAG1F,OAAAP,EAAA,cAAC,SAAA,CACC,IAAAE,EACA,cAAaE,EACb,mBAAkBa,EAAY,MAC9B,UAAWH,EACX,aAAYT,EACZ,QAAAC,EACA,KAAK,QAAA,kBAEJY,EAAK,CAAA,QAASC,EAAG,MAAAX,EAAc,KAAMG,EAAU,UAAAD,EAAsB,CAAA,CAG5E,CAAC,EAEDU,EAAerB"}
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icons';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: () => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","mergeRefs","AnalyticsId","Icon","X","Close$1"],"mappings":"2bA6BA,MAAMA,EAAQC,EAAM,WAAW,SAA4BC,EAAmBC,EAA4C,CAClH,KAAA,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAY,OAAQ,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAQC,EAAQ,YAAA,EAAiBR,EAC1FS,EAAaC,IACb,CAAE,SAAAC,EAAU,UAAAC,CAAU,EAAIC,EAAS,EAEnCC,EAAWL,IAAeM,EAAW,IAAMb,EAAQ,GAAK,GAExDc,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,cAAc,CAAC,EAAGhB,CAAM,EAAGI,CAAS,EAG1F,OAAAP,EAAA,cAAC,SAAA,CACC,IAAKoB,EAAU,CAAClB,EAAKU,CAAQ,CAAC,EAC9B,cAAaR,EACb,mBAAkBiB,EAAY,MAC9B,UAAWJ,EACX,aAAYZ,EACZ,QAAAC,EACA,KAAK,QAAA,kBAEJgB,EAAK,CAAA,QAASC,EAAG,MAAAf,EAAc,KAAMO,EAAU,UAAAF,EAAsB,CAAA,CAG5E,CAAC,EAEDW,EAAezB"}

package/HighlightBox.js

@@ -0,0 +1,2 @@
+import e from"react";import l from"classnames";import"./theme/grid.js";import{useBreakpoint as C,Breakpoint as I}from"./hooks/useBreakpoint.js";import{AnalyticsId as p,IconSize as N}from"./constants.js";import{Icon as y}from"./components/Icons/Icon.js";import{T as B}from"./Title.js";import t from"./components/HighlightBox/styles.module.scss";var H=(i=>(i.medium="medium",i.large="large",i.fluid="fluid",i))(H||{});const u=({className:i,size:r,children:s})=>e.createElement("div",{className:i,"data-testid":"highlightbox-wrapper"},e.createElement("div",{className:t.highlightbox__row},e.createElement("div",{className:l(t.highlightbox__col,r==="medium"&&t["highlightbox__col--offset"])},s))),x=i=>{const{children:r,className:s}=i,a=l(t["highlightbox__content-wrapper"],s);return e.createElement("div",{className:a},e.createElement("div",{className:l(t.highlightbox__row)},r))},W=i=>{const{children:r,color:s="white",size:a="medium",testId:n,svgIcon:c,htmlMarkup:b="div",className:f,contentWrapperClassName:v,title:g,titleHtmlMarkup:k="h2"}=i,_=C(),o=l(t.highlightbox,t[`highlightbox--${s}`],t[`highlightbox--${a}`],c&&t["highlightbox--has-icon"],{container:a==="medium"||a==="large"},f),m=()=>{if(c){const w=a==="large"&&_&&_>=I.md?N.Medium:N.Small,E=e.createElement(B,{testId:"titleId",htmlMarkup:k,appearance:"title4"},g);return e.createElement(e.Fragment,null,e.createElement("div",{className:t.highlightbox__icon},e.createElement(y,{svgIcon:c,size:w}),g&&e.createElement("div",{className:t.mobile},E)),e.createElement("div",{className:t.highlightbox__content},g&&e.createElement("div",{className:t.desktop,"aria-hidden":"true"},E),r))}return r},h=b,d=l(t["highlightbox__content-wrapper"],v);return a==="medium"?e.createElement(u,{className:o,size:a},e.createElement(h,{className:d,"data-testid":n,"data-analyticsid":p.HighlightBox},m())):a==="large"&&c?e.createElement(u,{className:o,size:a},e.createElement(x,{className:d},e.createElement(h,{className:l(t.highlightbox__col,t["highlightbox__col--large-with-icon"]),"data-testid":n,"data-analyticsid":p.HighlightBox},m()))):a==="large"?e.createElement(u,{className:o,size:a},e.createElement(x,{className:d},e.createElement(h,{className:l(t.highlightbox__col,t["highlightbox__col--offset"]),"data-testid":n,"data-analyticsid":p.HighlightBox},m()))):a==="fluid"?e.createElement(h,{className:o,"data-testid":n},m()):null},j=W;export{j as H,H as a};
+//# sourceMappingURL=HighlightBox.js.map

package/HighlightBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightBox.js","sources":["../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightbox__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightBoxSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightbox__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightBox","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"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"}

package/ListHeader.js

@@ -1,2 +1,2 @@
-import n from"react";import h from"classnames";import{L as A}from"./ListHeaderText.js";import{useBreakpoint as k,Breakpoint as B}from"./hooks/useBreakpoint.js";import{isComponent as u,isComponentWithChildren as b}from"./utils/component.js";import{A as R,a as p}from"./Avatar.js";import{B as w}from"./Badge.js";import{Icon as X}from"./components/Icons/Icon.js";import{IconSize as C}from"./constants.js";import t from"./components/ListHeader/styles.module.scss";const P=(l,f,c,m,o,i)=>{if(u(l,E))return n.cloneElement(l,{chevronIcon:o,icon:i,isHovered:c,size:m});if(l)return n.createElement(E,{titleHtmlMarkup:f,chevronIcon:o,icon:i,isHovered:c,size:m},l)},N=(l,f=!1)=>{var d,v,_,s;let c,m;const o=[],i=[],a=[];n.Children.forEach(l,e=>{e===null||typeof e>"u"||(u(e,R)?c=e:u(e,A)?o.push(e):u(e,w)?m=e:typeof e=="string"?i.push(e):a.push(e))});const g=c!==void 0||o.length>0||m!==void 0&&i.length>0,r=a.length===0||b(a[0])&&typeof((v=(d=a[0])==null?void 0:d.props)==null?void 0:v.children)>"u";if(f||g||r)return{avatarChild:c,listHeaderTextChildren:o,badgeChild:m,stringChildren:i,remainingChildren:a};if(b(a[0]))return N((s=(_=a[0])==null?void 0:_.props)==null?void 0:s.children,!0)},E=n.forwardRef((l,f)=>{const{className:c="",titleHtmlMarkup:m="h2",chevronIcon:o,children:i,icon:a,isHovered:g,size:r,testId:d}=l,v=k(),_=r!=="small"&&!!(o||a),s=typeof i=="string",e=N(i),H=(e==null?void 0:e.avatarChild)||(e==null?void 0:e.listHeaderTextChildren)&&e.listHeaderTextChildren.length>0||(e==null?void 0:e.remainingChildren)&&(e==null?void 0:e.remainingChildren.length)>0,x=h(t["list-header"],{[t["list-header--for-element-content"]]:!s,[t["list-header--top-align-content"]]:H},c),L=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:s,[t["list-header__badge--right"]]:!s,[t["list-header__badge--"+r]]:!s&&r}),S=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:s,[t["list-header__chevron--"+r]]:!s&&r}),y=h(t["list-header__content"],{[t["list-header__content--string"]]:s,[t["list-header__content--element"]]:!s,[t["list-header__content--spacing"]]:!(e!=null&&e.avatarChild)&&!a}),I=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:s,[t["list-header__icon--for-element-content"]]:!s,[t["list-header__icon--for-element-content--"+r]]:!s&&r}),T=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:s,[t["list-header__avatar--for-element-content"]]:!s,[t["list-header__avatar--for-element-content--"+r]]:!s&&r}),z=m;return n.createElement("span",{"data-testid":d,className:x},_&&a&&n.createElement("span",{className:I},n.cloneElement(a,{size:v===B.xs?C.XSmall:C.Small,isHovered:g})),r!=="small"&&(e==null?void 0:e.avatarChild)&&n.createElement("span",{className:T},n.cloneElement(e.avatarChild,{size:p.xsmall})),n.createElement("span",{className:y},e==null?void 0:e.listHeaderTextChildren,!!(e!=null&&e.stringChildren.length)&&n.createElement(z,{className:t["list-header__title"]},e.stringChildren),e==null?void 0:e.remainingChildren),(e==null?void 0:e.badgeChild)&&n.createElement("span",{className:L},e.badgeChild),_&&o&&n.createElement("span",{className:S},n.createElement(X,{svgIcon:o,isHovered:g,size:C.XSmall})))});E.displayName="ListHeader";export{E as L,N as m,P as r};
+import n from"react";import h from"classnames";import{L as A}from"./ListHeaderText.js";import{useBreakpoint as k,Breakpoint as B}from"./hooks/useBreakpoint.js";import{isComponent as u,isComponentWithChildren as b}from"./utils/component.js";import{A as R,a as w}from"./Avatar.js";import{B as X}from"./Badge.js";import{Icon as M}from"./components/Icons/Icon.js";import{IconSize as C}from"./constants.js";import t from"./components/ListHeader/styles.module.scss";const P=(l,f,c,m,o,i)=>{if(u(l,E))return n.cloneElement(l,{chevronIcon:o,icon:i,isHovered:c,size:m});if(l)return n.createElement(E,{titleHtmlMarkup:f,chevronIcon:o,icon:i,isHovered:c,size:m},l)},N=(l,f=!1)=>{var d,v,_,s;let c,m;const o=[],i=[],a=[];n.Children.forEach(l,e=>{e===null||typeof e>"u"||(u(e,R)?c=e:u(e,A)?o.push(e):u(e,X)?m=e:typeof e=="string"?i.push(e):a.push(e))});const g=c!==void 0||o.length>0||m!==void 0&&i.length>0,r=a.length===0||b(a[0])&&typeof((v=(d=a[0])==null?void 0:d.props)==null?void 0:v.children)>"u";if(f||g||r)return{avatarChild:c,listHeaderTextChildren:o,badgeChild:m,stringChildren:i,remainingChildren:a};if(b(a[0]))return N((s=(_=a[0])==null?void 0:_.props)==null?void 0:s.children,!0)},E=n.forwardRef((l,f)=>{const{className:c="",titleHtmlMarkup:m="h2",chevronIcon:o,children:i,icon:a,isHovered:g,size:r,testId:d}=l,v=k(),_=r!=="small"&&!!(o||a),s=typeof i=="string",e=N(i),H=(e==null?void 0:e.avatarChild)||(e==null?void 0:e.listHeaderTextChildren)&&e.listHeaderTextChildren.length>0||(e==null?void 0:e.remainingChildren)&&(e==null?void 0:e.remainingChildren.length)>0,x=h(t["list-header"],{[t["list-header--for-element-content"]]:!s,[t["list-header--top-align-content"]]:H},c),L=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:s,[t["list-header__badge--right"]]:!s,[t["list-header__badge--"+r]]:!s&&r}),S=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:s,[t["list-header__chevron--"+r]]:!s&&r}),y=h(t["list-header__content"],{[t["list-header__content--string"]]:s,[t["list-header__content--element"]]:!s,[t["list-header__content--spacing"]]:!(e!=null&&e.avatarChild)&&!a}),I=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:s,[t["list-header__icon--for-element-content"]]:!s,[t["list-header__icon--for-element-content--"+r]]:!s&&r}),T=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:s,[t["list-header__avatar--for-element-content"]]:!s,[t["list-header__avatar--for-element-content--"+r]]:!s&&r}),z=m;return n.createElement("div",{"data-testid":d,className:x},_&&a&&n.createElement("span",{className:I},n.cloneElement(a,{size:v===B.xs?C.XSmall:C.Small,isHovered:g})),r!=="small"&&(e==null?void 0:e.avatarChild)&&n.createElement("span",{className:T},n.cloneElement(e.avatarChild,{size:w.xsmall})),n.createElement("div",{className:y},e==null?void 0:e.listHeaderTextChildren,!!(e!=null&&e.stringChildren.length)&&n.createElement(z,{className:t["list-header__title"]},e.stringChildren),e==null?void 0:e.remainingChildren),(e==null?void 0:e.badgeChild)&&n.createElement("span",{className:L},e.badgeChild),_&&o&&n.createElement("span",{className:S},n.createElement(M,{svgIcon:o,isHovered:g,size:C.XSmall})))});E.displayName="ListHeader";export{E as L,N as m,P as r};
 //# sourceMappingURL=ListHeader.js.map

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </div>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}

package/Table.js

@@ -1,2 +1,2 @@
-import c,{useState as d,useRef as x,useEffect as u}from"react";import H from"classnames";import{AnalyticsId as R}from"./constants.js";import{Breakpoint as v,useBreakpoint as A}from"./hooks/useBreakpoint.js";import{useLayoutEvent as D}from"./hooks/useLayoutEvent.js";import{H as I}from"./HorizontalScroll.js";import C from"./components/Table/styles.module.scss";import{isTouchDevice as N}from"./utils/device.js";const O=t=>t.variant===a.centeredoverflow||t.variant===a.block,_=t=>C[`table--${t.variant}-${t.breakpoint}`],$=(t,o)=>v[t.breakpoint]-v[o.breakpoint],z=(t,o)=>v[t.breakpoint]>=o,F=(t,o)=>{if(Array.isArray(t))return t.sort($),t.find(n=>z(n,o));if(t&&z(t,o))return t},L=(t,o,n,f)=>{const r=F(t,o),l=N(),e=n<=f;if(r)return r.variant===a.centeredoverflow&&!e&&r.fallbackVariant===a.horizontalscroll?{variant:l?a.horizontalscroll:a.none,breakpoint:r.breakpoint}:r.variant===a.centeredoverflow&&!e&&r.fallbackVariant!==a.centeredoverflow?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant===a.centeredoverflow?{variant:e?a.centeredoverflow:a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant!==a.horizontalscroll?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r},P=t=>t&&O(t)?_(t):void 0,G=(t,o)=>{if(t===o)return;const n=8;return{left:`${(t-o)/2-n}px`}};var a=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(a||{}),M=(t=>(t.compact="compact",t.normal="normal",t))(M||{});const X=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],tt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],et=({id:t,testId:o,className:n,children:f,breakpointConfig:r=X,mode:l="normal"})=>{const[e,y]=d(),[i,B]=d(0),[W,E]=d(0),[k,V]=d(window.innerWidth),b=x(null),p=A();u(()=>{y(L(r,p,i,k))},[r,p,i,k]),u(()=>{var s,w,h;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&B(((s=b.current)==null?void 0:s.getBoundingClientRect().width)??0),(e==null?void 0:e.variant)==="centeredoverflow"&&E(((h=(w=b.current)==null?void 0:w.parentElement)==null?void 0:h.getBoundingClientRect().width)??0)},[e]),D(()=>V(window.innerWidth),["resize"],100);const S=(e==null?void 0:e.variant)==="centeredoverflow"?G(W,i):void 0,T=P(e),U=H(C.table,T,n),m=c.createElement("table",{className:U,id:t,"data-testid":o,"data-analyticsid":R.Table,ref:b,style:S},c.Children.map(f,s=>c.cloneElement(s,{mode:l})));return(e==null?void 0:e.variant)==="horizontalscroll"?c.createElement(I,{childWidth:i,testId:"horizontal-scroll"},m):m};export{M,a as R,et as T,X as d,tt as s};
+import s,{useState as d,useRef as x,useEffect as u}from"react";import H from"classnames";import{AnalyticsId as R}from"./constants.js";import{Breakpoint as v,useBreakpoint as A}from"./hooks/useBreakpoint.js";import{useLayoutEvent as D}from"./hooks/useLayoutEvent.js";import{H as I}from"./HorizontalScroll.js";import C from"./components/Table/styles.module.scss";import{isTouchDevice as N}from"./utils/device.js";const O=t=>t.variant===a.centeredoverflow||t.variant===a.block,_=t=>C[`table--${t.variant}-${t.breakpoint}`],$=(t,o)=>v[t.breakpoint]-v[o.breakpoint],z=(t,o)=>v[t.breakpoint]>=o,F=(t,o)=>{if(Array.isArray(t))return t.sort($),t.find(n=>z(n,o));if(t&&z(t,o))return t},L=(t,o,n,f)=>{const r=F(t,o),l=N(),e=n<=f;if(r)return r.variant===a.centeredoverflow&&!e&&r.fallbackVariant===a.horizontalscroll?{variant:l?a.horizontalscroll:a.none,breakpoint:r.breakpoint}:r.variant===a.centeredoverflow&&!e&&r.fallbackVariant!==a.centeredoverflow?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant===a.centeredoverflow?{variant:e?a.centeredoverflow:a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant!==a.horizontalscroll?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r},P=t=>t&&O(t)?_(t):void 0,G=(t,o)=>{if(t===o)return;const n=8;return{left:`${(t-o)/2-n}px`}};var a=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(a||{}),M=(t=>(t.compact="compact",t.normal="normal",t))(M||{});const X=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],tt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],et=({id:t,testId:o,className:n,children:f,breakpointConfig:r=X,mode:l="normal"})=>{const[e,y]=d(),[c,B]=d(0),[W,E]=d(0),[k,V]=d(window.innerWidth),b=x(null),p=A();u(()=>{y(L(r,p,c,k))},[r,p,c,k]),u(()=>{var i,w,h;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&B(((i=b.current)==null?void 0:i.getBoundingClientRect().width)??0),(e==null?void 0:e.variant)==="centeredoverflow"&&E(((h=(w=b.current)==null?void 0:w.parentElement)==null?void 0:h.getBoundingClientRect().width)??0)},[e]),D(()=>V(window.innerWidth),["resize"],100);const S=(e==null?void 0:e.variant)==="centeredoverflow"?G(W,c):void 0,T=P(e),U=H(C.table,T,n),m=s.createElement("table",{className:U,id:t,"data-testid":o,"data-analyticsid":R.Table,ref:b,style:S},s.Children.map(f,i=>s.isValidElement(i)&&s.cloneElement(i,{mode:l})));return(e==null?void 0:e.variant)==="horizontalscroll"?s.createElement(I,{childWidth:c,testId:"horizontal-scroll"},m):m};export{M,a as R,et as T,X as d,tt as s};
 //# sourceMappingURL=Table.js.map

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.cloneElement(child as React.ReactElement<Props>, { 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<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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"}

package/TableBody.js

@@ -1,2 +1,2 @@
-import e from"react";import m from"classnames";import r from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const c=({className:o,children:a,mode:t=n.normal})=>{const s=m(r["table-body"],o);return e.createElement("tbody",{className:s},e.Children.map(a,l=>e.cloneElement(l,{mode:t})))},i=c;export{c as T,i as a};
+import e from"react";import m from"classnames";import r from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const b=({className:a,children:t,mode:s=n.normal})=>{const l=m(r["table-body"],a);return e.createElement("tbody",{className:l},e.Children.map(t,o=>e.isValidElement(o)&&e.cloneElement(o,{mode:s})))},i=b;export{b as T,i as a};
 //# sourceMappingURL=TableBody.js.map

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.cloneElement(child as React.ReactElement<Props>, { 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,EACxE,uBACG,QAAM,CAAA,UAAWI,CACf,EAAAG,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,aAAaC,EAAoC,CAAE,KAAAN,CAAK,CAAC,CAAC,CACzG,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<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"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import{B as x}from"./Button.js";import{Icon as E}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";const w=({numberOfColumns:c,expanded:t,hideDetailsText:m,toggleClick:s,children:p,className:r,mode:l=n.normal})=>{const d=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},r),i=o(a.table__cell,r,{[a["table__cell--compact"]]:l===n.compact}),b=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:d},e.createElement("td",{colSpan:c,className:i},e.createElement("div",{className:b},e.Children.map(p,_=>e.cloneElement(_,{mode:l})),e.createElement(x,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},m,e.createElement(E,{svgIcon:f})))))},u=w;export{w as T,u as a};
+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};
 //# 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.cloneElement(child as React.ReactElement<Props>, { 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,CAAA,kBACtC,MAAI,CAAA,UAAWC,GACbC,EAAM,SAAS,IAAIT,EAAUU,GAASD,EAAM,aAAaC,EAAoC,CAAE,KAAAR,CAAM,CAAA,CAAC,EACtGO,EAAA,cAAAE,EAAA,CAAO,QAAS,aAAc,QAASZ,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,IACpGC,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}\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"}

package/TableHead.js

@@ -1,2 +1,2 @@
-import t from"react";import m from"classnames";import e from"./components/Table/styles.module.scss";import{M as b}from"./Table.js";var p=(a=>(a.normal="normal",a.transparent="transparent",a.sortable="sortable",a))(p||{});const c=({category:a,className:l,children:s,mode:r})=>{const n=m(e.table__head,{[e["table__head--normal"]]:a==="normal",[e["table__head--transparent"]]:a==="transparent",[e["table__head--sortable"]]:a=="sortable",[e["table__head--compact"]]:r==b.compact},l);return t.createElement("thead",{className:n},t.Children.map(s,o=>t.cloneElement(o,{mode:r})))},f=c;export{p as H,c as T,f as a};
+import t from"react";import o from"classnames";import e from"./components/Table/styles.module.scss";import{M as b}from"./Table.js";var p=(a=>(a.normal="normal",a.transparent="transparent",a.sortable="sortable",a))(p||{});const _=({category:a,className:s,children:n,mode:l})=>{const m=o(e.table__head,{[e["table__head--normal"]]:a==="normal",[e["table__head--transparent"]]:a==="transparent",[e["table__head--sortable"]]:a=="sortable",[e["table__head--compact"]]:l==b.compact},s);return t.createElement("thead",{className:m},t.Children.map(n,r=>t.isValidElement(r)&&t.cloneElement(r,{mode:l})))},f=_;export{p as H,_ as T,f as a};
 //# sourceMappingURL=TableHead.js.map

package/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props {\n  /** Header category for styling */\n  category: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead = ({ category, className, children, mode }: Props): React.JSX.Element => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","tableHeadClass","classNames","tableStyles","ModeType","React","child","TableHead$1"],"mappings":"mIAOY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,SAAW,WAHDA,IAAAA,GAAA,CAAA,CAAA,EAiBL,MAAMC,EAAY,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,KAAAC,KAAqC,CAC9F,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CACE,CAACA,EAAY,qBAAqB,CAAC,EAAGN,IAAa,SACnD,CAACM,EAAY,0BAA0B,CAAC,EAAGN,IAAa,cACxD,CAACM,EAAY,uBAAuB,CAAC,EAAGN,GAAY,WACpD,CAACM,EAAY,sBAAsB,CAAC,EAAGH,GAAQI,EAAS,OAC1D,EACAN,CAAA,EAGF,uBACG,QAAM,CAAA,UAAWG,CACf,EAAAI,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,aAAaC,EAAoC,CAAE,KAAAN,CAAK,CAAC,CAAC,CACzG,CAEJ,EAEAO,EAAeX"}
+{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props {\n  /** Header category for styling */\n  category: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead = ({ category, className, children, mode }: Props): React.JSX.Element => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass}>\n      {React.Children.map(children, child => React.isValidElement<Props>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","tableHeadClass","classNames","tableStyles","ModeType","React","child","TableHead$1"],"mappings":"mIAOY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,SAAW,WAHDA,IAAAA,GAAA,CAAA,CAAA,EAiBL,MAAMC,EAAY,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,KAAAC,KAAqC,CAC9F,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CACE,CAACA,EAAY,qBAAqB,CAAC,EAAGN,IAAa,SACnD,CAACM,EAAY,0BAA0B,CAAC,EAAGN,IAAa,cACxD,CAACM,EAAY,uBAAuB,CAAC,EAAGN,GAAY,WACpD,CAACM,EAAY,sBAAsB,CAAC,EAAGH,GAAQI,EAAS,OAC1D,EACAN,CAAA,EAIA,OAAAO,EAAA,cAAC,SAAM,UAAWJ,CAAA,EACfI,EAAM,SAAS,IAAIN,EAAmBO,GAAAD,EAAM,eAAsBC,CAAK,GAAKD,EAAM,aAAaC,EAAO,CAAE,KAAAN,EAAM,CAAC,CAClH,CAEJ,EAEAO,EAAeX"}

package/TableRow.js

@@ -1,2 +1,2 @@
-import e from"react";import b from"classnames";import l from"./components/Table/styles.module.scss";import{M as c}from"./Table.js";import{B as E}from"./Button.js";import{Icon as w}from"./components/Icons/Icon.js";import C from"./components/Icons/ChevronDown.js";import T from"./components/Icons/ChevronUp.js";const d=({expanded:t,onClick:m,hideDetailsText:n,showDetailsText:a,mode:o=c.normal})=>{const r=b(l.table__cell,l["table__expander-cell-mobile"],{[l["table__expander-cell-mobile--expanded"]]:t,[l["table__cell--compact"]]:o===c.compact});return e.createElement("td",{className:r},e.createElement(E,{"aria-expanded":t,variant:"borderless",onClick:m},e.createElement(w,{svgIcon:t?T:C})," ",t?n:a))},v=d,x=({rowKey:t,hideDetailsText:m,showDetailsText:n,expandable:a,expanded:o,onClick:r,className:p,children:i,mode:s=c.normal})=>{const _=b(l["table-row"],{[l["table__row--expandable"]]:a,[l["table__row--expanded"]]:o},p);return e.createElement("tr",{className:_,onClick:r,key:t},e.Children.map(i,f=>e.cloneElement(f,{mode:s})),a&&e.createElement(v,{expanded:o,onClick:r,hideDetailsText:m,showDetailsText:n,mode:s}))},$=x;export{x as T,$ as a};
+import e from"react";import p from"classnames";import l from"./components/Table/styles.module.scss";import{M as s}from"./Table.js";import{B as f}from"./Button.js";import{Icon as w}from"./components/Icons/Icon.js";import C from"./components/Icons/ChevronDown.js";import T from"./components/Icons/ChevronUp.js";const d=({expanded:t,onClick:m,hideDetailsText:n,showDetailsText:a,mode:o=s.normal})=>{const r=p(l.table__cell,l["table__expander-cell-mobile"],{[l["table__expander-cell-mobile--expanded"]]:t,[l["table__cell--compact"]]:o===s.compact});return e.createElement("td",{className:r},e.createElement(f,{"aria-expanded":t,variant:"borderless",onClick:m},e.createElement(w,{svgIcon:t?T:C})," ",t?n:a))},v=d,x=({rowKey:t,hideDetailsText:m,showDetailsText:n,expandable:a,expanded:o,onClick:r,className:i,children:_,mode:c=s.normal})=>{const E=p(l["table-row"],{[l["table__row--expandable"]]:a,[l["table__row--expanded"]]:o},i);return e.createElement("tr",{className:E,onClick:r,key:t},e.Children.map(_,b=>e.isValidElement(b)&&e.cloneElement(b,{mode:c})),a&&e.createElement(v,{expanded:o,onClick:r,hideDetailsText:m,showDetailsText:n,mode:c}))},$=x;export{x as T,$ as a};
 //# sourceMappingURL=TableRow.js.map

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.cloneElement(child as React.ReactElement<Props>, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","mode","ModeType","cellClass","classNames","tableStyles","React","Button","Icon","ChevronUp","ChevronDown","TableExpanderCellMobile$1","TableRow","rowKey","expandable","className","children","tableRowClass","child","TableRow$1"],"mappings":"qTAcA,MAAMA,EAAkE,CAAC,CACvE,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,6BAA6B,EAAG,CAChG,CAACA,EAAY,uCAAuC,CAAC,EAAGR,EACxD,CAACQ,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EAGC,OAAAI,EAAA,cAAC,MAAG,UAAWH,CAAA,kBACZI,EAAO,CAAA,gBAAeV,EAAU,QAAQ,aAAa,QAAAC,CAAA,kBACnDU,EAAK,CAAA,QAASX,EAAWY,EAAYC,CAAa,CAAA,EAAE,IAAEb,EAAWE,EAAkBC,CACtF,CACF,CAEJ,EAEAW,EAAef,ECNFgB,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAd,EACA,gBAAAC,EACA,WAAAc,EACA,SAAAjB,EACA,QAAAC,EACA,UAAAiB,EACA,SAAAC,EACA,KAAAf,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMe,EAAgBb,EACpBC,EAAY,WAAW,EACvB,CACE,CAACA,EAAY,wBAAwB,CAAC,EAAGS,EACzC,CAACT,EAAY,sBAAsB,CAAC,EAAGR,CACzC,EACAkB,CAAA,EAIA,OAAAT,EAAA,cAAC,MAAG,UAAWW,EAAe,QAAAnB,EAAkB,IAAKe,CAAA,EAClDP,EAAM,SAAS,IAAIU,EAAmBE,GAAAZ,EAAM,aAAaY,EAAoC,CAAE,KAAAjB,EAAM,CAAC,EACtGa,GACCR,EAAA,cAACV,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,CAAA,CAAA,CAGN,CAEJ,EAEAkB,EAAeP"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.isValidElement<Props>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","mode","ModeType","cellClass","classNames","tableStyles","React","Button","Icon","ChevronUp","ChevronDown","TableExpanderCellMobile$1","TableRow","rowKey","expandable","className","children","tableRowClass","child","TableRow$1"],"mappings":"qTAcA,MAAMA,EAAkE,CAAC,CACvE,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,6BAA6B,EAAG,CAChG,CAACA,EAAY,uCAAuC,CAAC,EAAGR,EACxD,CAACQ,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EAGC,OAAAI,EAAA,cAAC,MAAG,UAAWH,CAAA,kBACZI,EAAO,CAAA,gBAAeV,EAAU,QAAQ,aAAa,QAAAC,CAAA,kBACnDU,EAAK,CAAA,QAASX,EAAWY,EAAYC,CAAa,CAAA,EAAE,IAAEb,EAAWE,EAAkBC,CACtF,CACF,CAEJ,EAEAW,EAAef,ECNFgB,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAd,EACA,gBAAAC,EACA,WAAAc,EACA,SAAAjB,EACA,QAAAC,EACA,UAAAiB,EACA,SAAAC,EACA,KAAAf,EAAOC,EAAS,MAClB,IAAM,CACJ,MAAMe,EAAgBb,EACpBC,EAAY,WAAW,EACvB,CACE,CAACA,EAAY,wBAAwB,CAAC,EAAGS,EACzC,CAACT,EAAY,sBAAsB,CAAC,EAAGR,CACzC,EACAkB,CAAA,EAIA,OAAAT,EAAA,cAAC,KAAG,CAAA,UAAWW,EAAe,QAAAnB,EAAkB,IAAKe,CAClD,EAAAP,EAAM,SAAS,IAAIU,EAAUE,GAASZ,EAAM,eAAsBY,CAAK,GAAKZ,EAAM,aAAaY,EAAO,CAAE,KAAAjB,CAAM,CAAA,CAAC,EAC/Ga,GACCR,EAAA,cAACV,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,KAAAC,CAAA,CAAA,CAGN,CAEJ,EAEAkB,EAAeP"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import o,{useState as _,useRef as U,useEffect as Y}from"react";import u from"classnames";import{FormMode as d,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{a as te}from"./uuid.js";import{E as re}from"./ErrorWrapper.js";import{a as ae}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=a=>{const m="2rem",n="16px",p="4px";return`calc(${a*ee}px + ${m} + ${n} + ${p})`},I=o.forwardRef((a,m)=>{const{maxCharacters:n,maxText:p,width:h,testId:A,defaultValue:f,marginBottom:M,transparent:N,mode:s=d.onwhite,label:$,textareaId:w=te(),minRows:b=3,maxRows:c=10,grow:g,errorText:C,autoFocus:B,disabled:E,name:k,autoComplete:L,placeholder:S,readOnly:D,required:F,onChange:T,...V}=a,[q,y]=_(b),[R,z]=_(f||""),i=U(null),v=e=>{const l=e.rows;e.rows=b;const r=Math.floor((e.scrollHeight-16)/28);r===l&&(e.rows=r),r>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),r<c?y(r):y(c)},G=s===d.ondark,O=s===d.onblueberry,P=!!n&&R.toString().length>n,W=s===d.oninvalid||!!C||P,X=u(t.textarea,{[t["textarea--gutterBottom"]]:M}),j=u(t["content-wrapper"],{[t["content-wrapper--transparent"]]:N,[t["content-wrapper--on-blueberry"]]:O,[t["content-wrapper--on-dark"]]:G,[t["content-wrapper--invalid"]]:W,[t["content-wrapper--disabled"]]:a.disabled}),J=u(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:a.disabled});Y(()=>{var e,x,l;if(g&&((e=i.current)!=null&&e.children)&&((x=i.current)!=null&&x.children[0])){const r=(l=i.current)==null?void 0:l.children[0];v(r)}},[]);const K=e=>{g&&v(e.target),z(e.target.value)},Q=e=>{T&&T(e),K(e)},H=h?oe(h):void 0;return o.createElement(re,{errorText:C},o.createElement("div",{"data-testid":A,"data-analyticsid":Z.Textarea,className:X},ae($,w,s,E),o.createElement("div",{className:j,ref:i,style:{maxWidth:H}},o.createElement("textarea",{rows:q,defaultValue:f,id:w,className:J,ref:m,"aria-describedby":a["aria-describedby"]??void 0,"aria-invalid":!!W,autoFocus:B,disabled:E,name:k,autoComplete:L,placeholder:S,readOnly:D,required:F,onChange:Q,...V})),n&&o.createElement(ne,{maxCharacters:n,length:R.toString().length,maxText:p,mode:s,maxWidth:H})))});I.displayName="Textarea";const ue=I;export{ue as T};
+import n,{useState as I,useRef as U,useEffect as Y}from"react";import x from"classnames";import{FormMode as d,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{a as te}from"./uuid.js";import{E as re}from"./ErrorWrapper.js";import{a as ae}from"./Label.js";import{M as oe}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const ne=a=>{const m="2rem",o="16px",p="4px";return`calc(${a*ee}px + ${m} + ${o} + ${p})`},A=n.forwardRef((a,m)=>{const{maxCharacters:o,maxText:p,width:h,testId:M,defaultValue:f,marginBottom:N,transparent:$,mode:s=d.onwhite,label:B,textareaId:w=te(),minRows:b=3,maxRows:i=10,grow:g,errorText:C,autoFocus:k,disabled:E,name:L,autoComplete:T,placeholder:S,readOnly:D,required:F,onChange:y,...V}=a,[q,R]=I(b),[v,z]=I(f||""),c=U(null),W=e=>{const l=e.rows;e.rows=b;const r=Math.floor((e.scrollHeight-16)/28);r===l&&(e.rows=r),r>=i&&(e.rows=i,e.scrollTop=e.scrollHeight),r<i?R(r):R(i)},G=s===d.ondark,O=s===d.onblueberry,P=!!o&&v.toString().length>o,H=s===d.oninvalid||!!C||P,X=x(t.textarea,{[t["textarea--gutterBottom"]]:N}),j=x(t["content-wrapper"],{[t["content-wrapper--transparent"]]:$,[t["content-wrapper--on-blueberry"]]:O,[t["content-wrapper--on-dark"]]:G,[t["content-wrapper--invalid"]]:H,[t["content-wrapper--disabled"]]:a.disabled}),J=x(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:a.disabled});Y(()=>{var e,u,l;if(g&&((e=c.current)!=null&&e.children)&&((u=c.current)!=null&&u.children[0])){const r=(l=c.current)==null?void 0:l.children[0];W(r)}},[]);const K=e=>{g&&W(e.target),z(e.target.value)},Q=e=>{y&&y(e),K(e)},_=h?ne(h):void 0;return n.createElement(re,{errorText:C},n.createElement("div",{"data-testid":M,"data-analyticsid":Z.Textarea,className:X},ae(B,w,s,E),n.createElement("div",{className:j,ref:c,style:{maxWidth:_}},n.createElement("textarea",{rows:q,defaultValue:f,id:w,className:J,ref:m,"aria-describedby":a["aria-describedby"]??void 0,"aria-invalid":!!H,autoFocus:k,disabled:E,name:L,autoComplete:T||void 0,placeholder:S,readOnly:D,required:F,onChange:Q,...V})),o&&n.createElement(oe,{maxCharacters:o,length:v.toString().length,maxText:p,mode:s,maxWidth:_})))});A.displayName="Textarea";const xe=A;export{xe as T};
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\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  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\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  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import t,{useState as m}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"../Modal/styles.module.scss";const a=t.forwardRef(function(o,d){const[i,r]=m(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),i&&t.createElement(e,{...o,onClose:()=>r(!1)}))}),V=a;export{V as default};
+import t,{useState as m}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Close.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"../Modal/styles.module.scss";const a=t.forwardRef(function(o,d){const[i,r]=m(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),i&&t.createElement(e,{...o,onClose:()=>r(!1)}))}),X=a;export{X as default};
 //# sourceMappingURL=index.js.map

package/components/ButtonWithModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\n\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal","ButtonWithModal"],"mappings":"urCAaA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAG9C,OAAAL,EAAA,cAAC,MAAI,CAAA,cAAaC,EAAM,MAAA,kBACrBK,EAAO,CAAA,QAAS,IAAMF,EAAa,EAAI,GAAIH,EAAM,UAAW,EAC5DE,GAAaH,EAAA,cAACO,EAAO,CAAA,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAA,CAAG,CACtE,CAEJ,CAAC,EAEDI,EAAeT"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\n\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal","ButtonWithModal"],"mappings":"mtCAaA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAG9C,OAAAL,EAAA,cAAC,MAAI,CAAA,cAAaC,EAAM,MAAA,kBACrBK,EAAO,CAAA,QAAS,IAAMF,EAAa,EAAI,GAAIH,EAAM,UAAW,EAC5DE,GAAaH,EAAA,cAACO,EAAO,CAAA,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAA,CAAG,CACtE,CAEJ,CAAC,EAEDI,EAAeT"}

package/components/Close/Close.d.ts

@@ -12,8 +12,6 @@ export interface CloseProps {
     className?: string;
     /** Gives color to the svg */
     color?: string;
-    /** Gives hovered effect to X icon */
-    isHovered?: boolean;
 }
 declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
 export default Close;

package/components/Close/Close.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Close.d.ts","sourceRoot":"","sources":["../../../src/components/Close/Close.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,sFAqBT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Close.d.ts","sourceRoot":"","sources":["../../../src/components/Close/Close.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,sFAsBT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Close/componentdata.json

@@ -1 +1 @@
-{"props":{"small":{"defaultValue":null,"description":"Keeps the icon small for all screen sizes","name":"small","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClick","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"(() => void)"}},"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button","name":"ariaLabel","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":null,"description":"Gives color to the svg","name":"color","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"isHovered":{"defaultValue":null,"description":"Gives hovered effect to X icon","name":"isHovered","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"small":{"defaultValue":null,"description":"Keeps the icon small for all screen sizes","name":"small","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClick","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"(() => void)"}},"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button","name":"ariaLabel","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":null,"description":"Gives color to the svg","name":"color","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Close/index.js

@@ -1,2 +1,2 @@
-import{C as r}from"../../Close.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/X.js";import"./styles.module.scss";export{r as default};
+import{C as r}from"../../Close.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../theme/palette.js";import"../../utils/refs.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/X.js";import"./styles.module.scss";export{r as default};
 //# sourceMappingURL=index.js.map

package/components/ExpanderHierarchy/ExpanderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}