@helsenorge/designsystem-react 14.7.3 → 15.0.0-beta.0

package/lib/components/Toggle/index.js

@@ -1,21 +1,24 @@
-import { n as AnalyticsId } from "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
+import { AnalyticsId } from "../../constants.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import classNames from "classnames";
 import React, { useEffect, useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useAnimate } from "motion/react";
 import styles from "./styles.module.scss";
-let TogglePosition = /* @__PURE__ */ function(TogglePosition$1) {
-	TogglePosition$1["left"] = "left";
-	TogglePosition$1["right"] = "right";
-	return TogglePosition$1;
+//#region src/components/Toggle/constants.ts
+var TogglePosition = /* @__PURE__ */ function(TogglePosition) {
+	TogglePosition["left"] = "left";
+	TogglePosition["right"] = "right";
+	return TogglePosition;
 }({});
-let ToggleOnColor = /* @__PURE__ */ function(ToggleOnColor$1) {
-	ToggleOnColor$1["onwhite"] = "onwhite";
-	ToggleOnColor$1["onneutral"] = "onneutral";
-	ToggleOnColor$1["onblueberry"] = "onblueberry";
-	return ToggleOnColor$1;
+var ToggleOnColor = /* @__PURE__ */ function(ToggleOnColor) {
+	ToggleOnColor["onwhite"] = "onwhite";
+	ToggleOnColor["onneutral"] = "onneutral";
+	ToggleOnColor["onblueberry"] = "onblueberry";
+	return ToggleOnColor;
 }({});
+//#endregion
+//#region src/components/Toggle/Toggle.tsx
 var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnColor.onwhite, statusText, subLabel, togglePosition = TogglePosition.left, testId }) => {
 	const [checkedState, setCheckedState] = useState(checked);
 	const [showToggleAnimation, setShowToggleAnimation] = useState(false);
@@ -161,7 +164,10 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 		children: [togglePosition === TogglePosition.left && /* @__PURE__ */ jsxs(Fragment, { children: [renderToggle(), renderLabelText()] }), togglePosition === TogglePosition.right && /* @__PURE__ */ jsxs(Fragment, { children: [renderLabelText(), renderToggle()] })]
 	});
 };
+//#endregion
+//#region src/components/Toggle/index.ts
 var Toggle_default = Toggle;
+//#endregion
 export { ToggleOnColor, TogglePosition, Toggle_default as default };
 
 //# sourceMappingURL=index.js.map

package/lib/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/components/Validation/index.js

@@ -1,19 +1,20 @@
-import { n as AnalyticsId } from "../../constants2.js";
+import { AnalyticsId } from "../../constants.js";
 import { t as AnchorLink_default } from "../../AnchorLink.js";
-import { r as isComponentWithDisplayName, t as isComponent } from "../../component.js";
-import { t as Checkbox_default } from "../../Checkbox2.js";
-import { t as Title_default } from "../../Title2.js";
+import { isComponent, isComponentWithDisplayName } from "../../utils/component.js";
+import Checkbox_default from "../Checkbox/index.js";
+import Title_default from "../Title/index.js";
 import { t as Select_default } from "../../Select.js";
 import { t as Slider_default } from "../../Slider.js";
 import { t as Textarea_default } from "../../Textarea.js";
-import { n as FormGroup_default } from "../../FormGroup.js";
-import { t as Input_default } from "../../Input2.js";
+import { t as FormGroup } from "../../FormGroup.js";
+import Input_default from "../Input/index.js";
 import { t as List_default } from "../../List.js";
-import { t as RadioButton_default } from "../../RadioButton.js";
+import RadioButton_default from "../RadioButton/index.js";
 import classNames from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
+//#region src/components/Validation/ErrorListItem.tsx
 var ErrorListItem = (props) => {
 	const handleClick = (event, element) => {
 		event?.preventDefault();
@@ -26,12 +27,14 @@ var ErrorListItem = (props) => {
 	});
 	return /* @__PURE__ */ jsx(Fragment, { children: props.error.message });
 };
