@helsenorge/designsystem-react 2.13.0 → 2.15.0

package/Avatar.js

@@ -1,2 +1,2 @@
-import a from"react";import{Icon as d}from"./components/Icons/Icon.js";import{AnalyticsId as f,IconSize as p}from"./constants.js";import v from"./components/Icons/Check.js";import b from"classnames";import t from"./components/Avatar/styles.module.scss";import{palette as c}from"./theme/palette.js";const g=a.forwardRef(function(s,l){const{children:e,className:m="",selected:r=!1,variant:o="normal",testId:n}=s,i=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return a.createElement("span",{className:b(t.avatar,r&&t["avatar--selected"],o==="black"&&t["avatar--black"],m),ref:l,"data-testid":n,"data-analyticsid":f.Avatar},r?a.createElement(d,{svgIcon:v,size:p.Small,color:o==="black"?c.neutral900:c.blueberry600}):i)});export{g as A};
+import r from"react";import{Icon as p}from"./components/Icons/Icon.js";import{AnalyticsId as v,IconSize as u}from"./constants.js";import b from"./components/Icons/Check.js";import x from"classnames";import a from"./components/Avatar/styles.module.scss";import{palette as o}from"./theme/palette.js";var A=(t=>(t.xsmall="xsmall",t.small="small",t))(A||{});const w=r.forwardRef(function(c,n){const{children:e,className:i="",selected:l=!1,variant:s="normal",size:m="small",testId:d}=c,f=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return r.createElement("span",{className:x(a.avatar,l&&a["avatar--selected"],s==="black"&&a["avatar--black"],m==="xsmall"&&a["avatar--xsmall"],m==="small"&&a["avatar--small"],i),ref:n,"data-testid":d,"data-analyticsid":v.Avatar},l?r.createElement(p,{svgIcon:b,size:u.Small,color:s==="black"?o.neutral900:o.blueberry600}):f)});export{w as A,A as a};
 //# sourceMappingURL=Avatar.js.map

