@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/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, FormOnColor, 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 Slider, { SliderProps } from '../Slider';\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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.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 = onColor === FormOnColor.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        onColor,\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        onColor,\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        onColor,\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, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\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        onColor,\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        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\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":[],"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, FormOnColor, 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 Slider, { SliderProps } from '../Slider';\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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.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 = onColor === FormOnColor.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        onColor,\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        onColor,\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        onColor,\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, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\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        onColor,\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        onColor,\n        error: !!error,\n        errorTextId: errorTextUuid,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\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":["React"],"mappings":"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"}

package/FormLayout.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { FormSize, AnalyticsId } from "./constants.js";
 import formGroupStyles from "./components/FormLayout/styles.module.scss";
@@ -11,7 +11,7 @@ var FormLayoutColumns = /* @__PURE__ */ ((FormLayoutColumns2) => {
   FormLayoutColumns2["five"] = "five";
   return FormLayoutColumns2;
 })(FormLayoutColumns || {});
-const FormLayout = React.forwardRef((props, ref) => {
+const FormLayout = React__default.forwardRef((props, ref) => {
   const { maxColumns: columns = "one", colMinWidth = 300, size, className, mapHelper } = props;
   const cssVariable = { "--min-col-width": `${colMinWidth}px` };
   const formLayoutContainerClasses = classNames(
@@ -36,7 +36,7 @@ const FormLayout = React.forwardRef((props, ref) => {
       style: cssVariable,
       className: formLayoutContainerClasses,
       ref,
-      children: React.Children.map(props.children, (child, index) => {
+      children: React__default.Children.map(props.children, (child, index) => {
         return /* @__PURE__ */ jsx("div", { className: formLayoutChildClasses, children: mapHelper ? mapHelper(child, index) : child });
       })
     }

package/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, 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"],"mappings":";;;;;AAQY,IAAA,sCAAAA,uBAAL;AACLA,qBAAA,KAAM,IAAA;AACNA,qBAAA,KAAM,IAAA;AACNA,qBAAA,OAAQ,IAAA;AACRA,qBAAA,MAAO,IAAA;AACPA,qBAAA,MAAO,IAAA;AALGA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAyBL,MAAM,aAAa,MAAM,WAAW,CAAC,OAAwB,QAA4C;AACxG,QAAA,EAAE,YAAY,UAAU,OAAuB,cAAc,KAAK,MAAM,WAAW,UAAA,IAAc;AAEvG,QAAM,cAAc,EAAE,mBAAmB,GAAG,WAAW,KAAK;AAC5D,QAAM,6BAA6B;AAAA,IACjC,gBAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAAC,gBAAgB,8BAA8B,CAAC,GAAG,SAAS,SAAS;AAAA,IACvE;AAAA,IACA;AAAA,EACF;AACA,QAAM,yBAAyB,WAAW,gBAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAAC,gBAAgB,wBAAwB,CAAC,GAAG,YAAY;AAAA,IACzD,CAAC,gBAAgB,0BAA0B,CAAC,GAAG,YAAY;AAAA,IAC3D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA,IAC1D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,MAAM;AAAA,MACnB,oBAAkB,YAAY;AAAA,MAC9B,OAAO;AAAA,MACP,WAAW;AAAA,MACX;AAAA,MAEC,gBAAM,SAAS,IAAI,MAAM,UAAU,CAAC,OAAwB,UAAkB;AACtE,eAAA,oBAAC,SAAI,WAAW,wBAAyB,sBAAY,UAAU,OAAO,KAAK,IAAI,MAAM,CAAA;AAAA,MAC7F,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,WAAW,cAAc;"}
+{"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","React"],"mappings":";;;;;AAQY,IAAA,sCAAAA,uBAAL;AACLA,qBAAA,KAAM,IAAA;AACNA,qBAAA,KAAM,IAAA;AACNA,qBAAA,OAAQ,IAAA;AACRA,qBAAA,MAAO,IAAA;AACPA,qBAAA,MAAO,IAAA;AALGA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAyBL,MAAM,aAAaC,eAAM,WAAW,CAAC,OAAwB,QAA4C;AACxG,QAAA,EAAE,YAAY,UAAU,OAAuB,cAAc,KAAK,MAAM,WAAW,UAAA,IAAc;AAEvG,QAAM,cAAc,EAAE,mBAAmB,GAAG,WAAW,KAAK;AAC5D,QAAM,6BAA6B;AAAA,IACjC,gBAAgB,uBAAuB;AAAA,IACvC;AAAA,MACE,CAAC,gBAAgB,8BAA8B,CAAC,GAAG,SAAS,SAAS;AAAA,IACvE;AAAA,IACA;AAAA,EACF;AACA,QAAM,yBAAyB,WAAW,gBAAgB,mBAAmB,GAAG;AAAA,IAC9E,CAAC,gBAAgB,wBAAwB,CAAC,GAAG,YAAY;AAAA,IACzD,CAAC,gBAAgB,0BAA0B,CAAC,GAAG,YAAY;AAAA,IAC3D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA,IAC1D,CAAC,gBAAgB,yBAAyB,CAAC,GAAG,YAAY;AAAA;AAAA,EAAA,CAC3D;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,MAAM;AAAA,MACnB,oBAAkB,YAAY;AAAA,MAC9B,OAAO;AAAA,MACP,WAAW;AAAA,MACX;AAAA,MAEC,yBAAM,SAAS,IAAI,MAAM,UAAU,CAAC,OAAwB,UAAkB;AACtE,eAAA,oBAAC,SAAI,WAAW,wBAAyB,sBAAY,UAAU,OAAO,KAAK,IAAI,MAAM,CAAA;AAAA,MAC7F,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/HelpBubble.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { A as AnchorLink } from "./AnchorLink.js";
@@ -7,7 +7,7 @@ import { C as Close } from "./Close.js";
 import { P as PopOverVariant, a as PopOver } from "./PopOver.js";
 import styles from "./components/HelpBubble/styles.module.scss";
 const HelpBubbleVariant = PopOverVariant;
-const HelpBubble = React.forwardRef((props, ref) => {
+const HelpBubble = React__default.forwardRef((props, ref) => {
   const {
     children,
     className = "",

package/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":[],"mappings":";;;;;;;;AAWO,MAAM,oBAAoB;AAqCjC,MAAM,aAAa,MAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,SAAS;AAEvB,MAAA,CAAC,cAAc,CAAC,WAAW;AACtB,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,qBAAqB;AAAA,IAC5D,CAAC,OAAO,4BAA4B,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAAA,EAAA,CAC5D;AAED,QAAM,aAAa,MAA+B;AAEhD,QAAI,WAAW;AACb;AAAA,IAAA;AAEF,QAAI,eAAe,UAAU;AAEzB,aAAA,oBAAC,YAAO,WAAW,OAAO,kBAAkB,SAAS,aAAa,MAAK,UACpE,UACH,SAAA,CAAA;AAAA,IAAA,WAEO,WAAW,UAAU;AAC9B,iCACG,YAAW,EAAA,MAAM,SAAS,QAAQ,YAChC,UACH,UAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,oBAAoB,MAA+B;AACvD,QAAI,iBAAiB,WAAW;AAC9B;AAAA,IAAA;AAEF,WACG,oBAAA,OAAA,EAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,OAAM,EAAA,OAAK,MAAC,SAAS,SAAS,WAAW,eAAgB,CAAA,GAC5D;AAAA,EAEJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa;AAAA,MACnB;AAAA,MAEA,+BAAC,OAAI,EAAA,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,QAAkB,kBAAA;AAAA,QACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW;AAAA,QAAA,EACd,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;AAED,WAAW,cAAc;"}
+{"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":["React"],"mappings":";;;;;;;;AAWO,MAAM,oBAAoB;AAqCjC,MAAM,aAAaA,eAAM,WAA4D,CAAC,OAAO,QAAQ;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,SAAS;AAEvB,MAAA,CAAC,cAAc,CAAC,WAAW;AACtB,WAAA;AAAA,EAAA;AAGT,QAAM,oBAAoB,WAAW,OAAO,YAAY,SAAS;AAE3D,QAAA,iBAAiB,WAAW,OAAO,qBAAqB;AAAA,IAC5D,CAAC,OAAO,4BAA4B,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAAA,EAAA,CAC5D;AAED,QAAM,aAAa,MAA+B;AAEhD,QAAI,WAAW;AACb;AAAA,IAAA;AAEF,QAAI,eAAe,UAAU;AAEzB,aAAA,oBAAC,YAAO,WAAW,OAAO,kBAAkB,SAAS,aAAa,MAAK,UACpE,UACH,SAAA,CAAA;AAAA,IAAA,WAEO,WAAW,UAAU;AAC9B,iCACG,YAAW,EAAA,MAAM,SAAS,QAAQ,YAChC,UACH,UAAA;AAAA,IAAA;AAAA,EAGN;AAEA,QAAM,oBAAoB,MAA+B;AACvD,QAAI,iBAAiB,WAAW;AAC9B;AAAA,IAAA;AAEF,WACG,oBAAA,OAAA,EAAI,WAAW,OAAO,mBACrB,UAAA,oBAAC,OAAM,EAAA,OAAK,MAAC,SAAS,SAAS,WAAW,eAAgB,CAAA,GAC5D;AAAA,EAEJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa;AAAA,MACnB;AAAA,MAEA,+BAAC,OAAI,EAAA,WAAW,mBAAmB,oBAAkB,YAAY,YAC9D,UAAA;AAAA,QAAkB,kBAAA;AAAA,QACnB,qBAAC,OAAI,EAAA,WAAW,gBACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW;AAAA,QAAA,EACd,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;AAED,WAAW,cAAc;"}

package/HighlightPanel.js

@@ -48,10 +48,10 @@ const HighlightPanel = (props) => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__icon, children: [
           typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { svgIcon, size: iconSize }),
-          title && /* @__PURE__ */ jsx("div", { className: styles["mobile"], children: titleElement })
+          title && breakpoint < Breakpoint.md && /* @__PURE__ */ jsx("div", { className: styles["highlightpanel__title-wrapper"], children: titleElement })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__content, children: [
-          title && /* @__PURE__ */ jsx("div", { className: styles["desktop"], "aria-hidden": "true", children: titleElement }),
+          title && breakpoint >= Breakpoint.md && /* @__PURE__ */ jsx("div", { className: styles["highlightpanel__title-wrapper"], children: titleElement }),
           children
         ] })
       ] });

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}

package/Icon.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { IconSize, AnalyticsId } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -21,7 +21,7 @@ const getIcon = ({
   }
   return isHovered ? normalHover : normal;
 };
-const Icon = React.forwardRef((props, ref) => {
+const Icon = React__default.forwardRef((props, ref) => {
   const {
     svgIcon,
     ariaLabel,
@@ -34,7 +34,7 @@ const Icon = React.forwardRef((props, ref) => {
     testId,
     ...other
   } = props;
-  const svgRaw = React.createElement(svgIcon, {
+  const svgRaw = React__default.createElement(svgIcon, {
     size,
     isHovered,
     onColor

package/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;AAmDO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AACpC,MAAI,QAAQ,SAAS,WAAW,WAAW,cAAc;AACvD,WAAO,YAAY,eAAe;AAAA,EAAA;AAEpC,MAAI,QAAQ,SAAS,UAAU,UAAU,aAAa;AACpD,WAAO,YAAY,cAAc;AAAA,EAAA;AAGnC,SAAO,YAAY,cAAc;AACnC;AAEO,MAAM,OAAO,MAAM,WAAW,CAAC,OAAkB,QAA2C;AAC3F,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,SAAS;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,SAAS;AAAA,IACtB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,SAAS,MAAM,cAAc,SAAS;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,UAAU,QAAQ;AAClB,QAAA,WAAW,YAAY,aAAa;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,MAAM,YAAY,QAAQ;AAAA,MAC1B,mBAAiB,YAAY,UAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAa,YAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,SAAA,EAAM,IAAI,SAAU,UAAU,WAAA;AAAA,QAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,KAAK,cAAc;"}
+{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["React"],"mappings":";;;;;AAmDO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AACpC,MAAI,QAAQ,SAAS,WAAW,WAAW,cAAc;AACvD,WAAO,YAAY,eAAe;AAAA,EAAA;AAEpC,MAAI,QAAQ,SAAS,UAAU,UAAU,aAAa;AACpD,WAAO,YAAY,cAAc;AAAA,EAAA;AAGnC,SAAO,YAAY,cAAc;AACnC;AAEO,MAAM,OAAOA,eAAM,WAAW,CAAC,OAAkB,QAA2C;AAC3F,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,SAAS;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,SAAS;AAAA,IACtB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,SAASA,eAAM,cAAc,SAAS;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,UAAU,QAAQ;AAClB,QAAA,WAAW,YAAY,aAAa;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,MAAM,YAAY,QAAQ;AAAA,MAC1B,mBAAiB,YAAY,UAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAa,YAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,SAAA,EAAM,IAAI,SAAU,UAAU,WAAA;AAAA,QAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,KAAK,cAAc;"}

package/Illustration.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { g as getIllustration } from "./utils.js";
 import { AnalyticsId } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -8,7 +8,7 @@ var ViewBoxSize = /* @__PURE__ */ ((ViewBoxSize2) => {
   ViewBoxSize2["Small"] = "0 0 200 200";
   return ViewBoxSize2;
 })(ViewBoxSize || {});
-const Illustration = React.forwardRef((props, ref) => {
+const Illustration = React__default.forwardRef((props, ref) => {
   const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ...other } = props;
   const titleId = useUuid();
   const viewBox = getIllustration({
@@ -33,7 +33,7 @@ const Illustration = React.forwardRef((props, ref) => {
     fill: color,
     ...other
   };
-  const svgElement = React.createElement(illustration, {
+  const svgElement = React__default.createElement(illustration, {
     size,
     color,
     svgProperties,

package/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize"],"mappings":";;;;;AAQY,IAAA,gCAAAA,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAkCL,MAAM,eAAe,MAAM,WAA6C,CAAC,OAAO,QAAQ;AAC7F,QAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,GAAG,MAAU,IAAA;AAErG,QAAM,UAAU,QAAQ;AAClB,QAAA,UAAU,gBAAgB;AAAA,IAAE;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB;AAE9F,QAAM,gBAAgB;AAAA,IACpB,eAAe;AAAA,IACf,oBAAoB,YAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,MAAM,YAAY,QAAQ;AAAA,IAC1B,mBAAmB,YAAY,UAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAe,YAAY,SAAY;AAAA,IACvC;AAAA,IACA,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,IACzC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AAEM,QAAA,aAAa,MAAM,cAAc,cAAc;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,aAAa,oBAAC,SAAM,EAAA,IAAI,SAAU,UAAU,UAAA,CAAA;AAAA,EAAA,CACpD;AAEM,SAAA;AACT,CAAC;AAED,aAAa,cAAc;"}
+{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize","React"],"mappings":";;;;;AAQY,IAAA,gCAAAA,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAkCL,MAAM,eAAeC,eAAM,WAA6C,CAAC,OAAO,QAAQ;AAC7F,QAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,GAAG,MAAU,IAAA;AAErG,QAAM,UAAU,QAAQ;AAClB,QAAA,UAAU,gBAAgB;AAAA,IAAE;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB;AAE9F,QAAM,gBAAgB;AAAA,IACpB,eAAe;AAAA,IACf,oBAAoB,YAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,MAAM,YAAY,QAAQ;AAAA,IAC1B,mBAAmB,YAAY,UAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAe,YAAY,SAAY;AAAA,IACvC;AAAA,IACA,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,IACzC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AAEM,QAAA,aAAaA,eAAM,cAAc,cAAc;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,aAAa,oBAAC,SAAM,EAAA,IAAI,SAAU,UAAU,UAAA,CAAA;AAAA,EAAA,CACpD;AAEM,SAAA;AACT,CAAC;AAED,aAAa,cAAc;"}

package/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect } from "react";
+import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, IconSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
 import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
@@ -31,7 +31,7 @@ const getInputMaxWidth = (characters, hasIcon, iconSize) => {
   const borderWidth = "4px";
   return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;
 };
-const Input = React.forwardRef((props, ref) => {
+const Input = React__default.forwardRef((props, ref) => {
   const {
     className,
     defaultValue,

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, onColor as FormOnColor)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","cn","input"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, onColor as FormOnColor)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","React","cn","input"],"mappings":";;;;;;;;;;;;;;;AAuFY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,MAAO,IAAA;AACPA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AACRA,cAAA,UAAW,IAAA;AACXA,cAAA,QAAS,IAAA;AACTA,cAAA,KAAM,IAAA;AACNA,cAAA,KAAM,IAAA;AACNA,cAAA,MAAO,IAAA;AACPA,cAAA,MAAO,IAAA;AATGA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAYZ,MAAM,mBAAmB,CAAC,YAAoB,SAAkB,aAA6B;AACrF,QAAA,eAAe,UAAU,WAAW;AAC1C,QAAM,YAAY,UAAU,GAAG,QAAQ,OAAO;AAC9C,QAAM,cAAc;AAEb,SAAA,QAAQ,aAAa,0BAA0B,QAAQ,YAAY,MAAM,SAAS,MAAM,WAAW;AAC5G;AAEA,MAAM,QAAQC,eAAM,WAAW,CAAC,OAAmB,QAAqC;AAChF,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,aAAa,cAAc;AAC3B,QAAA,yBAAyB,OAAuB,IAAI;AACpD,QAAA,eAAe,QAAQ,OAAO;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,gBAAgB,EAAE;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAsC,MAAS;AAC3E,QAAA,gBAAgB,OAAgB,KAAK;AACrC,QAAA,gBAAgB,QAAQ,WAAW;AACzC,QAAM,WAAW;AAEjB,YAAU,MAAM;AACd,aAAS,gBAAgB,EAAE;AAAA,EAAA,GAC1B,CAAC,YAAY,CAAC;AAEX,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AAC5C,QAAM,wBAAwB,CAAC,CAAC,iBAAiB,MAAM,SAAA,EAAW,SAAS;AACrE,QAAA,UAAU,YAAY,YAAY,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS;AACzE,QAAA,UAAU,SAAS,SAAS;AAClC,QAAM,gBAAgB,eAAe,YAAY,YAAY,UAAU,CAAC;AAExE,QAAM,oBAAoBC,WAAG,OAAO,eAAe,GAAG,SAAS;AAE/D,QAAM,iBAAiBA,WAAG,OAAO,iBAAiB,GAAG;AAAA,IACnD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,IAC1C,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,IAC3C,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,IACtC,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,IACtC,CAAC,OAAO,wBAAwB,CAAC,GAAG;AAAA,IACpC,CAAC,OAAO,2BAA2B,CAAC,GAAG;AAAA,IACvC,CAAC,OAAO,4BAA4B,CAAC,GAAG;AAAA,EAAA,CACzC;AAED,QAAM,aAAaA,WAAG,OAAO,wBAAwB,GAAG;AAAA,IACtD,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,IAC3C,CAAC,OAAO,kCAAkC,CAAC,GAAG;AAAA,EAAA,CAC/C;AAED,QAAM,YAAY,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,OAAO;AAClE,QAAA,WAAW,eAAe,WAAW,MAAM,CAAC,UAAU,SAAS,SAAS,SAAS;AAEvF,QAAM,aAAa,MAAuB;AACxC,QAAI,CAAC,MAAM;AACT;AAAA,IAAA;AAGE,QAAA,OAAO,SAAS,UAAU;AACrB,aAAA,oBAAC,UAAS,EAAA,WAAW,OAAO,8BAA8B,GAAG,OAAO,WAAW,MAAM,UAAU,UAAU,KAAM,CAAA;AAAA,IAAA;AAGjH,WAAA,oBAAC,MAAK,EAAA,WAAW,OAAO,8BAA8B,GAAG,OAAO,WAAW,MAAM,UAAU,SAAS,KAAM,CAAA;AAAA,EACnH;AAGM,QAAA,cAAc,CAAC,MAAmC;AAClD,QAAA,0BAA0B,uBAAuB,WAAW,MAAM;AAC9D,YAAA,gBAAgB,YAAY,IAAI;AACtC,YAAMC,SAAQ,uBAAuB,QAAQ,SAAS,aAAa;AACnEA,aAAM,MAAM;AAEN,YAAA,WAAW,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,EAEpC;AAEM,QAAA,eAAe,CAAC,MAAiD;AAC/D,UAAA,WAAW,kBAAkB,CAAC;AAEpC,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IAAA;AAGZ,aAAS,QAAQ;AACjB,iBAAa,QAAQ;AAAA,EACvB;AAGM,QAAA,oBAAoB,CAAC,MAAmD;AAC5E,QAAI,OAAO,uBAAuB,eAAe,SAAS,SAAU,QAAO,EAAE,OAAO;AAEpF,UAAM,gBAAgB,OAAO,EAAE,OAAO,KAAK;AAEvC,QAAA,CAAC,aAAa,CAAC,cAAc,YAAY,kBAAkB,KAAK,kBAAkB,KAAK;AACvF,QAAA,OAAO,QAAQ,qBAAqB;AAAA,IAAA;AAGxC,WAAO,EAAE,OAAO;AAAA,EAClB;AAEM,QAAA,gBAAgB,CAAC,MAAmD;AACxE,QAAI,SAAS,KAAK,EAAE,GAAG,GAAG;AACxB,oBAAc,UAAU;AAAA,IAAA;AAE1B,iBAAa,UAAU,CAAC;AAAA,EAC1B;AAEM,QAAA,cAAc,CAAC,MAAmD;AACtE,QAAI,SAAS,KAAK,EAAE,GAAG,GAAG;AACxB,oBAAc,UAAU;AAAA,IAAA;AAAA,EAE5B;AAEM,QAAA,WAAW,QAAQ,iBAAiB,OAAO,CAAC,CAAC,MAAM,QAAQ,IAAI;AAErE,6BACG,cAAa,EAAA,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAI,EAAA,eAAa,QAAQ,oBAAkB,YAAY,OAAO,WAAW,mBAAmB,KAAK,iBAC/F,UAAA;AAAA,IAAY,YAAA,OAAO,cAAc,OAAsB;AAAA,IAEvD,qBAAA,OAAA,EAAI,WAAW,OAAO,iBAAiB,GAEtC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,KAAK,UAAU,CAAC,wBAAwB,iBAAiB,CAAC;AAAA,UAC1D,WAAW;AAAA,UACX,OAAO,EAAE,SAAS;AAAA,UAEjB,UAAA;AAAA,YAAA,CAAC,aAAa,WAAW;AAAA,YAC1B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,IAAI;AAAA,gBACJ,WAAW;AAAA,gBACX;AAAA,gBACA,mBAAiB,MAAM,iBAAiB,KAAK;AAAA,gBAC7C,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,gBACzD,gBAAc,CAAC,CAAC;AAAA,gBAChB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAc,gBAAgB;AAAA,gBAC9B;AAAA,gBAEA;AAAA,gBACC,GAAG;AAAA,cAAA;AAAA,YACN;AAAA,YACC,aAAa,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,0BACC,OAAI,EAAA,WAAW,OAAO,iCAAiC,GAAI,UAAa,aAAA,CAAA;AAAA,IAAA,GAC3E;AAAA,IACC,iBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IAED;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ,CAAC;AAED,MAAM,cAAc;"}

package/Label.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, FormOnColor } from "./constants.js";
 import { S as Spacer } from "./Spacer.js";
@@ -9,9 +9,9 @@ import { S as StatusDot } from "./StatusDot.js";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
   const mapSublabels = (hideFromScreenReader) => {
     return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-      const labelClasses = classNames(styles.label, styles["label--sublabel"], {
-        [styles["label--subdued"]]: sublabelText.type === "subdued",
-        [styles["label--on-dark"]]: onColor === FormOnColor.ondark
+      const labelClasses = classNames(styles.label, styles["sublabel"], {
+        [styles["sublabel--subdued"]]: sublabelText.type === "subdued",
+        [styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
       });
       return hideFromScreenReader === sublabelText.hideFromScreenReader && /* @__PURE__ */ jsx("span", { className: labelClasses, children: sublabelText.text }, index);
     });
@@ -38,14 +38,14 @@ const getLabelText = (label) => {
   return allLabelText;
 };
 const renderLabel = (label, inputId, onColor, markup) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React.cloneElement(label, {
+  return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React__default.cloneElement(label, {
     htmlFor: inputId,
     htmlMarkup: markup || "label",
     onColor
   }) : typeof label === "string" && /* @__PURE__ */ jsx(Label, { labelTexts: [{ text: label, type: "normal" }], htmlFor: inputId, onColor }) });
 };
 const renderLabelAsParent = (label, children, inputId, onColor, labelClassName, labelTextClassName, sublabelWrapperClassName, large, markup) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React.cloneElement(label, {
+  return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React__default.cloneElement(label, {
     htmlFor: inputId,
     onColor,
     children,
@@ -113,12 +113,12 @@ const Label = ({
         /* @__PURE__ */ jsx("span", { className: styles.label__texts, children: mapLabels() })
       ] }) }),
       /* @__PURE__ */ jsxs("div", { className: sublabelWrapperClassName, children: [
-        sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, {
+        sublabel && isComponent(sublabel, Sublabel) && React__default.cloneElement(sublabel, {
           onColor
         }),
         statusDot && isComponent(statusDot, StatusDot) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Spacer, { size: "3xs" }),
-          React.cloneElement(statusDot, {
+          React__default.cloneElement(statusDot, {
             onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite"
           })
         ] })

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--subdued']]: sublabelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn","React"],"mappings":"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"}

package/LazyIcon.js

@@ -1,4 +1,4 @@
-import { _ as __variableDynamicImportRuntimeHelper, E as ErrorBoundary } from "./ErrorBoundary.js";
+import { E as ErrorBoundary, _ as __variableDynamicImportRuntimeHelper } from "./ErrorBoundary.js";
 import { jsx } from "react/jsx-runtime";
 import { lazy, useMemo, Suspense } from "react";
 import { useIsServerSide } from "./hooks/useIsServerSide.js";

package/LazyIllustration.js

@@ -1,6 +1,6 @@
-import { _ as __variableDynamicImportRuntimeHelper, E as ErrorBoundary } from "./ErrorBoundary.js";
+import { E as ErrorBoundary, _ as __variableDynamicImportRuntimeHelper } from "./ErrorBoundary.js";
 import { jsx } from "react/jsx-runtime";
-import { lazy, useMemo, Suspense } from "react";
+import { useMemo, Suspense, lazy } from "react";
 import { useIsServerSide } from "./hooks/useIsServerSide.js";
 import { I as Illustration } from "./Illustration.js";
 import { g as getIllustration } from "./utils.js";
@@ -8,7 +8,7 @@ import { IllustrationSizeList } from "./components/Illustrations/IllustrationNam
 const lazyLoadIllustration = (illustrationName, size) => {
   const sizes = IllustrationSizeList[illustrationName];
   const illustrationFileName = getIllustration({ size, ...sizes });
-  return lazy(() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../Illustrations/Doctor.tsx": () => import("./components/Illustrations/Doctor.js"), "../Illustrations/DoctorMedium.tsx": () => import("./components/Illustrations/DoctorMedium.js"), "../Illustrations/DoctorSmall.tsx": () => import("./components/Illustrations/DoctorSmall.js"), "../Illustrations/FacialRecognitionFingerprint.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprint.js"), "../Illustrations/FacialRecognitionFingerprintMedium.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprintMedium.js"), "../Illustrations/HealthcarePersonnel.tsx": () => import("./components/Illustrations/HealthcarePersonnel.js"), "../Illustrations/HealthcarePersonnelMedium.tsx": () => import("./components/Illustrations/HealthcarePersonnelMedium.js"), "../Illustrations/HealthcarePersonnelSmall.tsx": () => import("./components/Illustrations/HealthcarePersonnelSmall.js") }), `../Illustrations/${illustrationFileName}.tsx`, 3));
+  return lazy(() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../Illustrations/Doctor.tsx": () => import("./components/Illustrations/Doctor.js"), "../Illustrations/DoctorMedium.tsx": () => import("./components/Illustrations/DoctorMedium.js"), "../Illustrations/DoctorSmall.tsx": () => import("./components/Illustrations/DoctorSmall.js"), "../Illustrations/FacialRecognitionFingerprint.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprint.js"), "../Illustrations/FacialRecognitionFingerprintMedium.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprintMedium.js"), "../Illustrations/HealthcarePersonnel.tsx": () => import("./components/Illustrations/HealthcarePersonnel.js"), "../Illustrations/HealthcarePersonnelMedium.tsx": () => import("./components/Illustrations/HealthcarePersonnelMedium.js"), "../Illustrations/HealthcarePersonnelSmall.tsx": () => import("./components/Illustrations/HealthcarePersonnelSmall.js"), "../Illustrations/ReadLetters.tsx": () => import("./components/Illustrations/ReadLetters.js"), "../Illustrations/ReadLettersMedium.tsx": () => import("./components/Illustrations/ReadLettersMedium.js"), "../Illustrations/Support2.tsx": () => import("./components/Illustrations/Support2.js"), "../Illustrations/Support2Medium.tsx": () => import("./components/Illustrations/Support2Medium.js") }), `../Illustrations/${illustrationFileName}.tsx`, 3));
 };
 const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
   const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);

package/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","sources":["../src/components/LazyIllustration/LazyIllustration.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n  const sizes = IllustrationSizeList[illustrationName];\n  const illustrationFileName = getIllustration({ size, ...sizes });\n\n  return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n};\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n"],"names":[],"mappings":";;;;;;;AAaa,MAAA,uBAAuB,CAAC,kBAAoC,SAA6D;AAC9H,QAAA,QAAQ,qBAAqB,gBAAgB;AACnD,QAAM,uBAAuB,gBAAgB,EAAE,MAAM,GAAG,OAAO;AAE/D,SAAO,KAAsB,MAAM,qCAAA,uBAAA,OAAA,EAAA,+BAAA,MAAA,OAAA,sCAAA,GAAA,qCAAA,MAAA,OAAA,4CAAA,GAAA,oCAAA,MAAA,OAAA,2CAAA,GAAA,qDAAA,MAAA,OAAA,4DAAA,GAAA,2DAAA,MAAA,OAAA,kEAAA,GAAA,4CAAA,MAAA,OAAA,mDAAA,GAAA,kDAAA,MAAA,OAAA,yDAAA,GAAA,iDAAA,MAAA,OAAA,wDAAA,EAAA,CAAA,GAAA,oBAAA,oBAAA,QAAA,CAAA,CAAsD;AAC3F;AAEa,MAAA,mBAAoD,CAAC,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;AACxG,QAAA,eAAe,QAAQ,MAAM,qBAAqB,kBAAkB,IAAI,GAAG,CAAC,kBAAkB,IAAI,CAAC;AACzG,QAAM,eAAe,gBAAgB;AAErC,MAAI,cAAc;AACT,WAAA;AAAA,EAAA;AAGT,QAAM,WACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAGF,SACG,oBAAA,eAAA,EAAc,UAAoB,OAAO,kBACxC,UAAC,oBAAA,UAAA,EAAS,UACR,UAAA,oBAAC,gBAAa,cAA4B,MAAa,GAAG,KAAA,CAAM,EAClE,CAAA,GACF;AAEJ;"}
+{"version":3,"file":"LazyIllustration.js","sources":["../src/components/LazyIllustration/LazyIllustration.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n  const sizes = IllustrationSizeList[illustrationName];\n  const illustrationFileName = getIllustration({ size, ...sizes });\n\n  return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n};\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n"],"names":[],"mappings":";;;;;;;AAaa,MAAA,uBAAuB,CAAC,kBAAoC,SAA6D;AAC9H,QAAA,QAAQ,qBAAqB,gBAAgB;AACnD,QAAM,uBAAuB,gBAAgB,EAAE,MAAM,GAAG,OAAO;AAE/D,SAAO,KAAsB,MAAM,qCAAA,uBAAA,OAAA,EAAA,+BAAA,MAAA,OAAA,sCAAA,GAAA,qCAAA,MAAA,OAAA,4CAAA,GAAA,oCAAA,MAAA,OAAA,2CAAA,GAAA,qDAAA,MAAA,OAAA,4DAAA,GAAA,2DAAA,MAAA,OAAA,kEAAA,GAAA,4CAAA,MAAA,OAAA,mDAAA,GAAA,kDAAA,MAAA,OAAA,yDAAA,GAAA,iDAAA,MAAA,OAAA,wDAAA,GAAA,oCAAA,MAAA,OAAA,2CAAA,GAAA,0CAAA,MAAA,OAAA,iDAAA,GAAA,iCAAA,MAAA,OAAA,wCAAA,GAAA,uCAAA,MAAA,OAAA,8CAAA,EAAA,CAAA,GAAA,oBAAA,oBAAA,QAAA,CAAA,CAAsD;AAC3F;AAEa,MAAA,mBAAoD,CAAC,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;AACxG,QAAA,eAAe,QAAQ,MAAM,qBAAqB,kBAAkB,IAAI,GAAG,CAAC,kBAAkB,IAAI,CAAC;AACzG,QAAM,eAAe,gBAAgB;AAErC,MAAI,cAAc;AACT,WAAA;AAAA,EAAA;AAGT,QAAM,WACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAGF,SACG,oBAAA,eAAA,EAAc,UAAoB,OAAO,kBACxC,UAAC,oBAAA,UAAA,EAAS,UACR,UAAA,oBAAC,gBAAa,cAA4B,MAAa,GAAG,KAAA,CAAM,EAClE,CAAA,GACF;AAEJ;"}