@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/FormExample/FormExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\nexport interface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\ninterface FormExampleData {\n  colour: string;\n  sizes: string[];\n  positions: string;\n  story: string;\n  name: string;\n  monster: string[];\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm<FormExampleData>();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const colorErrorMessage = 'Du må velge minst én farge';\n  const sizeErrorMessage = 'Du må velge minst to størrelser';\n  const positionErrorMessage = 'Du må velge minst én plassering';\n  const storyErrorMessage = 'Historien må være på maks 40 tegn';\n  const nameErrorMessage = 'Navn må fylles ut';\n  const monsterErrorMessage = 'Du må velge \"Frankenstein\"';\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || sizeErrorMessage;\n  };\n\n  const requireFrankenstein = (value: Array<string>): true | string => {\n    return value.toString() === 'Frankenstein' || monsterErrorMessage;\n  };\n\n  const color = () => (\n    <FormGroup\n      title={'FormGroup-tittel'}\n      legend={'Farge'}\n      error={errors.colour ? errors.colour.message : undefined}\n      errorTextId=\"error\"\n      size={props.size}\n    >\n      <FormLayout maxColumns={FormLayoutColumns.two}>\n        <Checkbox\n          inputId=\"colour1\"\n          label={<Label labelTexts={[{ text: 'Blueberry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour2\"\n          label={<Label labelTexts={[{ text: 'Cherry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour3\"\n          label={<Label labelTexts={[{ text: 'Neutral' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n      </FormLayout>\n    </FormGroup>\n  );\n\n  const size = () => (\n    <FormGroup legend={'Størrelser'} error={errors.sizes ? errors.sizes.message : undefined} size={props.size} errorTextId=\"error1\">\n      <Checkbox inputId=\"sizes1\" label={<Label labelTexts={[{ text: 'Small' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes2\" label={<Label labelTexts={[{ text: 'Medium' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes3\" label={<Label labelTexts={[{ text: 'Large' }]} />} {...register('sizes', { validate: requireTwo })} />\n    </FormGroup>\n  );\n\n  const position = () => (\n    <FormGroup\n      legend={'Plassering'}\n      error={errors.positions ? (errors.positions.message as string) : undefined}\n      size={props.size}\n      errorTextId=\"error2\"\n    >\n      <RadioButton\n        inputId=\"positions1\"\n        label={<Label labelTexts={[{ text: 'Venstre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions2\"\n        label={<Label labelTexts={[{ text: 'Høyre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions3\"\n        label={<Label labelTexts={[{ text: 'Midten' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const story = () => (\n    <FormGroup error={errors.story ? (errors.story.message as string) : undefined} errorTextId=\"error3\">\n      <Textarea\n        defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n        grow\n        maxCharacters={40}\n        minRows={5}\n        label={<Label labelTexts={[{ text: 'Historie', type: 'semibold' }]} />}\n        textareaId=\"story\"\n        {...register('story', { maxLength: { value: 40, message: storyErrorMessage } })}\n      />\n    </FormGroup>\n  );\n\n  const name = () => (\n    <FormGroup size={props.size} error={errors.name ? (errors.name.message as string) : undefined} errorTextId=\"error4\">\n      <Input\n        label={<Label labelTexts={[{ text: 'Navn', type: 'semibold' }]} />}\n        placeholder={'Skriv noe!'}\n        icon={Hospital}\n        inputId=\"name\"\n        {...register('name', { required: nameErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const monster = () => (\n    <FormGroup size={props.size} error={errors.monster ? (errors.monster.message as string) : undefined} errorTextId=\"error5\">\n      <Select\n        selectId=\"monster\"\n        label={<Label labelTexts={[{ text: 'Velg et monster', type: 'semibold' }]} />}\n        {...register('monster', { validate: requireFrankenstein })}\n      >\n        <option value={'Troll'}>{'Troll'}</option>\n        <option value={'Frankenstein'}>{'Frankenstein'}</option>\n      </Select>\n    </FormGroup>\n  );\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      return (\n        <>\n          {color()}\n          {size()}\n          {position()}\n          {story()}\n          {name()}\n          {monster()}\n        </>\n      );\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return <>{color()}</>;\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return <>{position()}</>;\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return <>{story()}</>;\n    } else if (exampleType === FormExampleVariants.input) {\n      return <>{name()}</>;\n    } else if (exampleType === FormExampleVariants.select) {\n      return <>{monster()}</>;\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorTitle={'Sjekk at alt er riktig utfylt:'} errors={errors}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","colorErrorMessage","sizeErrorMessage","positionErrorMessage","storyErrorMessage","nameErrorMessage","monsterErrorMessage","requireTwo","value","requireFrankenstein","color","React","FormGroup","FormLayout","FormLayoutColumns","Checkbox","Label","size","position","RadioButton","story","Textarea","name","Input","Hospital","monster","Select","getFormExample","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}
+{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\nexport interface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\ninterface FormExampleData {\n  colour: string;\n  sizes: string[];\n  positions: string;\n  story: string;\n  name: string;\n  monster: string[];\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm<FormExampleData>();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const colorErrorMessage = 'Du må velge minst én farge';\n  const sizeErrorMessage = 'Du må velge minst to størrelser';\n  const positionErrorMessage = 'Du må velge minst én plassering';\n  const storyErrorMessage = 'Historien må være på maks 40 tegn';\n  const nameErrorMessage = 'Navn må fylles ut';\n  const monsterErrorMessage = 'Du må velge \"Frankenstein\"';\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || sizeErrorMessage;\n  };\n\n  const requireFrankenstein = (value: Array<string>): true | string => {\n    return value.toString() === 'Frankenstein' || monsterErrorMessage;\n  };\n\n  const color = () => (\n    <FormGroup\n      title={'FormGroup-tittel'}\n      legend={'Farge'}\n      error={errors.colour ? errors.colour.message : undefined}\n      errorTextId=\"error\"\n      size={props.size}\n    >\n      <FormLayout maxColumns={FormLayoutColumns.two}>\n        <Checkbox\n          inputId=\"colour1\"\n          label={<Label labelTexts={[{ text: 'Blueberry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour2\"\n          label={<Label labelTexts={[{ text: 'Cherry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour3\"\n          label={<Label labelTexts={[{ text: 'Neutral' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n      </FormLayout>\n    </FormGroup>\n  );\n\n  const size = () => (\n    <FormGroup legend={'Størrelser'} error={errors.sizes ? errors.sizes.message : undefined} size={props.size} errorTextId=\"error1\">\n      <Checkbox inputId=\"sizes1\" label={<Label labelTexts={[{ text: 'Small' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes2\" label={<Label labelTexts={[{ text: 'Medium' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes3\" label={<Label labelTexts={[{ text: 'Large' }]} />} {...register('sizes', { validate: requireTwo })} />\n    </FormGroup>\n  );\n\n  const position = () => (\n    <FormGroup\n      legend={'Plassering'}\n      error={errors.positions ? (errors.positions.message as string) : undefined}\n      size={props.size}\n      errorTextId=\"error2\"\n    >\n      <RadioButton\n        inputId=\"positions1\"\n        label={<Label labelTexts={[{ text: 'Venstre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions2\"\n        label={<Label labelTexts={[{ text: 'Høyre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions3\"\n        label={<Label labelTexts={[{ text: 'Midten' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const story = () => (\n    <FormGroup error={errors.story ? (errors.story.message as string) : undefined} errorTextId=\"error3\">\n      <Textarea\n        defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n        grow\n        maxCharacters={40}\n        minRows={5}\n        label={<Label labelTexts={[{ text: 'Historie', type: 'semibold' }]} />}\n        textareaId=\"story\"\n        {...register('story', { maxLength: { value: 40, message: storyErrorMessage } })}\n      />\n    </FormGroup>\n  );\n\n  const name = () => (\n    <FormGroup size={props.size} error={errors.name ? (errors.name.message as string) : undefined} errorTextId=\"error4\">\n      <Input\n        label={<Label labelTexts={[{ text: 'Navn', type: 'semibold' }]} />}\n        placeholder={'Skriv noe!'}\n        icon={Hospital}\n        inputId=\"name\"\n        {...register('name', { required: nameErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const monster = () => (\n    <FormGroup size={props.size} error={errors.monster ? (errors.monster.message as string) : undefined} errorTextId=\"error5\">\n      <Select\n        selectId=\"monster\"\n        label={<Label labelTexts={[{ text: 'Velg et monster', type: 'semibold' }]} />}\n        {...register('monster', { validate: requireFrankenstein })}\n      >\n        <option value={'Troll'}>{'Troll'}</option>\n        <option value={'Frankenstein'}>{'Frankenstein'}</option>\n      </Select>\n    </FormGroup>\n  );\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      return (\n        <>\n          {color()}\n          {size()}\n          {position()}\n          {story()}\n          {name()}\n          {monster()}\n        </>\n      );\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return <>{color()}</>;\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return <>{position()}</>;\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return <>{story()}</>;\n    } else if (exampleType === FormExampleVariants.input) {\n      return <>{name()}</>;\n    } else if (exampleType === FormExampleVariants.select) {\n      return <>{monster()}</>;\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorTitle={'Sjekk at alt er riktig utfylt:'} errors={errors}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","colorErrorMessage","sizeErrorMessage","positionErrorMessage","storyErrorMessage","nameErrorMessage","monsterErrorMessage","requireTwo","value","requireFrankenstein","color","React","FormGroup","FormLayout","FormLayoutColumns","Checkbox","Label","size","position","RadioButton","story","Textarea","name","Input","Hospital","monster","Select","getFormExample","data","isTest","Validation","Spacer","Button"],"mappings":"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"}

package/components/FormExample/index.js

@@ -1,8 +1,8 @@
-import r from "./FormExample.js";
-import { FormExample as e, FormExampleVariants as p } from "./FormExample.js";
+import { FormExample as m } from "./FormExample.js";
+import { FormExampleVariants as e } from "./FormExample.js";
 export {
-  e as FormExample,
-  p as FormExampleVariants,
-  r as default
+  m as FormExample,
+  e as FormExampleVariants,
+  m as default
 };
 //# sourceMappingURL=index.js.map

package/components/FormGroup/FormGroup.js

@@ -1,41 +1,41 @@
 import r, { useState as U } from "react";
 import d from "classnames";
-import { FormMode as N, FormSize as T, AnalyticsId as A } from "../../constants.js";
-import { useUuid as k } from "../../hooks/useUuid.js";
+import { FormMode as x, FormSize as N, AnalyticsId as A } from "../../constants.js";
+import { useUuid as T } from "../../hooks/useUuid.js";
 import { isComponent as m } from "../../utils/component.js";
-import D from "../Checkbox/Checkbox.js";
-import H from "../ErrorWrapper/ErrorWrapper.js";
-import $ from "../FormLayout/FormLayout.js";
-import j from "../Input/Input.js";
-import q, { getRadioLabelClasses as J } from "../RadioButton/RadioButton.js";
-import K from "../Select/Select.js";
-import O from "../Textarea/Textarea.js";
-import P from "../Title/Title.js";
+import { Checkbox as D } from "../Checkbox/Checkbox.js";
+import { ErrorWrapper as H } from "../ErrorWrapper/ErrorWrapper.js";
+import { FormLayout as j } from "../FormLayout/FormLayout.js";
+import q from "../Input/Input.js";
+import { RadioButton as J, getRadioLabelClasses as K } from "../RadioButton/RadioButton.js";
+import { Select as O } from "../Select/Select.js";
+import P from "../Textarea/Textarea.js";
+import { Title as Q } from "../Title/Title.js";
 import p from "../FormGroup/styles.module.scss";
-const f = r.forwardRef((t, F) => {
+const k = r.forwardRef((t, _) => {
   const {
-    className: G,
-    fieldsetClassName: _,
-    mode: a = N.onwhite,
-    size: s = T.medium,
+    className: F,
+    fieldsetClassName: G,
+    mode: a = x.onwhite,
+    size: s = N.medium,
     error: o,
     errorTextId: y,
     name: l,
-    htmlMarkup: u = "fieldset",
+    htmlMarkup: f = "fieldset",
     renderError: R = !0,
     errorWrapperClassName: b,
     errorWrapperTestId: w
-  } = t, [S, W] = U(), v = k(), n = k(y), c = a === N.ondark, L = s === T.large, M = d(p["form-group-wrapper"], G), z = d({
-    [p["form-group-wrapper__title--on-dark"]]: c && !o
-  }), I = d(p["field-set__legend"], {
-    [p["field-set__legend--on-dark"]]: c && !o
-  }), g = d(p["field-set"], _), i = (e, B) => {
-    if (m(e, $))
+  } = t, [S, W] = U(), v = T(), n = T(y), u = a === x.ondark, L = s === N.large, M = d(p["form-group-wrapper"], F), z = d({
+    [p["form-group-wrapper__title--on-dark"]]: u && !o
+  }), c = d(p["field-set__legend"], {
+    [p["field-set__legend--on-dark"]]: u && !o
+  }), I = d(p["field-set"], G), i = (e, B) => {
+    if (m(e, j))
       return r.cloneElement(e, {
         size: s,
         mapHelper: i
       });
-    if (m(e, f))
+    if (m(e, k))
       return r.cloneElement(e, {
         mode: a,
         size: s,
@@ -51,22 +51,22 @@ const f = r.forwardRef((t, F) => {
         error: !!o,
         errorTextId: n
       });
-    if (m(e, q)) {
-      const E = typeof e.props.inputId > "u" ? v + B : e.props.inputId;
+    if (m(e, J)) {
+      const C = typeof e.props.inputId > "u" ? v + B : e.props.inputId;
       return r.cloneElement(e, {
-        inputId: E,
+        inputId: C,
         name: l ?? e.props.name,
         mode: a,
         size: s,
-        onChange: (x) => {
-          W(x.target.id), e.props.onChange && e.props.onChange(x);
+        onChange: (E) => {
+          W(E.target.id), e.props.onChange && e.props.onChange(E);
         },
         error: !!o,
         errorTextId: n,
-        labelClassNames: J(E, a, L, S)
+        labelClassNames: K(C, a, L, S)
       });
     } else {
-      if (m(e, j))
+      if (m(e, q))
         return r.cloneElement(e, {
           name: l ?? e.props.name,
           mode: a,
@@ -74,14 +74,14 @@ const f = r.forwardRef((t, F) => {
           error: !!o,
           errorTextId: n
         });
-      if (m(e, O))
+      if (m(e, P))
         return r.cloneElement(e, {
           name: l ?? e.props.name,
           mode: a,
           error: !!o,
           errorTextId: n
         });
-      if (m(e, K))
+      if (m(e, O))
         return r.cloneElement(e, {
           name: l ?? e.props.name,
           mode: a,
@@ -90,13 +90,12 @@ const f = r.forwardRef((t, F) => {
         });
     }
     return e;
-  }, C = () => /* @__PURE__ */ r.createElement("div", null, u === "div" && /* @__PURE__ */ r.createElement("div", { className: g }, t.legend && /* @__PURE__ */ r.createElement("h5", { className: I }, t.legend), r.Children.map(t.children, i)), u === "fieldset" && /* @__PURE__ */ r.createElement("fieldset", { name: t.fieldsetName, className: g }, t.legend && /* @__PURE__ */ r.createElement("legend", { className: I }, t.legend), r.Children.map(t.children, i)));
-  return /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": A.FormGroup, className: M, ref: F, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(P, { className: z, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(H, { className: b, errorText: o, testId: w, errorTextId: n }, C()) : C());
+  }, g = () => /* @__PURE__ */ r.createElement("div", null, f === "div" && /* @__PURE__ */ r.createElement("div", { className: I }, t.legend && /* @__PURE__ */ r.createElement("h5", { className: c }, t.legend), r.Children.map(t.children, i)), f === "fieldset" && /* @__PURE__ */ r.createElement("fieldset", { name: t.fieldsetName, className: I }, t.legend && /* @__PURE__ */ r.createElement("legend", { className: c }, t.legend), r.Children.map(t.children, i)));
+  return /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": A.FormGroup, className: M, ref: _, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(Q, { className: z, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(H, { className: b, errorText: o, testId: w, errorTextId: n }, g()) : g());
 });
-f.displayName = "FormGroup";
-const le = f;
+k.displayName = "FormGroup";
 export {
-  f as FormGroup,
-  le as default
+  k as FormGroup,
+  k as default
 };
 //# sourceMappingURL=FormGroup.js.map

package/components/FormGroup/FormGroup.js.map

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

package/components/FormGroup/index.js

@@ -1,7 +1,6 @@
-import r from "./FormGroup.js";
-import { FormGroup as t } from "./FormGroup.js";
+import { FormGroup as r } from "./FormGroup.js";
 export {
-  t as FormGroup,
+  r as FormGroup,
   r as default
 };
 //# sourceMappingURL=index.js.map

package/components/FormGroup/index.js.map

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

package/components/FormLayout/FormLayout.js

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

package/components/FormLayout/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","size","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormSize","formLayoutChildClasses","AnalyticsId","child","index","FormLayout$1"],"mappings":";;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,OAAO,QALGA,IAAAA,KAAA,CAAA,CAAA;AAyBL,MAAMC,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AACxG,QAAA,EAAE,YAAYC,IAAU,OAAuB,aAAAC,IAAc,KAAK,MAAAC,GAAM,WAAAC,GAAW,WAAAC,EAAc,IAAAN,GAEjGO,IAAc,EAAE,mBAAmB,GAAGJ,CAAW,QACjDK,IAA6BC;AAAA,IACjCC,EAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAACA,EAAgB,8BAA8B,CAAC,GAAGN,MAASO,EAAS;AAAA,IACvE;AAAA,IACAN;AAAA,EAAA,GAEIO,IAAyBH,EAAWC,EAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAACA,EAAgB,wBAAwB,CAAC,GAAGR,MAAY;AAAA,IACzD,CAACQ,EAAgB,0BAA0B,CAAC,GAAGR,MAAY;AAAA,IAC3D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IAC1D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAAH,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaC,EAAM;AAAA,MACnB,oBAAkBa,EAAY;AAAA,MAC9B,OAAON;AAAA,MACP,WAAWC;AAAA,MACX,KAAAP;AAAA,IAAA;AAAA,IAECF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACc,GAAwBC,MACpDhB,gBAAAA,EAAA,cAAC,SAAI,WAAWa,EAAA,GAAyBN,IAAYA,EAAUQ,GAAOC,CAAK,IAAID,CAAM,CAC7F;AAAA,EAAA;AAGP,CAAC;AAEDhB,EAAW,cAAc;AAEzB,MAAAkB,IAAelB;"}
+{"version":3,"file":"FormLayout.js","sources":["../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","size","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormSize","formLayoutChildClasses","AnalyticsId","child","index"],"mappings":";;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,OAAO,QALGA,IAAAA,KAAA,CAAA,CAAA;AAyBL,MAAMC,IAAaC,EAAM,WAAW,CAACC,GAAwBC,MAA4C;AACxG,QAAA,EAAE,YAAYC,IAAU,OAAuB,aAAAC,IAAc,KAAK,MAAAC,GAAM,WAAAC,GAAW,WAAAC,EAAc,IAAAN,GAEjGO,IAAc,EAAE,mBAAmB,GAAGJ,CAAW,QACjDK,IAA6BC;AAAA,IACjCC,EAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAACA,EAAgB,8BAA8B,CAAC,GAAGN,MAASO,EAAS;AAAA,IACvE;AAAA,IACAN;AAAA,EAAA,GAEIO,IAAyBH,EAAWC,EAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAACA,EAAgB,wBAAwB,CAAC,GAAGR,MAAY;AAAA,IACzD,CAACQ,EAAgB,0BAA0B,CAAC,GAAGR,MAAY;AAAA,IAC3D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IAC1D,CAACQ,EAAgB,yBAAyB,CAAC,GAAGR,MAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAAH,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaC,EAAM;AAAA,MACnB,oBAAkBa,EAAY;AAAA,MAC9B,OAAON;AAAA,MACP,WAAWC;AAAA,MACX,KAAAP;AAAA,IAAA;AAAA,IAECF,EAAM,SAAS,IAAIC,EAAM,UAAU,CAACc,GAAwBC,MACpDhB,gBAAAA,EAAA,cAAC,SAAI,WAAWa,EAAA,GAAyBN,IAAYA,EAAUQ,GAAOC,CAAK,IAAID,CAAM,CAC7F;AAAA,EAAA;AAGP,CAAC;AAEDhB,EAAW,cAAc;"}

package/components/FormLayout/index.js

@@ -1,8 +1,8 @@
-import r from "./FormLayout.js";
-import { FormLayout as a, FormLayoutColumns as u } from "./FormLayout.js";
+import { FormLayout as r } from "./FormLayout.js";
+import { FormLayoutColumns as a } from "./FormLayout.js";
 export {
-  a as FormLayout,
-  u as FormLayoutColumns,
+  r as FormLayout,
+  a as FormLayoutColumns,
   r as default
 };
 //# sourceMappingURL=index.js.map

package/components/GridExample/GridExample.js

@@ -1,8 +1,8 @@
 import e from "react";
 import { isSupernova as r } from "../../docs/index.js";
-const m = ({ gridLayout: a = r(), children: t }) => r() || a === "padding" ? /* @__PURE__ */ e.createElement("div", { style: { padding: "0.5rem" } }, t) : a === "helsenorge" ? /* @__PURE__ */ e.createElement("div", { className: "container py-5" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, t))) : /* @__PURE__ */ e.createElement(e.Fragment, null, t), s = m;
+const l = ({ gridLayout: a = r(), children: t }) => r() || a === "padding" ? /* @__PURE__ */ e.createElement("div", { style: { padding: "0.5rem" } }, t) : a === "helsenorge" ? /* @__PURE__ */ e.createElement("div", { className: "container py-5" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, t))) : /* @__PURE__ */ e.createElement(e.Fragment, null, t);
 export {
-  m as GridExample,
-  s as default
+  l as GridExample,
+  l as default
 };
 //# sourceMappingURL=GridExample.js.map

package/components/GridExample/GridExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSupernova } from '../../docs';\n\ntype GridLayout = 'helsenorge' | 'padding' | 'none';\n\ninterface GridExampleProps {\n  gridLayout: GridLayout;\n}\n\nexport const GridExample: React.FC<GridExampleProps> = ({ gridLayout = isSupernova(), children }) => {\n  if (isSupernova() || gridLayout === 'padding') {\n    return <div style={{ padding: '0.5rem' }}>{children}</div>;\n  }\n\n  if (gridLayout === 'helsenorge') {\n    return (\n      <div className=\"container py-5\">\n        <div className=\"row\">\n          <div className=\"col\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport default GridExample;\n"],"names":["GridExample","gridLayout","isSupernova","children","React","GridExample$1"],"mappings":";;AAUO,MAAMA,IAA0C,CAAC,EAAE,YAAAC,IAAaC,EAAY,GAAG,UAAAC,QAChFD,EAAA,KAAiBD,MAAe,4CAC1B,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,KAAaE,CAAS,IAGlDF,MAAe,eAEdG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oDACZ,OAAI,EAAA,WAAU,MACb,GAAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,MAAO,GAAAD,CAAS,CACjC,CACF,sDAIMA,CAAS,GAGrBE,IAAeL;"}
+{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSupernova } from '../../docs';\n\ntype GridLayout = 'helsenorge' | 'padding' | 'none';\n\ninterface GridExampleProps {\n  gridLayout: GridLayout;\n}\n\nexport const GridExample: React.FC<GridExampleProps> = ({ gridLayout = isSupernova(), children }) => {\n  if (isSupernova() || gridLayout === 'padding') {\n    return <div style={{ padding: '0.5rem' }}>{children}</div>;\n  }\n\n  if (gridLayout === 'helsenorge') {\n    return (\n      <div className=\"container py-5\">\n        <div className=\"row\">\n          <div className=\"col\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport default GridExample;\n"],"names":["GridExample","gridLayout","isSupernova","children","React"],"mappings":";;AAUO,MAAMA,IAA0C,CAAC,EAAE,YAAAC,IAAaC,EAAY,GAAG,UAAAC,QAChFD,EAAA,KAAiBD,MAAe,4CAC1B,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,KAAaE,CAAS,IAGlDF,MAAe,eAEdG,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oDACZ,OAAI,EAAA,WAAU,MACb,GAAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,MAAO,GAAAD,CAAS,CACjC,CACF,sDAIMA,CAAS;"}

package/components/GridExample/index.js

@@ -1,7 +1,6 @@
-import e from "./GridExample.js";
-import { GridExample as p } from "./GridExample.js";
+import { GridExample as a } from "./GridExample.js";
 export {
-  p as GridExample,
-  e as default
+  a as GridExample,
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/GridExample/index.js.map

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

package/components/HelpBubble/HelpBubble.js

@@ -1,62 +1,61 @@
 import e from "react";
 import c from "classnames";
 import { AnalyticsId as L } from "../../constants.js";
-import w from "../AnchorLink/AnchorLink.js";
-import A from "../Close/Close.js";
-import I, { PopOverVariant as R } from "../PopOver/PopOver.js";
+import H from "../AnchorLink/AnchorLink.js";
+import w from "../Close/Close.js";
+import A, { PopOverVariant as I } from "../PopOver/PopOver.js";
 import t from "../HelpBubble/styles.module.scss";
-const M = R, b = e.forwardRef((m, u) => {
+const M = I, R = e.forwardRef((b, m) => {
   const {
-    children: p,
-    className: f = "",
+    children: u,
+    className: p = "",
     noCloseButton: n,
     linkText: r = "Mer hjelp",
     linkUrl: o,
-    linkTarget: d,
+    linkTarget: f,
     onLinkClick: a,
-    onClose: h,
-    closeAriaLabel: k,
+    onClose: d,
+    closeAriaLabel: h,
     // Props passed on to PopOver
     showBubble: s,
-    helpBubbleId: B,
+    helpBubbleId: k,
     variant: _,
-    controllerRef: C,
+    controllerRef: B,
     role: i,
-    testId: E
-  } = m, l = i === "tooltip";
+    testId: C
+  } = b, l = i === "tooltip";
   if (!s && !l)
     return null;
-  const N = c(t.helpbubble, f), v = c(t.helpbubble__content, {
+  const E = c(t.helpbubble, p), N = c(t.helpbubble__content, {
     [t["helpbubble__content--close"]]: !n && !l
-  }), y = () => {
+  }), v = () => {
     if (!l) {
       if (a && r)
         return /* @__PURE__ */ e.createElement("button", { className: t.helpbubble__link, onClick: a, type: "button" }, r);
       if (o && r)
-        return /* @__PURE__ */ e.createElement(w, { href: o, target: d }, r);
+        return /* @__PURE__ */ e.createElement(H, { href: o, target: f }, r);
     }
-  }, H = () => {
+  }, y = () => {
     if (!(n || l))
-      return /* @__PURE__ */ e.createElement("div", { className: t.helpbubble__close }, /* @__PURE__ */ e.createElement(A, { small: !0, onClick: h, ariaLabel: k }));
+      return /* @__PURE__ */ e.createElement("div", { className: t.helpbubble__close }, /* @__PURE__ */ e.createElement(w, { small: !0, onClick: d, ariaLabel: h }));
   };
   return /* @__PURE__ */ e.createElement(
-    I,
+    A,
     {
-      id: B,
+      id: k,
       variant: _,
-      controllerRef: C,
+      controllerRef: B,
       role: i,
-      ref: u,
+      ref: m,
       show: l && s,
-      testId: E
+      testId: C
     },
-    /* @__PURE__ */ e.createElement("div", { className: N, "data-analyticsid": L.HelpBubble }, H(), /* @__PURE__ */ e.createElement("div", { className: v }, p, y()))
+    /* @__PURE__ */ e.createElement("div", { className: E, "data-analyticsid": L.HelpBubble }, y(), /* @__PURE__ */ e.createElement("div", { className: N }, u, v()))
   );
 });
-b.displayName = "HelpBubble";
-const U = b;
+R.displayName = "HelpBubble";
 export {
   M as HelpBubbleVariant,
-  U as default
+  R as default
 };
 //# sourceMappingURL=HelpBubble.js.map

package/components/HelpBubble/HelpBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.js","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","PopOverVariant","HelpBubble","React","props","ref","children","className","noCloseButton","linkText","linkUrl","linkTarget","onLinkClick","onClose","closeAriaLabel","showBubble","helpBubbleId","variant","controllerRef","role","testId","isTooltip","helpBubbleClasses","classNames","styles","contentClasses","renderLink","AnchorLink","renderCloseButton","Close","PopOver","AnalyticsId","HelpBubble$1"],"mappings":";;;;;;;AAWO,MAAMA,IAAoBC,GAqC3BC,IAAaC,EAAM,WAA4D,CAACC,GAAOC,MAAQ;AAC7F,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAhB,GAEEiB,IAAYF,MAAS;AAEvB,MAAA,CAACJ,KAAc,CAACM;AACX,WAAA;AAGT,QAAMC,IAAoBC,EAAWC,EAAO,YAAYjB,CAAS,GAE3DkB,IAAiBF,EAAWC,EAAO,qBAAqB;AAAA,IAC5D,CAACA,EAAO,4BAA4B,CAAC,GAAG,CAAChB,KAAiB,CAACa;AAAA,EAAA,CAC5D,GAEKK,IAAa,MAA+B;AAEhD,QAAI,CAAAL,GAGJ;AAAA,UAAIT,KAAeH;AAEf,eAAAN,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,EAAO,kBAAkB,SAASZ,GAAa,MAAK,SAAA,GACpEH,CACH;AAEJ,UAAWC,KAAWD;AACpB,+CACGkB,GAAW,EAAA,MAAMjB,GAAS,QAAQC,KAChCF,CACH;AAAA;AAAA,EAEJ,GAGImB,IAAoB,MAA+B;AACvD,QAAI,EAAApB,KAAiBa;AAGrB,aACGlB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWqB,EAAO,kBACrB,GAAArB,gBAAAA,EAAA,cAAC0B,GAAM,EAAA,OAAK,IAAC,SAAShB,GAAS,WAAWC,EAAgB,CAAA,CAC5D;AAAA,EAAA;AAKF,SAAAX,gBAAAA,EAAA;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,IAAId;AAAA,MACJ,SAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC;AAAA,MACA,KAAAd;AAAA,MACA,MAAMgB,KAAaN;AAAA,MACnB,QAAAK;AAAA,IAAA;AAAA,oCAEC,OAAI,EAAA,WAAWE,GAAmB,oBAAkBS,EAAY,cAC9DH,EACD,GAAAzB,gBAAAA,EAAA,cAAC,SAAI,WAAWsB,KACbnB,GACAoB,EAAA,CACH,CACF;AAAA,EAAA;AAGN,CAAC;AAEDxB,EAAW,cAAc;AAEzB,MAAA8B,IAAe9B;"}
+{"version":3,"file":"HelpBubble.js","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport AnchorLink, { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverProps, PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Sets the target type of the link. _blank adds an arrow icon at the end of the link */\n  linkTarget?: AnchorLinkTargets;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    children,\n    className = '',\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    linkTarget,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    // Props passed on to PopOver\n    showBubble,\n    helpBubbleId,\n    variant,\n    controllerRef,\n    role,\n    testId,\n  } = props;\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, className);\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return (\n        <AnchorLink href={linkUrl} target={linkTarget}>\n          {linkText}\n        </AnchorLink>\n      );\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver\n      id={helpBubbleId}\n      variant={variant}\n      controllerRef={controllerRef}\n      role={role}\n      ref={ref}\n      show={isTooltip && showBubble}\n      testId={testId}\n    >\n      <div className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","PopOverVariant","HelpBubble","React","props","ref","children","className","noCloseButton","linkText","linkUrl","linkTarget","onLinkClick","onClose","closeAriaLabel","showBubble","helpBubbleId","variant","controllerRef","role","testId","isTooltip","helpBubbleClasses","classNames","styles","contentClasses","renderLink","AnchorLink","renderCloseButton","Close","PopOver","AnalyticsId"],"mappings":";;;;;;;AAWO,MAAMA,IAAoBC,GAqC3BC,IAAaC,EAAM,WAA4D,CAACC,GAAOC,MAAQ;AAC7F,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA;AAAA,IAEA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAhB,GAEEiB,IAAYF,MAAS;AAEvB,MAAA,CAACJ,KAAc,CAACM;AACX,WAAA;AAGT,QAAMC,IAAoBC,EAAWC,EAAO,YAAYjB,CAAS,GAE3DkB,IAAiBF,EAAWC,EAAO,qBAAqB;AAAA,IAC5D,CAACA,EAAO,4BAA4B,CAAC,GAAG,CAAChB,KAAiB,CAACa;AAAA,EAAA,CAC5D,GAEKK,IAAa,MAA+B;AAEhD,QAAI,CAAAL,GAGJ;AAAA,UAAIT,KAAeH;AAEf,eAAAN,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,EAAO,kBAAkB,SAASZ,GAAa,MAAK,SAAA,GACpEH,CACH;AAEJ,UAAWC,KAAWD;AACpB,+CACGkB,GAAW,EAAA,MAAMjB,GAAS,QAAQC,KAChCF,CACH;AAAA;AAAA,EAEJ,GAGImB,IAAoB,MAA+B;AACvD,QAAI,EAAApB,KAAiBa;AAGrB,aACGlB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWqB,EAAO,kBACrB,GAAArB,gBAAAA,EAAA,cAAC0B,GAAM,EAAA,OAAK,IAAC,SAAShB,GAAS,WAAWC,EAAgB,CAAA,CAC5D;AAAA,EAAA;AAKF,SAAAX,gBAAAA,EAAA;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,IAAId;AAAA,MACJ,SAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC;AAAA,MACA,KAAAd;AAAA,MACA,MAAMgB,KAAaN;AAAA,MACnB,QAAAK;AAAA,IAAA;AAAA,oCAEC,OAAI,EAAA,WAAWE,GAAmB,oBAAkBS,EAAY,cAC9DH,EACD,GAAAzB,gBAAAA,EAAA,cAAC,SAAI,WAAWsB,KACbnB,GACAoB,EAAA,CACH,CACF;AAAA,EAAA;AAGN,CAAC;AAEDxB,EAAW,cAAc;"}

package/components/HelpBubble/styles.module.scss

@@ -27,7 +27,7 @@
     align-items: flex-start;
     overflow-wrap: anywhere;
     row-gap: getSpacer(2xs);
-    padding: getSpacer(s) getSpacer(s) getSpacer(m) getSpacer(s);
+    padding: getSpacer(s) getSpacer(s) getSpacer(m);
 
     &--close {
       padding-right: 0;

package/components/HelpBubbleExample/HelpBubbleExample.js

@@ -1,6 +1,6 @@
 import e, { useRef as o } from "react";
 import a from "../HelpBubble/HelpBubble.js";
-const l = (i) => {
+const r = (i) => {
   const t = o(null);
   return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, "Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."), /* @__PURE__ */ e.createElement("div", { style: { position: "relative", display: "inline" } }, /* @__PURE__ */ e.createElement("span", { ref: t, style: { display: "inline-block", color: "red" } }, "Jeg er en tooltip tekst."), /* @__PURE__ */ e.createElement(
     a,
@@ -13,8 +13,8 @@ const l = (i) => {
     },
     i.children
   )), /* @__PURE__ */ e.createElement("span", null, "Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."));
-}, u = l;
+};
 export {
-  u as default
+  r as default
 };
 //# sourceMappingURL=HelpBubbleExample.js.map

package/components/HelpBubbleExample/HelpBubbleExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubbleExample.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble","HelpBubbleExample$1"],"mappings":";;AAIA,MAAMA,IAA+C,CAASC,MAAA;AACtD,QAAAC,IAAgBC,EAAwB,IAAI;AAGhD,SAAAC,gBAAAA,EAAA,cAAC,OACC,MAAAA,gBAAAA,EAAA,cAAC,QAEG,MAAA,+pBAEJ,GACAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,OAAO,EAAE,UAAU,YAAY,SAAS,SAAS,EAAA,GACnDA,gBAAAA,EAAA,cAAA,QAAA,EAAK,KAAKF,GAAe,OAAO,EAAE,SAAS,gBAAgB,OAAO,MAChE,EAAA,GAAA,0BACH,GACAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,SAAS,MAAM;AACb,cAAM,eAAe;AAAA,MACvB;AAAA,MACA,eAAAC;AAAA,IAAA;AAAA,IAECD,EAAM;AAAA,EAAA,CAEX,GACCG,gBAAAA,EAAA,cAAA,QAAA,MAEG,+pBAEJ,CACF;AAEJ,GAEAE,IAAeN;"}
+{"version":3,"file":"HelpBubbleExample.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble"],"mappings":";;AAIA,MAAMA,IAA+C,CAASC,MAAA;AACtD,QAAAC,IAAgBC,EAAwB,IAAI;AAGhD,SAAAC,gBAAAA,EAAA,cAAC,OACC,MAAAA,gBAAAA,EAAA,cAAC,QAEG,MAAA,+pBAEJ,GACAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,OAAO,EAAE,UAAU,YAAY,SAAS,SAAS,EAAA,GACnDA,gBAAAA,EAAA,cAAA,QAAA,EAAK,KAAKF,GAAe,OAAO,EAAE,SAAS,gBAAgB,OAAO,MAChE,EAAA,GAAA,0BACH,GACAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,SAAS,MAAM;AACb,cAAM,eAAe;AAAA,MACvB;AAAA,MACA,eAAAC;AAAA,IAAA;AAAA,IAECD,EAAM;AAAA,EAAA,CAEX,GACCG,gBAAAA,EAAA,cAAA,QAAA,MAEG,+pBAEJ,CACF;AAEJ;"}