package/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(styles.avatar, selected && styles['avatar--selected'], variant === 'black' && styles['avatar--black'], className)}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["Avatar","React","props","ref","children","className","selected","variant","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"0SAuBA,MAAMA,EAAqBC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC1H,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,OAAAC,CAAW,EAAAN,EAC7EO,EAAgBL,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWS,EAAGC,EAAO,OAAQL,GAAYK,EAAO,oBAAqBJ,IAAY,SAAWI,EAAO,iBAAkBN,CAAS,EAC9H,IAAAF,EACA,cAAaK,EACb,mBAAkBI,EAAY,MAAA,EAE7BN,EACEL,EAAA,cAAAY,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOR,IAAY,QAAUS,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","Avatar","React","props","ref","children","className","selected","variant","size","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"0SAUY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAoBZ,MAAMC,EAAqBC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC1H,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,KAAAC,EAAO,QAAkB,OAAAC,CAAA,EAAWP,EACtGQ,EAAgBN,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWU,EACTC,EAAO,OACPN,GAAYM,EAAO,oBACnBL,IAAY,SAAWK,EAAO,iBAC9BJ,IAAS,UAAqBI,EAAO,kBACrCJ,IAAS,SAAoBI,EAAO,iBACpCP,CACF,EACA,IAAAF,EACA,cAAaM,EACb,mBAAkBI,EAAY,MAAA,EAE7BP,EACEL,EAAA,cAAAa,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOT,IAAY,QAAUU,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as lt,useEffect as it}from"react";import{AnalyticsId as V,IconSize as k}from"./constants.js";import{isTest as ct}from"./utils/environment.js";import{getColor as i}from"./theme/currys/color.js";import{Icon as ut}from"./components/Icons/Icon.js";import{useHover as $}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useBreakpoint as dt}from"./hooks/useBreakpoint.js";import{breakpoints as bt}from"./theme/grid.js";import w from"classnames";import t from"./components/Button/styles.module.scss";import pt from"./components/Icons/ArrowRight.js";import{useSize as ft}from"./hooks/useSize.js";const ht=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,gt=(o,n,a)=>{if(!a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop p\xE5 Button uten tekst for \xE5 opprettholde UU krav")},Mt=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:j,className:q,arrow:E=!1,concept:B="normal",disabled:b=!1,ellipsis:x=!1,fluid:D=!1,htmlMarkup:C="button",mode:P="onlight",onClick:R,size:X="medium",variant:I="fill",href:G,tabIndex:S,testId:z,target:M,type:J="button",...A}=n,[p,f,F]=mt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?$(a):$(a),H=lt(null),c=ft(H),l=!!(p||f)&&!F,Q=p&&(f||E)&&!l,y=P==="ondark",h=dt()<bt.md,L=B==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=ht(I==="fill",u,b,B,y,h),O=E&&!u,m=X==="large"&&!L&&!u,tt={...A},T=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:D||x},j),et=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},q),ot=w(t.button__text,{[t["button__text--ellipsis"]]:x}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{gt(l,d,ct())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:H},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},U=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),O?_(e.createElement(ut,{svgIcon:pt}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:R,disabled:b,"data-testid":z,"data-analyticsid":V.Button,className:T,ref:W,tabIndex:S,type:J,...tt},U()),C==="a"&&e.createElement("a",{id:s,onClick:R,"data-testid":z,"data-analyticsid":V.Button,className:T,href:G,target:M,rel:M==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:S,...A},U()))});export{Mt as B};
+import e,{useRef as lt,useEffect as it}from"react";import{AnalyticsId as U,IconSize as k}from"./constants.js";import{isTest as ct,isProd as ut}from"./utils/environment.js";import{getColor as i}from"./theme/currys/color.js";import{Icon as mt}from"./components/Icons/Icon.js";import{useHover as V}from"./hooks/useHover.js";import{useIcons as dt}from"./hooks/useIcons.js";import{useBreakpoint as bt}from"./hooks/useBreakpoint.js";import{breakpoints as pt}from"./theme/grid.js";import w from"classnames";import t from"./components/Button/styles.module.scss";import ft from"./components/Icons/ArrowRight.js";import{useSize as ht}from"./hooks/useSize.js";const gt=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,wt=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop p\xE5 Button uten tekst for \xE5 opprettholde UU krav")},At=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:$,className:j,arrow:E=!1,concept:B="normal",disabled:b=!1,ellipsis:x=!1,fluid:q=!1,htmlMarkup:C="button",mode:D="onlight",onClick:R,size:X="medium",variant:I="fill",href:G,tabIndex:S,testId:z,target:M,type:J="button",...A}=n,[p,f,F]=dt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?V(a):V(a),H=lt(null),c=ht(H),l=!!(p||f)&&!F,Q=p&&(f||E)&&!l,y=D==="ondark",h=bt()<pt.md,L=B==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=gt(I==="fill",u,b,B,y,h),O=E&&!u,m=X==="large"&&!L&&!u,tt={...A},P=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||x},$),et=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:x}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{wt(l,d,!ct()&&!ut())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:H},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},T=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),O?_(e.createElement(mt,{svgIcon:ft}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:R,disabled:b,"data-testid":z,"data-analyticsid":U.Button,className:P,ref:W,tabIndex:S,type:J,...tt},T()),C==="a"&&e.createElement("a",{id:s,onClick:R,"data-testid":z,"data-analyticsid":U.Button,className:P,href:G,target:M,rel:M==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:S,...A},T()))});export{At as B};
 //# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport { getColor } from '../../theme/currys/color';\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { breakpoints } from '../../theme/grid';\nimport classNames from 'classnames';\n\nimport buttonStyles from './styles.module.scss';\nimport ArrowRight from '../Icons/ArrowRight';\nimport { useSize } from '../../hooks/useSize';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, testEnv: boolean) => {\n  if (!testEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...(restProps as React.HtmlHTMLAttributes<HTMLButtonElement>) };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, isTest());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","testEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { isTest, isProd } from '../../utils/environment';\nimport { getColor } from '../../theme/currys/color';\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { breakpoints } from '../../theme/grid';\nimport classNames from 'classnames';\n\nimport buttonStyles from './styles.module.scss';\nimport ArrowRight from '../Icons/ArrowRight';\nimport { useSize } from '../../hooks/useSize';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...(restProps as React.HtmlHTMLAttributes<HTMLButtonElement>) };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [2.14.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.13.0&targetVersion=GTv2.14.0) (2023-02-01)
