npm - @helsenorge/designsystem-react - Versions diffs - 14.0.0-beta.2 → 14.0.0-beta.4 - Mend

@helsenorge/designsystem-react 14.0.0-beta.2 → 14.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1133) hide show

package/lib/RadioButton.js CHANGED Viewed

@@ -1,82 +1,5 @@
-import { t as uuid } from "./uuid.js";
-import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
-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 { useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import radioButtonStyles from "./components/RadioButton/styles.module.scss";
-const RadioButton = (props) => {
-	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ref, ...rest } = props;
-	const invalid = error || onColor === FormOnColor.oninvalid;
-	const onDark = onColor === FormOnColor.ondark;
-	const onBlueberry = onColor === FormOnColor.onblueberry;
-	const onCherry = onColor === FormOnColor.oninvalid;
-	const isLarge = size === FormSize.large;
-	const [checked, changeChecked] = useState();
-	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
-	const mergedRefs = mergeRefs([ref, refObject]);
-	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = cn(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"], {
-		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
-		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
-		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
-		[radioButtonStyles["radio-button-label__large"]]: isLarge,
-		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
-		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
-	}, labelClassNames);
-	const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
-		[radioButtonStyles["radio-button--on-dark"]]: onDark,
-		[radioButtonStyles["radio-button--disabled"]]: disabled,
-		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
-		[radioButtonStyles["radio-button--invalid"]]: invalid,
-		[radioButtonStyles["radio-button__large"]]: isLarge,
-		[radioButtonStyles["radio-button__large--disabled"]]: isLarge && disabled,
-		[radioButtonStyles["radio-button__large--invalid"]]: isLarge && invalid
-	}, className);
-	const change = (e) => {
-		changeChecked(e.target.checked);
-		if (onChange) onChange(e);
-	};
-	const getLabelContent = () => /* @__PURE__ */ jsx("input", {
-		...rest,
-		id: inputId,
-		name,
-		className: radioButtonClasses,
-		type: "radio",
-		disabled,
-		value,
-		ref: mergedRefs,
-		defaultChecked,
-		"aria-describedby": getAriaDescribedBy(props, errorTextId),
-		required,
-		onChange: (e) => change(e)
-	});
-	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: errorWrapperClassName,
-		errorText,
-		errorTextId,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.RadioButton,
-			className: radioButtonWrapperClasses,
-			children: renderLabelAsParent(label, getLabelContent(), inputId, onColor, radioButtonLabelClasses, void 0, radioButtonStyles["radiobutton-sublabel-wrapper"], isLarge)
-		})
-	});
-};
-RadioButton.displayName = "RadioButton";
-var RadioButton_default = RadioButton;
-export { RadioButton_default as n, RadioButton as t };
+import { r as RadioButton_default } from "./utils3.js";
+var RadioButton_default$1 = RadioButton_default;
+export { RadioButton_default$1 as t };
 //# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","names":[~~"RadioButton: React.FC<RadioButtonProps>"~~],"sources":["../src/components/RadioButton/~~RadioButton~~.~~tsx~~"],"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,\n getLabelContent(),\n inputId,\n onColor as FormOnColor,\n radioButtonLabelClasses,\n undefined,\n radioButtonStyles['radiobutton-sublabel-wrapper'],\n isLarge\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\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,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,yBACA,KAAA,GACA,kBAAkB,iCAClB,QACD;IACG;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,~~sBAAe~~"}
1	+ {"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport * from './utils';\nexport default RadioButton;\n"],"mappings":";AAGA,IAAA,wBAAe"}

package/lib/ReadLettersMedium.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils3.js";
+import { t as ViewBoxSize } from "./utils4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ReadLettersMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {

