@helsenorge/designsystem-react 14.0.0-beta.7 → 14.0.0-beta.9

package/lib/resources/HN.Designsystem.Tabs.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Scroll til høyre",
+  "ariaLabelLeftButton": "Scroll til venstre"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "characters"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "tegn"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.nn-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "teikn"
+}
+;
+
+export default _default;

package/lib/resources/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utils2.js

@@ -3,14 +3,14 @@ import { t as isComponent } from "./component.js";
 import { t as Spacer_default } from "./Spacer.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as StatusDot_default } from "./StatusDot.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Label/styles.module.scss";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
 	const mapSublabels = (hideFromScreenReader) => {
 		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-			const labelClasses = cn(styles.label, styles["sublabel"], {
+			const labelClasses = classNames(styles.label, styles["sublabel"], {
 				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
 				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
 			});
@@ -40,13 +40,13 @@ const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =
 };
 var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
 	const hasChildren = children && typeof children !== "undefined";
-	const labelWrapperClasses = cn(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
-	const mainLabelWrapperClasses = cn({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
-	const afterLabelChildrenClasses = cn(styles["after-label-children"], afterLabelChildrenClassName);
+	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
+	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
+	const afterLabelChildrenClasses = classNames(styles["after-label-children"], afterLabelChildrenClassName);
 	const mapLabels = () => {
 		if (typeof labelTexts === "undefined") return null;
 		return labelTexts.map((labelText, index) => {
-			const labelClasses = cn(styles.label, {
+			const labelClasses = classNames(styles.label, {
 				[styles["label--subdued"]]: labelText.type === "subdued",
 				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
 			}, labelTextClassName);
@@ -115,7 +115,7 @@ const renderLabelAsParent = (props) => {
 		htmlFor: props.inputId,
 		onColor: props.onColor,
 		children: props.children,
-		labelClassName: cn(props.labelClassName, props.label.props.labelClassName),
+		labelClassName: classNames(props.labelClassName, props.label.props.labelClassName),
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,

package/lib/utils2.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\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 type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot 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' | 'legend';\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  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: 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  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\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  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\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 className={mainLabelWrapperClasses}>\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        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\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      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\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\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n          })\n        : typeof props.label === 'string' && (\n            <Label labelTexts={[{ text: props.label, type: 'normal' }]} htmlFor={props.inputId} onColor={props.onColor} />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\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  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\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 type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot 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' | 'legend';\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  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: 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  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\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  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\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 className={mainLabelWrapperClasses}>\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        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\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      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\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\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n          })\n        : typeof props.label === 'string' && (\n            <Label labelTexts={[{ text: props.label, type: 'normal' }]} htmlFor={props.inputId} onColor={props.onColor} />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\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  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/lib/utils3.js

@@ -6,7 +6,7 @@ import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import radioButtonStyles from "./components/RadioButton/styles.module.scss";
@@ -21,14 +21,14 @@ const RadioButton = (props) => {
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = cn(radioButtonStyles["radio-button-wrapper"], {
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
 		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
 		[radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
 	});
-	const radioButtonLabelClasses = cn(radioButtonStyles["radio-button-label"], {
+	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
 		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
 		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
@@ -36,7 +36,7 @@ const RadioButton = (props) => {
 		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
 		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
 	}, labelClassNames);
-	const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
 		[radioButtonStyles["radio-button--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button--disabled"]]: disabled,
 		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
@@ -89,7 +89,7 @@ var RadioButton_default = RadioButton;
 const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
 	const onCherry = onColor === "oninvalid";
 	const checked = radioId === checkedRadioId;
-	return cn({
+	return classNames({
 		[radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
 		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
 		[radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,

package/lib/utils3.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils3.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx","../src/components/RadioButton/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n","import classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,GAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,GAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,GACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe;ACrJf,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,GAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC"}
+{"version":3,"file":"utils3.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx","../src/components/RadioButton/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n","import classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,WACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe;ACrJf,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,WAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC"}

package/lib/utils6.js

@@ -2,9 +2,9 @@ import { t as Breakpoint } from "./useBreakpoint.js";
 import { r as ResponsiveTableVariant } from "./constants3.js";
 import { t as isTouchDevice } from "./device.js";
 import React from "react";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
-var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
 var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
 var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
 var getConfigForBreakpoint = (config, breakpoint) => {

package/lib/utils6.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils6.js","names":["clone: Partial<T>"],"sources":["../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport type { ModeType } from './constants';\nimport type { BreakpointConfig } from './Table';\n\nimport { ResponsiveTableVariant } from './constants';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n\n/**\n * Map children and inject the `mode` prop into element children, but never on React.Fragment.\n * If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.\n */\nexport const mapChildrenWithMode = (children: React.ReactNode, mode: ModeType | undefined): React.ReactNode =>\n  React.Children.map(children, child => {\n    if (!React.isValidElement(child)) return child;\n    if (child.type === React.Fragment) {\n      const fragmentChildren = (child.props as { children?: React.ReactNode }).children;\n      const mapped = React.Children.map(fragmentChildren, gc =>\n        React.isValidElement<{ mode?: ModeType }>(gc) ? React.cloneElement(gc, { mode }) : gc\n      );\n      return React.cloneElement(child, undefined, mapped);\n    }\n    return React.cloneElement(child as React.ReactElement<{ mode?: ModeType }>, { mode });\n  });\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n  const clone: Partial<T> = { ...obj };\n  for (const k of keys) {\n    delete clone[k];\n  }\n  return clone;\n};\n"],"mappings":";;;;;AAgBA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,YAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;AAQlI,IAAM,+BAA+B,GAAqB,MACxD,WAAW,EAAE,cAAc,WAAW,EAAE;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;AACtI,KAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,SAAO,KAAK,4BAA4B;AAExC,SAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;YAC1D,UAAU,4BAA4B,QAAQ,WAAW,CAClE,QAAO;;AAWX,MAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;AAE7C,KAAI,CAAC,iBACH;AAGF,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,QAAO;;AAQT,MAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;AAQ/D,MAAa,iCAAiC,aAAqB,eAAwD;AACzH,KAAI,eAAe,WACjB;AAKF,QAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAFhB,EAE2C,KAAK;;AAOjF,MAAa,uBAAuB,UAA2B,SAC7D,MAAM,SAAS,IAAI,WAAU,UAAS;AACpC,KAAI,CAAC,MAAM,eAAe,MAAM,CAAE,QAAO;AACzC,KAAI,MAAM,SAAS,MAAM,UAAU;EACjC,MAAM,mBAAoB,MAAM,MAAyC;EACzE,MAAM,SAAS,MAAM,SAAS,IAAI,mBAAkB,OAClD,MAAM,eAAoC,GAAG,GAAG,MAAM,aAAa,IAAI,EAAE,MAAM,CAAC,GAAG,GACpF;AACD,SAAO,MAAM,aAAa,OAAO,KAAA,GAAW,OAAO;;AAErD,QAAO,MAAM,aAAa,OAAkD,EAAE,MAAM,CAAC;EACrF;AAKJ,MAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAMA,QAAoB,EAAE,GAAG,KAAK;AACpC,MAAK,MAAM,KAAK,KACd,QAAO,MAAM;AAEf,QAAO"}
+{"version":3,"file":"utils6.js","names":["clone: Partial<T>"],"sources":["../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport type { ModeType } from './constants';\nimport type { BreakpointConfig } from './Table';\n\nimport { ResponsiveTableVariant } from './constants';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n\n/**\n * Map children and inject the `mode` prop into element children, but never on React.Fragment.\n * If a Fragment is encountered, its children are mapped and updated, while the Fragment wrapper is preserved.\n */\nexport const mapChildrenWithMode = (children: React.ReactNode, mode: ModeType | undefined): React.ReactNode =>\n  React.Children.map(children, child => {\n    if (!React.isValidElement(child)) return child;\n    if (child.type === React.Fragment) {\n      const fragmentChildren = (child.props as { children?: React.ReactNode }).children;\n      const mapped = React.Children.map(fragmentChildren, gc =>\n        React.isValidElement<{ mode?: ModeType }>(gc) ? React.cloneElement(gc, { mode }) : gc\n      );\n      return React.cloneElement(child, undefined, mapped);\n    }\n    return React.cloneElement(child as React.ReactElement<{ mode?: ModeType }>, { mode });\n  });\n\n/**\n * Create a shallow copy of an object with specific keys omitted.\n */\nexport const omitProps = <T extends Record<PropertyKey, unknown>>(obj: T, keys: Array<keyof T>): Partial<T> => {\n  const clone: Partial<T> = { ...obj };\n  for (const k of keys) {\n    delete clone[k];\n  }\n  return clone;\n};\n"],"mappings":";;;;;AAgBA,IAAM,iBAAiB,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,IAAM,oBAAoB,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAU,OAAO,UAAU,OAAO,QAAQ,GAAG,OAAO,gBAAgB;AAQlI,IAAM,+BAA+B,GAAqB,MACxD,WAAW,EAAE,cAAc,WAAW,EAAE;AAQ1C,IAAM,+BAA+B,QAA0B,eAC7D,WAAW,OAAO,eAAe;AAQnC,IAAM,0BAA0B,QAA+C,eAAyD;AACtI,KAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,SAAO,KAAK,4BAA4B;AAExC,SAAO,OAAO,MAAK,MAAK,4BAA4B,GAAG,WAAW,CAAC;YAC1D,UAAU,4BAA4B,QAAQ,WAAW,CAClE,QAAO;;AAWX,MAAa,oBACX,QACA,YACA,YACA,gBAC0D;CAC1D,MAAM,mBAAmB,uBAAuB,QAAQ,WAAW;CACnE,MAAM,yBAAyB,eAAe;CAC9C,MAAM,yBAAyB,cAAc;AAE7C,KAAI,CAAC,iBACH;AAGF,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;EACnG,YAAY,iBAAiB;EAC9B;AAGH,KACE,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,iBAE5D,QAAO;EACL,SAAS,iBAAiB,mBAAmB,uBAAuB;EACpE,YAAY,iBAAiB;EAC9B;AAGH,QAAO;;AAQT,MAAa,sBAAsB,WACjC,UAAU,cAAc,OAAO,GAAG,iBAAiB,OAAO,GAAG,KAAA;AAQ/D,MAAa,iCAAiC,aAAqB,eAAwD;AACzH,KAAI,eAAe,WACjB;AAKF,QAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAFhB,EAE2C,KAAK;;AAOjF,MAAa,uBAAuB,UAA2B,SAC7D,MAAM,SAAS,IAAI,WAAU,UAAS;AACpC,KAAI,CAAC,MAAM,eAAe,MAAM,CAAE,QAAO;AACzC,KAAI,MAAM,SAAS,MAAM,UAAU;EACjC,MAAM,mBAAoB,MAAM,MAAyC;EACzE,MAAM,SAAS,MAAM,SAAS,IAAI,mBAAkB,OAClD,MAAM,eAAoC,GAAG,GAAG,MAAM,aAAa,IAAI,EAAE,MAAM,CAAC,GAAG,GACpF;AACD,SAAO,MAAM,aAAa,OAAO,KAAA,GAAW,OAAO;;AAErD,QAAO,MAAM,aAAa,OAAkD,EAAE,MAAM,CAAC;EACrF;AAKJ,MAAa,aAAqD,KAAQ,SAAqC;CAC7G,MAAMA,QAAoB,EAAE,GAAG,KAAK;AACpC,MAAK,MAAM,KAAK,KACd,QAAO,MAAM;AAEf,QAAO"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "14.0.0-beta.7",
+  "version": "14.0.0-beta.9",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",