+
+
+### Features
+
+*  ikoner for ny login logout hjertehender og error notification ([8fd3e28](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/8fd3e289ccd3934f84d5d11def33a9c1b527708d))
+
+
+### Bug Fixes
+
+*  panel inline title blir inline med contentA ([3345db0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/3345db0457a512c0edd28d25339cdaf4955ca54b)), closes [#294847](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/294847)
+
+## [2.13.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.12.0&targetVersion=GTv2.13.0) (2023-01-26)
+
+
+### Features
+
+*  duolist nonformatted format lagt til ([6bbdb76](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/6bbdb76cd2dda87e8e7389ee7129936ae0253bc0)), closes [#292725](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292725)
+*  panel status badge wrapper nå med title tekst ([d008826](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/d00882610a68cf00d6a3a39d3bb7bf6c5807526a)), closes [#292773](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292773)
+*  slider har støtte for ariaLabel ([e4960e1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e4960e1e7f01fde1be4689ccae3ce8d23a72eea2)), closes [#293573](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293573)
+
+
+### Bug Fixes
+
+*  panel spacing desktop fikset ([074afe7](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/074afe7dc54f71eb068b51eaed20277b8c51f6ec)), closes [#292769](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292769)
+
 ## [2.12.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.11.3&targetVersion=GTv2.12.0) (2023-01-23)
 
 
@@ -279,7 +305,7 @@
 
 ## 2.0.0-beta.1 (2022-09-15)
 
-## 2.0.0-beta.0 (2022-09-15)
+## 2.0.0-beta.0 (2022-09-12)
 
 
 ### Features
@@ -381,8 +407,8 @@
 
 ### Bug Fixes
 
-*  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 *  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
+*  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/ErrorWrapper.js

@@ -1,2 +1,2 @@
-import o from"react";import a from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const n=t=>{const{errorText:r}=t,s=a(e["error-wrapper"],{[e["error-wrapper--with-error"]]:r}),c=a(e["error-wrapper__errors"]);return o.createElement("div",{className:s},r&&o.createElement("p",{role:"alert",className:c},r),t.children)};export{n as E};
+import o from"react";import a from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const d=t=>{const{errorText:r,className:s,testId:p}=t,c=a(e["error-wrapper"],s,{[e["error-wrapper--with-error"]]:r}),l=a(e["error-wrapper__errors"]);return o.createElement("div",{className:c,"data-testid":p||"error-wrapper-testid"},r&&o.createElement("p",{role:"alert",className:l},r),t.children)};export{d as E};
 //# sourceMappingURL=ErrorWrapper.js.map

package/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","withErrorStyle","cn","styles","errorStyles","React"],"mappings":"2GAYO,MAAMA,EAAqDC,GAAA,CAC1D,KAAA,CAAE,UAAAC,CAAc,EAAAD,EAEhBE,EAAiBC,EAAGC,EAAO,iBAAkB,CAAE,CAACA,EAAO,8BAA+BH,CAAW,CAAA,EAEjGI,EAAcF,EAAGC,EAAO,wBAAwB,EAEtD,OACGE,EAAA,cAAA,MAAA,CAAI,UAAWJ,CAAA,EACbD,GACEK,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,CACxB,EAAAJ,CACH,EAEDD,EAAM,QACT,CAEJ"}
+{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React"],"mappings":"2GAgBO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,OAAAC,CAAA,EAAWH,EAEnCI,EAAiBC,EAAGC,EAAO,iBAAkBJ,EAAW,CAAE,CAACI,EAAO,8BAA+BL,CAAW,CAAA,EAE5GM,EAAcF,EAAGC,EAAO,wBAAwB,EAEtD,OACGE,EAAA,cAAA,MAAA,CAAI,UAAWJ,EAAgB,cAAaD,GAAU,sBAAA,EACpDF,GACEO,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,CACxB,EAAAN,CACH,EAEDD,EAAM,QACT,CAEJ"}

package/FormGroup.js

@@ -1,2 +1,2 @@
-import r from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as I}from"./Checkbox.js";import{FormMode as C,FormVariant as _,AnalyticsId as x}from"./constants.js";import{R as y}from"./RadioButton.js";import{I as R}from"./Input.js";import{T}from"./Title.js";import{F as M}from"./FormLayout.js";import{E as S}from"./ErrorWrapper.js";import{S as B}from"./Select.js";import{isComponent as l}from"./utils/component.js";const W=r.forwardRef((t,N)=>{const{className:k,fieldsetClassName:w,mode:n=C.onwhite,variant:s=_.normal,error:m,name:o,htmlMarkup:d="fieldset",renderError:F=!0}=t,f=n===C.ondark,u=s===_.bigform,b=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},k),v=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:u}),G=i(a["form-group"]),c=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:u}),g=i(a["field-set"],w),p=e=>l(e,M)?r.cloneElement(e,{variant:s,mapHelper:p}):l(e,W)?r.cloneElement(e,{mode:n,variant:s,error:m,renderError:!1}):l(e,I)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,y)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,R)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,B)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,error:!!m}):e,E=()=>r.createElement("div",{className:G},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,p)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,p)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:b,ref:N,tabIndex:-1},t.title&&r.createElement(T,{className:v,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),F?r.createElement(S,{errorText:m},E()):E())});export{W as F};
+import r from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as x}from"./Checkbox.js";import{FormMode as C,FormVariant as N,AnalyticsId as y}from"./constants.js";import{R}from"./RadioButton.js";import{I as W}from"./Input.js";import{T as M}from"./Title.js";import{F as S}from"./FormLayout.js";import{E as B}from"./ErrorWrapper.js";import{S as A}from"./Select.js";import{isComponent as l}from"./utils/component.js";const D=r.forwardRef((t,_)=>{const{className:k,fieldsetClassName:w,mode:n=C.onwhite,variant:s=N.normal,error:m,name:o,htmlMarkup:d="fieldset",renderError:F=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,f=n===C.ondark,u=s===N.bigform,v=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},k),G=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:u}),T=i(a["form-group"]),c=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:u}),g=i(a["field-set"],w),p=e=>l(e,S)?r.cloneElement(e,{variant:s,mapHelper:p}):l(e,D)?r.cloneElement(e,{mode:n,variant:s,error:m,renderError:!1}):l(e,x)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,R)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,W)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,A)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,error:!!m}):e,E=()=>r.createElement("div",{className:T},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,p)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,p)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:_,tabIndex:-1},t.title&&r.createElement(M,{className:G,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),F?r.createElement(B,{className:I,errorText:m,testId:b},E()):E())});export{D as F};
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\nimport { isComponent } from '../../utils/component';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? <ErrorWrapper errorText={error}>{formGroupContent()}</ErrorWrapper> : formGroupContent()}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\nimport { isComponent } from '../../utils/component';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}