package/lib/Select.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import selectStyles from "./components/Select/styles.module.scss";
 var getSelectMaxWidth = (characters) => {
@@ -23,17 +23,17 @@ const Select = (props) => {
 	const invalid = onColor === "oninvalid" || !!errorText || !!error;
 	const iconColor = getIconColor(invalid, !!disabled);
 	const maxWidth = width ? getSelectMaxWidth(width) : void 0;
-	const selectInnerWrapperClasses = cn(selectStyles["select-inner-wrapper"], {
+	const selectInnerWrapperClasses = classNames(selectStyles["select-inner-wrapper"], {
 		[selectStyles["select-inner-wrapper--transparent"]]: concept === "transparent",
 		[selectStyles["select-inner-wrapper--on-blueberry"]]: onBlueberry,
 		[selectStyles["select-inner-wrapper--invalid"]]: invalid,
 		[selectStyles["select-inner-wrapper--disabled"]]: disabled
 	}, className);
-	const selectClasses = cn(selectStyles.select, {
+	const selectClasses = classNames(selectStyles.select, {
 		[selectStyles["select--on-blueberry"]]: onBlueberry,
 		[selectStyles["select--invalid"]]: invalid
 	});
-	const selectWrapperClasses = cn(selectStyles["select-wrapper"], wrapperClassName);
+	const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
 		className: errorWrapperClassName,
 		errorText,

package/lib/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' \| 'transparent';\n\nexport interface SelectProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n 'aria-describedby' \| 'name' \| 'disabled' \| 'required' \| 'value' \| 'onChange' \| 'autoComplete'\n > {\n /** Sets the content of the select element. /\n children: React.ReactNode;\n /* Adds custom classes to the element. /\n className?: string;\n /* Changes the visuals of the component /\n concept?: SelectConcept;\n /* The label text above the select /\n label?: React.ReactNode;\n /* Changes the visuals of the component /\n onColor?: keyof typeof FormOnColor;\n /* Activates Error style for the select component - 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 /* select id of the select element /\n selectId?: string;\n /* Width of select in characters (approximate) /\n width?: number;\n /* Gives defaultvalue to the comp. Preferred over selected prop on option by react /\n defaultValue?: string \| number;\n /* Adds custom classes to the wrapper tag /\n wrapperClassName?: string;\n /* Ref passed to the select element /\n ref?: React.Ref<HTMLSelectElement \| null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n const {\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n selectId: selectIdProp,\n errorWrapperClassName,\n label,\n name = props.selectId,\n onColor = FormOnColor.onwhite,\n testId,\n width,\n required,\n value,\n defaultValue,\n autoComplete = 'off',\n wrapperClassName,\n ref,\n ...rest\n } = props;\n\n const selectId = useIdWithFallback(selectIdProp);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onBlueberry = onColor === 'onblueberry';\n const invalid = onColor === 'oninvalid' \|\| !!errorText \|\| !!error;\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n {renderLabel(label, selectId, onColor as FormOnColor)}\n <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n <Icon\n className={selectStyles['select-arrow']}\n svgIcon={ChevronDown}\n color={iconColor}\n size={IconSize.XSmall}\n testId={testId + '-icon'}\n />\n <select\n {...rest}\n aria-invalid={!!invalid}\n id={selectId}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-required={!!required}\n value={value}\n defaultValue={defaultValue}\n autoComplete={autoComplete ? autoComplete : undefined}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,~~GAChC~~,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,~~GAAW~~,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,~~GAAW~~,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY,OAAO,UAAU,QAAuB,EACrD,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}
1	+ {"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' \| 'transparent';\n\nexport interface SelectProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n 'aria-describedby' \| 'name' \| 'disabled' \| 'required' \| 'value' \| 'onChange' \| 'autoComplete'\n > {\n /** Sets the content of the select element. /\n children: React.ReactNode;\n /* Adds custom classes to the element. /\n className?: string;\n /* Changes the visuals of the component /\n concept?: SelectConcept;\n /* The label text above the select /\n label?: React.ReactNode;\n /* Changes the visuals of the component /\n onColor?: keyof typeof FormOnColor;\n /* Activates Error style for the select component - 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 /* select id of the select element /\n selectId?: string;\n /* Width of select in characters (approximate) /\n width?: number;\n /* Gives defaultvalue to the comp. Preferred over selected prop on option by react /\n defaultValue?: string \| number;\n /* Adds custom classes to the wrapper tag /\n wrapperClassName?: string;\n /* Ref passed to the select element /\n ref?: React.Ref<HTMLSelectElement \| null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n const {\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n selectId: selectIdProp,\n errorWrapperClassName,\n label,\n name = props.selectId,\n onColor = FormOnColor.onwhite,\n testId,\n width,\n required,\n value,\n defaultValue,\n autoComplete = 'off',\n wrapperClassName,\n ref,\n ...rest\n } = props;\n\n const selectId = useIdWithFallback(selectIdProp);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onBlueberry = onColor === 'onblueberry';\n const invalid = onColor === 'oninvalid' \|\| !!errorText \|\| !!error;\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n {renderLabel(label, selectId, onColor as FormOnColor)}\n <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n <Icon\n className={selectStyles['select-arrow']}\n svgIcon={ChevronDown}\n color={iconColor}\n size={IconSize.XSmall}\n testId={testId + '-icon'}\n />\n <select\n {...rest}\n aria-invalid={!!invalid}\n id={selectId}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-required={!!required}\n value={value}\n defaultValue={defaultValue}\n autoComplete={autoComplete ? autoComplete : undefined}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY,OAAO,UAAU,QAAuB,EACrD,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}

package/lib/SingleSelectItem.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
@@ -21,8 +21,8 @@ const SingleSelectItem = (props) => {
 		group,
 		optionValue
 	]);
-	const contentClasses = cn(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
-	const dotClasses = cn(styles["single-select-item__dot"], {
+	const contentClasses = classNames(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
+	const dotClasses = classNames(styles["single-select-item__dot"], {
 		[styles["single-select-item__dot--disabled"]]: isDisabled,
 		[styles["single-select-item__dot--checked"]]: isSelected
 	});
@@ -73,6 +73,6 @@ const SingleSelectItem = (props) => {
 };
 SingleSelectItem.displayName = "Dropdown.SingleSelectItem";
 var SingleSelectItem_default = SingleSelectItem;
-export { SingleSelectItem_default as n, SingleSelectContext as r, SingleSelectItem as t };
+export { useSingleSelect as i, SingleSelectItem_default as n, SingleSelectContext as r, SingleSelectItem as t };
 //# sourceMappingURL=SingleSelectItem.js.map

package/lib/SingleSelectItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType \| null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType \| null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n /** The text to the singleSelectItem /\n text?: string;\n /* input id of the singleSelectItem /\n inputId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* When true, onclick and keyboard events will be passed to the child Button or AnchorLink. /\n asChild?: boolean;\n /* Only use when asChild is set to true and only pass one child /\n children?: React.ReactNode;\n /* Value for this singleSelectItem option - used by the parent wrapper to keep track of the context /\n value?: string;\n /* aria-describedby passthrough if needed /\n ['aria-describedby']?: string;\n /* Marks this option as initially selected /\n defaultSelected?: boolean;\n /* Ref that is passed to the component */\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n const generatedId = useId();\n const inputId = props.inputId ?? generatedId;\n const group = useSingleSelect();\n const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n const isSelected = group ? group.value === optionValue : false;\n const isDisabled = !!disabled \|\| !!group?.disabled;\n const asChildSlotRef = React.useRef<AsChildSlotHandle \| null>(null);\n\n React.useEffect(() => {\n if (defaultSelected && group && typeof group.value === 'undefined') {\n group.onValueChange?.(optionValue);\n }\n }, [defaultSelected, group, optionValue]);\n\n const contentClasses = classNames(styles['single-select-item__content'], {\n [styles['single-select-item__content--disabled']]: isDisabled,\n });\n const dotClasses = classNames(styles['single-select-item__dot'], {\n [styles['single-select-item__dot--disabled']]: isDisabled,\n [styles['single-select-item__dot--checked']]: isSelected,\n });\n\n const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n const childElement = childArray[0] ?? null;\n\n const selectThis = (e?: React.SyntheticEvent): void => {\n if (isDisabled) return;\n if (group && group.value !== optionValue) {\n group.onValueChange?.(optionValue, e);\n }\n };\n\n const content = (\n <>\n <span className={dotClasses} aria-hidden />\n <span>{text}</span>\n </>\n );\n\n const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n const componentProps = asChild\n ? {\n ref: asChildSlotRef,\n elementRef: ref,\n className: contentClasses,\n disabled: isDisabled,\n onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n ariaCurrent: isSelected ? 'true' : undefined,\n children: childWithInjectedContent,\n }\n : {\n ...rest,\n type: 'button' as const,\n className: contentClasses,\n disabled: isDisabled,\n onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n e.preventDefault();\n selectThis(e);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (e.key === 'Enter') {\n e.preventDefault();\n selectThis(e);\n }\n },\n ref: ref,\n 'aria-disabled': isDisabled \|\| undefined,\n 'aria-current': isSelected ? 'true' : undefined,\n children: content,\n };\n\n return (\n <div data-testid={testId} className={styles['single-select-item']}>\n <Component {...componentProps} />\n </div>\n );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,~~GAAW~~,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,~~GAAW~~,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}
1	+ {"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType \| null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType \| null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n /** The text to the singleSelectItem /\n text?: string;\n /* input id of the singleSelectItem /\n inputId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* When true, onclick and keyboard events will be passed to the child Button or AnchorLink. /\n asChild?: boolean;\n /* Only use when asChild is set to true and only pass one child /\n children?: React.ReactNode;\n /* Value for this singleSelectItem option - used by the parent wrapper to keep track of the context /\n value?: string;\n /* aria-describedby passthrough if needed /\n ['aria-describedby']?: string;\n /* Marks this option as initially selected /\n defaultSelected?: boolean;\n /* Ref that is passed to the component */\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n const generatedId = useId();\n const inputId = props.inputId ?? generatedId;\n const group = useSingleSelect();\n const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n const isSelected = group ? group.value === optionValue : false;\n const isDisabled = !!disabled \|\| !!group?.disabled;\n const asChildSlotRef = React.useRef<AsChildSlotHandle \| null>(null);\n\n React.useEffect(() => {\n if (defaultSelected && group && typeof group.value === 'undefined') {\n group.onValueChange?.(optionValue);\n }\n }, [defaultSelected, group, optionValue]);\n\n const contentClasses = classNames(styles['single-select-item__content'], {\n [styles['single-select-item__content--disabled']]: isDisabled,\n });\n const dotClasses = classNames(styles['single-select-item__dot'], {\n [styles['single-select-item__dot--disabled']]: isDisabled,\n [styles['single-select-item__dot--checked']]: isSelected,\n });\n\n const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n const childElement = childArray[0] ?? null;\n\n const selectThis = (e?: React.SyntheticEvent): void => {\n if (isDisabled) return;\n if (group && group.value !== optionValue) {\n group.onValueChange?.(optionValue, e);\n }\n };\n\n const content = (\n <>\n <span className={dotClasses} aria-hidden />\n <span>{text}</span>\n </>\n );\n\n const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n const componentProps = asChild\n ? {\n ref: asChildSlotRef,\n elementRef: ref,\n className: contentClasses,\n disabled: isDisabled,\n onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n ariaCurrent: isSelected ? 'true' : undefined,\n children: childWithInjectedContent,\n }\n : {\n ...rest,\n type: 'button' as const,\n className: contentClasses,\n disabled: isDisabled,\n onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n e.preventDefault();\n selectThis(e);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (e.key === 'Enter') {\n e.preventDefault();\n selectThis(e);\n }\n },\n ref: ref,\n 'aria-disabled': isDisabled \|\| undefined,\n 'aria-current': isSelected ? 'true' : undefined,\n children: content,\n };\n\n return (\n <div data-testid={testId} className={styles['single-select-item']}>\n <Component {...componentProps} />\n </div>\n );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}

package/lib/Slider.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { t as useSize } from "./useSize.js";
 import { t as Title_default } from "./Title2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Slider/styles.module.scss";
@@ -230,13 +230,13 @@ const Slider = (props) => {
 						renderEmojies(),
 						/* @__PURE__ */ jsxs("div", {
 							ref: trackRef,
-							className: cn(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
 							onPointerDown: handlePointerDown,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: cn(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
 								children: renderSteps()
 							}), /* @__PURE__ */ jsx("div", {
-								className: cn(styles.slider__marker, {
+								className: classNames(styles.slider__marker, {
 									[styles["slider__marker--disabled"]]: disabled,
 									[styles["slider__marker--selected"]]: selectedState,
 									[styles["slider__marker--invalid"]]: invalid,

package/lib/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n const [value, setValue] = useState(initial);\n\n const setSafeValue = (newValue: number): void => {\n if (newValue > max) {\n setValue(max);\n } else if (newValue < min) {\n setValue(min);\n } else {\n setValue(newValue);\n }\n };\n\n useEffect(() => {\n setSafeValue(initial);\n }, [min, max]);\n\n return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n label?: number \| string;\n emojiUniCode?: string;\n};\n\nexport interface SliderProps\n extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name' \| 'onChange' \| 'onBlur'> {\n /** Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /\tSets the title of the slider. /\n title?: string;\n /** Adds the left hand label to the element. /\n labelLeft?: string;\n /* Adds the right hand label to the element. /\n labelRight?: string;\n /\tSets aria-label of the slider. /\n ariaLabel?: string;\n /** Disables the slider element. /\n disabled?: boolean;\n /* Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n minValue?: number;\n /* Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n maxValue?: number;\n /* If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default /\n selected?: boolean;\n /* Sets the steps data for the slider /\n steps?: SliderStep[];\n /* Sets the step to move per point in the slider /\n step?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Sets the value of the slider /\n value?: number;\n /* Ref passed to component /\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n const {\n title,\n ariaLabel,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n labelLeft,\n labelRight,\n disabled = false,\n onChange,\n steps,\n step = 1,\n minValue = 0,\n maxValue = steps ? steps.length - 1 : 100,\n selected = true,\n testId,\n value,\n ref,\n ...rest\n } = props;\n\n const [isMoving, setIsMoving] = useState(false);\n const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n const [valueState, setValueState] = useSafeNumberValue(\n typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n minValue,\n maxValue\n );\n\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const baseId = useId();\n const titleId = 'title-' + baseId;\n const labelLeftId = 'label-' + baseId;\n const labelRightId = 'label-right-' + baseId;\n const trackRef = useRef<HTMLDivElement>(null);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n const invalid = !!errorText \|\| !!error;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return (): void => {\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, []);\n\n const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n // Calculate the normalized position (0 to 1) of the marker along the track\n const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n const valueRange = maxValue - minValue;\n // Calculate the value without considering the step\n let value = normalizedPosition valueRange + minValue;\n // Adjust the value to account for the step increment\n const stepCount = Math.round(value / step);\n value = stepCount * step;\n value = Math.max(minValue, Math.min(maxValue, value));\n\n return value;\n };\n\n useEffect(() => {\n const handlePointerMove = (e: PointerEvent): void => {\n if (!disabled && isMoving) {\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n }\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n\n return (): void => {\n document.removeEventListener('pointermove', handlePointerMove);\n };\n }, [isMoving]);\n\n useEffect(() => {\n if (value !== valueState && typeof value !== 'undefined') {\n handleSelected();\n setValueState(value);\n }\n }, [value]);\n\n useEffect(() => {\n if (typeof value === 'undefined' && selected !== selectedState) {\n setSelectedState(selected);\n }\n }, [selected]);\n\n const handleSelected = (): void => {\n if (selectedState === false) {\n setSelectedState(true);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n let flag = false;\n\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n setValueState(valueState - step);\n flag = true;\n break;\n case 'PageDown':\n setValueState(valueState - largeStep);\n flag = true;\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n setValueState(valueState + step);\n flag = true;\n break;\n case 'PageUp':\n setValueState(valueState + largeStep);\n flag = true;\n break;\n case 'Home':\n setValueState(minValue);\n flag = true;\n break;\n case 'End':\n setValueState(maxValue);\n flag = true;\n break;\n default:\n break;\n }\n\n if (flag) {\n handleSelected();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n refObject.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n handleTrackClick(e);\n setIsMoving(true);\n handleSelected();\n\n e.preventDefault();\n e.stopPropagation();\n\n refObject.current?.focus();\n };\n\n const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n const getAriaValueText = (): string \| undefined => {\n const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n const step = steps[stepIndex];\n const emojiCode = step.emojiUniCode;\n const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n return emojiCode && label ? `${emojiCode} ${label}` : emojiCode \|\| label;\n }\n\n return undefined;\n };\n\n const getAriaLabeledById = (): string \| undefined => {\n if (title && labelLeft && labelRight) {\n return [titleId, labelLeftId, labelRightId].join(' ');\n }\n if (title && labelLeft) {\n return [titleId, labelLeftId].join(' ');\n }\n if (title && labelRight) {\n return [titleId, labelRightId].join(' ');\n }\n if (title) {\n return titleId;\n }\n };\n\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: ariaLabel,\n id: getAriaLabeledById(),\n prefer: 'label',\n });\n\n const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n return { left: `${(index / (stepsLength - 1)) * 100}%` };\n };\n\n useEffect(() => {\n if (selectedState && onChange) {\n onChange({\n target: {\n name: props.name,\n value: valueState,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>);\n }\n }, [valueState, selectedState]);\n\n const renderEmojies = (): React.ReactNode => {\n return (\n <div className={styles['slider__emoji-container']}>\n {steps?.map((step, index) => {\n return (\n step.emojiUniCode && (\n <div\n aria-hidden={true}\n key={'emoji' + index}\n className={styles['slider__emoji']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.emojiUniCode}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n const renderSteps = (): React.ReactNode => {\n return steps?.map((_step, index) => {\n return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n });\n };\n\n const renderStepLabels = (): React.ReactNode => {\n return (\n <div className={styles['slider__value-container']}>\n {steps?.map((step, index) => {\n return (\n typeof step.label !== 'undefined' && (\n <div\n aria-hidden={true}\n key={'label' + index}\n className={styles['slider__value']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.label}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <input\n aria-valuetext={getAriaValueText()}\n className={styles['sr-only-slider']}\n disabled={disabled}\n min={minValue}\n max={maxValue}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n value={valueState}\n ref={mergedRefs}\n type=\"range\"\n {...rest}\n {...ariaLabelAttributes}\n />\n <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n {title && (\n <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n {title}\n </Title>\n )}\n <div className={styles['slider__content-container']}>\n {renderEmojies()}\n {/* Slider streken er klikkbar med mus/touch /}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n [styles['slider__marker--invalid']]: invalid,\n [styles['slider__marker--focused']]: !disabled && isFocused,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\n />\n </div>\n {renderStepLabels()}\n </div>\n {(labelLeft \|\| labelRight) && (\n <span className={styles.slider__options}>\n <span id={labelLeftId}>{labelLeft}</span>\n <span id={labelRightId}>{labelRight}</span>\n </span>\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport from './Slider';\nexport default Slider;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n const [value, setValue] = useState(initial);\n\n const setSafeValue = (newValue: number): void => {\n if (newValue > max) {\n setValue(max);\n } else if (newValue < min) {\n setValue(min);\n } else {\n setValue(newValue);\n }\n };\n\n useEffect(() => {\n setSafeValue(initial);\n }, [min, max]);\n\n return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n label?: number \| string;\n emojiUniCode?: string;\n};\n\nexport interface SliderProps\n extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name' \| 'onChange' \| 'onBlur'> {\n /** Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /\tSets the title of the slider. /\n title?: string;\n /** Adds the left hand label to the element. /\n labelLeft?: string;\n /* Adds the right hand label to the element. /\n labelRight?: string;\n /\tSets aria-label of the slider. /\n ariaLabel?: string;\n /** Disables the slider element. /\n disabled?: boolean;\n /* Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n minValue?: number;\n /* Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n maxValue?: number;\n /* If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default /\n selected?: boolean;\n /* Sets the steps data for the slider /\n steps?: SliderStep[];\n /* Sets the step to move per point in the slider /\n step?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Sets the value of the slider /\n value?: number;\n /* Ref passed to component /\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n const {\n title,\n ariaLabel,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n labelLeft,\n labelRight,\n disabled = false,\n onChange,\n steps,\n step = 1,\n minValue = 0,\n maxValue = steps ? steps.length - 1 : 100,\n selected = true,\n testId,\n value,\n ref,\n ...rest\n } = props;\n\n const [isMoving, setIsMoving] = useState(false);\n const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n const [valueState, setValueState] = useSafeNumberValue(\n typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n minValue,\n maxValue\n );\n\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const baseId = useId();\n const titleId = 'title-' + baseId;\n const labelLeftId = 'label-' + baseId;\n const labelRightId = 'label-right-' + baseId;\n const trackRef = useRef<HTMLDivElement>(null);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n const invalid = !!errorText \|\| !!error;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return (): void => {\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, []);\n\n const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n // Calculate the normalized position (0 to 1) of the marker along the track\n const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n const valueRange = maxValue - minValue;\n // Calculate the value without considering the step\n let value = normalizedPosition valueRange + minValue;\n // Adjust the value to account for the step increment\n const stepCount = Math.round(value / step);\n value = stepCount * step;\n value = Math.max(minValue, Math.min(maxValue, value));\n\n return value;\n };\n\n useEffect(() => {\n const handlePointerMove = (e: PointerEvent): void => {\n if (!disabled && isMoving) {\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n }\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n\n return (): void => {\n document.removeEventListener('pointermove', handlePointerMove);\n };\n }, [isMoving]);\n\n useEffect(() => {\n if (value !== valueState && typeof value !== 'undefined') {\n handleSelected();\n setValueState(value);\n }\n }, [value]);\n\n useEffect(() => {\n if (typeof value === 'undefined' && selected !== selectedState) {\n setSelectedState(selected);\n }\n }, [selected]);\n\n const handleSelected = (): void => {\n if (selectedState === false) {\n setSelectedState(true);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n let flag = false;\n\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n setValueState(valueState - step);\n flag = true;\n break;\n case 'PageDown':\n setValueState(valueState - largeStep);\n flag = true;\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n setValueState(valueState + step);\n flag = true;\n break;\n case 'PageUp':\n setValueState(valueState + largeStep);\n flag = true;\n break;\n case 'Home':\n setValueState(minValue);\n flag = true;\n break;\n case 'End':\n setValueState(maxValue);\n flag = true;\n break;\n default:\n break;\n }\n\n if (flag) {\n handleSelected();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n refObject.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n handleTrackClick(e);\n setIsMoving(true);\n handleSelected();\n\n e.preventDefault();\n e.stopPropagation();\n\n refObject.current?.focus();\n };\n\n const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n const getAriaValueText = (): string \| undefined => {\n const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n const step = steps[stepIndex];\n const emojiCode = step.emojiUniCode;\n const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n return emojiCode && label ? `${emojiCode} ${label}` : emojiCode \|\| label;\n }\n\n return undefined;\n };\n\n const getAriaLabeledById = (): string \| undefined => {\n if (title && labelLeft && labelRight) {\n return [titleId, labelLeftId, labelRightId].join(' ');\n }\n if (title && labelLeft) {\n return [titleId, labelLeftId].join(' ');\n }\n if (title && labelRight) {\n return [titleId, labelRightId].join(' ');\n }\n if (title) {\n return titleId;\n }\n };\n\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: ariaLabel,\n id: getAriaLabeledById(),\n prefer: 'label',\n });\n\n const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n return { left: `${(index / (stepsLength - 1)) * 100}%` };\n };\n\n useEffect(() => {\n if (selectedState && onChange) {\n onChange({\n target: {\n name: props.name,\n value: valueState,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>);\n }\n }, [valueState, selectedState]);\n\n const renderEmojies = (): React.ReactNode => {\n return (\n <div className={styles['slider__emoji-container']}>\n {steps?.map((step, index) => {\n return (\n step.emojiUniCode && (\n <div\n aria-hidden={true}\n key={'emoji' + index}\n className={styles['slider__emoji']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.emojiUniCode}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n const renderSteps = (): React.ReactNode => {\n return steps?.map((_step, index) => {\n return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n });\n };\n\n const renderStepLabels = (): React.ReactNode => {\n return (\n <div className={styles['slider__value-container']}>\n {steps?.map((step, index) => {\n return (\n typeof step.label !== 'undefined' && (\n <div\n aria-hidden={true}\n key={'label' + index}\n className={styles['slider__value']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.label}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <input\n aria-valuetext={getAriaValueText()}\n className={styles['sr-only-slider']}\n disabled={disabled}\n min={minValue}\n max={maxValue}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n value={valueState}\n ref={mergedRefs}\n type=\"range\"\n {...rest}\n {...ariaLabelAttributes}\n />\n <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n {title && (\n <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n {title}\n </Title>\n )}\n <div className={styles['slider__content-container']}>\n {renderEmojies()}\n {/* Slider streken er klikkbar med mus/touch /}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n [styles['slider__marker--invalid']]: invalid,\n [styles['slider__marker--focused']]: !disabled && isFocused,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\n />\n </div>\n {renderStepLabels()}\n </div>\n {(labelLeft \|\| labelRight) && (\n <span className={styles.slider__options}>\n <span id={labelLeftId}>{labelLeft}</span>\n <span id={labelRightId}>{labelRight}</span>\n </span>\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/lib/Spacer.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
 var Spacer = (props) => {
 	const { size = "s", className, testId, ref } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(spacerStyles.spacer, {
+		className: classNames(spacerStyles.spacer, {
 			[spacerStyles["spacer--4xs"]]: size === "4xs",
 			[spacerStyles["spacer--3xs"]]: size === "3xs",
 			[spacerStyles["spacer--2xs"]]: size === "2xs",

package/lib/Spacer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n /** Sets the size of the spacer. /\n size?: SpacerSizes;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n const { size = 's', className, testId, ref } = props;\n const spacerClasses = classNames(\n spacerStyles.spacer,\n {\n [spacerStyles['spacer--4xs']]: size === '4xs',\n [spacerStyles['spacer--3xs']]: size === '3xs',\n [spacerStyles['spacer--2xs']]: size === '2xs',\n [spacerStyles['spacer--xs']]: size === 'xs',\n [spacerStyles['spacer--s']]: size === 's',\n [spacerStyles['spacer--m']]: size === 'm',\n [spacerStyles['spacer--l']]: size === 'l',\n [spacerStyles['spacer--xl']]: size === 'xl',\n [spacerStyles['spacer--2xl']]: size === '2xl',\n [spacerStyles['spacer--3xl']]: size === '3xl',\n [spacerStyles['spacer--4xl']]: size === '4xl',\n [spacerStyles['spacer--5xl']]: size === '5xl',\n [spacerStyles['spacer--6xl']]: size === '6xl',\n },\n className\n );\n\n return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,~~GACpB~~,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}
1	+ {"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n /** Sets the size of the spacer. /\n size?: SpacerSizes;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n const { size = 's', className, testId, ref } = props;\n const spacerClasses = classNames(\n spacerStyles.spacer,\n {\n [spacerStyles['spacer--4xs']]: size === '4xs',\n [spacerStyles['spacer--3xs']]: size === '3xs',\n [spacerStyles['spacer--2xs']]: size === '2xs',\n [spacerStyles['spacer--xs']]: size === 'xs',\n [spacerStyles['spacer--s']]: size === 's',\n [spacerStyles['spacer--m']]: size === 'm',\n [spacerStyles['spacer--l']]: size === 'l',\n [spacerStyles['spacer--xl']]: size === 'xl',\n [spacerStyles['spacer--2xl']]: size === '2xl',\n [spacerStyles['spacer--3xl']]: size === '3xl',\n [spacerStyles['spacer--4xl']]: size === '4xl',\n [spacerStyles['spacer--5xl']]: size === '5xl',\n [spacerStyles['spacer--6xl']]: size === '6xl',\n },\n className\n );\n\n return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}

package/lib/StatusDot.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { a as IconSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
 import { t as getColor } from "./color.js";
-import { n as LazyIcon } from "./LazyIcon.js";
-import cn from "classnames";
+import { r as LazyIcon } from "./LazyIcon.js";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StatusDot/styles.module.scss";
 let StatusDotOnColor = /* @__PURE__ */ function(StatusDotOnColor$1) {
@@ -36,7 +36,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
 		size: IconSize.XXSmall,
 		onColor,
-		className: cn({
+		className: classNames({
 			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
 			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
 		})
@@ -123,8 +123,8 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 };
 var StatusDot = (props) => {
 	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;
-	const statusDotClasses = cn(styles["statusdot"], className);
-	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	const statusDotClasses = classNames(styles["statusdot"], className);
+	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
 	return /* @__PURE__ */ jsxs("span", {
 		id,
 		ref,

package/lib/StatusDot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n onwhite = FormOnColor.onwhite,\n ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n success = 'success',\n inprocess = 'inprocess',\n exception = 'exception',\n unknown = 'unknown',\n inspected = 'inspected',\n cancelled = 'cancelled',\n alert = 'alert',\n transparent = 'transparent',\n info = 'info',\n group = 'group',\n recurring = 'recurring',\n noaccess = 'noaccess',\n draft = 'draft',\n hidden = 'hidden',\n login = 'login',\n attachment = 'attachment',\n active = 'active',\n pending = 'pending',\n inactive = 'inactive',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n /** Defines the color of the icon /\n onColor?: keyof typeof StatusDotOnColor;\n /* The variant defines style formatting and what icon to use /\n variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n const iconProps = {\n color,\n size: IconSize.XXSmall,\n onColor,\n className: classNames({\n [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n }),\n };\n\n switch (variant) {\n case StatusDotVariant.success:\n return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n case StatusDotVariant.inprocess:\n return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n case StatusDotVariant.exception:\n return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n case StatusDotVariant.unknown:\n return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n case StatusDotVariant.inspected:\n return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n case StatusDotVariant.cancelled:\n return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n case StatusDotVariant.alert:\n return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n case StatusDotVariant.transparent:\n return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n case StatusDotVariant.info:\n return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n case StatusDotVariant.group:\n return <LazyIcon {...iconProps} iconName={'Group'} />;\n case StatusDotVariant.recurring:\n return <LazyIcon {...iconProps} iconName={'Change'} />;\n case StatusDotVariant.noaccess:\n return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n case StatusDotVariant.draft:\n return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n case StatusDotVariant.hidden:\n return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n case StatusDotVariant.login:\n return <LazyIcon {...iconProps} iconName={'Login'} />;\n case StatusDotVariant.attachment:\n return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n case StatusDotVariant.active:\n return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n case StatusDotVariant.pending:\n return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n case StatusDotVariant.inactive:\n return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n }\n\n return null;\n};\n\nexport interface StatusDotProps {\n /* id that is placed on the wrapper /\n id?: string;\n /* Defines the color mode, onwhite, ondark etc. /\n onColor?: keyof typeof StatusDotOnColor;\n /* Visual variants for the statusdot /\n variant?: keyof typeof StatusDotVariant;\n /* Text placed to the right of the statusdot /\n text: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n const statusDotClasses = classNames(styles['statusdot'], className);\n const labelClasses = classNames(styles['statusdot__label'], {\n [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n });\n\n return (\n <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n <StatusDotIcon onColor={onColor} variant={variant} />\n </span>\n <span className={labelClasses}>{text}</span>\n </span>\n );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport from './StatusDot';\nexport default StatusDot;\n"],"mappings":";;;;;;AAEA,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,mBAAA,aAAU,YAAY,WAAA;AACtB,oBAAA,mBAAA,YAAS,YAAY,UAAA;;;AAGvB,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,WAAA;AACA,oBAAA,iBAAA;AACA,oBAAA,UAAA;AACA,oBAAA,WAAA;AACA,oBAAA,eAAA;AACA,oBAAA,cAAA;AACA,oBAAA,WAAA;AACA,oBAAA,YAAA;AACA,oBAAA,WAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,YAAA;AACA,oBAAA,aAAA;AACA,oBAAA,cAAA;;;ACTF,IAAMA,iBAA+C,EAAE,SAAS,UAAU,aAAa;CAErF,MAAM,YAAY;EAChB,OAFY,YAAY,iBAAiB,SAAS,SAAS,QAAQ,GAAG,SAAS,QAAQ;EAGvF,MAAM,SAAS;EACf;EACA,WAAW,~~GAAW~~;IACnB,OAAO,mBAAmB,aAAa,OAAO,YAAY;IAC1D,OAAO,6BAA6B,YAAY,iBAAiB;GACnE,CAAC;EACH;AAED,SAAQ,SAAR;EACE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;EAC7D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAwB;EACpE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAkB;EAC9D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,YACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAoB;EAChE,KAAK,iBAAiB,KACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAa;EACzD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,WACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAe;EAC3D,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;;AAG/D,QAAO;;AAqBT,IAAMC,aAAuC,UAA0B;CACrE,MAAM,EAAE,IAAI,UAAU,iBAAiB,SAAS,UAAU,iBAAiB,MAAM,MAAM,WAAW,QAAQ,QAAQ;CAClH,MAAM,mBAAmB,~~GAAW~~,OAAO,cAAc,UAAU;CACnE,MAAM,eAAe,~~GAAW~~,OAAO,qBAAqB,GACzD,OAAO,+BAA+B,YAAY,iBAAiB,QACrE,CAAC;AAEF,QACE,qBAAC,QAAA;EAAS;EAAS;EAAK,WAAW;EAAkB,eAAa;EAAQ,oBAAkB,YAAY;aACtG,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAmB,eAAa,SAAS;aAC/D,oBAAC,eAAA;IAAuB;IAAkB;KAAW;IAChD,EACP,oBAAC,QAAA;GAAK,WAAW;aAAe;IAAY,CAAA;GACvC;;ACrGX,IAAA,sBDyGe"}
1	+ {"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n onwhite = FormOnColor.onwhite,\n ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n success = 'success',\n inprocess = 'inprocess',\n exception = 'exception',\n unknown = 'unknown',\n inspected = 'inspected',\n cancelled = 'cancelled',\n alert = 'alert',\n transparent = 'transparent',\n info = 'info',\n group = 'group',\n recurring = 'recurring',\n noaccess = 'noaccess',\n draft = 'draft',\n hidden = 'hidden',\n login = 'login',\n attachment = 'attachment',\n active = 'active',\n pending = 'pending',\n inactive = 'inactive',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n /** Defines the color of the icon /\n onColor?: keyof typeof StatusDotOnColor;\n /* The variant defines style formatting and what icon to use /\n variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n const iconProps = {\n color,\n size: IconSize.XXSmall,\n onColor,\n className: classNames({\n [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n }),\n };\n\n switch (variant) {\n case StatusDotVariant.success:\n return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n case StatusDotVariant.inprocess:\n return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n case StatusDotVariant.exception:\n return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n case StatusDotVariant.unknown:\n return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n case StatusDotVariant.inspected:\n return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n case StatusDotVariant.cancelled:\n return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n case StatusDotVariant.alert:\n return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n case StatusDotVariant.transparent:\n return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n case StatusDotVariant.info:\n return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n case StatusDotVariant.group:\n return <LazyIcon {...iconProps} iconName={'Group'} />;\n case StatusDotVariant.recurring:\n return <LazyIcon {...iconProps} iconName={'Change'} />;\n case StatusDotVariant.noaccess:\n return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n case StatusDotVariant.draft:\n return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n case StatusDotVariant.hidden:\n return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n case StatusDotVariant.login:\n return <LazyIcon {...iconProps} iconName={'Login'} />;\n case StatusDotVariant.attachment:\n return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n case StatusDotVariant.active:\n return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n case StatusDotVariant.pending:\n return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n case StatusDotVariant.inactive:\n return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n }\n\n return null;\n};\n\nexport interface StatusDotProps {\n /* id that is placed on the wrapper /\n id?: string;\n /* Defines the color mode, onwhite, ondark etc. /\n onColor?: keyof typeof StatusDotOnColor;\n /* Visual variants for the statusdot /\n variant?: keyof typeof StatusDotVariant;\n /* Text placed to the right of the statusdot /\n text: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n const statusDotClasses = classNames(styles['statusdot'], className);\n const labelClasses = classNames(styles['statusdot__label'], {\n [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n });\n\n return (\n <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n <StatusDotIcon onColor={onColor} variant={variant} />\n </span>\n <span className={labelClasses}>{text}</span>\n </span>\n );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport from './StatusDot';\nexport default StatusDot;\n"],"mappings":";;;;;;AAEA,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,mBAAA,aAAU,YAAY,WAAA;AACtB,oBAAA,mBAAA,YAAS,YAAY,UAAA;;;AAGvB,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,WAAA;AACA,oBAAA,iBAAA;AACA,oBAAA,UAAA;AACA,oBAAA,WAAA;AACA,oBAAA,eAAA;AACA,oBAAA,cAAA;AACA,oBAAA,WAAA;AACA,oBAAA,YAAA;AACA,oBAAA,WAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,YAAA;AACA,oBAAA,aAAA;AACA,oBAAA,cAAA;;;ACTF,IAAMA,iBAA+C,EAAE,SAAS,UAAU,aAAa;CAErF,MAAM,YAAY;EAChB,OAFY,YAAY,iBAAiB,SAAS,SAAS,QAAQ,GAAG,SAAS,QAAQ;EAGvF,MAAM,SAAS;EACf;EACA,WAAW,WAAW;IACnB,OAAO,mBAAmB,aAAa,OAAO,YAAY;IAC1D,OAAO,6BAA6B,YAAY,iBAAiB;GACnE,CAAC;EACH;AAED,SAAQ,SAAR;EACE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;EAC7D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAwB;EACpE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAkB;EAC9D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,YACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAoB;EAChE,KAAK,iBAAiB,KACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAa;EACzD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,WACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAe;EAC3D,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;;AAG/D,QAAO;;AAqBT,IAAMC,aAAuC,UAA0B;CACrE,MAAM,EAAE,IAAI,UAAU,iBAAiB,SAAS,UAAU,iBAAiB,MAAM,MAAM,WAAW,QAAQ,QAAQ;CAClH,MAAM,mBAAmB,WAAW,OAAO,cAAc,UAAU;CACnE,MAAM,eAAe,WAAW,OAAO,qBAAqB,GACzD,OAAO,+BAA+B,YAAY,iBAAiB,QACrE,CAAC;AAEF,QACE,qBAAC,QAAA;EAAS;EAAS;EAAK,WAAW;EAAkB,eAAa;EAAQ,oBAAkB,YAAY;aACtG,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAmB,eAAa,SAAS;aAC/D,oBAAC,eAAA;IAAuB;IAAkB;KAAW;IAChD,EACP,oBAAC,QAAA;GAAK,WAAW;aAAe;IAAY,CAAA;GACvC;;ACrGX,IAAA,sBDyGe"}

package/lib/StatusDotList.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
 const StatusDotList = (props) => {
 	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-testid": testId,
-		className: cn(styles["statusdotlist"], className),
+		className: classNames(styles["statusdotlist"], className),
 		children: [
 			topStatusDot,
 			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {

package/lib/StatusDotList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n /** Additional text to the bottom statusdot /\n additionalText?: string;\n /* StatusDot that is under the others and outside the stacking /\n bottomStatusDot?: React.ReactElement<StatusDotProps>;\n /* Stacking of the statusdots /\n stacking?: 'vertical' \| 'horizontal';\n /* StatusDots as children /\n children?: React.ReactNode;\n /* Adds custom classes /\n className?: string;\n /* Show a hidden for child statusdot over the other /\n hiddenForChild?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* StatusDot that is over the others and outside the stacking /\n topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n const {\n additionalText,\n children,\n className = '',\n testId,\n stacking = 'horizontal',\n hiddenForChild = false,\n topStatusDot,\n bottomStatusDot,\n } = props;\n\n return (\n <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n {topStatusDot}\n {/ @todo: legg til tekst i SOT /}\n {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n {children}\n </span>\n {bottomStatusDot}\n {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n </span>\n );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,~~GAAG~~,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}
1	+ {"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n /** Additional text to the bottom statusdot /\n additionalText?: string;\n /* StatusDot that is under the others and outside the stacking /\n bottomStatusDot?: React.ReactElement<StatusDotProps>;\n /* Stacking of the statusdots /\n stacking?: 'vertical' \| 'horizontal';\n /* StatusDots as children /\n children?: React.ReactNode;\n /* Adds custom classes /\n className?: string;\n /* Show a hidden for child statusdot over the other /\n hiddenForChild?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* StatusDot that is over the others and outside the stacking /\n topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n const {\n additionalText,\n children,\n className = '',\n testId,\n stacking = 'horizontal',\n hiddenForChild = false,\n topStatusDot,\n bottomStatusDot,\n } = props;\n\n return (\n <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n {topStatusDot}\n {/ @todo: legg til tekst i SOT /}\n {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n {children}\n </span>\n {bottomStatusDot}\n {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n </span>\n );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}

package/lib/StepButtons.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StepButtons/styles.module.scss";
 const StepButtons = (props) => {
 	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
-	const navigationClasses = cn(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
 	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
 		className: navigationClasses,
 		"data-testid": testId,
@@ -15,14 +15,14 @@ const StepButtons = (props) => {
 				className: styles.stepbuttons__buttons,
 				children: [backButton && React.cloneElement(backButton, {
 					variant: "outline",
-					wrapperClassName: cn(styles["stepbuttons__button--back"])
+					wrapperClassName: classNames(styles["stepbuttons__button--back"])
 				}), forwardButton && React.cloneElement(forwardButton, {
 					variant: "fill",
-					wrapperClassName: cn(styles["stepbuttons__button--forward"])
+					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
 				})]
 			}),
 			additionalButtons && /* @__PURE__ */ jsx("div", {
-				className: cn(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
 				children: additionalButtons
 			}),
 			cancelButton && /* @__PURE__ */ jsx("div", {

package/lib/StepButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n /** Knapp for å gå tilbake. Vises med \"outline\" variant. /\n backButton?: React.ReactElement<ButtonProps>;\n /* Knapp for å gå videre. Vises med \"fill\" variant. /\n forwardButton?: React.ReactElement<ButtonProps>;\n /* Ekstra knapper. Valgfritt utseende. /\n additionalButtons?: React.ReactElement<ButtonProps>[];\n /* Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. /\n cancelButton?: React.ReactElement<ButtonProps>;\n /* Knappene vil vises sticky nederst på skjermen. Default: false /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n if (backButton \|\| forwardButton \|\| additionalButtons \|\| cancelButton) {\n return (\n <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n {(backButton \|\| forwardButton) && (\n <div className={styles.stepbuttons__buttons}>\n {backButton &&\n React.cloneElement(backButton, {\n variant: 'outline',\n wrapperClassName: classNames(styles['stepbuttons__button--back']),\n })}\n {forwardButton &&\n React.cloneElement(forwardButton, {\n variant: 'fill',\n wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n })}\n </div>\n )}\n {additionalButtons && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n )}\n {cancelButton && (\n <div className={styles.stepbuttons__buttons}>\n {React.cloneElement(cancelButton, {\n variant: 'borderless',\n })}\n </div>\n )}\n </div>\n );\n }\n return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,~~GAAW~~,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,~~GAAW~~,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,~~GAAW~~,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,~~GAAW~~,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}
1	+ {"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n /** Knapp for å gå tilbake. Vises med \"outline\" variant. /\n backButton?: React.ReactElement<ButtonProps>;\n /* Knapp for å gå videre. Vises med \"fill\" variant. /\n forwardButton?: React.ReactElement<ButtonProps>;\n /* Ekstra knapper. Valgfritt utseende. /\n additionalButtons?: React.ReactElement<ButtonProps>[];\n /* Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. /\n cancelButton?: React.ReactElement<ButtonProps>;\n /* Knappene vil vises sticky nederst på skjermen. Default: false /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n if (backButton \|\| forwardButton \|\| additionalButtons \|\| cancelButton) {\n return (\n <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n {(backButton \|\| forwardButton) && (\n <div className={styles.stepbuttons__buttons}>\n {backButton &&\n React.cloneElement(backButton, {\n variant: 'outline',\n wrapperClassName: classNames(styles['stepbuttons__button--back']),\n })}\n {forwardButton &&\n React.cloneElement(forwardButton, {\n variant: 'fill',\n wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n })}\n </div>\n )}\n {additionalButtons && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n )}\n {cancelButton && (\n <div className={styles.stepbuttons__buttons}>\n {React.cloneElement(cancelButton, {\n variant: 'borderless',\n })}\n </div>\n )}\n </div>\n );\n }\n return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}

package/lib/StrollerMedium.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils3.js";
+import { t as ViewBoxSize } from "./utils4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var StrollerMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {

package/lib/Support2Medium.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils3.js";
+import { t as ViewBoxSize } from "./utils4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Support2Medium = ({ color, svgProperties, title }) => {
 	const palette = (() => {