-var ErrorListItem_default = ErrorListItem;
-var ErrorList = (props) => /* @__PURE__ */ jsx(List_default, { children: Object.entries(props.errors).map(([name, error]) => /* @__PURE__ */ jsx(List_default.Item, { children: /* @__PURE__ */ jsx(ErrorListItem_default, {
+//#endregion
+//#region src/components/Validation/ErrorList.tsx
+var ErrorList = (props) => /* @__PURE__ */ jsx(List_default, { children: Object.entries(props.errors).map(([name, error]) => /* @__PURE__ */ jsx(List_default.Item, { children: /* @__PURE__ */ jsx(ErrorListItem, {
 	name,
 	error
 }) }, name)) });
-var ErrorList_default = ErrorList;
+//#endregion
+//#region src/components/Validation/ValidationSummary.tsx
 var ValidationSummary = (props) => {
 	const { errorTitleHtmlMarkup = "h2" } = props;
 	const titleId = useId();
@@ -57,11 +60,12 @@ var ValidationSummary = (props) => {
 				marginBottom: 1
 			},
 			children: props.errorTitle
-		}), /* @__PURE__ */ jsx(ErrorList_default, { errors: props.errors })] }), props.children]
+		}), /* @__PURE__ */ jsx(ErrorList, { errors: props.errors })] }), props.children]
 	});
 };
-var ValidationSummary_default = ValidationSummary;
-const Validation = (props) => {
+//#endregion
+//#region src/components/Validation/Validation.tsx
+var Validation = (props) => {
 	const validationErrorClass = styles["validation__error-wrapper"];
 	const cloneFormElement = (child) => {
 		return React.cloneElement(child, {
@@ -70,9 +74,9 @@ const Validation = (props) => {
 		});
 	};
 	const renderChild = (child) => {
-		if (isComponent(child, FormGroup_default) || isComponent(child, Checkbox_default) || isComponent(child, RadioButton_default) || isComponent(child, Textarea_default) || isComponent(child, Input_default) || isComponent(child, Select_default) || isComponent(child, Slider_default) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) return cloneFormElement(child);
-		if (isComponent(child, React.Fragment)) return React.Children.map(child.props.children, (child$1) => {
-			return renderChild(child$1);
+		if (isComponent(child, FormGroup) || isComponent(child, Checkbox_default) || isComponent(child, RadioButton_default) || isComponent(child, Textarea_default) || isComponent(child, Input_default) || isComponent(child, Select_default) || isComponent(child, Slider_default) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) return cloneFormElement(child);
+		if (isComponent(child, React.Fragment)) return React.Children.map(child.props.children, (child) => {
+			return renderChild(child);
 		});
 		return child;
 	};
@@ -82,14 +86,17 @@ const Validation = (props) => {
 		className: props.className,
 		ref: props.ref,
 		children: React.Children.map(props.children, (child) => renderChild(child))
-	}), /* @__PURE__ */ jsx(ValidationSummary_default, {
+	}), /* @__PURE__ */ jsx(ValidationSummary, {
 		errorTitle: props.errorTitle,
 		errors: props.errors,
 		visuallyHidden: props.visuallyHiddenSummary
 	})] });
 };
 Validation.displayName = "Validation";
+//#endregion
+//#region src/components/Validation/index.ts
 var Validation_default = Validation;
+//#endregion
 export { Validation, Validation_default as default };
 
 //# sourceMappingURL=index.js.map

package/lib/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>","Validation: React.FC<ValidationProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;AClBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACMf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;AChBf,MAAaC,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,YAAiC,OAAO,MAAM,SAAS,CACzD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;;AAIP,WAAW,cAAc;ACvFzB,IAAA,qBDyFe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;EACxF,OAAO,gBAAgB;EACvB,IAAI,SAAS,OAAO,SAAS,OAAO;;CAGtC,IAAI,MAAM,MAAM,KACd,OACE,oBAAC,oBAAD;EAAY,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;EACF,CAAA;CAIjB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAW,CAAA;;;;ACfnC,IAAM,aAAsC,UAC1C,oBAAC,cAAD,EAAA,UACG,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAN,EAAA,UACE,oBAAC,eAAD;CAAqB;CAAa;CAAS,CAAA,EACjC,EAFI,KAEJ,CACZ,EACG,CAAA;;;ACST,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;CAEF,OACE,qBAAC,OAAD;EACE,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;YANb,CAQG,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAD;GAAO,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;GACD,CAAA,EAEV,oBAAC,WAAD,EAAW,QAAQ,MAAM,QAAW,CAAA,CACnC,EAAA,CAAA,EAEJ,MAAM,SACH;;;;;ACZV,IAAa,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;EACtH,OAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;EAC/D,IACE,YAA4B,OAAO,UAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,EAEzE,OAAO,iBAA6C,MAAM;EAE5D,IAAI,YAAiC,OAAO,MAAM,SAAS,EACzD,OAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,UAA2B;GAC1E,OAAO,YAAY,MAAM;IACzB;EAGJ,OAAO;;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;EAC/E,CAAA,EACN,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;EAAyB,CAAA,CACrH,EAAA,CAAA;;AAIP,WAAW,cAAc;;;ACvFzB,IAAA,qBAAe"}

