@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

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\ninterface 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\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\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 field1 = 'field1';\n  const field2 = 'field2';\n  const field3 = 'field3';\n  const field4 = 'field4';\n  const field5 = 'field5';\n  const field6 = 'field6';\n  const allErrors =\n    errors.field1 ||\n    errors.field2 ||\n    errors.field3 ||\n    errors.field4 ||\n    errors.field5 ||\n    errors.field6 ||\n    errors.field7 ||\n    errors.field8 ||\n    errors.field9;\n  const errorMessage = 'Du må velge et alternativ';\n  const errorMessage2 = 'Du må velge to alternativ';\n  const errorMessage3 = 'Det kan ikke legges inn mer enn 40 tegn';\n  const errorMessage4 = 'Du må skrive noe her';\n  const errorMessage5 = 'Du må velge \"Option 2\"';\n  const errorMessage6 = `Du må velge dato mellom ${minDate.toLocaleDateString('nb')} og ${maxDate.toLocaleDateString('nb')}`;\n  const errorMessage7 = `Du må skrive inn tidspunkt mellom ${minDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })} og ${maxDate.toLocaleTimeString('nb', {\n    hour: '2-digit',\n    minute: '2-digit',\n  })}`;\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || errorMessage2;\n  };\n  const requireSelect = (value: Array<string>): true | string => {\n    return value.toString() === 'Option 2' || errorMessage5;\n  };\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      const allCheckBoxes = [\n        <Checkbox\n          key={0}\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={1}\n          inputId=\"checkbox2\"\n          label={<Label labelTexts={[{ text: 'Checkbox 2' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={2}\n          inputId=\"checkbox3\"\n          label={<Label labelTexts={[{ text: 'Checkbox 3' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n      ];\n\n      return [\n        <FormGroup\n          key={0}\n          title={'Gruppe tittel'}\n          legend={'Velg minst en'}\n          error={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n        >\n          <FormLayout maxColumns={FormLayoutColumns.two}>\n            {allCheckBoxes.map(check => {\n              return check;\n            })}\n          </FormLayout>\n        </FormGroup>,\n        <FormGroup key={1} legend={'Velg minst to'} error={errors.field2 ? (errors.field2.message as string) : undefined} size={props.size}>\n          <Checkbox\n            inputId=\"checkbox4\"\n            label={<Label labelTexts={[{ text: 'Checkbox 4' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox5\"\n            label={<Label labelTexts={[{ text: 'Checkbox 5' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox6\"\n            label={<Label labelTexts={[{ text: 'Checkbox 6' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n        </FormGroup>,\n        <FormGroup key={2} legend={'Velg en'} error={errors.field3 ? (errors.field3.message as string) : undefined} size={props.size}>\n          <RadioButton\n            inputId=\"radiobutton1\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton2\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 2' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton3\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 3' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n        </FormGroup>,\n        <FormGroup key={3} error={errors.field4 ? (errors.field4.message as string) : undefined}>\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: 'Skriv din historie her', type: 'semibold' }]} />}\n            textareaId=\"textarea1\"\n            {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n          />\n        </FormGroup>,\n        <FormGroup key={4} size={props.size} error={errors.field5 ? (errors.field5.message as string) : undefined}>\n          <Input\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            placeholder={'Skriv noe!'}\n            icon={Hospital}\n            {...register(field5, { required: errorMessage4 })}\n          />\n        </FormGroup>,\n        <FormGroup key={5} size={props.size} error={errors.field6 ? (errors.field6.message as string) : undefined}>\n          <Select\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            {...register(field6, { validate: requireSelect })}\n          >\n            <option value={'Option 1'}>{'Option 1'}</option>\n            <option value={'Option 2'}>{'Option 2'}</option>\n            <option value={'Option 3'}>{'Option 3'}</option>\n          </Select>\n        </FormGroup>,\n      ];\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return (\n        <Checkbox\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          errorText={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n          {...register(field1, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return (\n        <RadioButton\n          inputId=\"radiobutton1\"\n          label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n          errorText={errors.field3 ? (errors.field3.message as string) : undefined}\n          size={props.size}\n          {...register(field3, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return (\n        <Textarea\n          defaultValue={`Dette er min historie \\n\\n Hello \\n\\n test`}\n          grow\n          maxCharacters={40}\n          minRows={5}\n          errorText={errors.field4 ? (errors.field4.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n          textareaId=\"textarea1\"\n          {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.input) {\n      return (\n        <Input\n          inputId={'input1'}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          placeholder={'Skriv noe!'}\n          errorText={errors.field5 ? (errors.field5.message as string) : undefined}\n          icon={Hospital}\n          {...register(field5, { required: errorMessage4 })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.select) {\n      return (\n        <Select\n          errorText={errors.field6 ? (errors.field6.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          {...register(field6, { validate: requireSelect })}\n        >\n          <option value={'Option 1'}>{'Option 1'}</option>\n          <option value={'Option 2'}>{'Option 2'}</option>\n          <option value={'Option 3'}>{'Option 3'}</option>\n        </Select>\n      );\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} errorSummary={allErrors ? 'Sjekk at alt er riktig utfylt' : undefined}>\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","field1","field2","field3","field4","field5","field6","allErrors","errorMessage","errorMessage2","errorMessage3","errorMessage4","errorMessage5","requireTwo","value","requireSelect","getFormExample","allCheckBoxes","React","Checkbox","Label","FormGroup","FormLayout","FormLayoutColumns","check","RadioButton","Textarea","Input","Hospital","Select","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\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\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 field1 = 'field1';\n  const field2 = 'field2';\n  const field3 = 'field3';\n  const field4 = 'field4';\n  const field5 = 'field5';\n  const field6 = 'field6';\n  const allErrors =\n    errors.field1 ||\n    errors.field2 ||\n    errors.field3 ||\n    errors.field4 ||\n    errors.field5 ||\n    errors.field6 ||\n    errors.field7 ||\n    errors.field8 ||\n    errors.field9;\n  const errorMessage = 'Du må velge et alternativ';\n  const errorMessage2 = 'Du må velge to alternativ';\n  const errorMessage3 = 'Det kan ikke legges inn mer enn 40 tegn';\n  const errorMessage4 = 'Du må skrive noe her';\n  const errorMessage5 = 'Du må velge \"Option 2\"';\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || errorMessage2;\n  };\n  const requireSelect = (value: Array<string>): true | string => {\n    return value.toString() === 'Option 2' || errorMessage5;\n  };\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      const allCheckBoxes = [\n        <Checkbox\n          key={0}\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={1}\n          inputId=\"checkbox2\"\n          label={<Label labelTexts={[{ text: 'Checkbox 2' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={2}\n          inputId=\"checkbox3\"\n          label={<Label labelTexts={[{ text: 'Checkbox 3' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n      ];\n\n      return [\n        <FormGroup\n          key={0}\n          title={'Gruppe tittel'}\n          legend={'Velg minst en'}\n          error={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n        >\n          <FormLayout maxColumns={FormLayoutColumns.two}>\n            {allCheckBoxes.map(check => {\n              return check;\n            })}\n          </FormLayout>\n        </FormGroup>,\n        <FormGroup key={1} legend={'Velg minst to'} error={errors.field2 ? (errors.field2.message as string) : undefined} size={props.size}>\n          <Checkbox\n            inputId=\"checkbox4\"\n            label={<Label labelTexts={[{ text: 'Checkbox 4' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox5\"\n            label={<Label labelTexts={[{ text: 'Checkbox 5' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox6\"\n            label={<Label labelTexts={[{ text: 'Checkbox 6' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n        </FormGroup>,\n        <FormGroup key={2} legend={'Velg en'} error={errors.field3 ? (errors.field3.message as string) : undefined} size={props.size}>\n          <RadioButton\n            inputId=\"radiobutton1\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton2\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 2' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton3\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 3' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n        </FormGroup>,\n        <FormGroup key={3} error={errors.field4 ? (errors.field4.message as string) : undefined}>\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: 'Skriv din historie her', type: 'semibold' }]} />}\n            textareaId=\"textarea1\"\n            {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n          />\n        </FormGroup>,\n        <FormGroup key={4} size={props.size} error={errors.field5 ? (errors.field5.message as string) : undefined}>\n          <Input\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            placeholder={'Skriv noe!'}\n            icon={Hospital}\n            {...register(field5, { required: errorMessage4 })}\n          />\n        </FormGroup>,\n        <FormGroup key={5} size={props.size} error={errors.field6 ? (errors.field6.message as string) : undefined}>\n          <Select\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            {...register(field6, { validate: requireSelect })}\n          >\n            <option value={'Option 1'}>{'Option 1'}</option>\n            <option value={'Option 2'}>{'Option 2'}</option>\n            <option value={'Option 3'}>{'Option 3'}</option>\n          </Select>\n        </FormGroup>,\n      ];\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return (\n        <Checkbox\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          errorText={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n          {...register(field1, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return (\n        <RadioButton\n          inputId=\"radiobutton1\"\n          label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n          errorText={errors.field3 ? (errors.field3.message as string) : undefined}\n          size={props.size}\n          {...register(field3, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return (\n        <Textarea\n          defaultValue={`Dette er min historie \\n\\n Hello \\n\\n test`}\n          grow\n          maxCharacters={40}\n          minRows={5}\n          errorText={errors.field4 ? (errors.field4.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n          textareaId=\"textarea1\"\n          {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.input) {\n      return (\n        <Input\n          inputId={'input1'}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          placeholder={'Skriv noe!'}\n          errorText={errors.field5 ? (errors.field5.message as string) : undefined}\n          icon={Hospital}\n          {...register(field5, { required: errorMessage4 })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.select) {\n      return (\n        <Select\n          errorText={errors.field6 ? (errors.field6.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          {...register(field6, { validate: requireSelect })}\n        >\n          <option value={'Option 1'}>{'Option 1'}</option>\n          <option value={'Option 2'}>{'Option 2'}</option>\n          <option value={'Option 3'}>{'Option 3'}</option>\n        </Select>\n      );\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} errorSummary={allErrors ? 'Sjekk at alt er riktig utfylt' : undefined}>\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","field1","field2","field3","field4","field5","field6","allErrors","errorMessage","errorMessage2","errorMessage3","errorMessage4","errorMessage5","requireTwo","value","requireSelect","getFormExample","allCheckBoxes","React","Checkbox","Label","FormGroup","FormLayout","FormLayoutColumns","check","RadioButton","Textarea","Input","Hospital","Select","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}

package/components/FormExample/index.d.ts

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

package/components/FormGroup/FormGroup.d.ts

@@ -35,4 +35,3 @@ export interface FormGroupProps {
 }
 export declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default FormGroup;
-//# sourceMappingURL=FormGroup.d.ts.map

package/components/FormGroup/FormGroup.js

@@ -1,97 +1,88 @@
 import r, { useState as I } from "react";
-import l from "classnames";
-import { FormMode as k, FormSize as G, AnalyticsId as B } from "../../constants.js";
-import { isComponent as s } from "../../utils/component.js";
-import { uuid as A } from "../../utils/uuid.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 "../Title/Title.js";
-import o from "./styles.module.scss";
-const u = r.forwardRef((t, w) => {
+import p from "classnames";
+import { FormMode as k, FormSize as F, AnalyticsId as z } from "../../constants.js";
+import { isComponent as m } from "../../utils/component.js";
+import { uuid as B } from "../../utils/uuid.js";
+import A from "../Checkbox/Checkbox.js";
+import D from "../ErrorWrapper/ErrorWrapper.js";
+import H from "../FormLayout/FormLayout.js";
+import $ from "../Input/Input.js";
+import j, { getRadioLabelClasses as q } from "../RadioButton/RadioButton.js";
+import J from "../Select/Select.js";
+import K from "../Title/Title.js";
+import s from "./styles.module.scss";
+const d = r.forwardRef((t, G) => {
   const {
-    className: F,
+    className: _,
     fieldsetClassName: y,
-    mode: n = k.onwhite,
-    size: m = G.medium,
-    error: a,
-    name: p,
-    htmlMarkup: c = "fieldset",
+    mode: a = k.onwhite,
+    size: n = F.medium,
+    error: o,
+    name: l,
+    htmlMarkup: f = "fieldset",
     renderError: R = !0,
     errorWrapperClassName: b,
-    errorWrapperTestId: v
-  } = t, [x, S] = I(), [T] = I(A()), i = n === k.ondark, d = m === G.large, W = l(
-    o["form-group-wrapper"],
-    {
-      [o["form-group-wrapper--on-dark"]]: i,
-      [o["form-group-wrapper--invalid"]]: a
-    },
-    F
-  ), L = l(o["form-group-wrapper__title"], {
-    [o["form-group-wrapper__title--on-dark"]]: i && !a,
-    [o["form-group-wrapper__title--large"]]: d
-  }), M = l(o["form-group"]), g = l(o["field-set__legend"], {
-    [o["field-set__legend--on-dark"]]: i && !a,
-    [o["field-set__legend--large"]]: d
-  }), C = l(o["field-set"], y), f = (e, z) => {
-    if (s(e, $))
+    errorWrapperTestId: w
+  } = t, [x, S] = I(), [T] = I(B()), u = a === k.ondark, W = n === F.large, v = p(s["form-group-wrapper"], _), L = p({
+    [s["form-group-wrapper__title--on-dark"]]: u && !o
+  }), c = p(s["field-set__legend"], {
+    [s["field-set__legend--on-dark"]]: u && !o
+  }), g = p(s["field-set"], y), i = (e, M) => {
+    if (m(e, H))
       return r.cloneElement(e, {
-        size: m,
-        mapHelper: f
+        size: n,
+        mapHelper: i
       });
-    if (s(e, u))
+    if (m(e, d))
       return r.cloneElement(e, {
-        mode: n,
-        size: m,
-        error: a,
+        mode: a,
+        size: n,
+        error: o,
         renderError: !1
       });
-    if (s(e, D))
+    if (m(e, A))
       return r.cloneElement(e, {
-        name: p ?? e.props.name,
-        mode: n,
-        size: m,
-        error: !!a
+        name: l ?? e.props.name,
+        mode: a,
+        size: n,
+        error: !!o
       });
-    if (s(e, q)) {
-      const N = typeof e.props.inputId > "u" ? T + z : e.props.inputId;
+    if (m(e, j)) {
+      const E = typeof e.props.inputId > "u" ? T + M : e.props.inputId;
       return r.cloneElement(e, {
-        inputId: N,
-        name: p ?? e.props.name,
-        mode: n,
-        size: m,
-        onChange: (_) => {
-          S(_.target.id), e.props.onChange && e.props.onChange(_);
+        inputId: E,
+        name: l ?? e.props.name,
+        mode: a,
+        size: n,
+        onChange: (N) => {
+          S(N.target.id), e.props.onChange && e.props.onChange(N);
         },
-        error: !!a,
-        labelClassNames: J(N, n, d, x)
+        error: !!o,
+        labelClassNames: q(E, a, W, x)
       });
     } else {
-      if (s(e, j))
+      if (m(e, $))
         return r.cloneElement(e, {
-          name: p ?? e.props.name,
-          mode: n,
-          size: m,
-          error: !!a
+          name: l ?? e.props.name,
+          mode: a,
+          size: n,
+          error: !!o
         });
-      if (s(e, K))
+      if (m(e, J))
         return r.cloneElement(e, {
-          name: p ?? e.props.name,
-          mode: n,
-          error: !!a
+          name: l ?? e.props.name,
+          mode: a,
+          error: !!o
         });
     }
     return e;
-  }, E = () => /* @__PURE__ */ r.createElement("div", { className: M }, c === "div" && /* @__PURE__ */ r.createElement("div", { className: C }, t.legend && /* @__PURE__ */ r.createElement("h5", { className: g }, t.legend), r.Children.map(t.children, f)), c === "fieldset" && /* @__PURE__ */ r.createElement("fieldset", { name: t.fieldsetName, className: C }, t.legend && /* @__PURE__ */ r.createElement("legend", { className: g }, t.legend), r.Children.map(t.children, f)));
-  return /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": B.FormGroup, className: W, ref: w, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(O, { className: L, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: a ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(H, { className: b, errorText: a, testId: v }, E()) : E());
+  }, C = () => /* @__PURE__ */ r.createElement("div", null, f === "div" && /* @__PURE__ */ r.createElement("div", { className: g }, 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: g }, 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": z.FormGroup, className: v, ref: G, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(K, { className: L, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(D, { className: b, errorText: o, testId: w }, C()) : C());
 });
-u.displayName = "FormGroup";
-const ne = u;
+d.displayName = "FormGroup";
+const ae = d;
 export {
-  u as FormGroup,
-  ne as default
+  d as FormGroup,
+  ae 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 { isComponent } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const [radioGroupId] = useState<string>(uuid());\n  const onDark = mode === FormMode.ondark;\n  const isLarge = size === FormSize.large;\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--large']]: isLarge,\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--large']]: isLarge,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        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      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        mode,\n        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        labelClassNames: getRadioLabelClasses(radioId, mode as FormMode, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","size","FormSize","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","checkedRadioId","setCheckedRadioId","useState","radioGroupId","uuid","onDark","isLarge","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","index","isComponent","FormLayout","Checkbox","RadioButton","radioId","event","getRadioLabelClasses","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}
+{"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 { isComponent } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const [radioGroupId] = useState<string>(uuid());\n  const onDark = mode === FormMode.ondark;\n  const 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<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\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      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        mode,\n        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        labelClassNames: getRadioLabelClasses(radioId, mode as FormMode, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        size,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","size","FormSize","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","checkedRadioId","setCheckedRadioId","useState","radioGroupId","uuid","onDark","isLarge","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","legendClasses","fieldsetClasses","mapFormComponent","child","index","isComponent","FormLayout","Checkbox","RadioButton","radioId","event","getRadioLabelClasses","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}

package/components/FormGroup/FormGroup.stories.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormMode, FormSize } from '../../constants';
+import './formGroup.stories.scss';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./FormGroup").FormGroupProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        legend: string;
+        mode: FormMode.onwhite;
+        size: FormSize.medium;
+        name: string;
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        legend: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+        name: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChildren: Story;
+export declare const RadioButtonChildren: Story;
+export declare const InputChildren: Story;
+export declare const DivTagTrue: Story;
+export declare const CustomErrorWrapperClass: Story;

package/components/FormGroup/index.d.ts

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

package/components/FormLayout/FormLayout.d.ts

@@ -25,4 +25,3 @@ export interface FormLayoutProps {
 }
 export declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
 export default FormLayout;
-//# sourceMappingURL=FormLayout.d.ts.map

package/components/FormLayout/FormLayout.stories.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormLayoutColumns } from './FormLayout';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./FormLayout").FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        maxColumns: FormLayoutColumns.three;
+        colMinWidth: number;
+    };
+    argTypes: {
+        maxColumns: {
+            control: string;
+            options: typeof FormLayoutColumns;
+        };
+        colMinWidth: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChildren: Story;
+export declare const RadioButtonChildren: Story;

package/components/FormLayout/index.d.ts

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

package/components/GridExample/GridExample.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 export declare const GridExample: React.FC;
 export default GridExample;
-//# sourceMappingURL=GridExample.d.ts.map

package/components/GridExample/index.d.ts

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

package/components/HelpBubble/HelpBubble.d.ts

@@ -37,4 +37,3 @@ export interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'varian
 }
 declare const HelpBubble: React.ForwardRefExoticComponent<HelpBubbleProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
 export default HelpBubble;
-//# sourceMappingURL=HelpBubble.d.ts.map

package/components/HelpBubble/HelpBubble.stories.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./HelpBubble").HelpBubbleProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        controllerRef: undefined;
+        children: string;
+        showBubble: true;
+        variant: import("../PopOver").PopOverVariant.positionautomatic;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        showBubble: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: typeof import("../PopOver").PopOverVariant;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Link: Story;
+export declare const Toggle: Story;
+export declare const OnText: Story;
+export declare const AsTooltip: Story;
+export declare const WithHelpQuestion: Story;
+export declare const HorizontalScroll: Story;
+export declare const CenteredOverflow: Story;

package/components/HelpBubble/index.d.ts

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

package/components/HelpBubbleExample/HelpBubbleExample.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { HelpBubbleProps } from '../HelpBubble/HelpBubble';
 declare const HelpBubbleExample: React.FC<HelpBubbleProps>;
 export default HelpBubbleExample;
-//# sourceMappingURL=HelpBubbleExample.d.ts.map

package/components/HelpBubbleExample/index.d.ts

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

package/components/HelpPanel/HelpPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HighlightBoxSize } from '../HighlightBox';
-interface HelpPanelProps {
+export interface HelpPanelProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Changes the size. Default: medium */
@@ -14,4 +14,3 @@ interface HelpPanelProps {
 }
 declare const HelpPanel: React.FC<HelpPanelProps>;
 export default HelpPanel;
-//# sourceMappingURL=HelpPanel.d.ts.map

package/components/HelpPanel/HelpPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\ninterface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":";;;;;AAsBA,MAAMA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP,GAEAQ,IAAeZ;"}
+{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":";;;;;AAsBA,MAAMA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP,GAEAQ,IAAeZ;"}

package/components/HelpPanel/HelpPanel.stories.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./HelpPanel").HelpPanelProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        size: "medium";
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutTitle: Story;

package/components/HelpPanel/index.d.ts

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

package/components/HelpQuestion/HelpQuestion.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
+export interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {
     /**
      * Help question contents
      */
@@ -19,4 +19,3 @@ interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonEle
 }
 declare const HelpQuestion: React.ForwardRefExoticComponent<HelpQuestionProps & React.RefAttributes<HTMLButtonElement>>;
 export default HelpQuestion;
-//# sourceMappingURL=HelpQuestion.d.ts.map

package/components/HelpQuestion/HelpQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpQuestion.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\ninterface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger","HelpQuestion$1"],"mappings":";;;;;;;AA8BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAO,GAAGC,MAAQ;AACnE,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,EAAoC,GAE/DC,IAAUC,EAAWC,EAAO,cAAcV,KAAYU,EAAO,wBAAwB,GAAGT,CAAS;AAGrG,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,WAAWK;AAAA,QACX,SAAAN;AAAA,QACA,KAAKS,EAAU,CAACP,GAAKE,CAAS,CAAC;AAAA,QAC/B,iBAAeN;AAAA,QACf,oBAAkBY,EAAY;AAAA,MAAA;AAAA,sCAE7BC,GAAQ,EAAA,SAAQ,QAAO,YAAW,QAAO,UAAAb,GAAoB,WAAAK,GAAsB;AAAA,MACnFN;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAa,cAAc;AAE3B,MAAAiB,IAAejB;"}
+{"version":3,"file":"HelpQuestion.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger","HelpQuestion$1"],"mappings":";;;;;;;AA8BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAO,GAAGC,MAAQ;AACnE,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,EAAoC,GAE/DC,IAAUC,EAAWC,EAAO,cAAcV,KAAYU,EAAO,wBAAwB,GAAGT,CAAS;AAGrG,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,WAAWK;AAAA,QACX,SAAAN;AAAA,QACA,KAAKS,EAAU,CAACP,GAAKE,CAAS,CAAC;AAAA,QAC/B,iBAAeN;AAAA,QACf,oBAAkBY,EAAY;AAAA,MAAA;AAAA,sCAE7BC,GAAQ,EAAA,SAAQ,QAAO,YAAW,QAAO,UAAAb,GAAoB,WAAAK,GAAsB;AAAA,MACnFN;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAa,cAAc;AAE3B,MAAAiB,IAAejB;"}

package/components/HelpQuestion/HelpQuestion.stories.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./HelpQuestion").HelpQuestionProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        selected: false;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        selected: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/components/HelpQuestion/index.d.ts

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