@helsenorge/designsystem-react 3.2.1-beta.1 → 4.1.0

package/CHANGELOG.md

@@ -1,17 +1,26 @@
-## 4.0.1-beta.0 (2023-05-11)
+## [4.0.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.0.0&targetVersion=GTv4.0.1) (2023-05-30)
+
+## [4.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv3.2.1&targetVersion=GTv4.0.0) (2023-05-23)
+
+### Features
+
+- label tas i bruk i form-komponenter
+  ([042ae21](https://github.com/helsenorge/designsystem/commit/042ae214dd1f8cb1c0baf978d29f472031d830fb)), closes
+  [#274702](https://github.com/helsenorge/designsystem/issues/274702)
+- lagt til en midlertidig iconwall story
+  ([fef2b52](https://github.com/helsenorge/designsystem/commit/fef2b522c997c11003c0af86b6310419be969285))
 
 ### Bug Fixes
 
-- standard formatering for label string er satt til semibold
-  ([fe83c12](https://github.com/helsenorge/designsystem/commit/fe83c12baddd3f5014a9397c4c3710f071d9bf24))
+- ny hoverfarge ([c0583ab](https://github.com/helsenorge/designsystem/commit/c0583abf4e9f6d5168b7bb77841c3261de524603)), closes
+  [#300613](https://github.com/helsenorge/designsystem/issues/300613)
 
-## 4.0.0-beta.0 (2023-05-11)
+## [3.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv3.2.0&targetVersion=GTv3.2.1) (2023-05-15)
 
 ### Features
 
-- label tas i bruk i form komponenter
-  ([61ef550](https://github.com/helsenorge/designsystem/commit/61ef5500644f2e58f4cde3c0058772d105f8c654)), closes
-  [#274702](https://github.com/helsenorge/designsystem/issues/274702)
+- nye ikoner ([9694a00](https://github.com/helsenorge/designsystem/commit/9694a0061f412d16241f8be9e051805711ec2cee)), closes
+  [#301797](https://github.com/helsenorge/designsystem/issues/301797)
 
 ## [3.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv3.1.6&targetVersion=GTv3.2.0) (2023-05-09)
 

package/Input.js

@@ -1,2 +1,2 @@
-import r,{useRef as re,useState as ae}from"react";import g from"classnames";import{FormMode as p,FormVariant as ne,IconSize as y,AnalyticsId as oe,AVERAGE_CHARACTER_WIDTH_PX as ie}from"./constants.js";import{useBreakpoint as ce,Breakpoint as le}from"./hooks/useBreakpoint.js";import{getColor as I}from"./theme/currys/color.js";import{a as se}from"./uuid.js";import{E as de}from"./ErrorWrapper.js";import{Icon as pe}from"./components/Icons/Icon.js";import{a as me}from"./Label.js";import{M as ue}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var be=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(be||{});const fe=(e,i,m)=>{const c=i?"1.5rem":"2rem",u=i?`${m}px`:"0px",b="4px";return`calc(${e*ie}px + ${c} + ${u} + ${b})`},S=r.forwardRef((e,i)=>{const{className:m,defaultValue:c,placeholder:u,type:b="text",inputId:w=se(),name:N,transparent:$=!1,icon:n,iconRight:f,mode:a,variant:A,label:F,error:M,errorText:x,testId:z,disabled:o,readOnly:B,autoComplete:D,afterInputChildren:V,width:v,required:H,onChange:E,onKeyDown:X,autoFocus:q,maxCharacters:l,maxText:G,...K}=e,L=ce(),s=re(null),[k,O]=ae(c||""),P=a===p.ondark,j=a===p.onblueberry,J=!!l&&k.toString().length>l,h=a===p.oninvalid||!!x||!!M||J,C=A===ne.bigform,Q=$&&a!==p.ondark&&!h,U=g(t["input-wrapper"],m),Y=g(t["content-wrapper"],{[t["content-wrapper--transparent"]]:Q,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:P,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--bigform"]]:C,[t["content-wrapper--disabled"]]:o,[t["content-wrapper--with-icon"]]:n}),Z=g(t["content-wrapper__input"],{[t["content-wrapper__input--bigform"]]:C,[t["content-wrapper__input--disabled"]]:o}),T=o?I("neutral",500):I("black"),W=L===le.xs||!C?y.XSmall:y.Small,_=()=>n!==void 0?r.createElement(pe,{color:T,size:W,svgIcon:n}):null,ee=()=>{if(s&&s.current&&n){const d=f?0:1;s.current.children[d].focus()}},te=d=>{E&&E(d),O(d.target.value)},R=v?fe(v,!!n,W):void 0;return r.createElement(de,{errorText:x},r.createElement("div",{"data-testid":z,"data-analyticsid":oe.Input,className:U},me(F,w,a,o),r.createElement("div",{onClick:ee,ref:s,className:Y,style:{maxWidth:R}},!f&&_(),r.createElement("input",{onChange:te,onKeyDown:X,name:N,type:b,defaultValue:c,id:w,className:Z,ref:i,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!h,disabled:o,placeholder:u,readOnly:B,autoComplete:D||"off",required:H,autoFocus:q,...K}),f&&_()),l&&r.createElement(ue,{maxCharacters:l,length:k.toString().length,maxText:G,mode:a,maxWidth:R}),V))});S.displayName="Input";const Ie=S;export{Ie as I,be as a};
+import r,{useRef as re,useState as ne}from"react";import C from"classnames";import{FormMode as i,FormVariant as ae,IconSize as y,AnalyticsId as oe,AVERAGE_CHARACTER_WIDTH_PX as ie}from"./constants.js";import{useBreakpoint as ce,Breakpoint as le}from"./hooks/useBreakpoint.js";import{getColor as I}from"./theme/currys/color.js";import{a as se}from"./uuid.js";import{E as de}from"./ErrorWrapper.js";import{Icon as pe}from"./components/Icons/Icon.js";import{a as me}from"./Label.js";import{M as ue}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var be=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(be||{});const fe=(e,c,m)=>{const l=c?"1.5rem":"2rem",u=c?`${m}px`:"0px",b="4px";return`calc(${e*ie}px + ${l} + ${u} + ${b})`},S=r.forwardRef((e,c)=>{const{className:m,defaultValue:l,placeholder:u,type:b="text",inputId:g=se(),name:N,transparent:$=!1,icon:a,iconRight:f,mode:n=i.onwhite,variant:A,label:F,error:M,errorText:x,testId:z,disabled:o,readOnly:B,autoComplete:D,afterInputChildren:V,width:v,required:H,onChange:E,onKeyDown:X,autoFocus:q,maxCharacters:s,maxText:G,...K}=e,L=ce(),d=re(null),[k,O]=ne(l||""),P=n===i.ondark,j=n===i.onblueberry,J=!!s&&k.toString().length>s,h=n===i.oninvalid||!!x||!!M||J,w=A===ae.bigform,Q=$&&n!==i.ondark&&!h,U=C(t["input-wrapper"],m),Y=C(t["content-wrapper"],{[t["content-wrapper--transparent"]]:Q,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:P,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--bigform"]]:w,[t["content-wrapper--disabled"]]:o,[t["content-wrapper--with-icon"]]:a}),Z=C(t["content-wrapper__input"],{[t["content-wrapper__input--bigform"]]:w,[t["content-wrapper__input--disabled"]]:o}),T=o?I("neutral",500):I("black"),W=L===le.xs||!w?y.XSmall:y.Small,_=()=>a!==void 0?r.createElement(pe,{color:T,size:W,svgIcon:a}):null,ee=()=>{if(d&&d.current&&a){const p=f?0:1;d.current.children[p].focus()}},te=p=>{E&&E(p),O(p.target.value)},R=v?fe(v,!!a,W):void 0;return r.createElement(de,{errorText:x},r.createElement("div",{"data-testid":z,"data-analyticsid":oe.Input,className:U},me(F,g,n,o),r.createElement("div",{onClick:ee,ref:d,className:Y,style:{maxWidth:R}},!f&&_(),r.createElement("input",{onChange:te,onKeyDown:X,name:N,type:b,defaultValue:l,id:g,className:Z,ref:c,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!h,disabled:o,placeholder:u,readOnly:B,autoComplete:D||"off",required:H,autoFocus:q,...K}),f&&_()),s&&r.createElement(ue,{maxCharacters:s,length:k.toString().length,maxText:G,mode:n,maxWidth:R}),V))});S.displayName="Input";const Ie=S;export{Ie as I,be as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(defaultValue || '');\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","FormMode","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode = FormMode.onwhite,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(defaultValue || '');\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","FormMode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}

package/Label.js

@@ -1,2 +1,2 @@
-import e from"react";import y from"classnames";import{AnalyticsId as S,FormMode as F}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=y(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===F.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},j=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},q=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),B=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=y(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((f,x)=>{const N=y(r.label,{[r["label--semibold"]]:f.type==="semibold",[r["label--on-dark"]]:i===F.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":f.hideFromScreenReader,className:N,key:x},f.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===F.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},C=d;export{C as L,z as S,q as a,j as g,B as r};
+import e from"react";import F from"classnames";import{AnalyticsId as S,FormMode as f}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=F(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===f.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},j=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},q=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),B=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i=f.onwhite,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=F(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((y,x)=>{const N=F(r.label,{[r["label--semibold"]]:y.type==="semibold",[r["label--on-dark"]]:i===f.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":y.hideFromScreenReader,className:N,key:x},y.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===f.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},C=d;export{C as L,z as S,q as a,j as g,B as r};
 //# sourceMappingURL=Label.js.map

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: FormMode;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: keyof typeof FormMode;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            disabled,\n          })\n        : typeof label === 'string' && (\n            <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n          )}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  mode: FormMode,\n  disabled?: boolean,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  bigform?: boolean\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            children: children,\n            disabled,\n            labelClassName: labelClassName,\n            labelTextClassName: labelTextClassName,\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: bigform ? undefined : label.props.sublabel,\n            statusDot: bigform ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              mode={mode}\n              disabled={disabled}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  disabled,\n  htmlFor,\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  mode,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n          [styles['label--disabled']]: disabled,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={styles['label-wrapper__inner']}>\n        <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span>{mapLabels()}</span>\n          </span>\n        </label>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              mode: mode as FormMode,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: FormMode;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: keyof typeof FormMode;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            disabled,\n          })\n        : typeof label === 'string' && (\n            <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n          )}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  mode: FormMode,\n  disabled?: boolean,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  bigform?: boolean\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            children: children,\n            disabled,\n            labelClassName: labelClassName,\n            labelTextClassName: labelTextClassName,\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: bigform ? undefined : label.props.sublabel,\n            statusDot: bigform ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              mode={mode}\n              disabled={disabled}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  disabled,\n  htmlFor,\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  mode = FormMode.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n          [styles['label--disabled']]: disabled,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={styles['label-wrapper__inner']}>\n        <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span>{mapLabels()}</span>\n          </span>\n        </label>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              mode: mode as FormMode,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"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"}

package/RadioButton.js

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

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onGrey = mode === FormMode.ongrey;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses(ref as React.RefObject<HTMLInputElement>);\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label__bigform']]: bigform,\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(true);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={refObject}\n          defaultChecked={defaultChecked}\n          aria-describedby={props['aria-describedby'] ?? undefined}\n          required={required}\n          {...rest}\n          onChange={(e): void => change(e)}\n        />\n      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","FormMode","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onGrey = mode === FormMode.ongrey;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses(ref as React.RefObject<HTMLInputElement>);\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label__bigform']]: bigform,\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(true);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={refObject}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"wUAkCO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EAAOC,EAAS,QAChB,KAAAC,EAAOJ,EACP,QAAAK,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQC,EAAaV,CAAK,EAC1B,OAAAW,EACA,SAAAC,EACA,GAAGC,CACD,EAAAnB,EACEoB,EAAUN,GAASL,IAASC,EAAS,UACrCW,EAASZ,IAASC,EAAS,OAC3BY,EAAcb,IAASC,EAAS,YAChCa,EAASd,IAASC,EAAS,OAC3Bc,EAAWf,IAASC,EAAS,UAC7Be,EAAUb,IAAYc,EAAY,QAClC,CAACC,EAASC,CAAa,EAAIC,EAAkB1B,CAAc,EAC3D,CAAE,UAAA2B,EAAW,UAAAC,CAAU,EAAIC,EAAiB/B,CAAwC,EACpFgC,EAA4BC,EAAWC,EAAkB,sBAAsB,EAAG,CACtF,CAACA,EAAkB,kCAAkC,CAAC,EAAGtB,EACzD,CAACsB,EAAkB,+BAA+B,CAAC,EAAGV,EACtD,CAACU,EAAkB,wCAAwC,CAAC,EAAGV,GAAWM,EAC1E,CAACI,EAAkB,yCAAyC,CAAC,EAAGV,GAAWE,GAAWI,EACtF,CAACI,EAAkB,wCAAwC,CAAC,EAAGV,GAAWD,GAAYO,EACtF,CAACI,EAAkB,6CAA6C,CAAC,EAAGV,GAAWH,GAAeS,CAAA,CAC/F,EACKK,EAA0BF,EAAWC,EAAkB,oBAAoB,EAAG,CAClF,CAACA,EAAkB,8BAA8B,CAAC,EAAG9B,EACrD,CAAC8B,EAAkB,6BAA6B,CAAC,EAAGd,EACpD,CAACc,EAAkB,6BAA6B,CAAC,EAAGf,EACpD,CAACe,EAAkB,6BAA6B,CAAC,EAAGV,EACpD,CAACU,EAAkB,sCAAsC,CAAC,EAAGV,GAAWF,GAAU,CAACI,EACnF,CAACQ,EAAkB,2CAA2C,CAAC,EAAGb,GAAe,CAACK,GAAWF,EAC7F,CAACU,EAAkB,uCAAuC,CAAC,EAAGV,GAAWE,GAAW,CAACH,EACrF,CAACW,EAAkB,uCAAuC,CAAC,EAAGV,GAAWpB,EACzE,CAAC8B,EAAkB,+CAA+C,CAAC,EAAGV,GAAWE,GAAWH,CAAA,CAC7F,EACKa,EAAqBH,EACzBC,EAAkB,cAAc,EAChC,CACE,CAACA,EAAkB,uBAAuB,CAAC,EAAGd,EAC9C,CAACc,EAAkB,wBAAwB,CAAC,EAAG9B,EAC/C,CAAC8B,EAAkB,4BAA4B,CAAC,EAAGb,EACnD,CAACa,EAAkB,uBAAuB,CAAC,EAAGf,EAC9C,CAACe,EAAkB,uBAAuB,CAAC,EAAGV,EAC9C,CAACU,EAAkB,iCAAiC,CAAC,EAAGV,GAAWpB,EACnE,CAAC8B,EAAkB,gCAAgC,CAAC,EAAGV,GAAWL,CACpE,EACAlB,CAAA,EAEIoC,EAAcJ,EAAWC,EAAkB,qBAAqB,CAAC,EAEjEI,EAAUC,GAAiD,CAC/DZ,EAAc,EAAI,EAClBxB,GAAYA,EAASoC,CAAC,CAAA,EAGlBC,EAAkB,IACtB1C,EAAA,cAAC,QAAA,CACC,GAAIQ,EACJ,KAAAI,EACA,UAAW0B,EACX,KAAK,QACL,SAAAhC,EACA,MAAAU,EACA,IAAKe,EACL,eAAA3B,EACA,mBAAkBH,EAAM,kBAAkB,GAAK,OAC/C,SAAAkB,EACC,GAAGC,EACJ,SAAWqB,GAAYD,EAAOC,CAAC,CAAA,CAAA,EAInC,OACGzC,EAAA,cAAA,MAAA,CAAI,cAAakB,EAAQ,mBAAkByB,EAAY,YAAa,UAAWT,CAAA,EAC7EpB,GAAcd,EAAA,cAAA,IAAA,CAAE,UAAWuC,CAAA,EAAczB,CAAU,EACnD8B,EACCrC,EACAmC,EAAgB,EAChBlC,EACAE,EACAJ,EACA+B,EACA,OACAD,EAAkB,8BAA8B,EAChDV,CAAA,CAEJ,CAEJ,CAAC,EAED3B,EAAY,YAAc,cAE1B,MAAA8C,EAAe9C"}

package/Select.js

@@ -1,2 +1,2 @@
-import t from"react";import b from"classnames";import{AnalyticsId as T,IconSize as _,AVERAGE_CHARACTER_WIDTH_PX as $}from"./constants.js";import{useUuid as q}from"./hooks/useUuid.js";import{getColor as f}from"./theme/currys/color.js";import{E as z}from"./ErrorWrapper.js";import{Icon as D}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{a as L}from"./Label.js";import e from"./components/Select/styles.module.scss";const V=a=>{const r="2rem";return`calc(${a*$}px + ${r})`},X=(a,r)=>r?f("neutral",500):f(a?"cherry":"blueberry",600),B=t.forwardRef(function(r,s){const{afterLabelChildren:F,className:v,children:y,concept:w="normal",disabled:o,error:C,errorText:c,label:E,selectId:i,name:I=i,mode:n,testId:S,width:d,required:m,value:h,defaultValue:N,...R}=r,p=q(i),u=n==="onblueberry",l=n==="oninvalid"||!!c||!!C,W=X(l,!!o),g=d?V(d):void 0,x=b(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:w==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:o},v),A=b(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:l});return t.createElement(z,{errorText:c},t.createElement("div",{"data-testid":S,"data-analyticsid":T.Select,className:e["select-wrapper"],style:{maxWidth:g}},L(E,p,n,o),t.createElement("div",{className:x},t.createElement(D,{className:e["select-arrow"],svgIcon:H,color:W,size:_.XSmall}),t.createElement("select",{"aria-invalid":!!l,id:p,name:I,className:A,disabled:o,ref:s,required:m,"aria-describedby":r["aria-describedby"]??void 0,"aria-required":!!m,value:h,defaultValue:N,...R},y))))}),Y=B;export{Y as S,B as a};
+import t from"react";import b from"classnames";import{FormMode as T,AnalyticsId as _,IconSize as $,AVERAGE_CHARACTER_WIDTH_PX as q}from"./constants.js";import{useUuid as z}from"./hooks/useUuid.js";import{getColor as f}from"./theme/currys/color.js";import{E as D}from"./ErrorWrapper.js";import{Icon as F}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{a as L}from"./Label.js";import e from"./components/Select/styles.module.scss";const M=a=>{const r="2rem";return`calc(${a*q}px + ${r})`},V=(a,r)=>r?f("neutral",500):f(a?"cherry":"blueberry",600),X=t.forwardRef(function(r,s){const{afterLabelChildren:B,className:v,children:w,concept:y="normal",disabled:o,error:C,errorText:c,label:E,selectId:i,name:h=i,mode:l=T.onwhite,testId:I,width:d,required:m,value:S,defaultValue:N,...R}=r,p=z(i),u=l==="onblueberry",n=l==="oninvalid"||!!c||!!C,W=V(n,!!o),g=d?M(d):void 0,x=b(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:y==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:n,[e["select-inner-wrapper--disabled"]]:o},v),A=b(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:n});return t.createElement(D,{errorText:c},t.createElement("div",{"data-testid":I,"data-analyticsid":_.Select,className:e["select-wrapper"],style:{maxWidth:g}},L(E,p,l,o),t.createElement("div",{className:x},t.createElement(F,{className:e["select-arrow"],svgIcon:H,color:W,size:$.XSmall}),t.createElement("select",{"aria-invalid":!!n,id:p,name:h,className:A,disabled:o,ref:s,required:m,"aria-describedby":r["aria-describedby"]??void 0,"aria-required":!!m,value:S,defaultValue:N,...R},w))))}),Z=X;export{Z as S,X as a};
 //# sourceMappingURL=Select.js.map

package/Select.js.map

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

package/Table.js

@@ -0,0 +1,2 @@
+import c,{useState as d,useRef as _,useEffect as u}from"react";import H from"classnames";import{AnalyticsId as R}from"./constants.js";import{Breakpoint as v,useBreakpoint as x}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,A=t=>C[`table--${t.variant}-${t.breakpoint}`],L=(t,o)=>v[t.breakpoint]-v[o.breakpoint],z=(t,o)=>v[t.breakpoint]>=o,P=(t,o)=>{if(Array.isArray(t))return t.sort(L),t.find(n=>z(n,o));if(t&&z(t,o))return t},$=(t,o,n,f)=>{const r=P(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},F=t=>t&&O(t)?A(t):void 0,G=(t,o)=>({left:`${(t-o)/2-8}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,W]=d(),[i,y]=d(0),[B,T]=d(0),[k,E]=d(window.innerWidth),b=_(null),p=x();u(()=>{W($(r,p,i,k))},[r,p,i,k]),u(()=>{var s,h,w;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&y(((s=b.current)==null?void 0:s.getBoundingClientRect().width)??0),(e==null?void 0:e.variant)==="centeredoverflow"&&T(((w=(h=b.current)==null?void 0:h.parentElement)==null?void 0:w.getBoundingClientRect().width)??0)},[e]),D(()=>E(window.innerWidth),["resize"],100);const U=(e==null?void 0:e.variant)==="centeredoverflow"?G(B,i):void 0,V=F(e),S=H(C.table,V,n),m=c.createElement("table",{className:S,id:t,"data-testid":o,"data-analyticsid":R.Table,ref:b,style:U},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};
+//# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -0,0 +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 => {\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","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 t from"react";const a=function({className:e,children:o}){return t.createElement("tbody",{className:e},o)},c=a;export{a as T,c 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 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};
 //# 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\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}\n\nexport const TableBody = function TableBody({ className, children }: Props) {\n  return <tbody className={className}>{children}</tbody>;\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","React","TableBody$1"],"mappings":"qBASO,MAAMA,EAAY,SAAmB,CAAE,UAAAC,EAAW,SAAAC,GAAmB,CACnE,OAAAC,EAAA,cAAC,QAAM,CAAA,UAAAF,CAAA,EAAuBC,CAAS,CAChD,EAEAE,EAAeJ"}
+{"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"}

package/TableCell.js

@@ -1,2 +1,2 @@
-import b from"react";import n from"classnames";import l from"./components/Table/styles.module.scss";var m=(e=>(e.left="left",e.center="center",e.right="right",e))(m||{});const f=function({nowrap:a=!1,textAlign:t="left",dataLabel:r,children:c,className:s}){const o=n(l.table__cell,{[l["table__cell--nowrap"]]:a},{[l["table__cell--center"]]:t==="center"},{[l["table__cell--right"]]:t==="right"},s);return b.createElement("td",{className:o,"data-label":r},c)},C=f;export{f as T,m as a,C as b};
+import _ from"react";import n from"classnames";import t from"./components/Table/styles.module.scss";import{M as a}from"./Table.js";var p=(e=>(e.left="left",e.center="center",e.right="right",e))(p||{});const f=({nowrap:e=!1,textAlign:l="left",dataLabel:r,children:c,className:o,testId:s,mode:m=a.normal})=>{const b=n(t.table__cell,{[t["table__cell--compact"]]:m===a.compact},{[t["table__cell--nowrap"]]:e},{[t["table__cell--center"]]:l==="center"},{[t["table__cell--right"]]:l==="right"},o);return _.createElement("td",{className:b,"data-label":r,"data-testid":s},c)},u=f;export{f as T,p as a,u as b};
 //# sourceMappingURL=TableCell.js.map

package/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props {\n  /** Label used for small viewport block */\n  dataLabel: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children: React.ReactNode;\n}\n\nexport const TableCell = function TableCell({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className }: Props) {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","tableCellClass","classNames","tableStyles","TableCell$1"],"mappings":"oGAMY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAmBC,MAAAC,EAAY,SAAmB,CAAE,OAAAC,EAAS,GAAO,UAAAC,EAAY,OAAgB,UAAAC,EAAW,SAAAC,EAAU,UAAAC,GAAoB,CACjI,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CAAE,CAACA,EAAY,qBAAqB,CAAC,EAAGP,CAAO,EAC/C,CAAE,CAACO,EAAY,qBAAqB,CAAC,EAAGN,IAAc,QAAS,EAC/D,CAAE,CAACM,EAAY,oBAAoB,CAAC,EAAGN,IAAc,OAAQ,EAC7DG,CAAA,EAGF,uBACG,KAAG,CAAA,UAAWC,EAAgB,aAAYH,GACxCC,CACH,CAEJ,EAEAK,EAAeT"}
+{"version":3,"file":"TableCell.js","sources":["../src/components/Table/TableCell/TableCell.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 TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props {\n  /** Label used for small viewport block */\n  dataLabel: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","testId","mode","ModeType","tableCellClass","classNames","tableStyles","React","TableCell$1"],"mappings":"mIAOY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAuBL,MAAMC,EAAY,CAAC,CACxB,OAAAC,EAAS,GACT,UAAAC,EAAY,OACZ,UAAAC,EACA,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CAC9B,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CAAE,CAACA,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAQ,EACnE,CAAE,CAACG,EAAY,qBAAqB,CAAC,EAAGV,CAAO,EAC/C,CAAE,CAACU,EAAY,qBAAqB,CAAC,EAAGT,IAAc,QAAS,EAC/D,CAAE,CAACS,EAAY,oBAAoB,CAAC,EAAGT,IAAc,OAAQ,EAC7DG,CAAA,EAIA,OAAAO,EAAA,cAAC,MAAG,UAAWH,EAAgB,aAAYN,EAAW,cAAaG,GAChEF,CACH,CAEJ,EAEAS,EAAeb"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import{B as i}from"./Button.js";import{Icon as b}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";const x=function({numberOfColumns:r,expanded:t,hideDetailsText:l,toggleClick:s,children:c,className:n}){const m=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},n),d=o(a.table__cell,n),p=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:m},e.createElement("td",{colSpan:r,className:d},e.createElement("div",{className:p},c,e.createElement(i,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},l,e.createElement(b,{svgIcon:_})))))},u=x;export{x as T,u as a};
+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};
 //# 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';\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}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\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\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          {children}\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","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp","TableExpandedRow$1"],"mappings":"qOAwBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,qBAAqB,EACjC,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAGP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,+BAA+B,EAAG,CAC9E,CAACA,EAAY,yCAAyC,CAAC,EAAGP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,kBACZ,KAAG,CAAA,QAASN,EAAiB,UAAWS,GACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,GACbN,EACAO,EAAA,cAAAC,EAAA,CAAO,QAAS,aAAc,QAAST,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EAAA,EACpGC,EACDS,EAAA,cAACE,GAAK,QAASC,CAAW,CAAA,CAC5B,CACF,CACF,CACF,CAEJ,EAEAC,EAAehB"}
+{"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"}

package/TableExpanderCell.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import{B as i}from"./Button.js";import{Icon as p}from"./components/Icons/Icon.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";import a from"./components/Table/styles.module.scss";const C=function({expandableRowId:t,hideDetailsText:o,showDetailsText:l,expanded:e,className:n}){const m=c(a.table__cell,a["table__cell-expander"],n),s=e?f:b;return r.createElement("td",{className:m},r.createElement(i,{variant:"borderless","aria-expanded":e,"aria-controls":t,ariaLabel:e?o:l},r.createElement(p,{svgIcon:s})))},B=C;export{C as T,B as a};
+import a from"react";import i from"classnames";import{B as b}from"./Button.js";import{Icon as f}from"./components/Icons/Icon.js";import C from"./components/Icons/ChevronDown.js";import _ from"./components/Icons/ChevronUp.js";import o from"./components/Table/styles.module.scss";import{M as r}from"./Table.js";const E=({expandableRowId:t,hideDetailsText:l,showDetailsText:m,expanded:e,className:c,mode:n=r.normal})=>{const s=i(o.table__cell,o["table__cell-expander"],c,{[o["table__cell--compact"]]:n===r.compact}),p=e?_:C;return a.createElement("td",{className:s},a.createElement(b,{variant:"borderless","aria-expanded":e,"aria-controls":t,ariaLabel:e?l:m},a.createElement(f,{svgIcon:p})))},I=E;export{E as T,I as a};
 //# sourceMappingURL=TableExpanderCell.js.map

package/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.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';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","TableExpanderCell$1"],"mappings":"sRAuBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACF,MAAAC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,sBAAsB,EAAGH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAGlC,OAAAC,EAAA,cAAC,KAAG,CAAA,UAAWN,CACb,EAAAM,EAAA,cAACC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAExCS,EAAA,cAACE,EAAK,CAAA,QAASL,CAAM,CAAA,CAAA,CAEzB,CAEJ,EAEAM,EAAef"}
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.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';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","mode","ModeType","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","TableExpanderCell$1"],"mappings":"qTA0BO,MAAMA,EAAoB,CAAC,CAChC,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,MAClB,IAAgC,CACxB,MAAAC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,sBAAsB,EAAGL,EAAW,CAC5G,CAACK,EAAY,sBAAsB,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC1D,EACKI,EAAOP,EAAWQ,EAAYC,EAGlC,OAAAC,EAAA,cAAC,KAAG,CAAA,UAAWN,CACb,EAAAM,EAAA,cAACC,EAAA,CACC,QAAQ,aACR,gBAAeX,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAExCW,EAAA,cAACE,EAAK,CAAA,QAASL,CAAM,CAAA,CAAA,CAEzB,CAEJ,EAEAM,EAAejB"}

package/TableHead.js

@@ -1,2 +1,2 @@
-import n from"react";import o from"classnames";import e from"./components/Table/styles.module.scss";var b=(a=>(a.normal="normal",a.transparent="transparent",a.sortable="sortable",a))(b||{});const m=function({category:t,className:r,children:l}){const s=o(e.table__head,{[e["table__head--normal"]]:t==="normal",[e["table__head--transparent"]]:t==="transparent",[e["table__head--sortable"]]:t=="sortable"},r);return n.createElement("thead",{className:s},l)},c=m;export{b as H,m as T,c as a};
+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};
 //# 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';\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}\n\nexport const TableHead = function TableHead({ category, className, children }: Props) {\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    },\n    className\n  );\n\n  return <thead className={tableHeadClass}>{children}</thead>;\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","tableHeadClass","classNames","tableStyles","React","TableHead$1"],"mappings":"oGAMY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,SAAW,WAHDA,IAAAA,GAAA,CAAA,CAAA,EAeL,MAAMC,EAAY,SAAmB,CAAE,SAAAC,EAAU,UAAAC,EAAW,SAAAC,GAAmB,CACpF,MAAMC,EAAiBC,EACrBC,EAAY,YACZ,CACE,CAACA,EAAY,qBAAqB,CAAC,EAAGL,IAAa,SACnD,CAACK,EAAY,0BAA0B,CAAC,EAAGL,IAAa,cACxD,CAACK,EAAY,uBAAuB,CAAC,EAAGL,GAAY,UACtD,EACAC,CAAA,EAGF,OAAQK,EAAA,cAAA,QAAA,CAAM,UAAWH,CAAA,EAAiBD,CAAS,CACrD,EAEAK,EAAeR"}
+{"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"}

package/TableHeadCell.js

@@ -1,2 +1,2 @@
-import a from"react";import r from"classnames";import{Icon as i}from"./components/Icons/Icon.js";import{IconSize as f}from"./constants.js";import u from"./components/Icons/ArrowDown.js";import _ from"./components/Icons/ArrowUp.js";import t from"./components/Table/styles.module.scss";var h=(l=>(l.asc="asc",l.desc="desc",l))(h||{});const C=function({sortable:n,onClick:m,className:s,children:c,sortDir:e}){const o=t["table__head-cell"];if(!n)return a.createElement("th",{scope:"col",className:r(o,s)},c);const d=r(o,t["table__head-cell--sortable"],{[t["table__head-cell--sorted"]]:e},s),b=()=>e&&a.createElement("div",{className:t["table__head-cell-sort-icon-wrapper"]},a.createElement(i,{svgIcon:e=="asc"?u:_,size:f.XXSmall})),p=()=>{switch(e){case"asc":return"ascending";case"desc":return"descending"}};return a.createElement("th",{scope:"col",className:d,"aria-sort":p()},a.createElement("button",{type:"button",onClick:m,className:t["table__sort-button"],"aria-pressed":e?!!e:void 0},b(),c))},N=C;export{h as S,C as T,N as a};
+import c from"react";import r from"classnames";import{Icon as _}from"./components/Icons/Icon.js";import{IconSize as f}from"./constants.js";import u from"./components/Icons/ArrowDown.js";import h from"./components/Icons/ArrowUp.js";import a from"./components/Table/styles.module.scss";import{M as n}from"./Table.js";var w=(t=>(t.asc="asc",t.desc="desc",t))(w||{});const C=({sortable:t,onClick:m,className:l,children:o,sortDir:e,mode:d=n.normal})=>{const s=r(a["table__head-cell"],l,{[a["table__head-cell--compact"]]:d===n.compact});if(!t)return c.createElement("th",{scope:"col",className:s},o);const p=r(s,a["table__head-cell--sortable"],{[a["table__head-cell--sorted"]]:e},l),b=()=>e&&c.createElement("div",{className:a["table__head-cell-sort-icon-wrapper"]},c.createElement(_,{svgIcon:e=="asc"?u:h,size:f.XXSmall})),i=()=>{switch(e){case"asc":return"ascending";case"desc":return"descending"}};return c.createElement("th",{scope:"col",className:p,"aria-sort":i()},c.createElement("button",{type:"button",onClick:m,className:a["table__sort-button"],"aria-pressed":e?!!e:void 0},b(),o))},H=C;export{w as S,C as T,H as a};
 //# sourceMappingURL=TableHeadCell.js.map

package/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icons';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n}\n\nexport const TableHeadCell = function TableHeadCell({ sortable, onClick, className, children, sortDir }: Props) {\n  const tableHeadCellDefaultClass = tableStyles['table__head-cell'];\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={classNames(tableHeadCellDefaultClass, className)}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","tableHeadCellDefaultClass","tableStyles","React","classNames","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":"4RASY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAkBC,MAAAC,EAAgB,SAAuB,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,GAAkB,CACxG,MAAAC,EAA4BC,EAAY,kBAAkB,EAEhE,GAAI,CAACN,EAED,OAAAO,EAAA,cAAC,MAAG,MAAM,MAAM,UAAWC,EAAWH,EAA2BH,CAAS,CAAA,EACvEC,CACH,EAIJ,MAAMM,EAAkBD,EACtBH,EACAC,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGF,CAAQ,EACrDF,CAAA,EAGIQ,EAAiB,IACrBN,mBACG,MAAI,CAAA,UAAWE,EAAY,oCAAoC,CAAA,kBAC7DK,EAAK,CAAA,QAASP,GAAW,MAAoBQ,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQX,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAG,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWE,EAAiB,YAAWM,EAAiB,CAAA,EACrER,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAN,EAAkB,UAAWK,EAAY,oBAAoB,EAAG,eAAcF,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAM,EAAA,EACAP,CACH,CACF,CAEJ,EAEAa,EAAejB"}
+{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icons';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td 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 TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","React","TableHeadCell$1"],"mappings":"2TAUY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAoBC,MAAAC,EAAgB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,KAAAC,EAAOC,EAAS,UAAuC,CACtI,MAAMC,EAA4BC,EAAWC,EAAY,kBAAkB,EAAGP,EAAW,CACvF,CAACO,EAAY,2BAA2B,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC/D,EAED,GAAI,CAACN,EACH,uBACG,KAAG,CAAA,MAAM,MAAM,UAAWO,GACxBJ,CACH,EAIJ,MAAMO,EAAkBF,EACtBD,EACAE,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGL,CAAQ,EACrDF,CAAA,EAGIS,EAAiB,IACrBP,mBACG,MAAI,CAAA,UAAWK,EAAY,oCAAoC,CAAA,kBAC7DG,EAAK,CAAA,QAASR,GAAW,MAAoBS,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQZ,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAa,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWP,EAAiB,YAAWM,EAAiB,CAAA,EACrEC,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAhB,EAAkB,UAAWQ,EAAY,oBAAoB,EAAG,eAAcL,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAO,EAAA,EACAR,CACH,CACF,CAEJ,EAEAe,EAAenB"}

package/TableRow.js

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