package/lib/constants.js

@@ -1,2 +1,126 @@
-import { a as IconSize, c as ZIndex, i as FormSize, n as AnalyticsId, o as KeyboardEventKey, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
+//#region src/constants.ts
+var IconSize = /* @__PURE__ */ function(IconSize) {
+	IconSize[IconSize["XXSmall"] = 24] = "XXSmall";
+	IconSize[IconSize["XSmall"] = 38] = "XSmall";
+	IconSize[IconSize["Small"] = 48] = "Small";
+	IconSize[IconSize["Medium"] = 64] = "Medium";
+	IconSize[IconSize["Large"] = 80] = "Large";
+	IconSize[IconSize["XLarge"] = 130] = "XLarge";
+	return IconSize;
+}({});
+var ZIndex = /* @__PURE__ */ function(ZIndex) {
+	ZIndex[ZIndex["OverlayScreen"] = 13e5] = "OverlayScreen";
+	ZIndex[ZIndex["PopOver"] = 11e3] = "PopOver";
+	ZIndex[ZIndex["LightBoxButtons"] = 1e3] = "LightBoxButtons";
+	return ZIndex;
+}({});
+var AVERAGE_CHARACTER_WIDTH_PX = 12;
+var FormOnColor = /* @__PURE__ */ function(FormOnColor) {
+	FormOnColor["onwhite"] = "onwhite";
+	FormOnColor["ongrey"] = "ongrey";
+	FormOnColor["onblueberry"] = "onblueberry";
+	FormOnColor["ondark"] = "ondark";
+	FormOnColor["oninvalid"] = "oninvalid";
+	return FormOnColor;
+}({});
+var FormSize = /* @__PURE__ */ function(FormSize) {
+	FormSize["medium"] = "medium";
+	FormSize["large"] = "large";
+	return FormSize;
+}({});
+var AnalyticsId = /* @__PURE__ */ function(AnalyticsId) {
+	AnalyticsId["AnchorLink"] = "anchor-link";
+	AnalyticsId["ArticleTeaser"] = "article-teaser";
+	AnalyticsId["Avatar"] = "avatar";
+	AnalyticsId["Badge"] = "badge";
+	AnalyticsId["Button"] = "button";
+	AnalyticsId["Checkbox"] = "checkbox";
+	AnalyticsId["Chip"] = "chip";
+	AnalyticsId["Close"] = "close";
+	AnalyticsId["DictionaryTrigger"] = "dictionary-trigger";
+	AnalyticsId["Drawer"] = "Drawer";
+	AnalyticsId["Dropdown"] = "dropdown";
+	AnalyticsId["Duolist"] = "duolist";
+	AnalyticsId["EmptyState"] = "empty-state";
+	AnalyticsId["Expander"] = "expander";
+	AnalyticsId["ExpanderHierarchy"] = "expander-hierarchy";
+	AnalyticsId["ExpanderHierarchyExpander"] = "expander-hierarchy-expander";
+	AnalyticsId["ExpanderList"] = "expander-list";
+	AnalyticsId["ExpanderListExpander"] = "expander-list-expander";
+	AnalyticsId["EyebrowHeader"] = "eyebrow-header";
+	AnalyticsId["FavoriteButton"] = "favorite-button";
+	AnalyticsId["FormFieldTag"] = "form-field-tag";
+	AnalyticsId["FormGroup"] = "form-group";
+	AnalyticsId["FormLayout"] = "form-layout";
+	AnalyticsId["HelpBubble"] = "help-bubble";
+	AnalyticsId["HelpDrawer"] = "help-drawer";
+	AnalyticsId["HelpExpanderInline"] = "help-expander-inline";
+	AnalyticsId["HelpExpanderStandalone"] = "help-expander-standalone";
+	AnalyticsId["HelpTooltip"] = "help-tooltip";
+	AnalyticsId["HelpTriggerIcon"] = "help-trigger-icon";
+	AnalyticsId["HelpTriggerInline"] = "help-trigger-inline";
+	AnalyticsId["HelpTriggerStandalone"] = "help-trigger-standalone";
+	AnalyticsId["HighlightPanel"] = "highlight-panel";
+	AnalyticsId["Icon"] = "icon";
+	AnalyticsId["Illustration"] = "Illustration";
+	AnalyticsId["InfoTeaser"] = "info-teaser";
+	AnalyticsId["Input"] = "input";
+	AnalyticsId["Label"] = "label";
+	AnalyticsId["Link"] = "link";
+	AnalyticsId["LinkList"] = "link-list";
+	AnalyticsId["List"] = "list";
+	AnalyticsId["Loader"] = "loader";
+	AnalyticsId["Logo"] = "logo";
+	AnalyticsId["Modal"] = "modal";
+	AnalyticsId["NotificationPanel"] = "notification-panel";
+	AnalyticsId["PanelOld"] = "panel";
+	AnalyticsId["PanelList"] = "panel-list";
+	AnalyticsId["PopMenu"] = "pop-menu";
+	AnalyticsId["PopOver"] = "pop-over";
+	AnalyticsId["Portal"] = "portal";
+	AnalyticsId["PromoPanel"] = "promo-panel";
+	AnalyticsId["RadioButton"] = "radio-button";
+	AnalyticsId["Select"] = "select";
+	AnalyticsId["SharingStatus"] = "sharing-status";
+	AnalyticsId["Slider"] = "slider";
+	AnalyticsId["Spacer"] = "spacer";
+	AnalyticsId["StatusDot"] = "status-dot";
+	AnalyticsId["Step"] = "step";
+	AnalyticsId["StepButtons"] = "step-buttons";
+	AnalyticsId["Stepper"] = "stepper";
+	AnalyticsId["Sublabel"] = "sublabel";
+	AnalyticsId["Table"] = "table";
+	AnalyticsId["Tag"] = "tag";
+	AnalyticsId["TagList"] = "tag-list";
+	AnalyticsId["Textarea"] = "textarea";
+	AnalyticsId["Tile"] = "tile";
+	AnalyticsId["Title"] = "title";
+	AnalyticsId["Toggle"] = "toggle";
+	AnalyticsId["Validation"] = "validation";
+	return AnalyticsId;
+}({});
+var KeyboardEventKey = /* @__PURE__ */ function(KeyboardEventKey) {
+	KeyboardEventKey["Enter"] = "Enter";
+	KeyboardEventKey["Escape"] = "Escape";
+	KeyboardEventKey["ArrowDown"] = "ArrowDown";
+	KeyboardEventKey["ArrowUp"] = "ArrowUp";
+	KeyboardEventKey["ArrowRight"] = "ArrowRight";
+	KeyboardEventKey["ArrowLeft"] = "ArrowLeft";
+	KeyboardEventKey["Home"] = "Home";
+	KeyboardEventKey["End"] = "End";
+	KeyboardEventKey["Space"] = " ";
+	KeyboardEventKey["Tab"] = "Tab";
+	KeyboardEventKey["Backspace"] = "Backspace";
+	return KeyboardEventKey;
+}({});
+var LanguageLocales = /* @__PURE__ */ function(LanguageLocales) {
+	LanguageLocales["NORWEGIAN"] = "nb-NO";
+	LanguageLocales["NORWEGIAN_NYNORSK"] = "nn-NO";
+	LanguageLocales["ENGLISH"] = "en-GB";
+	LanguageLocales["SAMI_NORTHERN"] = "se-NO";
+	return LanguageLocales;
+}({});
+//#endregion
 export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex };
