@helsenorge/designsystem-react 5.0.0 → 5.1.2

package/CHANGELOG.md

@@ -1,3 +1,65 @@
+## [5.1.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.1.0&targetVersion=GTv5.1.1) (2023-10-30)
+
+### Bug Fixes
+
+- input type number base inkrementering verdi
+  ([6b8113e](https://github.com/helsenorge/designsystem/commit/6b8113ea73653981cfe80f7012508b7ee77279e8)), closes
+  [#312174](https://github.com/helsenorge/designsystem/issues/312174)
+- input width fikset ([07a4c52](https://github.com/helsenorge/designsystem/commit/07a4c52cbfa04b1a19cf983227eb28968607baeb)), closes
+  [#312326](https://github.com/helsenorge/designsystem/issues/312326)
+
+## [5.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.0.0&targetVersion=GTv5.1.0) (2023-10-26)
+
+### Features
+
+- nytt komponent datepicker ([59d3193](https://github.com/helsenorge/designsystem/commit/59d3193992d1c98b4f38a12d9aae03909f0653b0)), closes
+  [#306637](https://github.com/helsenorge/designsystem/issues/306637)
+- select støtter onChange ([3439471](https://github.com/helsenorge/designsystem/commit/3439471cbe7481ee8a0db1b8a2aca0071a379f43)), closes
+  [#309850](https://github.com/helsenorge/designsystem/issues/309850)
+
+### Bug Fixes
+
+- datepicker ux endringer etter feedback
+  ([db17354](https://github.com/helsenorge/designsystem/commit/db173541a1c0c5f1dc4c9b8fe42c6df3763e13e3)), closes
+  [#306637](https://github.com/helsenorge/designsystem/issues/306637)
+- radiobutton bigform checked styling
+  ([1cf5580](https://github.com/helsenorge/designsystem/commit/1cf5580270313614719d92fbb1a01dab5881d742)), closes
+  [#305272](https://github.com/helsenorge/designsystem/issues/305272)
+- vite bygg og dependencies ([2e45dcd](https://github.com/helsenorge/designsystem/commit/2e45dcd23494ae77341cff0b02c6517011ca4cbe)), closes
+  [#306637](https://github.com/helsenorge/designsystem/issues/306637)
+
+## [5.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.4.0&targetVersion=GTv5.0.0) (2023-09-25)
+
+### ⚠ BREAKING CHANGES
+
+- role=region må settes via prop
+- name/id settes ikke lenger default til verdien av title. Man må sette name/id selv om man trenger det.
+- fjernet mulighet for at Tile kan være button
+
+### Features
+
+- formgroup har prop for fieldset name
+  ([625f843](https://github.com/helsenorge/designsystem/commit/625f843aa947601f7edaa82f388f6c22cda00851)), closes
+  [#308141](https://github.com/helsenorge/designsystem/issues/308141)
+- helppanel ([e2e8f23](https://github.com/helsenorge/designsystem/commit/e2e8f2319626be54174c129f59f83e42603dd237))
+
+### Bug Fixes
+
+- expanderList/LinkList (ListHeader) HtmlValidering i story
+  ([72b12a3](https://github.com/helsenorge/designsystem/commit/72b12a3a5570e6f73fb69045cbe90d0572fd5da6)), closes
+  [#308137](https://github.com/helsenorge/designsystem/issues/308137)
+- highlightbox har ikke lenger fargene kiwi/plum
+  ([8852e6c](https://github.com/helsenorge/designsystem/commit/8852e6cd07abf4995518ffcea6fb2bb5b421b84e)), closes
+  [#305259](https://github.com/helsenorge/designsystem/issues/305259)
+- html i Tile validerer ([f0a9f37](https://github.com/helsenorge/designsystem/commit/f0a9f3739f39fa33d2feb1d78812958730c09f33)), closes
+  [#308149](https://github.com/helsenorge/designsystem/issues/308149)
+- ikke bruk aria-attributter med mindre NotificationPanel har role
+  ([8f1b09b](https://github.com/helsenorge/designsystem/commit/8f1b09b48a4840c8a8ce0efb7abdbed05de62a8e)), closes
+  [#309176](https://github.com/helsenorge/designsystem/issues/309176)
+- notificationpanel er ikke region som default
+  ([00103ce](https://github.com/helsenorge/designsystem/commit/00103ce8a237f0222966f3a25f80f2222fbecf37)), closes
+  [#309176](https://github.com/helsenorge/designsystem/issues/309176)
+
 ## [4.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.3.1&targetVersion=GTv4.4.0) (2023-09-15)
 
 ### Features

package/FormGroup.js

@@ -1,2 +1,2 @@
-import r from"react";import l from"classnames";import{FormMode as N,FormVariant as _,AnalyticsId as x}from"./constants.js";import{isComponent as s}from"./utils/component.js";import{C as R}from"./Checkbox.js";import{E as W}from"./ErrorWrapper.js";import{F as M}from"./FormLayout.js";import{I as S}from"./Input.js";import{R as B}from"./RadioButton.js";import{S as A}from"./Select.js";import{T as D}from"./Title.js";import o from"./components/FormGroup/styles.module.scss";const d=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=N.onwhite,variant:n=_.normal,error:a,name:p,htmlMarkup:u="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,i=m===N.ondark,c=n===_.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:i,[o["form-group-wrapper--invalid"]]:a},k),y=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:i&&!a,[o["form-group-wrapper__title--bigform"]]:c}),T=l(o["form-group"]),g=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:i&&!a,[o["field-set__legend--bigform"]]:c}),E=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,d)?r.cloneElement(e,{mode:m,variant:n,error:a,renderError:!1}):s(e,R)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,B)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,S)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,A)?r.cloneElement(e,{name:p??e.props.name,mode:m,error:!!a}):e,C=()=>r.createElement("div",{className:T},u==="div"&&r.createElement("div",{className:E},t.legend&&r.createElement("h5",{className:g},t.legend),r.Children.map(t.children,f)),u==="fieldset"&&r.createElement("fieldset",{name:t.fieldsetName,className:E},t.legend&&r.createElement("legend",{className:g},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:y,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},C()):C())});d.displayName="FormGroup";const U=d;export{U as F,d as a};
+import r,{useState as _}from"react";import l from"classnames";import{FormMode as k,FormVariant as F,AnalyticsId as A}from"./constants.js";import{isComponent as s}from"./utils/component.js";import{u as D}from"./uuid.js";import{C as H}from"./Checkbox.js";import{E as V}from"./ErrorWrapper.js";import{F as $}from"./FormLayout.js";import{I as j}from"./Input.js";import{R as q,g as z}from"./RadioButton.js";import{S as J}from"./Select.js";import{T as K}from"./Title.js";import t from"./components/FormGroup/styles.module.scss";const u=r.forwardRef((o,G)=>{const{className:b,fieldsetClassName:w,mode:n=k.onwhite,variant:m=F.normal,error:a,name:p,htmlMarkup:c="fieldset",renderError:R=!0,errorWrapperClassName:y,errorWrapperTestId:v}=o,[T,x]=_(),[S]=_(D()),i=n===k.ondark,f=m===F.bigform,W=l(t["form-group-wrapper"],{[t["form-group-wrapper--on-dark"]]:i,[t["form-group-wrapper--invalid"]]:a},b),M=l(t["form-group-wrapper__title"],{[t["form-group-wrapper__title--on-dark"]]:i&&!a,[t["form-group-wrapper__title--bigform"]]:f}),B=l(t["form-group"]),g=l(t["field-set__legend"],{[t["field-set__legend--on-dark"]]:i&&!a,[t["field-set__legend--bigform"]]:f}),C=l(t["field-set"],w),d=(e,L)=>{if(s(e,$))return r.cloneElement(e,{variant:m,mapHelper:d});if(s(e,u))return r.cloneElement(e,{mode:n,variant:m,error:a,renderError:!1});if(s(e,H))return r.cloneElement(e,{name:p??e.props.name,mode:n,variant:m,error:!!a});if(s(e,q)){const N=typeof e.props.inputId>"u"?S+L:e.props.inputId;return r.cloneElement(e,{inputId:N,name:p??e.props.name,mode:n,onChange:I=>{x(I.target.id),e.props.onChange&&e.props.onChange(I)},variant:m,error:!!a,labelClassNames:z(N,n,f,T)})}else{if(s(e,j))return r.cloneElement(e,{name:p??e.props.name,mode:n,variant:m,error:!!a});if(s(e,J))return r.cloneElement(e,{name:p??e.props.name,mode:n,error:!!a})}return e},E=()=>r.createElement("div",{className:B},c==="div"&&r.createElement("div",{className:C},o.legend&&r.createElement("h5",{className:g},o.legend),r.Children.map(o.children,d)),c==="fieldset"&&r.createElement("fieldset",{name:o.fieldsetName,className:C},o.legend&&r.createElement("legend",{className:g},o.legend),r.Children.map(o.children,d)));return r.createElement("div",{"data-testid":o.testId,"data-analyticsid":A.FormGroup,className:W,ref:G,tabIndex:-1},o.title&&r.createElement(K,{className:M,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},o.title),R?r.createElement(V,{className:y,errorText:a,testId:v},E()):E())});u.displayName="FormGroup";const ne=u;export{ne as F,u as a};
 //# 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 { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\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 name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: 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 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.fieldsetName} 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\nFormGroup.displayName = 'FormGroup';\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","FormGroup$1"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\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 name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: 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 [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const [radioGroupId] = useState<string>(uuid());\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, index: number): 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      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        mode,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          child.props.onChange && child.props.onChange(event);\n        },\n        variant,\n        error: !!error,\n        labelClassNames: getRadioLabelClasses(radioId, mode as FormMode, bigform, checkedRadioId),\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 = (): React.ReactNode => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div 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.fieldsetName} 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\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","checkedRadioId","setCheckedRadioId","useState","radioGroupId","uuid","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","index","isComponent","FormLayout","Checkbox","RadioButton","radioId","event","getRadioLabelClasses","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}

package/FormLayout.js

@@ -1,2 +1,2 @@
-import e from"react";import l from"classnames";import{FormVariant as u,AnalyticsId as h}from"./constants.js";import o from"./components/FormLayout/styles.module.scss";var y=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(y||{});const v=e.forwardRef((t,p)=>{const{maxColumns:r="one",colMinWidth:m=300,variant:s,className:f,mapHelper:a}=t,c={"--min-col-width":`${m}px`},n=l(o["form-layout-container"],{[o["form-layout-container--bigform"]]:s===u.bigform},f),d=l(o["form-layout-child"],{[o["form-layout-child--two"]]:r==="two",[o["form-layout-child--three"]]:r==="three",[o["form-layout-child--four"]]:r==="four",[o["form-layout-child--five"]]:r==="five"});return e.createElement("div",{"data-testid":t.testId,"data-analyticsid":h.FormLayout,style:c,className:n},e.Children.map(t.children,i=>e.createElement("div",{className:d},a?a(i):i)))}),g=v;export{g as F,y as a,v as b};
+import a from"react";import m from"classnames";import{FormVariant as h,AnalyticsId as v}from"./constants.js";import o from"./components/FormLayout/styles.module.scss";var p=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(p||{});const l=a.forwardRef((t,w)=>{const{maxColumns:r="one",colMinWidth:s=300,variant:f,className:c,mapHelper:e}=t,n={"--min-col-width":`${s}px`},d=m(o["form-layout-container"],{[o["form-layout-container--bigform"]]:f===h.bigform},c),u=m(o["form-layout-child"],{[o["form-layout-child--two"]]:r==="two",[o["form-layout-child--three"]]:r==="three",[o["form-layout-child--four"]]:r==="four",[o["form-layout-child--five"]]:r==="five"});return a.createElement("div",{"data-testid":t.testId,"data-analyticsid":v.FormLayout,style:n,className:d},a.Children.map(t.children,(i,y)=>a.createElement("div",{className:u},e?e(i,y):i)))});l.displayName="FormLayout";const C=l;export{C as F,p as a,l as b};
 //# sourceMappingURL=FormLayout.js.map

package/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child","FormLayout$1"],"mappings":"uKAQY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,CAAW,MACjDK,EAA6BC,EACjCC,EAAgB,uBAAuB,EACvC,CACE,CAACA,EAAgB,gCAAgC,CAAC,EAAGN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,mBAAmB,EAAG,CAC9E,CAACA,EAAgB,wBAAwB,CAAC,EAAGR,IAAY,MACzD,CAACQ,EAAgB,0BAA0B,CAAC,EAAGR,IAAY,QAC3D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,OAC1D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,MAAA,CAC3D,EAED,uBACG,MAAI,CAAA,cAAaF,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,GACtGT,EAAM,SAAS,IAAIC,EAAM,SAAWc,GAC5Bf,EAAA,cAAC,OAAI,UAAWa,GAAyBN,EAAYA,EAAUQ,CAAK,EAAIA,CAAM,CACtF,CACH,CAEJ,CAAC,EAEDC,EAAejB"}
+{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child","index","FormLayout$1"],"mappings":"uKAQY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,CAAW,MACjDK,EAA6BC,EACjCC,EAAgB,uBAAuB,EACvC,CACE,CAACA,EAAgB,gCAAgC,CAAC,EAAGN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,mBAAmB,EAAG,CAC9E,CAACA,EAAgB,wBAAwB,CAAC,EAAGR,IAAY,MACzD,CAACQ,EAAgB,0BAA0B,CAAC,EAAGR,IAAY,QAC3D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,OAC1D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,MAAA,CAC3D,EAED,uBACG,MAAI,CAAA,cAAaF,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,GACtGT,EAAM,SAAS,IAAIC,EAAM,SAAU,CAACc,EAAwBC,IACpDhB,EAAA,cAAC,OAAI,UAAWa,CAAA,EAAyBN,EAAYA,EAAUQ,EAAOC,CAAK,EAAID,CAAM,CAC7F,CACH,CAEJ,CAAC,EAEDhB,EAAW,YAAc,aAEzB,MAAAkB,EAAelB"}

package/Input.js

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

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode = FormMode.onwhite,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(defaultValue || '');\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","FormMode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: 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    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    baseIncrementValue,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\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 inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--bigform']]: bigForm,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--bigform']]: bigForm,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? (\n      <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n    ) : null;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const widthStyling = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']} style={{ width: widthStyling }}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          {rightOfInput}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={widthStyling}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","widthStyling","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"0kBA6EY,IAAAA,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,KAAO,OACPA,EAAA,KAAO,OATGA,IAAAA,IAAA,CAAA,CAAA,EAYZ,MAAMC,GAAmB,CAACC,EAAoBC,EAAkBC,IAA6B,CACrF,MAAAC,EAAeF,EAAU,SAAW,OACpCG,EAAYH,EAAU,GAAGC,CAAQ,KAAO,MACxCG,EAAc,MAEb,MAAA,QAAQL,EAAaM,EAA0B,QAAQH,CAAY,MAAMC,CAAS,MAAMC,CAAW,GAC5G,EAEME,EAAQC,EAAM,WAAW,CAACC,EAAmBC,IAAqC,CAChF,KAAA,CACJ,UAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,KAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAS,QAChB,mBAAAC,EACA,QAAAC,EACA,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,cAAAC,EACA,QAAAC,EACA,GAAGC,CACD,EAAAhC,EACEiC,EAAaC,KACbC,EAAoBC,EAAuB,IAAI,EAC/CC,EAAeC,GAAQ5B,CAAO,EAC9B,CAAC6B,EAAOC,EAAQ,EAAIC,EAAStC,GAAgB,EAAE,EAC/C,CAACuC,GAAWC,EAAY,EAAIF,EAAsC,MAAS,EAC3EG,EAAgBR,EAAgB,EAAK,EACrCS,EAAW,UAEXC,GAASlC,IAASC,EAAS,OAC3BkC,GAAcnC,IAASC,EAAS,YAChCmC,GAAwB,CAAC,CAAClB,GAAiBS,EAAM,WAAW,OAAST,EACrEmB,EAAUrC,IAASC,EAAS,WAAa,CAAC,CAACK,GAAa,CAAC,CAACD,GAAS+B,GACnEE,EAAUnC,IAAYoC,GAAY,QAClCC,GAAgB7C,GAAeK,IAASC,EAAS,QAAU,CAACoC,EAE5DI,GAAoBC,EAAGC,EAAO,eAAe,EAAGrD,CAAS,EAEzDsD,GAAiBF,EAAGC,EAAO,iBAAiB,EAAG,CACnD,CAACA,EAAO,8BAA8B,CAAC,EAAGH,GAC1C,CAACG,EAAO,+BAA+B,CAAC,EAAGR,GAC3C,CAACQ,EAAO,0BAA0B,CAAC,EAAGT,GACtC,CAACS,EAAO,0BAA0B,CAAC,EAAGN,EACtC,CAACM,EAAO,0BAA0B,CAAC,EAAGL,EACtC,CAACK,EAAO,2BAA2B,CAAC,EAAGnC,EACvC,CAACmC,EAAO,4BAA4B,CAAC,EAAG/C,CAAA,CACzC,EAEKiD,GAAaH,EAAGC,EAAO,wBAAwB,EAAG,CACtD,CAACA,EAAO,iCAAiC,CAAC,EAAGL,EAC7C,CAACK,EAAO,kCAAkC,CAAC,EAAGnC,CAAA,CAC/C,EAEKsC,GAAYtC,EAAWuC,EAAS,UAAW,GAAG,EAAIA,EAAS,OAAO,EAClElE,EAAWwC,IAAe2B,GAAW,IAAM,CAACV,EAAUW,EAAS,OAASA,EAAS,MAEjFC,EAAa,IACVtD,IAAS,OACbT,EAAA,cAAAgE,GAAA,CAAK,UAAWR,EAAO,8BAA8B,EAAG,MAAOG,GAAW,KAAMjE,EAAU,QAASe,EAAM,EACxG,KAIAwD,GAAeC,GAAmC,CAClD,GAAA9B,GAAqBA,EAAkB,SAAW3B,EAAM,CACpD,MAAA0D,EAAgBzD,EAAY,EAAI,EACxB0B,EAAkB,QAAQ,SAAS+B,CAAa,EACxD,MAAM,EAENlE,EAAA,SAAWA,EAAM,QAAQiE,CAAC,CAClC,CAAA,EAGIE,GAAgBF,GAAiD,CAC/D,MAAAG,EAAWC,GAAkBJ,CAAC,EAEhCtC,GACFA,EAASsC,CAAC,EAGZzB,GAAS4B,CAAQ,EACjBzB,GAAayB,CAAQ,CAAA,EAIjBC,GAAqBJ,GAAmD,CACxE,GAAA,OAAOnD,EAAuB,KAAeT,IAAS,SAAU,OAAO4D,EAAE,OAAO,MAEpF,MAAMK,EAAgB,OAAOL,EAAE,OAAO,KAAK,EAEvC,MAAA,CAACvB,IAAa,CAACE,EAAc,UAAY0B,IAAkB,GAAKA,IAAkB,MAClFL,EAAA,OAAO,MAAQnD,EAAqB,IAGjCmD,EAAE,OAAO,KAAA,EAGZM,GAAiBN,GAAmD,CACpEpB,EAAS,KAAKoB,EAAE,GAAG,IACrBrB,EAAc,QAAU,IAE1BhB,GAAaA,EAAUqC,CAAC,CAAA,EAGpBO,GAAeP,GAAmD,CAClEpB,EAAS,KAAKoB,EAAE,GAAG,IACrBrB,EAAc,QAAU,GAC1B,EAGI6B,EAAehD,EAAQnC,GAAiBmC,EAAO,CAAC,CAACjB,EAAMf,CAAQ,EAAI,OAEzE,uBACGiF,GAAa,CAAA,UAAAxD,CAAA,kBACX,MAAI,CAAA,cAAaC,EAAQ,mBAAkBwD,GAAY,MAAO,UAAWtB,GAAmB,IAAK1C,CAC/F,EAAAiE,GAAY5D,EAAOqB,EAAczB,EAAkBQ,CAAQ,EAE5DrB,EAAA,cAAC,MAAI,CAAA,UAAWwD,EAAO,iBAAiB,EAAG,MAAO,CAAE,MAAOkB,EAEzD,EAAA1E,EAAA,cAAC,OAAI,QAASiE,GAAa,IAAK7B,EAAmB,UAAWqB,IAC3D,CAAC/C,GAAaqD,EACf,EAAA/D,EAAA,cAAC,QAAA,CACC,SAAUoE,GACV,UAAWI,GACX,QAASC,GACT,KAAAlE,EACA,KAAAD,EACA,aAAAF,EACA,GAAIkC,EACJ,UAAWoB,GACX,IAAAxD,EACA,kBAAiBD,EAAM,iBAAiB,GAAK,OAC7C,mBAAkBA,EAAM,kBAAkB,GAAK,OAC/C,eAAc,CAAC,CAACiD,EAChB,SAAA7B,EACA,YAAAhB,EACA,SAAAiB,EACA,aAAcC,GAAgB,MAC9B,SAAAI,EAEA,UAAAG,EACC,GAAGG,CAAA,CAAA,EAELvB,GAAaqD,GAChB,EACCtC,CACH,EACCM,GACC/B,EAAA,cAAC8E,GAAA,CACC,cAAA/C,EACA,OAAQS,EAAM,SAAA,EAAW,OACzB,QAAAR,EACA,KAAAnB,EACA,SAAU6D,CAAA,CAAA,EAGblD,CACH,CACF,CAEJ,CAAC,EAEDzB,EAAM,YAAc,QAEpB,MAAAgF,GAAehF"}

package/RadioButton.js

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

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onGrey = mode === FormMode.ongrey;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label__bigform']]: bigform,\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, bigform: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: mode === 'onblueberry' && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__bigform']]: bigform,\n      [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","bigform","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","FormVariant","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}

package/Select.js.map

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

package/Textarea.js

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

package/Textarea.js.map

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

package/components/Button/styles.module.scss

@@ -99,6 +99,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  /* stylelint-disable-next-line */
   :disabled > & {
     background-color: $dark-mode-disabled-transparrent;
   }
@@ -185,6 +186,10 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &:disabled {
     cursor: not-allowed;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .button {
@@ -283,10 +288,12 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include outline($cherry700, $cherry50);
   }
 
+  /* stylelint-disable-next-line */
   &--borderless:not(.button--only-icon) {
     padding: 0 getSpacer(3xs);
   }
 
+  /* stylelint-disable-next-line */
   &--borderless {
     &:hover {
       box-shadow: none;
@@ -305,6 +312,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  /* stylelint-disable-next-line */
   &__text {
     color: $white;
     margin: 0 auto 0 0;
@@ -320,6 +328,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  /* stylelint-disable-next-line */
   &--outline &__text {
     @include outline-text($blueberry600);
   }
@@ -327,6 +336,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include outline-text($cherry600);
   }
 
+  /* stylelint-disable-next-line */
   &--borderless &__text {
     @include borderless-text($blueberry600);
   }
@@ -334,6 +344,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include borderless-text($cherry600);
   }
 
+  /* stylelint-disable-next-line */
   &--only-icon &__text {
     @include sr-only;
   }

package/components/FormExample/FormExample.d.ts

@@ -10,8 +10,7 @@ export declare enum FormExampleVariants {
     radiobutton = "radiobutton",
     textarea = "textarea",
     input = "input",
-    select = "select",
-    date = "date"
+    select = "select"
 }
 export declare const FormExample: (props: FormExampleProps) => JSX.Element;
 export default FormExample;

package/components/FormExample/FormExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAgB9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAmTrD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAc9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA+OrD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/FormExample/componentdata.json

@@ -1 +1 @@
-{"props":{"exampleType":{"defaultValue":null,"description":"","name":"exampleType","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":true,"type":{"name":"enum","raw":"FormExampleVariants","value":[{"value":"\"formgroup\"","description":"","fullComment":"","tags":{}},{"value":"\"checkbox\"","description":"","fullComment":"","tags":{}},{"value":"\"radiobutton\"","description":"","fullComment":"","tags":{}},{"value":"\"textarea\"","description":"","fullComment":"","tags":{}},{"value":"\"input\"","description":"","fullComment":"","tags":{}},{"value":"\"select\"","description":"","fullComment":"","tags":{}},{"value":"\"date\"","description":"","fullComment":"","tags":{}}]}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}}}}
+{"props":{"exampleType":{"defaultValue":null,"description":"","name":"exampleType","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":true,"type":{"name":"enum","raw":"FormExampleVariants","value":[{"value":"\"formgroup\"","description":"","fullComment":"","tags":{}},{"value":"\"checkbox\"","description":"","fullComment":"","tags":{}},{"value":"\"radiobutton\"","description":"","fullComment":"","tags":{}},{"value":"\"textarea\"","description":"","fullComment":"","tags":{}},{"value":"\"input\"","description":"","fullComment":"","tags":{}},{"value":"\"select\"","description":"","fullComment":"","tags":{}}]}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}}}}