package/Input.js

@@ -1,2 +1,2 @@
-import t,{useRef as ee}from"react";import c from"classnames";import{FormMode as p,FormVariant as re,IconSize as A,AnalyticsId as te,AVERAGE_CHARACTER_WIDTH_PX as ae}from"./constants.js";import{a as ne}from"./uuid.js";import{Icon as oe}from"./components/Icons/Icon.js";import{getColor as F}from"./theme/currys/color.js";import{useBreakpoint as le,Breakpoint as ie}from"./hooks/useBreakpoint.js";import{E as ce}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var pe=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r.date="date",r.time="time",r))(pe||{});const se=(r,o,s)=>{const d=o?"1.5rem":"2rem",m=o?`${s}px`:"0px",u="4px";return`calc(${r*ae}px + ${d} + ${m} + ${u})`},Ee=t.forwardRef((r,o)=>{var N;const{className:s,defaultValue:d,placeholder:m,type:u="text",inputId:C=ne(),labelId:b,name:$,transparent:y=!1,icon:a,iconRight:f,mode:l,variant:S,label:_,error:z,errorText:v,testId:B,disabled:n,readOnly:D,autoComplete:I,afterLabelChildren:E,afterInputChildren:V,belowLabelChildren:x,width:k,required:H,onChange:L,onKeyDown:M,autoFocus:X,...q}=r,G=le(),i=ee(null),W=l===p.ondark,K=l===p.onblueberry,w=l===p.oninvalid||v||z,h=S===re.bigform,O=y&&l!==p.ondark&&!w,P=c(e["input-wrapper"],s),j=c(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:W,[e["input-wrapper__label-wrapper--disabled"]]:n}),J=c(e["content-wrapper"],{[e["content-wrapper--transparent"]]:O,[e["content-wrapper--on-blueberry"]]:K,[e["content-wrapper--on-dark"]]:W,[e["content-wrapper--invalid"]]:w,[e["content-wrapper--bigform"]]:h,[e["content-wrapper--disabled"]]:n,[e["content-wrapper--with-icon"]]:a}),Q=c(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:h,[e["content-wrapper__input--disabled"]]:n}),U=n?F("neutral",500):F("black"),g=G===ie.xs||!h?A.XSmall:A.Small,R=()=>a!==void 0?t.createElement(oe,{color:U,size:g,svgIcon:a}):null,Y=()=>{if(i&&i.current&&a){const T=f?0:1;i.current.children[T].focus()}},Z=k?se(k,!!a,g):void 0;return t.createElement(ce,{errorText:v},t.createElement("div",{"data-testid":B,"data-analyticsid":te.Input,className:P},_&&t.createElement("div",{className:j},t.createElement("label",{id:b!=null?b:void 0,htmlFor:C},_),E&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},E)),x&&t.createElement("div",null,x),t.createElement("div",{onClick:Y,ref:i,className:J,style:{maxWidth:Z}},!f&&R(),t.createElement("input",{onChange:L,onKeyDown:M,name:$,type:u,defaultValue:d,id:C,className:Q,ref:o,"aria-labelledby":(N=r["aria-labelledby"])!=null?N:void 0,"aria-invalid":!!w,disabled:n,placeholder:m,readOnly:D,autoComplete:I||"off",required:H,autoFocus:X,...q}),f&&R()),V))});export{Ee as I,pe as a};
+import t,{useRef as ie,useState as ce}from"react";import d from"classnames";import{FormMode as m,FormVariant as se,IconSize as I,AnalyticsId as pe,AVERAGE_CHARACTER_WIDTH_PX as de}from"./constants.js";import{a as me}from"./uuid.js";import{Icon as ue}from"./components/Icons/Icon.js";import{getColor as M}from"./theme/currys/color.js";import{useBreakpoint as be,Breakpoint as he}from"./hooks/useBreakpoint.js";import{E as fe}from"./ErrorWrapper.js";import{M as we}from"./MaxCharacters.js";import e from"./components/Input/styles.module.scss";var Ce=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r.date="date",r.time="time",r))(Ce||{});const ge=(r,i,u)=>{const c=i?"1.5rem":"2rem",b=i?`${u}px`:"0px",h="4px";return`calc(${r*de}px + ${c} + ${b} + ${h})`},$e=t.forwardRef((r,i)=>{var y;const{className:u,defaultValue:c,placeholder:b,type:h="text",inputId:x=me(),labelId:f,name:z,transparent:B=!1,icon:n,iconRight:w,mode:o,variant:D,label:E,error:H,errorText:_,testId:V,disabled:l,readOnly:L,autoComplete:X,afterLabelChildren:v,afterInputChildren:q,belowLabelChildren:k,width:W,required:G,onChange:R,onKeyDown:K,autoFocus:O,maxCharacters:s,maxText:P,...j}=r,J=be(),p=ie(null),[N,Q]=ce(c||""),S=o===m.ondark,U=o===m.onblueberry,Y=!!s&&N.toString().length>s,C=o===m.oninvalid||!!_||!!H||Y,g=D===se.bigform,Z=B&&o!==m.ondark&&!C,T=d(e["input-wrapper"],u),ee=d(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:S,[e["input-wrapper__label-wrapper--disabled"]]:l}),re=d(e["content-wrapper"],{[e["content-wrapper--transparent"]]:Z,[e["content-wrapper--on-blueberry"]]:U,[e["content-wrapper--on-dark"]]:S,[e["content-wrapper--invalid"]]:C,[e["content-wrapper--bigform"]]:g,[e["content-wrapper--disabled"]]:l,[e["content-wrapper--with-icon"]]:n}),te=d(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:g,[e["content-wrapper__input--disabled"]]:l}),ae=l?M("neutral",500):M("black"),A=J===he.xs||!g?I.XSmall:I.Small,F=()=>n!==void 0?t.createElement(ue,{color:ae,size:A,svgIcon:n}):null,ne=()=>{if(p&&p.current&&n){const a=w?0:1;p.current.children[a].focus()}},oe=a=>{Q(a.target.value)},le=a=>{R&&R(a),oe(a)},$=W?ge(W,!!n,A):void 0;return t.createElement(fe,{errorText:_},t.createElement("div",{"data-testid":V,"data-analyticsid":pe.Input,className:T},E&&t.createElement("div",{className:ee},t.createElement("label",{id:f!=null?f:void 0,htmlFor:x},E),v&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},v)),k&&t.createElement("div",null,k),t.createElement("div",{onClick:ne,ref:p,className:re,style:{maxWidth:$}},!w&&F(),t.createElement("input",{onChange:le,onKeyDown:K,name:z,type:h,defaultValue:c,id:x,className:te,ref:i,"aria-labelledby":(y=r["aria-labelledby"])!=null?y:void 0,"aria-invalid":!!C,disabled:l,placeholder:b,readOnly:L,autoComplete:X||"off",required:G,autoFocus:O,...j}),w&&F()),s&&t.createElement(we,{maxCharacters:s,length:N.toString().length,maxText:P,mode:o,maxWidth:$}),q))});export{$e as I,Ce 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 } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\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-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  /** label id */\n  labelId?: 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?: string;\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 label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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    labelId,\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    afterLabelChildren,\n    afterInputChildren,\n    belowLabelChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\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 labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\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 = () => {\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  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        {label && (\n          <div className={labelWrapperClass}>\n            <label id={labelId ?? undefined} htmlFor={inputId}>\n              {label}\n            </label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={onChange}\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-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\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","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","width","required","onChange","onKeyDown","autoFocus","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId","_a"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\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-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  /** label id */\n  labelId?: 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?: string;\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 label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: 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    labelId,\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    afterLabelChildren,\n    afterInputChildren,\n    belowLabelChildren,\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 labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\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 = () => {\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    setInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\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        {label && (\n          <div className={labelWrapperClass}>\n            <label id={labelId ?? undefined} htmlFor={inputId}>\n              {label}\n            </label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={onChangeHandler}\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-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\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\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","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","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","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","_a","MaxCharacters"],"mappings":"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"}

package/ListHeader.js

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

package/ListHeader.js.map

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

package/ListHeaderText.js

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

package/MaxCharacters.js

@@ -0,0 +1,2 @@
+import n from"react";import{FormMode as l}from"./constants.js";import r from"./components/MaxCharacters/styles.module.scss";import p from"classnames";const x=({maxCharacters:a,maxText:e,length:o,mode:s,maxWidth:c})=>{const t=o/a,m=p(r["max-characters"],{[r["max-characters--on-dark"]]:s===l.ondark,[r["max-characters--invalid"]]:t>1}),i=t>.95?"polite":"off";return n.createElement("div",{"aria-live":i,"aria-atomic":"true",className:m,style:{maxWidth:c}},`${o}/${a} ${e||"tegn"}`)};export{x as M};
+//# sourceMappingURL=MaxCharacters.js.map

package/MaxCharacters.js.map

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

package/StatusDot.js

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

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], {\n    [statusDotStyles[`statusdot__label--icon`]]: hasIcon,\n  });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"ocAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CACnE,CAACA,EAAgB,2BAA4BJ,CAAA,CAC9C,EACD,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(styles['statusdot__label'], hasIcon && styles[`statusdot__label--icon`]);\n\n  return (\n    <div className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotVariant","StatusDotIcon","variant","React","Icon","IconSize","Undo","Group","NoAccess","getColor","Attachment","StatusDot","props","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAiBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,YACNC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC3CJ,IAAY,QACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC5CL,IAAY,WACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,EAC/EP,IAAY,aACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASK,CAAA,CAAY,EAGrD,KAcHC,EAA+CC,GAAA,CACnD,KAAM,CAAE,QAAAV,EAAU,OAAuB,KAAAW,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAH,EAE/DI,EACJd,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERe,EAAcf,IAAY,YAE1BgB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,wBAAyBN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,wBAA0BA,EAAO,mBAAmBlB,IAAU,EACjIoB,EAAeH,EAAWC,EAAO,iBAAqBJ,GAAWI,EAAO,yBAAyB,EAEvG,OACGjB,EAAA,cAAA,MAAA,CAAI,UAAWe,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAClFpB,EAAA,cAAA,OAAA,CAAK,UAAWkB,CAAA,EACdlB,EAAA,cAAAF,EAAA,CAAc,QAAAC,CAAkB,CAAA,CACnC,EACCC,EAAA,cAAA,OAAA,CAAK,UAAWmB,CAAA,EAAeT,CAAK,CACvC,CAEJ"}

package/Textarea.js

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