+
+//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormFieldTag = 'form-field-tag',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n  Backspace = 'Backspace',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"mappings":";AAAA,IAAY,WAAL,yBAAA,UAAA;CACL,SAAA,SAAA,aAAU,MAAA;CACV,SAAA,SAAA,YAAS,MAAA;CACT,SAAA,SAAA,WAAQ,MAAA;CACR,SAAA,SAAA,YAAS,MAAA;CACT,SAAA,SAAA,WAAQ,MAAA;CACR,SAAA,SAAA,YAAS,OAAA;;KACV;AAED,IAAY,SAAL,yBAAA,QAAA;CACL,OAAA,OAAA,mBAAgB,QAAA;CAChB,OAAA,OAAA,aAAU,QAAA;CACV,OAAA,OAAA,qBAAkB,OAAA;;KACnB;AAED,IAAa,6BAA6B;AAyC1C,IAAY,cAAL,yBAAA,aAAA;CACL,YAAA,aAAU;CACV,YAAA,YAAS;CACT,YAAA,iBAAc;CACd,YAAA,YAAS;CACT,YAAA,eAAY;;KACb;AAED,IAAY,WAAL,yBAAA,UAAA;CACL,SAAA,YAAS;CACT,SAAA,WAAQ;;KACT;AAED,IAAY,cAAL,yBAAA,aAAA;CACL,YAAA,gBAAa;CACb,YAAA,mBAAgB;CAChB,YAAA,YAAS;CACT,YAAA,WAAQ;CACR,YAAA,YAAS;CACT,YAAA,cAAW;CACX,YAAA,UAAO;CACP,YAAA,WAAQ;CACR,YAAA,uBAAoB;CACpB,YAAA,YAAS;CACT,YAAA,cAAW;CACX,YAAA,aAAU;CACV,YAAA,gBAAa;CACb,YAAA,cAAW;CACX,YAAA,uBAAoB;CACpB,YAAA,+BAA4B;CAC5B,YAAA,kBAAe;CACf,YAAA,0BAAuB;CACvB,YAAA,mBAAgB;CAChB,YAAA,oBAAiB;CACjB,YAAA,kBAAe;CACf,YAAA,eAAY;CACZ,YAAA,gBAAa;CACb,YAAA,gBAAa;CACb,YAAA,gBAAa;CACb,YAAA,wBAAqB;CACrB,YAAA,4BAAyB;CACzB,YAAA,iBAAc;CACd,YAAA,qBAAkB;CAClB,YAAA,uBAAoB;CACpB,YAAA,2BAAwB;CACxB,YAAA,oBAAiB;CACjB,YAAA,UAAO;CACP,YAAA,kBAAe;CACf,YAAA,gBAAa;CACb,YAAA,WAAQ;CACR,YAAA,WAAQ;CACR,YAAA,UAAO;CACP,YAAA,cAAW;CACX,YAAA,UAAO;CACP,YAAA,YAAS;CACT,YAAA,UAAO;CACP,YAAA,WAAQ;CACR,YAAA,uBAAoB;CACpB,YAAA,cAAW;CACX,YAAA,eAAY;CACZ,YAAA,aAAU;CACV,YAAA,aAAU;CACV,YAAA,YAAS;CACT,YAAA,gBAAa;CACb,YAAA,iBAAc;CACd,YAAA,YAAS;CACT,YAAA,mBAAgB;CAChB,YAAA,YAAS;CACT,YAAA,YAAS;CACT,YAAA,eAAY;CACZ,YAAA,UAAO;CACP,YAAA,iBAAc;CACd,YAAA,aAAU;CACV,YAAA,cAAW;CACX,YAAA,WAAQ;CACR,YAAA,SAAM;CACN,YAAA,aAAU;CACV,YAAA,cAAW;CACX,YAAA,UAAO;CACP,YAAA,WAAQ;CACR,YAAA,YAAS;CACT,YAAA,gBAAa;;KACd;AAED,IAAY,mBAAL,yBAAA,kBAAA;CACL,iBAAA,WAAQ;CACR,iBAAA,YAAS;CACT,iBAAA,eAAY;CACZ,iBAAA,aAAU;CACV,iBAAA,gBAAa;CACb,iBAAA,eAAY;CACZ,iBAAA,UAAO;CACP,iBAAA,SAAM;CACN,iBAAA,WAAQ;CACR,iBAAA,SAAM;CACN,iBAAA,eAAY;;KACb;AAED,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,eAAY;CACZ,gBAAA,uBAAoB;CACpB,gBAAA,aAAU;CACV,gBAAA,mBAAgB;;KACjB"}

