@helsenorge/designsystem-react 2.1.0 → 2.2.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [2.2.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.1.0&targetVersion=GTv2.2.0) (2022-10-25)
+
+
+### Features
+
+*  input og textarea kan vise valideringsfeil uten bruk av formgroup ([dc44f8e](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/dc44f8ebd187bd20a62d544256f9902f2c39925f)), closes [#283315](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/283315)
+
+
+### Bug Fixes
+
+*  bold font i tabell-header ([ba90898](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/ba908981f6bb2c9b5bce2f1ac6da0201263d2ecd)), closes [#287872](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287872)
+*  nummerert visning har minimum 40px bredde ([5422e28](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/5422e28ef4aac66b3a32fd02c3ea14fcf899937b))
+*  progressbar uten alle prikker har to prikker (venstre og høyre) ([cf6d20f](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/cf6d20fec7916831dea260eab98d578665fe6a85))
+
+## [2.1.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.0.0&targetVersion=GTv2.1.0) (2022-10-20)
+
+
+### Features
+
+*  progressbar ([961f4ce](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/961f4ce75ff34cf8e237b3bf584ff7ba613b3461)), closes [#286349](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/286349)
+
+
+### Bug Fixes
+
+*  expanderlist focus jsx fiks ([474dc5c](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/474dc5c72639fd5d41101916fe7fd05bfdafe677)), closes [#285115](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285115)
+*  setter background-clip på th i table ([7f65224](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/7f65224a296c99dac71da2b8843d2e244beac259))
+*  setter background-clip på th i table ([3279386](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/32793866162d3e95ea61a6156907b2edea798de6))
+*  tabell har bare overflow:hidden når den er for liten ([b8b3c8a](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/b8b3c8a8532e8bfd4f0415213480895de72398df)), closes [#286994](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/286994)
+
 ## [2.0.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.8.0&targetVersion=GTv2.0.0) (2022-10-11)
 
 ## 2.0.0-beta.8 (2022-10-06)

package/ErrorWrapper.js

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

package/ErrorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","withErrorStyle","cn","styles","errorStyles","React"],"mappings":"2GAYO,MAAMA,EAAqDC,GAAA,CAC1D,KAAA,CAAE,UAAAC,CAAc,EAAAD,EAEhBE,EAAiBC,EAAGC,EAAO,iBAAkB,CAAE,CAACA,EAAO,8BAA+BH,CAAW,CAAA,EAEjGI,EAAcF,EAAGC,EAAO,wBAAwB,EAEtD,OACGE,EAAA,cAAA,MAAA,CAAI,UAAWJ,CAAA,EACbD,GACEK,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,CACxB,EAAAJ,CACH,EAEDD,EAAM,QACT,CAEJ"}

package/FormGroup.js

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

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\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  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = 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    [formGroupStyles['form-group--invalid']]: error,\n  });\n  const errorStyles = classNames(formGroupStyles['form-group-wrapper__errors'], {\n    [formGroupStyles['form-group-wrapper__errors--bigform']]: bigform,\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 mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if ((child as React.ReactElement<FormLayoutProps>).type === FormLayout) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if ((child as React.ReactElement<CheckboxProps>).type === Checkbox) {\n      let checkbox = (child as React.ReactElement<CheckboxProps>).type === Checkbox;\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? checkbox.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<RadioButtonProps>).type === RadioButton) {\n      let radioButton = (child as React.ReactElement<RadioButtonProps>).type === RadioButton;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? radioButton.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<InputProps>).type === Input) {\n      let input = (child as React.ReactElement<InputProps>).type === Input;\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? input.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    }\n    return child;\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      <div className={formGroupClasses}>\n        {error && (\n          <p role={'alert'} className={errorStyles}>\n            {error}\n          </p>\n        )}\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={formGroupStyles['field-set']}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={formGroupStyles['field-set']}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","errorStyles","legendClasses","mapFormComponent","child","FormLayout","Checkbox","checkbox","RadioButton","radioButton","Input","input","AnalyticsId","Title"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\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  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = 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 mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if ((child as React.ReactElement<FormLayoutProps>).type === FormLayout) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if ((child as React.ReactElement<CheckboxProps>).type === Checkbox) {\n      let checkbox = (child as React.ReactElement<CheckboxProps>).type === Checkbox;\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? checkbox.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<RadioButtonProps>).type === RadioButton) {\n      let radioButton = (child as React.ReactElement<RadioButtonProps>).type === RadioButton;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? radioButton.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<InputProps>).type === Input) {\n      let input = (child as React.ReactElement<InputProps>).type === Input;\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? input.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    }\n    return child;\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      <ErrorWrapper errorText={error}>\n        <div className={formGroupClasses}>\n          {htmlMarkup === 'div' && (\n            <div id={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </div>\n          )}\n          {htmlMarkup === 'fieldset' && (\n            <fieldset name={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </fieldset>\n          )}\n        </div>\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","mapFormComponent","child","FormLayout","Checkbox","checkbox","RadioButton","radioButton","Input","input","AnalyticsId","Title","ErrorWrapper"],"mappings":"mYAsCO,MAAMA,EAAYC,EAAM,WAAW,CAACC,EAAuBC,IAA4C,CAC5G,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAOC,EAAS,QAAS,QAAAC,EAAUC,EAAY,OAAQ,MAAAC,EAAO,KAAAC,EAAM,WAAAC,EAAa,UAAA,EAAeT,EAC7GU,EAASP,IAASC,EAAS,OAC3BO,EAAUN,IAAYC,EAAY,QAClCM,EAA0BC,EAC9BC,EAAgB,sBAChB,CACE,CAACA,EAAgB,gCAAiCJ,EAClD,CAACI,EAAgB,gCAAiCP,CACpD,EACAL,CAAA,EAEIa,EAAeF,EAAWC,EAAgB,6BAA8B,CAC5E,CAACA,EAAgB,uCAAwCJ,GAAU,CAACH,EACpE,CAACO,EAAgB,uCAAwCH,CAAA,CAC1D,EACKK,EAAmBH,EAAWC,EAAgB,aAAa,EAE3DG,EAAgBJ,EAAWC,EAAgB,qBAAsB,CACrE,CAACA,EAAgB,+BAAgCJ,GAAU,CAACH,EAC5D,CAACO,EAAgB,+BAAgCH,CAAA,CAClD,EAEKO,EAAoBC,GAA4C,CAC/D,GAAAA,EAA8C,OAASC,EACnD,OAAArB,EAAM,aAAaoB,EAA8C,CACtE,QAAAd,EACA,UAAWa,CAAA,CACZ,EACH,GAAYC,EAA4C,OAASE,EAAU,CACrE,IAAAC,EAAYH,EAA4C,OAASE,EAC9D,OAAAtB,EAAM,aAAaoB,EAA4C,CACpE,KAAMX,GAAA,KAAAA,EAAQc,EAAS,QAAQ,KAC/B,KAAAnB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CAAA,SACSY,EAA+C,OAASI,EAAa,CAC3E,IAAAC,EAAeL,EAA+C,OAASI,EACpE,OAAAxB,EAAM,aAAaoB,EAA+C,CACvE,KAAMX,GAAA,KAAAA,EAAQgB,EAAY,QAAQ,KAClC,KAAArB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CAAA,SACSY,EAAyC,OAASM,EAAO,CAC/D,IAAAC,EAASP,EAAyC,OAASM,EACxD,OAAA1B,EAAM,aAAaoB,EAAyC,CACjE,KAAMX,GAAA,KAAAA,EAAQkB,EAAM,QAAQ,KAC5B,KAAAvB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CACH,CACO,OAAAY,CAAA,EAGT,OACGpB,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,OAAQ,mBAAkB2B,EAAY,UAAW,UAAWf,EAAyB,IAAAX,EAAU,SAAU,EAC9H,EAAAD,EAAM,OACJD,EAAA,cAAA6B,EAAA,CAAM,UAAWb,EAAc,WAAY,KAAM,WAAY,SAAU,OAAQ,CAAE,UAAW,EAAG,aAAcR,EAAQ,EAAI,CAAE,CACzH,EAAAP,EAAM,KACT,EAEDD,EAAA,cAAA8B,EAAA,CAAa,UAAWtB,CAAA,EACtBR,EAAA,cAAA,MAAA,CAAI,UAAWiB,CACb,EAAAP,IAAe,OACbV,EAAA,cAAA,MAAA,CAAI,GAAIC,EAAM,MAAO,UAAWc,EAAgB,YAC9C,EAAAd,EAAM,QAAWD,EAAA,cAAA,KAAA,CAAG,UAAWkB,CAAA,EAAgBjB,EAAM,MAAO,EAC5DD,EAAM,SAAS,IAAIC,EAAM,SAAUkB,CAAgB,CACtD,EAEDT,IAAe,YACbV,EAAA,cAAA,WAAA,CAAS,KAAMC,EAAM,MAAO,UAAWc,EAAgB,YACrD,EAAAd,EAAM,QAAWD,EAAA,cAAA,SAAA,CAAO,UAAWkB,CAAA,EAAgBjB,EAAM,MAAO,EAChED,EAAM,SAAS,IAAIC,EAAM,SAAUkB,CAAgB,CACtD,CAEJ,CACF,CACF,CAEJ,CAAC"}

package/Input.js

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

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\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?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\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    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], {\n    [styles['input-wrapper--invalid']]: errorText,\n  });\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n      {label && (\n        <div className={labelWrapperClass}>\n          <label htmlFor={inputId}>{label}</label>\n          {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n        </div>\n      )}\n      {belowLabelChildren && <div>{belowLabelChildren}</div>}\n      <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n        {!iconRight && renderIcon()}\n        <input\n          name={name}\n          type={type}\n          defaultValue={defaultValue}\n          id={inputId}\n          className={inputClass}\n          ref={ref}\n          aria-invalid={!!onError}\n          disabled={disabled}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          autoComplete={autoComplete || 'off'}\n          required={required}\n        />\n        {iconRight && renderIcon()}\n      </div>\n    </div>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","AVERAGE_CHARACTER_WIDTH_PX","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\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?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\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    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper']);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={inputId}>{label}</label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n          />\n          {iconRight && renderIcon()}\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","AVERAGE_CHARACTER_WIDTH_PX","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import a,{useState as A,useRef as Z,useEffect as ee}from"react";import s from"classnames";import e from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as te}from"./constants.js";import{a as ae}from"./uuid.js";import{A as re}from"./Input.js";const ne=o=>{const p="2rem",r="16px",l="4px";return`calc(${o*re}px + ${p} + ${r} + ${l})`},pe=a.forwardRef((o,p)=>{const{maxCharacters:r,maxText:l,width:b,testId:I,defaultValue:_,marginBottom:k,transparent:L,mode:m,label:g,textareaId:v=ae(),minRows:E=3,maxRows:c=10,grow:C,errorText:R,afterLabelChildren:T,belowLabelChildren:y,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q}=o,[z,W]=A(E),[u,G]=A(_||""),i=Z(null),H=t=>{const d=t.rows;t.rows=E;const n=Math.floor((t.scrollHeight-16)/28);n===d&&(t.rows=n),n>=c&&(t.rows=c,t.scrollTop=t.scrollHeight),n<c?W(n):W(c)},O=t=>{C&&H(t.target),G(t.target.value)},x=m===f.ondark,P=m===f.onblueberry,X=r&&u.toString().length>r,h=m===f.oninvalid||R||X,j=s(e.textarea,{[e["textarea--gutterBottom"]]:k,[e["textarea--invalid"]]:R}),J=s(e["textarea__label-wrapper"],{[e["textarea__label-wrapper--on-dark"]]:x}),K=s(e["content-wrapper"],{[e["content-wrapper--transparent"]]:L,[e["content-wrapper--on-blueberry"]]:P,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:h,[e["content-wrapper--disabled"]]:o.disabled}),Q=s(e["content-wrapper__input"],{[e["content-wrapper__input--disabled"]]:o.disabled}),U=s(e["textarea__counter-wrapper"],{[e["textarea__counter-wrapper--on-dark"]]:x,[e["textarea__counter-wrapper--invalid"]]:h});ee(()=>{var t,w,d;if(C&&((t=i.current)==null?void 0:t.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];H(n)}},[]);let N=0;r&&(N=u.toString().length/r);const Y=N>.95?"polite":"off",$=b?ne(b):void 0;return a.createElement("div",{"data-testid":I,"data-analyticsid":te.Textarea,className:j},g&&a.createElement("div",{className:J},a.createElement("label",{htmlFor:v},g),T&&a.createElement("div",{className:e["textarea__after-label-children"]},T)),y&&a.createElement("div",null,y),a.createElement("div",{className:K,ref:i,style:{maxWidth:$}},a.createElement("textarea",{rows:z,defaultValue:_,id:v,className:Q,ref:p,onChange:O,"aria-invalid":!!h,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q})),r&&a.createElement("div",{"aria-live":Y,"aria-atomic":"true",className:U,style:{maxWidth:$}},a.createElement("p",null,`${u.toString().length}/${r} ${l||"tegn"}`)))});export{pe as T};
+import r,{useState as A,useRef as Z,useEffect as ee}from"react";import s from"classnames";import e from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as te}from"./constants.js";import{a as re}from"./uuid.js";import{A as ae}from"./Input.js";import{E as ne}from"./ErrorWrapper.js";const oe=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*ae}px + ${p} + ${a} + ${l})`},ue=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:I,defaultValue:_,marginBottom:k,transparent:L,mode:m,label:E,textareaId:g=re(),minRows:v=3,maxRows:c=10,grow:C,errorText:R,afterLabelChildren:T,belowLabelChildren:W,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q}=o,[z,y]=A(v),[u,G]=A(_||""),i=Z(null),H=t=>{const d=t.rows;t.rows=v;const n=Math.floor((t.scrollHeight-16)/28);n===d&&(t.rows=n),n>=c&&(t.rows=c,t.scrollTop=t.scrollHeight),n<c?y(n):y(c)},O=t=>{C&&H(t.target),G(t.target.value)},x=m===f.ondark,P=m===f.onblueberry,X=a&&u.toString().length>a,h=m===f.oninvalid||R||X,j=s(e.textarea,{[e["textarea--gutterBottom"]]:k}),J=s(e["textarea__label-wrapper"],{[e["textarea__label-wrapper--on-dark"]]:x}),K=s(e["content-wrapper"],{[e["content-wrapper--transparent"]]:L,[e["content-wrapper--on-blueberry"]]:P,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:h,[e["content-wrapper--disabled"]]:o.disabled}),Q=s(e["content-wrapper__input"],{[e["content-wrapper__input--disabled"]]:o.disabled}),U=s(e["textarea__counter-wrapper"],{[e["textarea__counter-wrapper--on-dark"]]:x,[e["textarea__counter-wrapper--invalid"]]:h});ee(()=>{var t,w,d;if(C&&((t=i.current)==null?void 0:t.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];H(n)}},[]);let N=0;a&&(N=u.toString().length/a);const Y=N>.95?"polite":"off",$=b?oe(b):void 0;return r.createElement(ne,{errorText:R},r.createElement("div",{"data-testid":I,"data-analyticsid":te.Textarea,className:j},E&&r.createElement("div",{className:J},r.createElement("label",{htmlFor:g},E),T&&r.createElement("div",{className:e["textarea__after-label-children"]},T)),W&&r.createElement("div",null,W),r.createElement("div",{className:K,ref:i,style:{maxWidth:$}},r.createElement("textarea",{rows:z,defaultValue:_,id:g,className:Q,ref:p,onChange:O,"aria-invalid":!!h,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q})),a&&r.createElement("div",{"aria-live":Y,"aria-atomic":"true",className:U,style:{maxWidth:$}},r.createElement("p",null,`${u.toString().length}/${a} ${l||"tegn"}`))))});export{ue 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';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { FormMode, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport { AVERAGE_CHARACTER_WIDTH_PX } from '../Input';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue'\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?: string;\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  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\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 handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n    [styles[`textarea--invalid`]]: errorText,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\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  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\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  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n      {label && (\n        <div className={labelWrapperClass}>\n          <label htmlFor={textareaId}>{label}</label>\n          {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n        </div>\n      )}\n      {belowLabelChildren && <div>{belowLabelChildren}</div>}\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          onChange={handleChange}\n          aria-invalid={!!onError}\n          autoFocus={autoFocus}\n          disabled={disabled}\n          name={name}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          required={required}\n        />\n      </div>\n      {max && (\n        <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n          <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { FormMode, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport { AVERAGE_CHARACTER_WIDTH_PX } from '../Input';\nimport ErrorWrapper from '../ErrorWrapper';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue'\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?: string;\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  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\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: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\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 handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\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  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\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  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\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        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\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            onChange={handleChange}\n            aria-invalid={!!onError}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n          />\n        </div>\n        {max && (\n          <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n            <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n          </div>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}

package/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ErrorWrapperProps {
+    /** Error message */
+    errorText?: string;
+    /** Form component */
+    children?: React.ReactNode;
+}
+export declare const ErrorWrapper: React.FC<ErrorWrapperProps>;
+export default ErrorWrapper;
+//# sourceMappingURL=ErrorWrapper.d.ts.map

package/components/ErrorWrapper/ErrorWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/ErrorWrapper/componentdata.json

@@ -0,0 +1 @@
+{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}

package/components/ErrorWrapper/index.d.ts

@@ -0,0 +1,4 @@
+import ErrorWrapper from './ErrorWrapper';
+export * from './ErrorWrapper';
+export default ErrorWrapper;
+//# sourceMappingURL=index.d.ts.map

package/components/ErrorWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/components/ErrorWrapper/index.js

@@ -0,0 +1,2 @@
+import"../../ErrorWrapper.js";import{E as e,E as i}from"../../ErrorWrapper.js";import"react";import"classnames";import"./styles.module.scss";export{e as ErrorWrapper,i as default};
+//# sourceMappingURL=index.js.map

package/components/ErrorWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/ErrorWrapper/styles.module.scss

@@ -0,0 +1,44 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.error-wrapper {
+  padding-bottom: getSpacer(m);
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding-bottom: getSpacer(l);
+  }
+
+  &--with-error {
+    padding-top: getSpacer(s);
+    margin-left: getSpacer(xs) * -1;
+    margin-right: getSpacer(xs) * -1;
+    padding-left: getSpacer(2xs);
+    padding-right: getSpacer(xs);
+    background-color: $cherry100;
+    border-left: getSpacer(3xs) solid $cherry500;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-left: (getSpacer(m) + 0.25rem) * -1;
+      margin-right: (getSpacer(m) + 0.25rem) * -1;
+      padding-left: getSpacer(m);
+      padding-right: getSpacer(m);
+    }
+  }
+
+  &__errors {
+    line-height: 1.875rem;
+    font-size: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin-top: 0;
+  }
+
+  &__error-text {
+    font-size: $font-size-sm;
+    line-height: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin-top: 0;
+  }
+}

package/components/ErrorWrapper/styles.module.scss.d.ts

@@ -0,0 +1,12 @@
+export type Styles = {
+  'error-wrapper': string;
+  'error-wrapper__error-text': string;
+  'error-wrapper__errors': string;
+  'error-wrapper--with-error': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -1 +1 @@
-{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM9C,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;CAChB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAoJrD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM9C,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;CAChB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAgJrD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/FormExample/index.js

@@ -1,12 +1,12 @@
-import O,{createContext as Pr,useRef as F,useState as qr,useCallback as w,useEffect as sr,useMemo as Gr,isValidElement as pr}from"react";import{V as Wr}from"../../Validation.js";import{F as X}from"../../FormGroup.js";import{C as oe}from"../../Checkbox.js";import{B as Hr}from"../../Button.js";import{R as Ce}from"../../RadioButton.js";import{T as ir}from"../../Textarea.js";import{I as cr}from"../../Input.js";import or from"../Icons/Hospital.js";import{F as _r,a as $r}from"../../FormLayout.js";import{i as zr}from"../../uuid.js";import"classnames";import"../Validation/styles.module.scss";import"../../constants.js";import"../FormGroup/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../RadioButton/styles.module.scss";import"../Textarea/styles.module.scss";import"../Input/styles.module.scss";import"../FormLayout/styles.module.scss";var ve=e=>e instanceof HTMLElement;const le={BLUR:"blur",CHANGE:"change",INPUT:"input"},re={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},vr="select",Te="undefined",Y={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};function Kr({ref:e},n,t){ve(e)&&t&&(e.addEventListener(n?le.CHANGE:le.INPUT,t),e.addEventListener(le.BLUR,t))}var K=e=>e==null;const hr=e=>typeof e=="object";var H=e=>!K(e)&&!Array.isArray(e)&&hr(e)&&!(e instanceof Date),Re=e=>/^\w*$/.test(e),fe=e=>e.filter(Boolean),Er=e=>fe(e.replace(/["|']/g,"").replace(/\[/g,".").replace(/\]/g,"").split("."));function j(e,n,t){let c=-1;const o=Re(n)?[n]:Er(n),u=o.length,a=u-1;for(;++c<u;){const y=o[c];let l=t;if(c!==a){const p=e[y];l=H(p)||Array.isArray(p)?p:isNaN(+o[c+1])?{}:[]}e[y]=l,e=e[y]}return e}var He=(e,n={})=>{for(const t in e)Re(t)?n[t]=e[t]:j(n,t,e[t]);return n},T=e=>e===void 0,h=(e={},n,t)=>{const c=fe(n.split(/[,[\].]+?/)).reduce((o,u)=>K(o)?o:o[u],e);return T(c)||c===e?T(e[n])?t:e[n]:c},Jr=(e,n)=>{for(const t in e)if(h(n,t)){const c=e[t];if(c){if(c.ref.focus&&T(c.ref.focus()))break;if(c.options){c.options[0].ref.focus();break}}}},ur=(e,n)=>{ve(e)&&e.removeEventListener&&(e.removeEventListener(le.INPUT,n),e.removeEventListener(le.CHANGE,n),e.removeEventListener(le.BLUR,n))};const ar={isValid:!1,value:null};var Or=e=>Array.isArray(e)?e.reduce((n,t)=>t&&t.ref.checked?{isValid:!0,value:t.ref.value}:n,ar):ar,Qr=e=>[...e].filter(({selected:n})=>n).map(({value:n})=>n),we=e=>e.type==="radio",kr=e=>e.type==="file",de=e=>e.type==="checkbox",Vr=e=>e.type===`${vr}-multiple`;const lr={value:!1,isValid:!1},fr={value:!0,isValid:!0};var Ar=e=>{if(Array.isArray(e)){if(e.length>1){const o=e.filter(u=>u&&u.ref.checked).map(({ref:{value:u}})=>u);return{value:o,isValid:!!o.length}}const{checked:n,value:t,attributes:c}=e[0].ref;return n?c&&!T(c.value)?T(t)||t===""?fr:{value:t,isValid:!0}:fr:lr}return lr};function ae(e,n,t,c,o){const u=e.current[n];if(u){const{ref:{value:a,disabled:y},ref:l,valueAsNumber:p,valueAsDate:G,setValueAs:E}=u;return y&&c?void 0:kr(l)?l.files:we(l)?Or(u.options).value:Vr(l)?Qr(l.options):de(l)?Ar(u.options).value:o?a:p?a===""?NaN:+a:G?l.valueAsDate:E?E(a):a}if(t)return h(t.current,n)}function De(e){return e?!(e instanceof HTMLElement)||e.nodeType===Node.DOCUMENT_NODE?!1:De(e.parentNode):!0}var x=e=>H(e)&&!Object.keys(e).length,ze=e=>typeof e=="boolean";function Xr(e,n){const t=n.slice(0,-1).length;let c=0;for(;c<t;)e=T(e)?c++:e[n[c++]];return e}function W(e,n){const t=Re(n)?[n]:Er(n),c=t.length==1?e:Xr(e,t),o=t[t.length-1];let u;c&&delete c[o];for(let a=0;a<t.slice(0,-1).length;a++){let y=-1,l;const p=t.slice(0,-(a+1)),G=p.length-1;for(a>0&&(u=e);++y<p.length;){const E=p[y];l=l?l[E]:e[E],G===y&&(H(l)&&x(l)||Array.isArray(l)&&!l.filter(N=>H(N)&&!x(N)||ze(N)).length)&&(u?delete u[E]:delete e[E]),u=l}}return e}const dr=(e,n)=>e&&e.ref===n;function Yr(e,n,t,c,o,u){const{ref:a,ref:{name:y}}=t,l=e.current[y];if(!o){const p=ae(e,y,c);!T(p)&&j(c.current,y,p)}if(!a.type||!l){delete e.current[y];return}we(a)||de(a)?Array.isArray(l.options)&&l.options.length?(fe(l.options).forEach((p={},G)=>{(De(p.ref)&&dr(p,p.ref)||u)&&(ur(p.ref,n),W(l.options,`[${G}]`))}),l.options&&!fe(l.options).length&&delete e.current[y]):delete e.current[y]:(De(a)&&dr(l,a)||u)&&(ur(a,n),delete e.current[y])}var ne=e=>K(e)||!hr(e);function Ke(e,n){if(ne(e)||ne(n))return n;for(const t in n){const c=e[t],o=n[t];try{e[t]=H(c)&&H(o)||Array.isArray(c)&&Array.isArray(o)?Ke(c,o):o}catch{}}return e}function te(e,n,t){if(ne(e)||ne(n)||e instanceof Date||n instanceof Date)return e===n;if(!pr(e)){const c=Object.keys(e),o=Object.keys(n);if(c.length!==o.length)return!1;for(const u of c){const a=e[u];if(!(t&&u==="ref")){const y=n[u];if((H(a)||Array.isArray(a))&&(H(y)||Array.isArray(y))?!te(a,y,t):a!==y)return!1}}}return!0}function _e(e,n,t,c,o){let u=-1;for(;++u<e.length;){for(const a in e[u])Array.isArray(e[u][a])?(!t[u]&&(t[u]={}),t[u][a]=[],_e(e[u][a],h(n[u]||{},a,[]),t[u][a],t[u],a)):te(h(n[u]||{},a),e[u][a])?j(t[u]||{},a):t[u]=Object.assign(Object.assign({},t[u]),{[a]:!0});c&&!t.length&&delete c[o]}return t}var Zr=(e,n,t)=>Ke(_e(e,n,t.slice(0,e.length)),_e(n,e,t.slice(0,e.length))),Q=e=>typeof e=="string",We=(e,n,t,c,o)=>{const u={};for(const a in e.current)(T(o)||(Q(o)?a.startsWith(o):Array.isArray(o)&&o.find(y=>a.startsWith(y))))&&(u[a]=ae(e,a,void 0,c));return t?He(u):Ke(n,He(u))},Ur=({errors:e,name:n,error:t,validFields:c,fieldsWithValidation:o})=>{const u=T(t),a=h(e,n);return u&&!!a||!u&&!te(a,t,!0)||u&&h(o,n)&&!h(c,n)},xr=e=>e instanceof RegExp,be=e=>H(e)&&!xr(e)?e:{value:e,message:""},Sr=e=>typeof e=="function",$e=e=>Q(e)||pr(e);function mr(e,n,t="validate"){if($e(e)||ze(e)&&!e)return{type:t,message:$e(e)?e:"",ref:n}}var et=(e,n,t,c,o)=>n?Object.assign(Object.assign({},t[e]),{types:Object.assign(Object.assign({},t[e]&&t[e].types?t[e].types:{}),{[c]:o||!0})}):{},Le=async(e,n,{ref:t,ref:{value:c},options:o,required:u,maxLength:a,minLength:y,min:l,max:p,pattern:G,validate:E},N)=>{const B=t.name,k={},L=we(t),V=de(t),se=L||V,P=c==="",_=et.bind(null,B,n,k),S=(R,A,v,D=Y.maxLength,q=Y.minLength)=>{const Z=R?A:v;k[B]=Object.assign({type:R?D:q,message:Z,ref:t},_(R?D:q,Z))};if(u&&(!L&&!V&&(P||K(c))||ze(c)&&!c||V&&!Ar(o).isValid||L&&!Or(o).isValid)){const{value:R,message:A}=$e(u)?{value:!!u,message:u}:be(u);if(R&&(k[B]=Object.assign({type:Y.required,message:A,ref:se?((e.current[B].options||[])[0]||{}).ref:t},_(Y.required,A)),!n))return k}if((!K(l)||!K(p))&&c!==""){let R,A;const v=be(p),D=be(l);if(isNaN(c)){const q=t.valueAsDate||new Date(c);Q(v.value)&&(R=q>new Date(v.value)),Q(D.value)&&(A=q<new Date(D.value))}else{const q=t.valueAsNumber||parseFloat(c);K(v.value)||(R=q>v.value),K(D.value)||(A=q<D.value)}if((R||A)&&(S(!!R,v.message,D.message,Y.max,Y.min),!n))return k}if(Q(c)&&!P&&(a||y)){const R=be(a),A=be(y),v=!K(R.value)&&c.length>R.value,D=!K(A.value)&&c.length<A.value;if((v||D)&&(S(v,R.message,A.message),!n))return k}if(Q(c)&&G&&!P){const{value:R,message:A}=be(G);if(xr(R)&&!R.test(c)&&(k[B]=Object.assign({type:Y.pattern,message:A,ref:t},_(Y.pattern,A)),!n))return k}if(E){const R=ae(e,B,N,!1,!0),A=se&&o?o[0].ref:t;if(Sr(E)){const v=await E(R),D=mr(v,A);if(D&&(k[B]=Object.assign(Object.assign({},D),_(Y.validate,D.message)),!n))return k}else if(H(E)){let v={};for(const[D,q]of Object.entries(E)){if(!x(v)&&!n)break;const Z=await q(R),he=mr(Z,A,D);he&&(v=Object.assign(Object.assign({},he),_(D,he.message)),n&&(k[B]=v))}if(!x(v)&&(k[B]=Object.assign({ref:A},v),!n))return k}}return k};const Je=(e,n,t=[])=>{for(const c in n){const o=e+(H(n)?`.${c}`:`[${c}]`);ne(n[c])?t.push(o):Je(o,n[c],t)}return t};var gr=(e,n,t,c,o)=>{let u;return t.add(n),x(e)||(u=h(e,n),(H(u)||Array.isArray(u))&&Je(n,u).forEach(a=>t.add(a))),T(u)?o?c:h(c,n):u},rt=({isOnBlur:e,isOnChange:n,isOnTouch:t,isTouched:c,isReValidateOnBlur:o,isReValidateOnChange:u,isBlurEvent:a,isSubmitted:y,isOnAll:l})=>l?!1:!y&&t?!(c||a):(y?o:e)?!a:(y?u:n)?a:!0,Me=e=>e.substring(0,e.indexOf("["));const tt=(e,n)=>RegExp(`^${n}([|.)\\d+`.replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e);var nt=(e,n)=>[...e].some(t=>tt(n,t)),st=e=>e.type===`${vr}-one`;function it(e,n){const t=new MutationObserver(()=>{for(const c of Object.values(e.current))if(c&&c.options)for(const o of c.options)o&&o.ref&&De(o.ref)&&n(c);else c&&De(c.ref)&&n(c)});return t.observe(window.document,{childList:!0,subtree:!0}),t}var pe=typeof window!==Te&&typeof document!==Te;function ee(e){var n;let t;if(ne(e)||pe&&(e instanceof File||ve(e))||!["Set","Map","Object","Date","Array"].includes((n=e.constructor)===null||n===void 0?void 0:n.name))return e;if(e instanceof Date)return t=new Date(e.getTime()),t;if(e instanceof Set){t=new Set;for(const c of e)t.add(c);return t}if(e instanceof Map){t=new Map;for(const c of e.keys())t.set(c,ee(e.get(c)));return t}t=Array.isArray(e)?[]:{};for(const c in e)t[c]=ee(e[c]);return t}var yr=e=>({isOnSubmit:!e||e===re.onSubmit,isOnBlur:e===re.onBlur,isOnChange:e===re.onChange,isOnAll:e===re.all,isOnTouch:e===re.onTouched}),br=e=>we(e)||de(e);const ct=typeof window===Te,ue=pe?"Proxy"in window:typeof Proxy!==Te;function ot({mode:e=re.onSubmit,reValidateMode:n=re.onChange,resolver:t,context:c,defaultValues:o={},shouldFocusError:u=!0,shouldUnregister:a=!0,criteriaMode:y}={}){const l=F({}),p=F({}),G=F({}),E=F(new Set),N=F({}),B=F({}),k=F({}),L=F({}),V=F(o),se=F(!1),P=F(!1),_=F(),S=F({}),R=F({}),A=F(c),v=F(t),D=F(new Set),q=F(yr(e)),{isOnSubmit:Z,isOnTouch:he}=q.current,$=y===re.all,[me,Rr]=qr({isDirty:!1,isValidating:!1,dirtyFields:{},isSubmitted:!1,submitCount:0,touched:{},isSubmitting:!1,isSubmitSuccessful:!1,isValid:!Z,errors:{}}),M=F({isDirty:!ue,dirtyFields:!ue,touched:!ue||he,isValidating:!ue,isSubmitting:!ue,isValid:!ue}),f=F(me),Ee=F(),{isOnBlur:Qe,isOnChange:Xe}=F(yr(n)).current;A.current=c,v.current=t,f.current=me,S.current=a?{}:x(S.current)?ee(o):S.current;const I=w((r={})=>{se.current||(f.current=Object.assign(Object.assign({},f.current),r),Rr(f.current))},[]),Ye=()=>M.current.isValidating&&I({isValidating:!0}),Oe=w((r,i,s=!1,m={},g)=>{let d=s||Ur({errors:f.current.errors,error:i,name:r,validFields:L.current,fieldsWithValidation:k.current});const b=h(f.current.errors,r);i?(W(L.current,r),d=d||!b||!te(b,i,!0),j(f.current.errors,r,i)):((h(k.current,r)||v.current)&&(j(L.current,r,!0),d=d||b),W(f.current.errors,r)),(d&&!K(s)||!x(m)||M.current.isValidating)&&I(Object.assign(Object.assign(Object.assign({},m),v.current?{isValid:!!g}:{}),{isValidating:!1}))},[]),ke=w((r,i)=>{const{ref:s,options:m}=l.current[r],g=pe&&ve(s)&&K(i)?"":i;we(s)?(m||[]).forEach(({ref:d})=>d.checked=d.value===g):kr(s)&&!Q(g)?s.files=g:Vr(s)?[...s.options].forEach(d=>d.selected=g.includes(d.value)):de(s)&&m?m.length>1?m.forEach(({ref:d})=>d.checked=Array.isArray(g)?!!g.find(b=>b===d.value):g===d.value):m[0].ref.checked=!!g:s.value=g},[]),Ne=w((r,i)=>{if(M.current.isDirty){const s=ge();return r&&i&&j(s,r,i),!te(s,V.current)}return!1},[]),Ve=w((r,i=!0)=>{if(M.current.isDirty||M.current.dirtyFields){const s=!te(h(V.current,r),ae(l,r,S)),m=h(f.current.dirtyFields,r),g=f.current.isDirty;s?j(f.current.dirtyFields,r,!0):W(f.current.dirtyFields,r);const d={isDirty:Ne(),dirtyFields:f.current.dirtyFields},b=M.current.isDirty&&g!==d.isDirty||M.current.dirtyFields&&m!==h(f.current.dirtyFields,r);return b&&i&&I(d),b?d:{}}return{}},[]),Be=w(async(r,i)=>{const s=(await Le(l,$,l.current[r],S))[r];return Oe(r,s,i),T(s)},[Oe,$]),Ze=w(async r=>{const{errors:i}=await v.current(ge(),A.current,$),s=f.current.isValid;if(Array.isArray(r)){const m=r.map(g=>{const d=h(i,g);return d?j(f.current.errors,g,d):W(f.current.errors,g),!d}).every(Boolean);return I({isValid:x(i),isValidating:!1}),m}else{const m=h(i,r);return Oe(r,m,s!==x(i),{},x(i)),!m}},[Oe,$]),Ae=w(async r=>{const i=r||Object.keys(l.current);if(Ye(),v.current)return Ze(i);if(Array.isArray(i)){!r&&(f.current.errors={});const s=await Promise.all(i.map(async m=>await Be(m,null)));return I({isValidating:!1}),s.every(Boolean)}return await Be(i)},[Ze,Be]),Ue=w((r,i,{shouldDirty:s,shouldValidate:m})=>{const g={};j(g,r,i);for(const d of Je(r,i))l.current[d]&&(ke(d,h(g,d)),s&&Ve(d),m&&Ae(d))},[Ae,ke,Ve]),er=w((r,i,s)=>{if(!a&&!ne(i)&&j(S.current,r,Array.isArray(i)?[...i]:Object.assign({},i)),l.current[r])ke(r,i),s.shouldDirty&&Ve(r),s.shouldValidate&&Ae(r);else if(!ne(i)&&(Ue(r,i,s),D.current.has(r))){const m=Me(r)||r;j(p.current,r,i),R.current[m]({[m]:h(p.current,m)}),(M.current.isDirty||M.current.dirtyFields)&&s.shouldDirty&&(j(f.current.dirtyFields,r,Zr(i,h(V.current,r,[]),h(f.current.dirtyFields,r,[]))),I({isDirty:!te(Object.assign(Object.assign({},ge()),{[r]:i}),V.current)}))}!a&&j(S.current,r,i)},[Ve,ke,Ue]),rr=r=>P.current||E.current.has(r)||E.current.has((r.match(/\w+/)||[])[0]),xe=r=>{let i=!0;if(!x(N.current))for(const s in N.current)(!r||!N.current[s].size||N.current[s].has(r)||N.current[s].has(Me(r)))&&(B.current[s](),i=!1);return i};function Dr(r,i,s){er(r,i,s||{}),rr(r)&&I(),xe(r)}_.current=_.current?_.current:async({type:r,target:i})=>{let s=i.name;const m=l.current[s];let g,d;if(m){const b=r===le.BLUR,z=rt(Object.assign({isBlurEvent:b,isReValidateOnChange:Xe,isReValidateOnBlur:Qe,isTouched:!!h(f.current.touched,s),isSubmitted:f.current.isSubmitted},q.current));let J=Ve(s,!1),ye=!x(J)||!b&&rr(s);if(b&&!h(f.current.touched,s)&&M.current.touched&&(j(f.current.touched,s,!0),J=Object.assign(Object.assign({},J),{touched:f.current.touched})),!a&&de(i)&&j(S.current,s,ae(l,s)),z)return!b&&xe(s),(!x(J)||ye&&x(J))&&I(J);if(Ye(),v.current){const{errors:C}=await v.current(ge(),A.current,$),Se=f.current.isValid;if(g=h(C,s),de(i)&&!g&&v.current){const U=Me(s),ie=h(C,U,{});ie.type&&ie.message&&(g=ie),U&&(ie||h(f.current.errors,U))&&(s=U)}d=x(C),Se!==d&&(ye=!0)}else g=(await Le(l,$,m,S))[s];!b&&xe(s),Oe(s,g,ye,J,d)}};function tr(r){if(!a){let i=ee(r);for(const s of D.current)Re(s)&&!i[s]&&(i=Object.assign(Object.assign({},i),{[s]:[]}));return i}return r}function ge(r){if(Q(r))return ae(l,r,S);if(Array.isArray(r)){const i={};for(const s of r)j(i,s,ae(l,s,S));return i}return tr(We(l,ee(S.current),a))}const Fe=w(async(r={})=>{const i=x(l.current)?V.current:{},{errors:s}=await v.current(Object.assign(Object.assign(Object.assign({},i),ge()),r),A.current,$)||{},m=x(s);f.current.isValid!==m&&I({isValid:m})},[$]),je=w((r,i)=>{Yr(l,_.current,r,S,a,i),a&&(W(L.current,r.ref.name),W(k.current,r.ref.name))},[a]),Pe=w(r=>{if(P.current)I();else{for(const i of E.current)if(i.startsWith(r)){I();break}xe(r)}},[]),Ie=w((r,i)=>{r&&(je(r,i),a&&!fe(r.options||[]).length&&(W(f.current.errors,r.ref.name),j(f.current.dirtyFields,r.ref.name,!0),I({isDirty:Ne()}),M.current.isValid&&v.current&&Fe(),Pe(r.ref.name)))},[Fe,je]);function wr(r){r&&(Array.isArray(r)?r:[r]).forEach(i=>l.current[i]&&Re(i)?delete f.current.errors[i]:W(f.current.errors,i)),I({errors:r?f.current.errors:{}})}function Fr(r,i){const s=(l.current[r]||{}).ref;j(f.current.errors,r,Object.assign(Object.assign({},i),{ref:s})),I({isValid:!1}),i.shouldFocus&&s&&s.focus&&s.focus()}const qe=w((r,i,s)=>{const m=s?N.current[s]:E.current;let g=We(l,ee(S.current),a,!1,r);if(Q(r)){const b=Me(r)||r;return D.current.has(b)&&(g=Object.assign(Object.assign({},G.current),g)),gr(g,r,m,T(h(V.current,r))?i:h(V.current,r),!0)}const d=T(i)?V.current:i;return Array.isArray(r)?r.reduce((b,z)=>Object.assign(Object.assign({},b),{[z]:gr(g,z,m,d)}),{}):(P.current=T(s),He(!x(g)&&g||d))},[]);function jr(r,i){return qe(r,i)}function Ir(r){for(const i of Array.isArray(r)?r:[r])Ie(l.current[i],!0)}function Ge(r,i={}){const{name:s,type:m,value:g}=r,d=Object.assign({ref:r},i),b=l.current,z=br(r),J=nt(D.current,s),ye=ce=>pe&&(!ve(r)||ce===r);let C=b[s],Se=!0,U;if(C&&(z?Array.isArray(C.options)&&fe(C.options).find(ce=>g===ce.ref.value&&ye(ce.ref)):ye(C.ref))){b[s]=Object.assign(Object.assign({},C),i);return}m?C=z?Object.assign({options:[...fe(C&&C.options||[]),{ref:r}],ref:{type:m,name:s}},i):Object.assign({},d):C=d,b[s]=C;const ie=T(h(S.current,s));(!x(V.current)||!ie)&&(U=h(ie?V.current:S.current,s),Se=T(U),!Se&&!J&&ke(s,U)),x(i)||(j(k.current,s,!0),!Z&&M.current.isValid&&Le(l,$,C,S).then(ce=>{const Br=f.current.isValid;x(ce)?j(L.current,s,!0):W(L.current,s),Br!==x(ce)&&I()})),a&&!(J&&Se)&&!J&&W(f.current.dirtyFields,s),m&&Kr(z&&C.options?C.options[C.options.length-1]:C,z||st(r),_.current)}function Cr(r,i){if(!ct)if(Q(r))Ge({name:r},i);else if(H(r)&&"name"in r)Ge(r,i);else return s=>s&&Ge(s,r)}const Lr=w((r,i)=>async s=>{s&&s.preventDefault&&(s.preventDefault(),s.persist());let m={},g=tr(We(l,ee(S.current),a,!0));M.current.isSubmitting&&I({isSubmitting:!0});try{if(v.current){const{errors:d,values:b}=await v.current(g,A.current,$);f.current.errors=m=d,g=b}else for(const d of Object.values(l.current))if(d){const{name:b}=d.ref,z=await Le(l,$,d,S);z[b]?(j(m,b,z[b]),W(L.current,b)):h(k.current,b)&&(W(f.current.errors,b),j(L.current,b,!0))}x(m)&&Object.keys(f.current.errors).every(d=>d in l.current)?(I({errors:{},isSubmitting:!0}),await r(g,s)):(f.current.errors=Object.assign(Object.assign({},f.current.errors),m),i&&await i(f.current.errors,s),u&&Jr(l.current,f.current.errors))}finally{f.current.isSubmitting=!1,I({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:x(f.current.errors),submitCount:f.current.submitCount+1})}},[u,$]),Mr=({errors:r,isDirty:i,isSubmitted:s,touched:m,isValid:g,submitCount:d,dirtyFields:b})=>{g||(L.current={},k.current={}),p.current={},E.current=new Set,P.current=!1,I({submitCount:d?f.current.submitCount:0,isDirty:i?f.current.isDirty:!1,isSubmitted:s?f.current.isSubmitted:!1,isValid:g?f.current.isValid:!1,dirtyFields:b?f.current.dirtyFields:{},touched:m?f.current.touched:{},errors:r?f.current.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},Tr=(r,i={})=>{if(pe){for(const s of Object.values(l.current))if(s){const{ref:m,options:g}=s,d=br(m)&&Array.isArray(g)?g[0].ref:m;if(ve(d))try{d.closest("form").reset();break}catch{}}}l.current={},V.current=Object.assign({},r||V.current),r&&xe(""),Object.values(R.current).forEach(s=>Sr(s)&&s()),S.current=a?{}:ee(r||V.current),Mr(i)};sr(()=>{t&&M.current.isValid&&Fe(),Ee.current=Ee.current||!pe?Ee.current:it(l,Ie)},[Ie,V.current]),sr(()=>()=>{Ee.current&&Ee.current.disconnect(),se.current=!0,Object.values(l.current).forEach(r=>Ie(r,!0))},[]),!t&&M.current.isValid&&(me.isValid=te(L.current,k.current)&&x(f.current.errors));const nr={trigger:Ae,setValue:w(Dr,[er,Ae]),getValues:w(ge,[]),register:w(Cr,[V.current]),unregister:w(Ir,[]),formState:ue?new Proxy(me,{get:(r,i)=>{if(i in r)return M.current[i]=!0,r[i]}}):me},Nr=Gr(()=>Object.assign({isFormDirty:Ne,updateWatchedValue:Pe,shouldUnregister:a,updateFormState:I,removeFieldEventListener:je,watchInternal:qe,mode:q.current,reValidateMode:{isReValidateOnBlur:Qe,isReValidateOnChange:Xe},validateResolver:t?Fe:void 0,fieldsRef:l,resetFieldArrayFunctionRef:R,useWatchFieldsRef:N,useWatchRenderFunctionsRef:B,fieldArrayDefaultValuesRef:p,validFieldsRef:L,fieldsWithValidationRef:k,fieldArrayNamesRef:D,readFormStateRef:M,formStateRef:f,defaultValuesRef:V,shallowFieldsStateRef:S,fieldArrayValuesRef:G},nr),[V.current,Pe,a,je,qe]);return Object.assign({watch:jr,control:Nr,handleSubmit:Lr,reset:w(Tr,[]),clearErrors:w(wr,[]),setError:w(Fr,[]),errors:me.errors},nr)}const ut=Pr(null);ut.displayName="RHFContext";var at=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e))(at||{});const Kt=e=>{const{exampleType:n="formgroup"}=e,{register:t,handleSubmit:c,errors:o}=ot(),u="formgroup1",a="formgroup2",y="formgroup3",l="formgroup4",p="formgroup5",G=o[u]||o[a]||o[y]||o[l]||o[p],E="Du m\xE5 velge et alternativ",N="Du m\xE5 velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",k="Du m\xE5 skrive noe her",L=[O.createElement(oe,{key:0,inputId:"checkbox1",label:"Checkbox 1",ref:t({required:E})}),O.createElement(oe,{key:1,inputId:"checkbox2",label:"Checkbox 2",ref:t({required:E})}),O.createElement(oe,{key:2,inputId:"checkbox3",label:"Checkbox 3",ref:t({required:E})})],V=P=>P.length>=2||N,se=()=>{if(n==="formgroup")return[O.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:o[u]?o[u].message:void 0,variant:e.variant,name:u},O.createElement(_r,{maxColumns:$r.two},L.map(P=>P))),O.createElement(X,{key:1,legend:"Velg minst to",error:o[a]?o[a].message:void 0,variant:e.variant,name:a},O.createElement(oe,{inputId:"checkbox4",label:"Checkbox 4",ref:t({validate:V})}),O.createElement(oe,{inputId:"checkbox5",label:"Checkbox 5",ref:t({validate:V})}),O.createElement(oe,{inputId:"checkbox6",label:"Checkbox 6",ref:t({validate:V})})),O.createElement(X,{key:2,legend:"Velg en",error:o[y]?o[y].message:void 0,variant:e.variant,name:y},O.createElement(Ce,{inputId:"radiobutton1",label:"Radiobutton 1",ref:t({required:E})}),O.createElement(Ce,{inputId:"radiobutton2",label:"Radiobutton 2",ref:t({required:E})}),O.createElement(Ce,{inputId:"radiobutton3",label:"Radiobutton 3",ref:t({required:E})})),O.createElement(X,{key:3,error:o[l]?o[l].message:void 0},O.createElement(ir,{defaultValue:`Dette er en test 
+import R,{createContext as Pr,useRef as F,useState as qr,useCallback as w,useEffect as ir,useMemo as Wr,isValidElement as pr}from"react";import{V as Hr}from"../../Validation.js";import{F as Se}from"../../FormGroup.js";import{C as ce}from"../../Checkbox.js";import{B as Gr}from"../../Button.js";import{R as Ce}from"../../RadioButton.js";import{T as sr}from"../../Textarea.js";import{I as cr}from"../../Input.js";import or from"../Icons/Hospital.js";import{F as _r,a as $r}from"../../FormLayout.js";import{i as zr}from"../../uuid.js";import"classnames";import"../Validation/styles.module.scss";import"../../constants.js";import"../FormGroup/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../RadioButton/styles.module.scss";import"../Textarea/styles.module.scss";import"../Input/styles.module.scss";import"../FormLayout/styles.module.scss";var pe=e=>e instanceof HTMLElement;const ae={BLUR:"blur",CHANGE:"change",INPUT:"input"},ee={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},vr="select",Me="undefined",X={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};function Kr({ref:e},n,t){pe(e)&&t&&(e.addEventListener(n?ae.CHANGE:ae.INPUT,t),e.addEventListener(ae.BLUR,t))}var K=e=>e==null;const hr=e=>typeof e=="object";var G=e=>!K(e)&&!Array.isArray(e)&&hr(e)&&!(e instanceof Date),Re=e=>/^\w*$/.test(e),le=e=>e.filter(Boolean),Er=e=>le(e.replace(/["|']/g,"").replace(/\[/g,".").replace(/\]/g,"").split("."));function j(e,n,t){let c=-1;const o=Re(n)?[n]:Er(n),u=o.length,a=u-1;for(;++c<u;){const y=o[c];let l=t;if(c!==a){const p=e[y];l=G(p)||Array.isArray(p)?p:isNaN(+o[c+1])?{}:[]}e[y]=l,e=e[y]}return e}var Ge=(e,n={})=>{for(const t in e)Re(t)?n[t]=e[t]:j(n,t,e[t]);return n},M=e=>e===void 0,h=(e={},n,t)=>{const c=le(n.split(/[,[\].]+?/)).reduce((o,u)=>K(o)?o:o[u],e);return M(c)||c===e?M(e[n])?t:e[n]:c},Jr=(e,n)=>{for(const t in e)if(h(n,t)){const c=e[t];if(c){if(c.ref.focus&&M(c.ref.focus()))break;if(c.options){c.options[0].ref.focus();break}}}},ur=(e,n)=>{pe(e)&&e.removeEventListener&&(e.removeEventListener(ae.INPUT,n),e.removeEventListener(ae.CHANGE,n),e.removeEventListener(ae.BLUR,n))};const ar={isValid:!1,value:null};var Or=e=>Array.isArray(e)?e.reduce((n,t)=>t&&t.ref.checked?{isValid:!0,value:t.ref.value}:n,ar):ar,Qr=e=>[...e].filter(({selected:n})=>n).map(({value:n})=>n),we=e=>e.type==="radio",kr=e=>e.type==="file",fe=e=>e.type==="checkbox",Vr=e=>e.type===`${vr}-multiple`;const lr={value:!1,isValid:!1},fr={value:!0,isValid:!0};var xr=e=>{if(Array.isArray(e)){if(e.length>1){const o=e.filter(u=>u&&u.ref.checked).map(({ref:{value:u}})=>u);return{value:o,isValid:!!o.length}}const{checked:n,value:t,attributes:c}=e[0].ref;return n?c&&!M(c.value)?M(t)||t===""?fr:{value:t,isValid:!0}:fr:lr}return lr};function ue(e,n,t,c,o){const u=e.current[n];if(u){const{ref:{value:a,disabled:y},ref:l,valueAsNumber:p,valueAsDate:W,setValueAs:E}=u;return y&&c?void 0:kr(l)?l.files:we(l)?Or(u.options).value:Vr(l)?Qr(l.options):fe(l)?xr(u.options).value:o?a:p?a===""?NaN:+a:W?l.valueAsDate:E?E(a):a}if(t)return h(t.current,n)}function De(e){return e?!(e instanceof HTMLElement)||e.nodeType===Node.DOCUMENT_NODE?!1:De(e.parentNode):!0}var x=e=>G(e)&&!Object.keys(e).length,ze=e=>typeof e=="boolean";function Xr(e,n){const t=n.slice(0,-1).length;let c=0;for(;c<t;)e=M(e)?c++:e[n[c++]];return e}function H(e,n){const t=Re(n)?[n]:Er(n),c=t.length==1?e:Xr(e,t),o=t[t.length-1];let u;c&&delete c[o];for(let a=0;a<t.slice(0,-1).length;a++){let y=-1,l;const p=t.slice(0,-(a+1)),W=p.length-1;for(a>0&&(u=e);++y<p.length;){const E=p[y];l=l?l[E]:e[E],W===y&&(G(l)&&x(l)||Array.isArray(l)&&!l.filter(N=>G(N)&&!x(N)||ze(N)).length)&&(u?delete u[E]:delete e[E]),u=l}}return e}const dr=(e,n)=>e&&e.ref===n;function Yr(e,n,t,c,o,u){const{ref:a,ref:{name:y}}=t,l=e.current[y];if(!o){const p=ue(e,y,c);!M(p)&&j(c.current,y,p)}if(!a.type||!l){delete e.current[y];return}we(a)||fe(a)?Array.isArray(l.options)&&l.options.length?(le(l.options).forEach((p={},W)=>{(De(p.ref)&&dr(p,p.ref)||u)&&(ur(p.ref,n),H(l.options,`[${W}]`))}),l.options&&!le(l.options).length&&delete e.current[y]):delete e.current[y]:(De(a)&&dr(l,a)||u)&&(ur(a,n),delete e.current[y])}var te=e=>K(e)||!hr(e);function Ke(e,n){if(te(e)||te(n))return n;for(const t in n){const c=e[t],o=n[t];try{e[t]=G(c)&&G(o)||Array.isArray(c)&&Array.isArray(o)?Ke(c,o):o}catch{}}return e}function re(e,n,t){if(te(e)||te(n)||e instanceof Date||n instanceof Date)return e===n;if(!pr(e)){const c=Object.keys(e),o=Object.keys(n);if(c.length!==o.length)return!1;for(const u of c){const a=e[u];if(!(t&&u==="ref")){const y=n[u];if((G(a)||Array.isArray(a))&&(G(y)||Array.isArray(y))?!re(a,y,t):a!==y)return!1}}}return!0}function _e(e,n,t,c,o){let u=-1;for(;++u<e.length;){for(const a in e[u])Array.isArray(e[u][a])?(!t[u]&&(t[u]={}),t[u][a]=[],_e(e[u][a],h(n[u]||{},a,[]),t[u][a],t[u],a)):re(h(n[u]||{},a),e[u][a])?j(t[u]||{},a):t[u]=Object.assign(Object.assign({},t[u]),{[a]:!0});c&&!t.length&&delete c[o]}return t}var Zr=(e,n,t)=>Ke(_e(e,n,t.slice(0,e.length)),_e(n,e,t.slice(0,e.length))),Q=e=>typeof e=="string",He=(e,n,t,c,o)=>{const u={};for(const a in e.current)(M(o)||(Q(o)?a.startsWith(o):Array.isArray(o)&&o.find(y=>a.startsWith(y))))&&(u[a]=ue(e,a,void 0,c));return t?Ge(u):Ke(n,Ge(u))},Ur=({errors:e,name:n,error:t,validFields:c,fieldsWithValidation:o})=>{const u=M(t),a=h(e,n);return u&&!!a||!u&&!re(a,t,!0)||u&&h(o,n)&&!h(c,n)},Ar=e=>e instanceof RegExp,ye=e=>G(e)&&!Ar(e)?e:{value:e,message:""},Sr=e=>typeof e=="function",$e=e=>Q(e)||pr(e);function mr(e,n,t="validate"){if($e(e)||ze(e)&&!e)return{type:t,message:$e(e)?e:"",ref:n}}var et=(e,n,t,c,o)=>n?Object.assign(Object.assign({},t[e]),{types:Object.assign(Object.assign({},t[e]&&t[e].types?t[e].types:{}),{[c]:o||!0})}):{},Le=async(e,n,{ref:t,ref:{value:c},options:o,required:u,maxLength:a,minLength:y,min:l,max:p,pattern:W,validate:E},N)=>{const B=t.name,O={},L=we(t),k=fe(t),ne=L||k,P=c==="",_=et.bind(null,B,n,O),A=(S,V,v,D=X.maxLength,q=X.minLength)=>{const Y=S?V:v;O[B]=Object.assign({type:S?D:q,message:Y,ref:t},_(S?D:q,Y))};if(u&&(!L&&!k&&(P||K(c))||ze(c)&&!c||k&&!xr(o).isValid||L&&!Or(o).isValid)){const{value:S,message:V}=$e(u)?{value:!!u,message:u}:ye(u);if(S&&(O[B]=Object.assign({type:X.required,message:V,ref:ne?((e.current[B].options||[])[0]||{}).ref:t},_(X.required,V)),!n))return O}if((!K(l)||!K(p))&&c!==""){let S,V;const v=ye(p),D=ye(l);if(isNaN(c)){const q=t.valueAsDate||new Date(c);Q(v.value)&&(S=q>new Date(v.value)),Q(D.value)&&(V=q<new Date(D.value))}else{const q=t.valueAsNumber||parseFloat(c);K(v.value)||(S=q>v.value),K(D.value)||(V=q<D.value)}if((S||V)&&(A(!!S,v.message,D.message,X.max,X.min),!n))return O}if(Q(c)&&!P&&(a||y)){const S=ye(a),V=ye(y),v=!K(S.value)&&c.length>S.value,D=!K(V.value)&&c.length<V.value;if((v||D)&&(A(v,S.message,V.message),!n))return O}if(Q(c)&&W&&!P){const{value:S,message:V}=ye(W);if(Ar(S)&&!S.test(c)&&(O[B]=Object.assign({type:X.pattern,message:V,ref:t},_(X.pattern,V)),!n))return O}if(E){const S=ue(e,B,N,!1,!0),V=ne&&o?o[0].ref:t;if(Sr(E)){const v=await E(S),D=mr(v,V);if(D&&(O[B]=Object.assign(Object.assign({},D),_(X.validate,D.message)),!n))return O}else if(G(E)){let v={};for(const[D,q]of Object.entries(E)){if(!x(v)&&!n)break;const Y=await q(S),ve=mr(Y,V,D);ve&&(v=Object.assign(Object.assign({},ve),_(D,ve.message)),n&&(O[B]=v))}if(!x(v)&&(O[B]=Object.assign({ref:V},v),!n))return O}}return O};const Je=(e,n,t=[])=>{for(const c in n){const o=e+(G(n)?`.${c}`:`[${c}]`);te(n[c])?t.push(o):Je(o,n[c],t)}return t};var gr=(e,n,t,c,o)=>{let u;return t.add(n),x(e)||(u=h(e,n),(G(u)||Array.isArray(u))&&Je(n,u).forEach(a=>t.add(a))),M(u)?o?c:h(c,n):u},rt=({isOnBlur:e,isOnChange:n,isOnTouch:t,isTouched:c,isReValidateOnBlur:o,isReValidateOnChange:u,isBlurEvent:a,isSubmitted:y,isOnAll:l})=>l?!1:!y&&t?!(c||a):(y?o:e)?!a:(y?u:n)?a:!0,Te=e=>e.substring(0,e.indexOf("["));const tt=(e,n)=>RegExp(`^${n}([|.)\\d+`.replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e);var nt=(e,n)=>[...e].some(t=>tt(n,t)),it=e=>e.type===`${vr}-one`;function st(e,n){const t=new MutationObserver(()=>{for(const c of Object.values(e.current))if(c&&c.options)for(const o of c.options)o&&o.ref&&De(o.ref)&&n(c);else c&&De(c.ref)&&n(c)});return t.observe(window.document,{childList:!0,subtree:!0}),t}var be=typeof window!==Me&&typeof document!==Me;function U(e){var n;let t;if(te(e)||be&&(e instanceof File||pe(e))||!["Set","Map","Object","Date","Array"].includes((n=e.constructor)===null||n===void 0?void 0:n.name))return e;if(e instanceof Date)return t=new Date(e.getTime()),t;if(e instanceof Set){t=new Set;for(const c of e)t.add(c);return t}if(e instanceof Map){t=new Map;for(const c of e.keys())t.set(c,U(e.get(c)));return t}t=Array.isArray(e)?[]:{};for(const c in e)t[c]=U(e[c]);return t}var yr=e=>({isOnSubmit:!e||e===ee.onSubmit,isOnBlur:e===ee.onBlur,isOnChange:e===ee.onChange,isOnAll:e===ee.all,isOnTouch:e===ee.onTouched}),br=e=>we(e)||fe(e);const ct=typeof window===Me,oe=be?"Proxy"in window:typeof Proxy!==Me;function ot({mode:e=ee.onSubmit,reValidateMode:n=ee.onChange,resolver:t,context:c,defaultValues:o={},shouldFocusError:u=!0,shouldUnregister:a=!0,criteriaMode:y}={}){const l=F({}),p=F({}),W=F({}),E=F(new Set),N=F({}),B=F({}),O=F({}),L=F({}),k=F(o),ne=F(!1),P=F(!1),_=F(),A=F({}),S=F({}),V=F(c),v=F(t),D=F(new Set),q=F(yr(e)),{isOnSubmit:Y,isOnTouch:ve}=q.current,$=y===ee.all,[de,Rr]=qr({isDirty:!1,isValidating:!1,dirtyFields:{},isSubmitted:!1,submitCount:0,touched:{},isSubmitting:!1,isSubmitSuccessful:!1,isValid:!Y,errors:{}}),T=F({isDirty:!oe,dirtyFields:!oe,touched:!oe||ve,isValidating:!oe,isSubmitting:!oe,isValid:!oe}),f=F(de),he=F(),{isOnBlur:Qe,isOnChange:Xe}=F(yr(n)).current;V.current=c,v.current=t,f.current=de,A.current=a?{}:x(A.current)?U(o):A.current;const I=w((r={})=>{ne.current||(f.current=Object.assign(Object.assign({},f.current),r),Rr(f.current))},[]),Ye=()=>T.current.isValidating&&I({isValidating:!0}),Ee=w((r,s,i=!1,m={},g)=>{let d=i||Ur({errors:f.current.errors,error:s,name:r,validFields:L.current,fieldsWithValidation:O.current});const b=h(f.current.errors,r);s?(H(L.current,r),d=d||!b||!re(b,s,!0),j(f.current.errors,r,s)):((h(O.current,r)||v.current)&&(j(L.current,r,!0),d=d||b),H(f.current.errors,r)),(d&&!K(i)||!x(m)||T.current.isValidating)&&I(Object.assign(Object.assign(Object.assign({},m),v.current?{isValid:!!g}:{}),{isValidating:!1}))},[]),Oe=w((r,s)=>{const{ref:i,options:m}=l.current[r],g=be&&pe(i)&&K(s)?"":s;we(i)?(m||[]).forEach(({ref:d})=>d.checked=d.value===g):kr(i)&&!Q(g)?i.files=g:Vr(i)?[...i.options].forEach(d=>d.selected=g.includes(d.value)):fe(i)&&m?m.length>1?m.forEach(({ref:d})=>d.checked=Array.isArray(g)?!!g.find(b=>b===d.value):g===d.value):m[0].ref.checked=!!g:i.value=g},[]),Ne=w((r,s)=>{if(T.current.isDirty){const i=me();return r&&s&&j(i,r,s),!re(i,k.current)}return!1},[]),ke=w((r,s=!0)=>{if(T.current.isDirty||T.current.dirtyFields){const i=!re(h(k.current,r),ue(l,r,A)),m=h(f.current.dirtyFields,r),g=f.current.isDirty;i?j(f.current.dirtyFields,r,!0):H(f.current.dirtyFields,r);const d={isDirty:Ne(),dirtyFields:f.current.dirtyFields},b=T.current.isDirty&&g!==d.isDirty||T.current.dirtyFields&&m!==h(f.current.dirtyFields,r);return b&&s&&I(d),b?d:{}}return{}},[]),Be=w(async(r,s)=>{const i=(await Le(l,$,l.current[r],A))[r];return Ee(r,i,s),M(i)},[Ee,$]),Ze=w(async r=>{const{errors:s}=await v.current(me(),V.current,$),i=f.current.isValid;if(Array.isArray(r)){const m=r.map(g=>{const d=h(s,g);return d?j(f.current.errors,g,d):H(f.current.errors,g),!d}).every(Boolean);return I({isValid:x(s),isValidating:!1}),m}else{const m=h(s,r);return Ee(r,m,i!==x(s),{},x(s)),!m}},[Ee,$]),Ve=w(async r=>{const s=r||Object.keys(l.current);if(Ye(),v.current)return Ze(s);if(Array.isArray(s)){!r&&(f.current.errors={});const i=await Promise.all(s.map(async m=>await Be(m,null)));return I({isValidating:!1}),i.every(Boolean)}return await Be(s)},[Ze,Be]),Ue=w((r,s,{shouldDirty:i,shouldValidate:m})=>{const g={};j(g,r,s);for(const d of Je(r,s))l.current[d]&&(Oe(d,h(g,d)),i&&ke(d),m&&Ve(d))},[Ve,Oe,ke]),er=w((r,s,i)=>{if(!a&&!te(s)&&j(A.current,r,Array.isArray(s)?[...s]:Object.assign({},s)),l.current[r])Oe(r,s),i.shouldDirty&&ke(r),i.shouldValidate&&Ve(r);else if(!te(s)&&(Ue(r,s,i),D.current.has(r))){const m=Te(r)||r;j(p.current,r,s),S.current[m]({[m]:h(p.current,m)}),(T.current.isDirty||T.current.dirtyFields)&&i.shouldDirty&&(j(f.current.dirtyFields,r,Zr(s,h(k.current,r,[]),h(f.current.dirtyFields,r,[]))),I({isDirty:!re(Object.assign(Object.assign({},me()),{[r]:s}),k.current)}))}!a&&j(A.current,r,s)},[ke,Oe,Ue]),rr=r=>P.current||E.current.has(r)||E.current.has((r.match(/\w+/)||[])[0]),xe=r=>{let s=!0;if(!x(N.current))for(const i in N.current)(!r||!N.current[i].size||N.current[i].has(r)||N.current[i].has(Te(r)))&&(B.current[i](),s=!1);return s};function Dr(r,s,i){er(r,s,i||{}),rr(r)&&I(),xe(r)}_.current=_.current?_.current:async({type:r,target:s})=>{let i=s.name;const m=l.current[i];let g,d;if(m){const b=r===ae.BLUR,z=rt(Object.assign({isBlurEvent:b,isReValidateOnChange:Xe,isReValidateOnBlur:Qe,isTouched:!!h(f.current.touched,i),isSubmitted:f.current.isSubmitted},q.current));let J=ke(i,!1),ge=!x(J)||!b&&rr(i);if(b&&!h(f.current.touched,i)&&T.current.touched&&(j(f.current.touched,i,!0),J=Object.assign(Object.assign({},J),{touched:f.current.touched})),!a&&fe(s)&&j(A.current,i,ue(l,i)),z)return!b&&xe(i),(!x(J)||ge&&x(J))&&I(J);if(Ye(),v.current){const{errors:C}=await v.current(me(),V.current,$),Ae=f.current.isValid;if(g=h(C,i),fe(s)&&!g&&v.current){const Z=Te(i),ie=h(C,Z,{});ie.type&&ie.message&&(g=ie),Z&&(ie||h(f.current.errors,Z))&&(i=Z)}d=x(C),Ae!==d&&(ge=!0)}else g=(await Le(l,$,m,A))[i];!b&&xe(i),Ee(i,g,ge,J,d)}};function tr(r){if(!a){let s=U(r);for(const i of D.current)Re(i)&&!s[i]&&(s=Object.assign(Object.assign({},s),{[i]:[]}));return s}return r}function me(r){if(Q(r))return ue(l,r,A);if(Array.isArray(r)){const s={};for(const i of r)j(s,i,ue(l,i,A));return s}return tr(He(l,U(A.current),a))}const Fe=w(async(r={})=>{const s=x(l.current)?k.current:{},{errors:i}=await v.current(Object.assign(Object.assign(Object.assign({},s),me()),r),V.current,$)||{},m=x(i);f.current.isValid!==m&&I({isValid:m})},[$]),je=w((r,s)=>{Yr(l,_.current,r,A,a,s),a&&(H(L.current,r.ref.name),H(O.current,r.ref.name))},[a]),Pe=w(r=>{if(P.current)I();else{for(const s of E.current)if(s.startsWith(r)){I();break}xe(r)}},[]),Ie=w((r,s)=>{r&&(je(r,s),a&&!le(r.options||[]).length&&(H(f.current.errors,r.ref.name),j(f.current.dirtyFields,r.ref.name,!0),I({isDirty:Ne()}),T.current.isValid&&v.current&&Fe(),Pe(r.ref.name)))},[Fe,je]);function wr(r){r&&(Array.isArray(r)?r:[r]).forEach(s=>l.current[s]&&Re(s)?delete f.current.errors[s]:H(f.current.errors,s)),I({errors:r?f.current.errors:{}})}function Fr(r,s){const i=(l.current[r]||{}).ref;j(f.current.errors,r,Object.assign(Object.assign({},s),{ref:i})),I({isValid:!1}),s.shouldFocus&&i&&i.focus&&i.focus()}const qe=w((r,s,i)=>{const m=i?N.current[i]:E.current;let g=He(l,U(A.current),a,!1,r);if(Q(r)){const b=Te(r)||r;return D.current.has(b)&&(g=Object.assign(Object.assign({},W.current),g)),gr(g,r,m,M(h(k.current,r))?s:h(k.current,r),!0)}const d=M(s)?k.current:s;return Array.isArray(r)?r.reduce((b,z)=>Object.assign(Object.assign({},b),{[z]:gr(g,z,m,d)}),{}):(P.current=M(i),Ge(!x(g)&&g||d))},[]);function jr(r,s){return qe(r,s)}function Ir(r){for(const s of Array.isArray(r)?r:[r])Ie(l.current[s],!0)}function We(r,s={}){const{name:i,type:m,value:g}=r,d=Object.assign({ref:r},s),b=l.current,z=br(r),J=nt(D.current,i),ge=se=>be&&(!pe(r)||se===r);let C=b[i],Ae=!0,Z;if(C&&(z?Array.isArray(C.options)&&le(C.options).find(se=>g===se.ref.value&&ge(se.ref)):ge(C.ref))){b[i]=Object.assign(Object.assign({},C),s);return}m?C=z?Object.assign({options:[...le(C&&C.options||[]),{ref:r}],ref:{type:m,name:i}},s):Object.assign({},d):C=d,b[i]=C;const ie=M(h(A.current,i));(!x(k.current)||!ie)&&(Z=h(ie?k.current:A.current,i),Ae=M(Z),!Ae&&!J&&Oe(i,Z)),x(s)||(j(O.current,i,!0),!Y&&T.current.isValid&&Le(l,$,C,A).then(se=>{const Br=f.current.isValid;x(se)?j(L.current,i,!0):H(L.current,i),Br!==x(se)&&I()})),a&&!(J&&Ae)&&!J&&H(f.current.dirtyFields,i),m&&Kr(z&&C.options?C.options[C.options.length-1]:C,z||it(r),_.current)}function Cr(r,s){if(!ct)if(Q(r))We({name:r},s);else if(G(r)&&"name"in r)We(r,s);else return i=>i&&We(i,r)}const Lr=w((r,s)=>async i=>{i&&i.preventDefault&&(i.preventDefault(),i.persist());let m={},g=tr(He(l,U(A.current),a,!0));T.current.isSubmitting&&I({isSubmitting:!0});try{if(v.current){const{errors:d,values:b}=await v.current(g,V.current,$);f.current.errors=m=d,g=b}else for(const d of Object.values(l.current))if(d){const{name:b}=d.ref,z=await Le(l,$,d,A);z[b]?(j(m,b,z[b]),H(L.current,b)):h(O.current,b)&&(H(f.current.errors,b),j(L.current,b,!0))}x(m)&&Object.keys(f.current.errors).every(d=>d in l.current)?(I({errors:{},isSubmitting:!0}),await r(g,i)):(f.current.errors=Object.assign(Object.assign({},f.current.errors),m),s&&await s(f.current.errors,i),u&&Jr(l.current,f.current.errors))}finally{f.current.isSubmitting=!1,I({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:x(f.current.errors),submitCount:f.current.submitCount+1})}},[u,$]),Tr=({errors:r,isDirty:s,isSubmitted:i,touched:m,isValid:g,submitCount:d,dirtyFields:b})=>{g||(L.current={},O.current={}),p.current={},E.current=new Set,P.current=!1,I({submitCount:d?f.current.submitCount:0,isDirty:s?f.current.isDirty:!1,isSubmitted:i?f.current.isSubmitted:!1,isValid:g?f.current.isValid:!1,dirtyFields:b?f.current.dirtyFields:{},touched:m?f.current.touched:{},errors:r?f.current.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},Mr=(r,s={})=>{if(be){for(const i of Object.values(l.current))if(i){const{ref:m,options:g}=i,d=br(m)&&Array.isArray(g)?g[0].ref:m;if(pe(d))try{d.closest("form").reset();break}catch{}}}l.current={},k.current=Object.assign({},r||k.current),r&&xe(""),Object.values(S.current).forEach(i=>Sr(i)&&i()),A.current=a?{}:U(r||k.current),Tr(s)};ir(()=>{t&&T.current.isValid&&Fe(),he.current=he.current||!be?he.current:st(l,Ie)},[Ie,k.current]),ir(()=>()=>{he.current&&he.current.disconnect(),ne.current=!0,Object.values(l.current).forEach(r=>Ie(r,!0))},[]),!t&&T.current.isValid&&(de.isValid=re(L.current,O.current)&&x(f.current.errors));const nr={trigger:Ve,setValue:w(Dr,[er,Ve]),getValues:w(me,[]),register:w(Cr,[k.current]),unregister:w(Ir,[]),formState:oe?new Proxy(de,{get:(r,s)=>{if(s in r)return T.current[s]=!0,r[s]}}):de},Nr=Wr(()=>Object.assign({isFormDirty:Ne,updateWatchedValue:Pe,shouldUnregister:a,updateFormState:I,removeFieldEventListener:je,watchInternal:qe,mode:q.current,reValidateMode:{isReValidateOnBlur:Qe,isReValidateOnChange:Xe},validateResolver:t?Fe:void 0,fieldsRef:l,resetFieldArrayFunctionRef:S,useWatchFieldsRef:N,useWatchRenderFunctionsRef:B,fieldArrayDefaultValuesRef:p,validFieldsRef:L,fieldsWithValidationRef:O,fieldArrayNamesRef:D,readFormStateRef:T,formStateRef:f,defaultValuesRef:k,shallowFieldsStateRef:A,fieldArrayValuesRef:W},nr),[k.current,Pe,a,je,qe]);return Object.assign({watch:jr,control:Nr,handleSubmit:Lr,reset:w(Mr,[]),clearErrors:w(wr,[]),setError:w(Fr,[]),errors:de.errors},nr)}const ut=Pr(null);ut.displayName="RHFContext";var at=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e))(at||{});const Qt=e=>{const{exampleType:n="formgroup"}=e,{register:t,handleSubmit:c,errors:o}=ot(),u="field1",a="field2",y="field3",l="field4",p="field5",W=o[u]||o[a]||o[y]||o[l]||o[p],E="Du m\xE5 velge et alternativ",N="Du m\xE5 velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",O="Du m\xE5 skrive noe her",L=[R.createElement(ce,{key:0,inputId:"checkbox1",label:"Checkbox 1",ref:t({required:E})}),R.createElement(ce,{key:1,inputId:"checkbox2",label:"Checkbox 2",ref:t({required:E})}),R.createElement(ce,{key:2,inputId:"checkbox3",label:"Checkbox 3",ref:t({required:E})})],k=P=>P.length>=2||N,ne=()=>{if(n==="formgroup")return[R.createElement(Se,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:o[u]?o[u].message:void 0,variant:e.variant,name:u},R.createElement(_r,{maxColumns:$r.two},L.map(P=>P))),R.createElement(Se,{key:1,legend:"Velg minst to",error:o[a]?o[a].message:void 0,variant:e.variant,name:a},R.createElement(ce,{inputId:"checkbox4",label:"Checkbox 4",ref:t({validate:k})}),R.createElement(ce,{inputId:"checkbox5",label:"Checkbox 5",ref:t({validate:k})}),R.createElement(ce,{inputId:"checkbox6",label:"Checkbox 6",ref:t({validate:k})})),R.createElement(Se,{key:2,legend:"Velg en",error:o[y]?o[y].message:void 0,variant:e.variant,name:y},R.createElement(Ce,{inputId:"radiobutton1",label:"Radiobutton 1",ref:t({required:E})}),R.createElement(Ce,{inputId:"radiobutton2",label:"Radiobutton 2",ref:t({required:E})}),R.createElement(Ce,{inputId:"radiobutton3",label:"Radiobutton 3",ref:t({required:E})})),R.createElement(Se,{key:3,error:o[l]?o[l].message:void 0},R.createElement(sr,{defaultValue:`Dette er en test 
 
  Hello 
 
  test 
 
- test test`,grow:!0,maxCharacters:40,minRows:5,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})})),O.createElement(X,{name:p,key:4,variant:e.variant,error:o[p]?o[p].message:void 0},O.createElement(cr,{label:"Skriv inn din tekst",placeholder:"Skriv noe!",icon:or,ref:t({required:k})}))];if(n==="checkbox")return O.createElement(X,{name:u,error:o[u]?o[u].message:void 0},O.createElement(oe,{name:u,inputId:"checkbox1",label:"Checkbox 1",error:o[u],variant:e.variant,ref:t({required:E})}));if(n==="radiobutton")return O.createElement(X,{name:y,error:o[y]?o[y].message:void 0},O.createElement(Ce,{name:y,inputId:"radiobutton1",label:"Radiobutton 1",error:o[y],variant:e.variant,ref:t({required:E})}));if(n==="textarea")return O.createElement(X,{error:o[l]?o[l].message:void 0},O.createElement(ir,{defaultValue:`Dette er min historie 
+ test test`,grow:!0,maxCharacters:40,minRows:5,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})})),R.createElement(Se,{name:p,key:4,variant:e.variant,error:o[p]?o[p].message:void 0},R.createElement(cr,{label:"Skriv inn din tekst",placeholder:"Skriv noe!",icon:or,ref:t({required:O})}))];if(n==="checkbox")return R.createElement(ce,{name:u,inputId:"checkbox1",label:"Checkbox 1",errorText:o[u]?o[u].message:void 0,variant:e.variant,ref:t({required:E})});if(n==="radiobutton")return R.createElement(Ce,{name:y,inputId:"radiobutton1",label:"Radiobutton 1",error:o[y]?o[y].message:void 0,errorText:o[y]?o[y].message:void 0,variant:e.variant,ref:t({required:E})});if(n==="textarea")return R.createElement(sr,{defaultValue:`Dette er min historie 
 
  Hello 
 
- test`,grow:!0,maxCharacters:40,minRows:5,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})}));if(n==="input")return O.createElement(X,{name:p,key:4,variant:e.variant,error:o[p]?o[p].message:void 0},O.createElement(cr,{inputId:"input1",label:"Skriv inn din tekst",placeholder:"Skriv noe!",icon:or,ref:t({required:k})}))};return O.createElement("form",{onSubmit:c(P=>{!zr()&&console.log(P)})},O.createElement(Wr,{variant:e.variant,errorSummary:G?"Sjekk at alt er riktig utfylt":void 0},se()),O.createElement(Hr,{type:"submit"},"Send inn"))};export{Kt as FormExample,at as FormExampleVariants,Kt as default};
+ test`,grow:!0,maxCharacters:40,minRows:5,errorText:o[l]?o[l].message:void 0,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})});if(n==="input")return R.createElement(cr,{inputId:"input1",label:"Skriv inn din tekst",placeholder:"Skriv noe!",name:p,errorText:o[p]?o[p].message:void 0,icon:or,ref:t({required:O})})};return R.createElement("form",{onSubmit:c(P=>{!zr()&&console.log(P)})},R.createElement(Hr,{variant:e.variant,errorSummary:W?"Sjekk at alt er riktig utfylt":void 0},ne()),R.createElement(Gr,{type:"submit"},"Send inn"))};export{Qt as FormExample,at as FormExampleVariants,Qt as default};
 //# sourceMappingURL=index.js.map