package/lib/constants2.js

@@ -1,124 +1,52 @@
-let IconSize = /* @__PURE__ */ function(IconSize$1) {
-	IconSize$1[IconSize$1["XXSmall"] = 24] = "XXSmall";
-	IconSize$1[IconSize$1["XSmall"] = 38] = "XSmall";
-	IconSize$1[IconSize$1["Small"] = 48] = "Small";
-	IconSize$1[IconSize$1["Medium"] = 64] = "Medium";
-	IconSize$1[IconSize$1["Large"] = 80] = "Large";
-	IconSize$1[IconSize$1["XLarge"] = 130] = "XLarge";
-	return IconSize$1;
+//#region src/components/Table/constants.ts
+var SortDirection = /* @__PURE__ */ function(SortDirection) {
+	SortDirection["asc"] = "asc";
+	SortDirection["desc"] = "desc";
+	return SortDirection;
 }({});
-let ZIndex = /* @__PURE__ */ function(ZIndex$1) {
-	ZIndex$1[ZIndex$1["OverlayScreen"] = 13e5] = "OverlayScreen";
-	ZIndex$1[ZIndex$1["PopOver"] = 11e3] = "PopOver";
-	ZIndex$1[ZIndex$1["LightBoxButtons"] = 1e3] = "LightBoxButtons";
-	return ZIndex$1;
+var HeaderCategory = /* @__PURE__ */ function(HeaderCategory) {
+	HeaderCategory["normal"] = "normal";
+	HeaderCategory["transparent"] = "transparent";
+	HeaderCategory["sortable"] = "sortable";
+	return HeaderCategory;
 }({});
-const AVERAGE_CHARACTER_WIDTH_PX = 12;
-let FormOnColor = /* @__PURE__ */ function(FormOnColor$1) {
-	FormOnColor$1["onwhite"] = "onwhite";
-	FormOnColor$1["ongrey"] = "ongrey";
-	FormOnColor$1["onblueberry"] = "onblueberry";
-	FormOnColor$1["ondark"] = "ondark";
-	FormOnColor$1["oninvalid"] = "oninvalid";
-	return FormOnColor$1;
+var TextAlign = /* @__PURE__ */ function(TextAlign) {
+	TextAlign["left"] = "left";
+	TextAlign["center"] = "center";
+	TextAlign["right"] = "right";
+	return TextAlign;
 }({});
-let FormSize = /* @__PURE__ */ function(FormSize$1) {
-	FormSize$1["medium"] = "medium";
-	FormSize$1["large"] = "large";
-	return FormSize$1;
+var ResponsiveTableVariant = /* @__PURE__ */ function(ResponsiveTableVariant) {
+	/** No handling responsive behaviour. Default. */
+	ResponsiveTableVariant["none"] = "none";
+	/** Overflow parent container to the left and right while remaining centered horizontally. */
+	ResponsiveTableVariant["centeredoverflow"] = "centeredoverflow";
+	/** Show horizontal scrollbar when table is too big for the screen. */
+	ResponsiveTableVariant["horizontalscroll"] = "horizontalscroll";
+	/** Collapse to two columns. */
+	ResponsiveTableVariant["block"] = "block";
+	return ResponsiveTableVariant;
 }({});
-let AnalyticsId = /* @__PURE__ */ function(AnalyticsId$1) {
-	AnalyticsId$1["AnchorLink"] = "anchor-link";
-	AnalyticsId$1["ArticleTeaser"] = "article-teaser";
-	AnalyticsId$1["Avatar"] = "avatar";
-	AnalyticsId$1["Badge"] = "badge";
-	AnalyticsId$1["Button"] = "button";
-	AnalyticsId$1["Checkbox"] = "checkbox";
-	AnalyticsId$1["Chip"] = "chip";
-	AnalyticsId$1["Close"] = "close";
-	AnalyticsId$1["DictionaryTrigger"] = "dictionary-trigger";
-	AnalyticsId$1["Drawer"] = "Drawer";
-	AnalyticsId$1["Dropdown"] = "dropdown";
-	AnalyticsId$1["Duolist"] = "duolist";
-	AnalyticsId$1["EmptyState"] = "empty-state";
-	AnalyticsId$1["Expander"] = "expander";
-	AnalyticsId$1["ExpanderHierarchy"] = "expander-hierarchy";
-	AnalyticsId$1["ExpanderHierarchyExpander"] = "expander-hierarchy-expander";
-	AnalyticsId$1["ExpanderList"] = "expander-list";
-	AnalyticsId$1["ExpanderListExpander"] = "expander-list-expander";
-	AnalyticsId$1["EyebrowHeader"] = "eyebrow-header";
-	AnalyticsId$1["FavoriteButton"] = "favorite-button";
-	AnalyticsId$1["FormFieldTag"] = "form-field-tag";
-	AnalyticsId$1["FormGroup"] = "form-group";
-	AnalyticsId$1["FormLayout"] = "form-layout";
-	AnalyticsId$1["HelpBubble"] = "help-bubble";
-	AnalyticsId$1["HelpDrawer"] = "help-drawer";
-	AnalyticsId$1["HelpExpanderInline"] = "help-expander-inline";
-	AnalyticsId$1["HelpExpanderStandalone"] = "help-expander-standalone";
-	AnalyticsId$1["HelpTooltip"] = "help-tooltip";
-	AnalyticsId$1["HelpTriggerIcon"] = "help-trigger-icon";
-	AnalyticsId$1["HelpTriggerInline"] = "help-trigger-inline";
-	AnalyticsId$1["HelpTriggerStandalone"] = "help-trigger-standalone";
-	AnalyticsId$1["HighlightPanel"] = "highlight-panel";
-	AnalyticsId$1["Icon"] = "icon";
-	AnalyticsId$1["Illustration"] = "Illustration";
-	AnalyticsId$1["InfoTeaser"] = "info-teaser";
-	AnalyticsId$1["Input"] = "input";
-	AnalyticsId$1["Label"] = "label";
-	AnalyticsId$1["Link"] = "link";
-	AnalyticsId$1["LinkList"] = "link-list";
-	AnalyticsId$1["List"] = "list";
-	AnalyticsId$1["Loader"] = "loader";
-	AnalyticsId$1["Logo"] = "logo";
-	AnalyticsId$1["Modal"] = "modal";
-	AnalyticsId$1["NotificationPanel"] = "notification-panel";
-	AnalyticsId$1["PanelOld"] = "panel";
-	AnalyticsId$1["PanelList"] = "panel-list";
-	AnalyticsId$1["PopMenu"] = "pop-menu";
-	AnalyticsId$1["PopOver"] = "pop-over";
-	AnalyticsId$1["Portal"] = "portal";
-	AnalyticsId$1["PromoPanel"] = "promo-panel";
-	AnalyticsId$1["RadioButton"] = "radio-button";
-	AnalyticsId$1["Select"] = "select";
-	AnalyticsId$1["SharingStatus"] = "sharing-status";
-	AnalyticsId$1["Slider"] = "slider";
-	AnalyticsId$1["Spacer"] = "spacer";
-	AnalyticsId$1["StatusDot"] = "status-dot";
-	AnalyticsId$1["Step"] = "step";
-	AnalyticsId$1["StepButtons"] = "step-buttons";
-	AnalyticsId$1["Stepper"] = "stepper";
-	AnalyticsId$1["Sublabel"] = "sublabel";
-	AnalyticsId$1["Table"] = "table";
-	AnalyticsId$1["Tag"] = "tag";
-	AnalyticsId$1["TagList"] = "tag-list";
-	AnalyticsId$1["Textarea"] = "textarea";
-	AnalyticsId$1["Tile"] = "tile";
-	AnalyticsId$1["Title"] = "title";
-	AnalyticsId$1["Toggle"] = "toggle";
-	AnalyticsId$1["Validation"] = "validation";
-	return AnalyticsId$1;
+var ModeType = /* @__PURE__ */ function(ModeType) {
+	ModeType["compact"] = "compact";
+	ModeType["normal"] = "normal";
+	return ModeType;
 }({});
-let KeyboardEventKey = /* @__PURE__ */ function(KeyboardEventKey$1) {
-	KeyboardEventKey$1["Enter"] = "Enter";
-	KeyboardEventKey$1["Escape"] = "Escape";
-	KeyboardEventKey$1["ArrowDown"] = "ArrowDown";
-	KeyboardEventKey$1["ArrowUp"] = "ArrowUp";
-	KeyboardEventKey$1["ArrowRight"] = "ArrowRight";
-	KeyboardEventKey$1["ArrowLeft"] = "ArrowLeft";
-	KeyboardEventKey$1["Home"] = "Home";
-	KeyboardEventKey$1["End"] = "End";
-	KeyboardEventKey$1["Space"] = " ";
-	KeyboardEventKey$1["Tab"] = "Tab";
-	KeyboardEventKey$1["Backspace"] = "Backspace";
-	return KeyboardEventKey$1;
-}({});
-let LanguageLocales = /* @__PURE__ */ function(LanguageLocales$1) {
-	LanguageLocales$1["NORWEGIAN"] = "nb-NO";
-	LanguageLocales$1["NORWEGIAN_NYNORSK"] = "nn-NO";
-	LanguageLocales$1["ENGLISH"] = "en-GB";
-	LanguageLocales$1["SAMI_NORTHERN"] = "se-NO";
-	return LanguageLocales$1;
-}({});
-export { IconSize as a, ZIndex as c, FormSize as i, AnalyticsId as n, KeyboardEventKey as o, FormOnColor as r, LanguageLocales as s, AVERAGE_CHARACTER_WIDTH_PX as t };
+var defaultConfig = [{
+	breakpoint: "xl",
+	variant: ResponsiveTableVariant.centeredoverflow,
+	fallbackVariant: ResponsiveTableVariant.horizontalscroll
+}];
+var simpleConfig = [{
+	breakpoint: "xl",
+	variant: ResponsiveTableVariant.centeredoverflow,
+	fallbackVariant: ResponsiveTableVariant.horizontalscroll
+}, {
+	breakpoint: "sm",
+	variant: ResponsiveTableVariant.centeredoverflow,
+	fallbackVariant: ResponsiveTableVariant.block
+}];
+//#endregion
+export { TextAlign as a, SortDirection as i, ModeType as n, defaultConfig as o, ResponsiveTableVariant as r, simpleConfig as s, HeaderCategory as t };
 
 //# sourceMappingURL=constants2.js.map

package/lib/constants2.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants2.js","names":[],"sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormFieldTag = 'form-field-tag',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n  Backspace = 'Backspace',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"mappings":"AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,WAAA,aAAA,MAAA;AACA,YAAA,WAAA,YAAA,MAAA;AACA,YAAA,WAAA,WAAA,MAAA;AACA,YAAA,WAAA,YAAA,MAAA;AACA,YAAA,WAAA,WAAA,MAAA;AACA,YAAA,WAAA,YAAA,OAAA;;;AAGF,IAAY,SAAA,yBAAA,UAAL;AACL,UAAA,SAAA,mBAAA,QAAA;AACA,UAAA,SAAA,aAAA,QAAA;AACA,UAAA,SAAA,qBAAA,OAAA;;;AAGF,MAAa,6BAA6B;AAyC1C,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,aAAA;AACA,eAAA,YAAA;AACA,eAAA,iBAAA;AACA,eAAA,YAAA;AACA,eAAA,eAAA;;;AAGF,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,gBAAA;AACA,eAAA,mBAAA;AACA,eAAA,YAAA;AACA,eAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,uBAAA;AACA,eAAA,YAAA;AACA,eAAA,cAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;AACA,eAAA,cAAA;AACA,eAAA,uBAAA;AACA,eAAA,+BAAA;AACA,eAAA,kBAAA;AACA,eAAA,0BAAA;AACA,eAAA,mBAAA;AACA,eAAA,oBAAA;AACA,eAAA,kBAAA;AACA,eAAA,eAAA;AACA,eAAA,gBAAA;AACA,eAAA,gBAAA;AACA,eAAA,gBAAA;AACA,eAAA,wBAAA;AACA,eAAA,4BAAA;AACA,eAAA,iBAAA;AACA,eAAA,qBAAA;AACA,eAAA,uBAAA;AACA,eAAA,2BAAA;AACA,eAAA,oBAAA;AACA,eAAA,UAAA;AACA,eAAA,kBAAA;AACA,eAAA,gBAAA;AACA,eAAA,WAAA;AACA,eAAA,WAAA;AACA,eAAA,UAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,YAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,uBAAA;AACA,eAAA,cAAA;AACA,eAAA,eAAA;AACA,eAAA,aAAA;AACA,eAAA,aAAA;AACA,eAAA,YAAA;AACA,eAAA,gBAAA;AACA,eAAA,iBAAA;AACA,eAAA,YAAA;AACA,eAAA,mBAAA;AACA,eAAA,YAAA;AACA,eAAA,YAAA;AACA,eAAA,eAAA;AACA,eAAA,UAAA;AACA,eAAA,iBAAA;AACA,eAAA,aAAA;AACA,eAAA,cAAA;AACA,eAAA,WAAA;AACA,eAAA,SAAA;AACA,eAAA,aAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,gBAAA;;;AAGF,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,WAAA;AACA,oBAAA,YAAA;AACA,oBAAA,eAAA;AACA,oBAAA,aAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA,oBAAA,UAAA;AACA,oBAAA,SAAA;AACA,oBAAA,WAAA;AACA,oBAAA,SAAA;AACA,oBAAA,eAAA;;;AAGF,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,eAAA;AACA,mBAAA,uBAAA;AACA,mBAAA,aAAA;AACA,mBAAA,mBAAA"}
+{"version":3,"file":"constants2.js","names":[],"sources":["../src/components/Table/constants.ts"],"sourcesContent":["import type { BreakpointConfig } from './Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n"],"mappings":";AAEA,IAAY,gBAAL,yBAAA,eAAA;CACL,cAAA,SAAM;CACN,cAAA,UAAO;;KACR;AAED,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,YAAS;CACT,eAAA,iBAAc;CACd,eAAA,cAAW;;KACZ;AAED,IAAY,YAAL,yBAAA,WAAA;CACL,UAAA,UAAO;CACP,UAAA,YAAS;CACT,UAAA,WAAQ;;KACT;AAED,IAAY,yBAAL,yBAAA,wBAAA;;CAEL,uBAAA,UAAO;;CAEP,uBAAA,sBAAmB;;CAEnB,uBAAA,sBAAmB;;CAEnB,uBAAA,WAAQ;;KACT;AACD,IAAY,WAAL,yBAAA,UAAA;CACL,SAAA,aAAU;CACV,SAAA,YAAS;;KACV;AAED,IAAa,gBAAoC,CAC/C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF;AAED,IAAa,eAAmC,CAC9C;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,EACD;CACE,YAAY;CACZ,SAAS,uBAAuB;CAChC,iBAAiB,uBAAuB;CACzC,CACF"}