@helsenorge/designsystem-react 13.5.0 → 14.0.0-beta.1

package/lib/RadioButton.js

@@ -5,23 +5,13 @@ 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 { i as renderLabelAsParent, n as getLabelText } from "./Label.js";
-import React, { useState } from "react";
-import cn from "classnames";
+import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
+import classNames from "classnames";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import radioButtonStyles from "./components/RadioButton/styles.module.scss";
-const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
-	const onCherry = onColor === "oninvalid";
-	const checked = radioId === checkedRadioId;
-	return cn({
-		[radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
-		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
-		[radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
-		[radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
-	});
-};
-const RadioButton = React.forwardRef((props, ref) => {
-	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, ...rest } = props;
+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;
@@ -31,14 +21,14 @@ const RadioButton = React.forwardRef((props, ref) => {
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = cn(radioButtonStyles["radio-button-wrapper"], {
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
 		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
 		[radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
 	});
-	const radioButtonLabelClasses = cn(radioButtonStyles["radio-button-label"], {
+	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
 		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
 		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
@@ -46,7 +36,7 @@ const RadioButton = React.forwardRef((props, ref) => {
 		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
 		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
 	}, labelClassNames);
-	const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
 		[radioButtonStyles["radio-button--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button--disabled"]]: disabled,
 		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
@@ -84,9 +74,9 @@ const RadioButton = React.forwardRef((props, ref) => {
 			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, getRadioLabelClasses as r, RadioButton as t };
+export { RadioButton_default as n, RadioButton as t };
 
 //# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends 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}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\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    ...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":";;;;;;;;;;;;AA2CA,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,GAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC;;AAGJ,MAAa,cAAc,MAAM,YAAY,OAAyB,QAAqC;CACzG,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,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;EAEjB;AAEF,YAAY,cAAc;AAE1B,IAAA,sBAAe"}
+{"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,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,WACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,yBACA,KAAA,GACA,kBAAkB,iCAClB,QACD;IACG;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe"}

package/lib/ReadLettersMedium.js

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

package/lib/ReadLettersMedium.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadLettersMedium.js","names":["ReadLettersMedium: React.FC<BaseSvgIllustrationProps>"],"sources":["../src/components/Illustrations/ReadLettersMedium.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Palette } from './ReadLetters';\nimport { BaseSvgIllustrationProps, ViewBoxSize } from '../Illustration';\n\nconst ReadLettersMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n  const palette = ((): Palette => {\n    switch (color) {\n      case 'blueberry':\n        return {\n          letter: '#E4F7F9',\n          sweater: '#188097',\n          lines: '#000',\n        };\n      case 'cherry':\n        return {\n          letter: '#ECE9E8',\n          sweater: '#F05E3D',\n          lines: '#000',\n        };\n      default:\n        return {\n          letter: '#D6D4D3',\n          sweater: '#989693',\n          lines: '#2B2C2B',\n        };\n    }\n  })();\n\n  return (\n    <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n      {title}\n      <path\n        d=\"m314.208 192.706 1.285-21.391s19.947-19.002 16.792-28.147c-3.154-9.145-17.238 8.434-17.238 8.434s-5.438-.234-9.984-9.634-3.112-9.644-8.795-11.853c-5.682-2.209-14.752-1.434-14.752-1.434l-37.919 2.751s-12.267 1.423-13.149-14.095c-.881-15.517 5.746-23.685 20.446-26.924 14.7-3.23 60.382-7.021 70.143 0 9.751 7.02 10.961 18.704 10.961 18.704s11.832 2.538 10.685 20.361c-1.147 17.822-6.128 43.069-28.475 63.239v-.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"m246.167 209.499 85.013 3.855-1.582 15.263s27.891 5.321 39.468 36.304c11.577 30.982 2.188 52.554-5.916 79.585l8.126 81.37h-169.24l4.291-39.087 47.838-.382-2.931-15.496-4.811-3.899 2.166-8.443-2.166-6.607 4.726 1.36 7.977-17.515-7.871-8.444-12.714-17.567-4.354-57.228-19.936.499s5.045-20.966 31.916-29.92l.022-13.659-.022.011Z\"\n        fill={palette.sweater}\n      />\n      <path\n        d=\"m140.21 254.925 26.202-.658 4.695-6.076 7.775 5.768 55.273-1.381 5.417 70.122s-12.905-11.609-20.319-12.289c-7.413-.669-12.894 6.16-10.749 14.19 2.157 8.03 16.294 23.93 38.142 26.351l1.635 8.083-2.857 7.966 5.778 3.898 3.845 15.879-84.014-1.36-11.96-36.367-6.319-.234-14.17-58.608 6.055-7.626-4.45-27.69.021.032Z\"\n        fill=\"#fff\"\n      />\n      <path\n        d=\"m171.107 248.19 55.836 41.391 3.494 26.267s-11.906-11.768-20.392-1.253c-8.487 10.515 9.134 24.768 12.947 27.296 3.813 2.528 13.744 6.947 13.744 6.947v3.483l-83.972-3.494-14.169-58.608 32.501-42.039.011.01Z\"\n        fill={palette.letter}\n      />\n      <path\n        d=\"M273.071 199.779c-10.493 0-21.922-2.751-28.677-20.881-6.638-17.823-3.07-46.49-2.911-47.701a1.6 1.6 0 0 1 1.785-1.38 1.606 1.606 0 0 1 1.381 1.784c-.032.287-3.622 29.113 2.74 46.192 5.905 15.836 14.87 18.959 26.585 18.8 11.439-.17 29.846-16.092 30.037-16.262a1.598 1.598 0 0 1 2.093 2.411c-.786.691-19.48 16.856-32.077 17.037h-.956Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M265.148 211.95h-.075a1.593 1.593 0 0 1-1.519-1.667l.542-11.907a1.587 1.587 0 0 1 1.668-1.519 1.593 1.593 0 0 1 1.518 1.668l-.541 11.906a1.598 1.598 0 0 1-1.593 1.519Zm47.902 1.542h-.096a1.594 1.594 0 0 1-1.497-1.689l.987-16.421v-.063l1.455-24.111c.022-.403.202-.786.5-1.062 7.828-7.339 19.277-20.849 16.707-25.831-.52-.998-1.105-1.189-1.561-1.242-3.495-.393-10.494 6.202-14.084 10.451a1.584 1.584 0 0 1-1.285.563c-.319-.011-7.86-.467-11.429-14.307-1.625-6.32-7.244-10.558-13.648-10.313-10.452.393-24.567 1.115-32.48 2.326l-.435.063c-8.359 1.275-17.016 2.603-22.359-2.283-3.834-3.505-5.427-9.708-4.875-18.97 1.413-23.42 32.629-24.514 53.298-25.246 1.806-.064 3.526-.128 5.141-.192 39.787-1.784 43.6 11.206 46.064 23.133 2.571.532 4.738 1.965 6.437 4.26 5.799 7.806 4.684 23.366 3.282 30.504-4.78 24.344-15.943 38.247-23.325 47.445-1.656 2.061-3.101 3.866-4.248 5.502l-.967 16.006a1.594 1.594 0 0 1-1.593 1.498l.011-.021Zm3.993-41.455-1.093 18.247c.456-.573.934-1.168 1.423-1.774 7.19-8.953 18.056-22.485 22.676-46.064 1.466-7.446 2.018-21.614-2.719-27.987-1.423-1.912-3.186-2.953-5.374-3.165a1.58 1.58 0 0 1-1.402-1.264c-2.443-12.023-4.737-23.388-43.016-21.678-1.625.074-3.357.138-5.173.202-19.511.69-48.985 1.72-50.228 22.251-.499 8.242.765 13.617 3.845 16.431 4.227 3.856 11.758 2.709 19.734 1.487l.435-.063c8.062-1.233 22.305-1.966 32.841-2.358 7.892-.309 14.849 4.928 16.856 12.703 2.316 8.975 6.256 11.205 7.828 11.747 2.465-2.794 10.622-11.461 16.24-10.823 1.222.138 2.91.764 4.036 2.942 4.281 8.295-13.212 25.65-16.898 29.176l-.011-.01Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M273.995 172.74h-.074l-9.952-.457a1.629 1.629 0 0 1-1.158-.574 1.598 1.598 0 0 1-.351-1.242l3.198-22.273a1.594 1.594 0 0 1 3.154.457l-2.953 20.531 8.2.371a1.593 1.593 0 0 1-.074 3.187h.01Zm2.985 10.384a1.596 1.596 0 0 1-1.583-1.466 1.586 1.586 0 0 1 1.456-1.71c.329-.032 8.136-.786 13.871-8.901a1.587 1.587 0 0 1 2.22-.382c.722.51.892 1.498.382 2.22-6.638 9.368-15.826 10.207-16.219 10.239h-.127Zm49.634 225.055c-3.803 0-7.606-.871-11.1-2.592l-71.163-36.389a1.603 1.603 0 0 1-.722-2.081l17.812-38.97c.181-.403.521-.711.945-.85a1.634 1.634 0 0 1 1.264.107l48.115 26.043 19.628-62.496a1.591 1.591 0 0 1 1.997-1.04 1.59 1.59 0 0 1 1.041 1.996l-20.202 64.344a1.57 1.57 0 0 1-.924.999 1.61 1.61 0 0 1-1.36-.075l-48.316-26.16-16.463 36.027 69.782 35.688a21.819 21.819 0 0 0 18.141.542 21.859 21.859 0 0 0 12.321-13.362c7.604-23.176 17.546-54.53 21.752-72.299 6.947-29.347 4.461-45.714-10.228-67.36-9.751-14.371-29.581-20.053-29.782-20.117a1.605 1.605 0 0 1-1.158-1.699l1.413-13.585-81.604-3.707.394 11.843a1.582 1.582 0 0 1-1.36 1.625c-.053 0-5.492.881-12.013 4.886-6.001 3.685-14.19 10.855-19.129 24.099a1.588 1.588 0 0 1-2.05.935 1.588 1.588 0 0 1-.934-2.05c8.815-23.643 27.031-29.516 32.257-30.749l-.415-12.224c-.01-.447.159-.871.467-1.19a1.602 1.602 0 0 1 1.19-.457l85.013 3.856c.435.021.85.223 1.136.552.287.329.426.765.383 1.2l-1.455 13.957c4.758 1.55 21.242 7.689 30.27 20.998 15.093 22.251 17.791 39.883 10.686 69.888-4.238 17.876-14.212 49.325-21.828 72.564a25.044 25.044 0 0 1-14.115 15.306 25.084 25.084 0 0 1-9.708 1.954l.022.043Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M371.255 427.469a1.584 1.584 0 0 1-1.583-1.445l-7.562-82.336a1.587 1.587 0 0 1 1.444-1.731 1.581 1.581 0 0 1 1.731 1.444l7.563 82.336a1.589 1.589 0 0 1-1.445 1.732h-.148Zm-169.229-.001h-.181a1.597 1.597 0 0 1-1.413-1.753l4.291-39.086a1.595 1.595 0 0 1 1.753-1.412 1.595 1.595 0 0 1 1.413 1.752l-4.292 39.086a1.589 1.589 0 0 1-1.582 1.424l.011-.011Zm52.5-278.5a3.028 3.028 0 1 0 0-6.055 3.028 3.028 0 0 0 0 6.055Zm30.707 1.391a3.026 3.026 0 0 0 3.026-3.027 3.026 3.026 0 1 0-6.053 0 3.027 3.027 0 0 0 3.027 3.027Zm-33.85 205.234c-.489 0-.967-.223-1.275-.627-.202-.202-2.273-2.007-12.3-4.355-8.826-2.06-24.439-11.11-29.59-22.081-2.284-4.854-2.327-9.549-.128-13.925 1.699-3.388 4.206-5.364 7.456-5.852 7.573-1.137 17.26 6.5 22.114 10.908l-.744-9.729a1.597 1.597 0 0 1 1.01-1.604 1.58 1.58 0 0 1 1.826.499c.053.074 5.534 7.063 14.01 19.437 2.103 3.08 6.309 6.681 6.351 6.713.669.573.755 1.572.181 2.241a1.585 1.585 0 0 1-2.241.18c-.181-.159-4.567-3.908-6.915-7.339-4.546-6.628-8.21-11.694-10.642-14.965l.648 8.486a1.582 1.582 0 0 1-.946 1.572 1.612 1.612 0 0 1-1.805-.35c-3.781-3.962-15.178-13.989-22.401-12.905-2.198.329-3.855 1.678-5.077 4.121-1.731 3.462-1.678 7.222.171 11.152 4.545 9.687 19.033 18.364 27.424 20.329 11.311 2.645 13.701 4.844 14.2 5.661a1.589 1.589 0 0 1-.531 2.188 1.55 1.55 0 0 1-.828.234l.032.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M236.736 353.567h-.064l-83.972-3.133a1.596 1.596 0 0 1-1.487-1.221l-14.168-58.609c-.117-.467 0-.966.287-1.348l32.5-42.039a1.597 1.597 0 0 1 2.21-.309l54.933 40.744c.329.244.552.605.627 1.009l4.588 27.052a1.591 1.591 0 0 1-1.307 1.838 1.597 1.597 0 0 1-1.837-1.307l-4.482-26.415-53.16-39.426-31.077 40.201 13.701 56.686 80.807 3.017-.266-1.551a1.59 1.59 0 0 1 1.307-1.837 1.59 1.59 0 0 1 1.837 1.306l.595 3.484c.085.478-.053.956-.372 1.317a1.59 1.59 0 0 1-1.2.541Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M148.59 293.204a1.592 1.592 0 0 1-1.594-1.593c0-.882.712-1.593 1.594-1.593l65.151-.17a1.59 1.59 0 0 1 1.593 1.593c0 .881-.712 1.593-1.593 1.593l-65.151.17Zm31.896 14.765h-.022l-22.931-.361a1.593 1.593 0 0 1 .021-3.186h.021l22.932.361a1.594 1.594 0 0 1-.021 3.186Zm-4.27 7.627-16.803-.085a1.585 1.585 0 0 1-1.583-1.604c0-.882.712-1.583 1.594-1.583l16.802.085c.882 0 1.594.722 1.583 1.604 0 .882-.711 1.583-1.593 1.583Zm-31.726-31.4a1.588 1.588 0 0 1-1.572-1.349l-4.291-27.69a1.557 1.557 0 0 1 .351-1.264c.297-.35.722-.562 1.178-.573l26.203-.648c.903 0 1.614.669 1.636 1.551a1.591 1.591 0 0 1-1.551 1.635l-24.397.606 4.015 25.894a1.582 1.582 0 0 1-1.328 1.817c-.085.01-.159.021-.244.021Zm110.567 103.92h-.021l-84.471-1.359a1.608 1.608 0 0 1-1.497-1.105l-11.472-36.048a1.594 1.594 0 0 1 1.031-1.997 1.584 1.584 0 0 1 1.996 1.03l11.121 34.955 81.263 1.306-3.356-13.606a1.598 1.598 0 0 1 3.102-.764l3.844 15.613c.117.478 0 .988-.297 1.37a1.586 1.586 0 0 1-1.243.605Zm-6.5-26.362c-.711 0-1.37-.489-1.55-1.211l-2.167-8.773a1.596 1.596 0 0 1 1.168-1.933 1.591 1.591 0 0 1 1.933 1.168l2.167 8.773a1.597 1.597 0 0 1-1.168 1.933 1.563 1.563 0 0 1-.383.043Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M239.571 325.29a1.588 1.588 0 0 1-1.582-1.476l-5.3-69.612-53.765 1.338a1.579 1.579 0 0 1-1.636-1.551 1.591 1.591 0 0 1 1.551-1.635l55.273-1.381c.828-.011 1.562.626 1.625 1.476l5.417 71.12a1.594 1.594 0 0 1-1.466 1.71h-.127l.01.011Zm51.216-178.384a1.55 1.55 0 0 1-.892-.276c-4.514-3.059-9.028-.542-9.219-.435a1.598 1.598 0 0 1-2.178-.585 1.59 1.59 0 0 1 .574-2.166c.255-.149 6.405-3.654 12.607.552a1.59 1.59 0 0 1 .425 2.209 1.582 1.582 0 0 1-1.317.701Zm-30.738-.625a1.55 1.55 0 0 1-.892-.276c-4.514-3.059-9.028-.542-9.219-.435a1.598 1.598 0 0 1-2.178-.585 1.59 1.59 0 0 1 .574-2.166c.255-.149 6.405-3.654 12.607.552a1.58 1.58 0 0 1 .425 2.209 1.582 1.582 0 0 1-1.317.701Z\"\n        fill={palette.lines}\n      />\n    </svg>\n  );\n};\n\nexport default ReadLettersMedium;\n"],"mappings":";;;AAKA,IAAMA,qBAAyD,EAAE,OAAO,eAAe,YAAY;CACjG,MAAM,iBAA0B;AAC9B,UAAQ,OAAR;GACE,KAAK,YACH,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;GACH,KAAK,SACH,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;GACH,QACE,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;;KAEH;AAEJ,QACE,qBAAC,OAAA;EAAI,GAAI;EAAe,SAAS,YAAY;;GAC1C;GACD,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;;GACE;;AAIV,IAAA,4BAAe"}
+{"version":3,"file":"ReadLettersMedium.js","names":["ReadLettersMedium: React.FC<BaseSvgIllustrationProps>"],"sources":["../src/components/Illustrations/ReadLettersMedium.tsx"],"sourcesContent":["import type { Palette } from './ReadLetters';\nimport type { BaseSvgIllustrationProps } from '../Illustration';\n\nimport { ViewBoxSize } from '../Illustration/utils';\n\nconst ReadLettersMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n  const palette = ((): Palette => {\n    switch (color) {\n      case 'blueberry':\n        return {\n          letter: '#E4F7F9',\n          sweater: '#188097',\n          lines: '#000',\n        };\n      case 'cherry':\n        return {\n          letter: '#ECE9E8',\n          sweater: '#F05E3D',\n          lines: '#000',\n        };\n      default:\n        return {\n          letter: '#D6D4D3',\n          sweater: '#989693',\n          lines: '#2B2C2B',\n        };\n    }\n  })();\n\n  return (\n    <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n      {title}\n      <path\n        d=\"m314.208 192.706 1.285-21.391s19.947-19.002 16.792-28.147c-3.154-9.145-17.238 8.434-17.238 8.434s-5.438-.234-9.984-9.634-3.112-9.644-8.795-11.853c-5.682-2.209-14.752-1.434-14.752-1.434l-37.919 2.751s-12.267 1.423-13.149-14.095c-.881-15.517 5.746-23.685 20.446-26.924 14.7-3.23 60.382-7.021 70.143 0 9.751 7.02 10.961 18.704 10.961 18.704s11.832 2.538 10.685 20.361c-1.147 17.822-6.128 43.069-28.475 63.239v-.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"m246.167 209.499 85.013 3.855-1.582 15.263s27.891 5.321 39.468 36.304c11.577 30.982 2.188 52.554-5.916 79.585l8.126 81.37h-169.24l4.291-39.087 47.838-.382-2.931-15.496-4.811-3.899 2.166-8.443-2.166-6.607 4.726 1.36 7.977-17.515-7.871-8.444-12.714-17.567-4.354-57.228-19.936.499s5.045-20.966 31.916-29.92l.022-13.659-.022.011Z\"\n        fill={palette.sweater}\n      />\n      <path\n        d=\"m140.21 254.925 26.202-.658 4.695-6.076 7.775 5.768 55.273-1.381 5.417 70.122s-12.905-11.609-20.319-12.289c-7.413-.669-12.894 6.16-10.749 14.19 2.157 8.03 16.294 23.93 38.142 26.351l1.635 8.083-2.857 7.966 5.778 3.898 3.845 15.879-84.014-1.36-11.96-36.367-6.319-.234-14.17-58.608 6.055-7.626-4.45-27.69.021.032Z\"\n        fill=\"#fff\"\n      />\n      <path\n        d=\"m171.107 248.19 55.836 41.391 3.494 26.267s-11.906-11.768-20.392-1.253c-8.487 10.515 9.134 24.768 12.947 27.296 3.813 2.528 13.744 6.947 13.744 6.947v3.483l-83.972-3.494-14.169-58.608 32.501-42.039.011.01Z\"\n        fill={palette.letter}\n      />\n      <path\n        d=\"M273.071 199.779c-10.493 0-21.922-2.751-28.677-20.881-6.638-17.823-3.07-46.49-2.911-47.701a1.6 1.6 0 0 1 1.785-1.38 1.606 1.606 0 0 1 1.381 1.784c-.032.287-3.622 29.113 2.74 46.192 5.905 15.836 14.87 18.959 26.585 18.8 11.439-.17 29.846-16.092 30.037-16.262a1.598 1.598 0 0 1 2.093 2.411c-.786.691-19.48 16.856-32.077 17.037h-.956Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M265.148 211.95h-.075a1.593 1.593 0 0 1-1.519-1.667l.542-11.907a1.587 1.587 0 0 1 1.668-1.519 1.593 1.593 0 0 1 1.518 1.668l-.541 11.906a1.598 1.598 0 0 1-1.593 1.519Zm47.902 1.542h-.096a1.594 1.594 0 0 1-1.497-1.689l.987-16.421v-.063l1.455-24.111c.022-.403.202-.786.5-1.062 7.828-7.339 19.277-20.849 16.707-25.831-.52-.998-1.105-1.189-1.561-1.242-3.495-.393-10.494 6.202-14.084 10.451a1.584 1.584 0 0 1-1.285.563c-.319-.011-7.86-.467-11.429-14.307-1.625-6.32-7.244-10.558-13.648-10.313-10.452.393-24.567 1.115-32.48 2.326l-.435.063c-8.359 1.275-17.016 2.603-22.359-2.283-3.834-3.505-5.427-9.708-4.875-18.97 1.413-23.42 32.629-24.514 53.298-25.246 1.806-.064 3.526-.128 5.141-.192 39.787-1.784 43.6 11.206 46.064 23.133 2.571.532 4.738 1.965 6.437 4.26 5.799 7.806 4.684 23.366 3.282 30.504-4.78 24.344-15.943 38.247-23.325 47.445-1.656 2.061-3.101 3.866-4.248 5.502l-.967 16.006a1.594 1.594 0 0 1-1.593 1.498l.011-.021Zm3.993-41.455-1.093 18.247c.456-.573.934-1.168 1.423-1.774 7.19-8.953 18.056-22.485 22.676-46.064 1.466-7.446 2.018-21.614-2.719-27.987-1.423-1.912-3.186-2.953-5.374-3.165a1.58 1.58 0 0 1-1.402-1.264c-2.443-12.023-4.737-23.388-43.016-21.678-1.625.074-3.357.138-5.173.202-19.511.69-48.985 1.72-50.228 22.251-.499 8.242.765 13.617 3.845 16.431 4.227 3.856 11.758 2.709 19.734 1.487l.435-.063c8.062-1.233 22.305-1.966 32.841-2.358 7.892-.309 14.849 4.928 16.856 12.703 2.316 8.975 6.256 11.205 7.828 11.747 2.465-2.794 10.622-11.461 16.24-10.823 1.222.138 2.91.764 4.036 2.942 4.281 8.295-13.212 25.65-16.898 29.176l-.011-.01Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M273.995 172.74h-.074l-9.952-.457a1.629 1.629 0 0 1-1.158-.574 1.598 1.598 0 0 1-.351-1.242l3.198-22.273a1.594 1.594 0 0 1 3.154.457l-2.953 20.531 8.2.371a1.593 1.593 0 0 1-.074 3.187h.01Zm2.985 10.384a1.596 1.596 0 0 1-1.583-1.466 1.586 1.586 0 0 1 1.456-1.71c.329-.032 8.136-.786 13.871-8.901a1.587 1.587 0 0 1 2.22-.382c.722.51.892 1.498.382 2.22-6.638 9.368-15.826 10.207-16.219 10.239h-.127Zm49.634 225.055c-3.803 0-7.606-.871-11.1-2.592l-71.163-36.389a1.603 1.603 0 0 1-.722-2.081l17.812-38.97c.181-.403.521-.711.945-.85a1.634 1.634 0 0 1 1.264.107l48.115 26.043 19.628-62.496a1.591 1.591 0 0 1 1.997-1.04 1.59 1.59 0 0 1 1.041 1.996l-20.202 64.344a1.57 1.57 0 0 1-.924.999 1.61 1.61 0 0 1-1.36-.075l-48.316-26.16-16.463 36.027 69.782 35.688a21.819 21.819 0 0 0 18.141.542 21.859 21.859 0 0 0 12.321-13.362c7.604-23.176 17.546-54.53 21.752-72.299 6.947-29.347 4.461-45.714-10.228-67.36-9.751-14.371-29.581-20.053-29.782-20.117a1.605 1.605 0 0 1-1.158-1.699l1.413-13.585-81.604-3.707.394 11.843a1.582 1.582 0 0 1-1.36 1.625c-.053 0-5.492.881-12.013 4.886-6.001 3.685-14.19 10.855-19.129 24.099a1.588 1.588 0 0 1-2.05.935 1.588 1.588 0 0 1-.934-2.05c8.815-23.643 27.031-29.516 32.257-30.749l-.415-12.224c-.01-.447.159-.871.467-1.19a1.602 1.602 0 0 1 1.19-.457l85.013 3.856c.435.021.85.223 1.136.552.287.329.426.765.383 1.2l-1.455 13.957c4.758 1.55 21.242 7.689 30.27 20.998 15.093 22.251 17.791 39.883 10.686 69.888-4.238 17.876-14.212 49.325-21.828 72.564a25.044 25.044 0 0 1-14.115 15.306 25.084 25.084 0 0 1-9.708 1.954l.022.043Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M371.255 427.469a1.584 1.584 0 0 1-1.583-1.445l-7.562-82.336a1.587 1.587 0 0 1 1.444-1.731 1.581 1.581 0 0 1 1.731 1.444l7.563 82.336a1.589 1.589 0 0 1-1.445 1.732h-.148Zm-169.229-.001h-.181a1.597 1.597 0 0 1-1.413-1.753l4.291-39.086a1.595 1.595 0 0 1 1.753-1.412 1.595 1.595 0 0 1 1.413 1.752l-4.292 39.086a1.589 1.589 0 0 1-1.582 1.424l.011-.011Zm52.5-278.5a3.028 3.028 0 1 0 0-6.055 3.028 3.028 0 0 0 0 6.055Zm30.707 1.391a3.026 3.026 0 0 0 3.026-3.027 3.026 3.026 0 1 0-6.053 0 3.027 3.027 0 0 0 3.027 3.027Zm-33.85 205.234c-.489 0-.967-.223-1.275-.627-.202-.202-2.273-2.007-12.3-4.355-8.826-2.06-24.439-11.11-29.59-22.081-2.284-4.854-2.327-9.549-.128-13.925 1.699-3.388 4.206-5.364 7.456-5.852 7.573-1.137 17.26 6.5 22.114 10.908l-.744-9.729a1.597 1.597 0 0 1 1.01-1.604 1.58 1.58 0 0 1 1.826.499c.053.074 5.534 7.063 14.01 19.437 2.103 3.08 6.309 6.681 6.351 6.713.669.573.755 1.572.181 2.241a1.585 1.585 0 0 1-2.241.18c-.181-.159-4.567-3.908-6.915-7.339-4.546-6.628-8.21-11.694-10.642-14.965l.648 8.486a1.582 1.582 0 0 1-.946 1.572 1.612 1.612 0 0 1-1.805-.35c-3.781-3.962-15.178-13.989-22.401-12.905-2.198.329-3.855 1.678-5.077 4.121-1.731 3.462-1.678 7.222.171 11.152 4.545 9.687 19.033 18.364 27.424 20.329 11.311 2.645 13.701 4.844 14.2 5.661a1.589 1.589 0 0 1-.531 2.188 1.55 1.55 0 0 1-.828.234l.032.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M236.736 353.567h-.064l-83.972-3.133a1.596 1.596 0 0 1-1.487-1.221l-14.168-58.609c-.117-.467 0-.966.287-1.348l32.5-42.039a1.597 1.597 0 0 1 2.21-.309l54.933 40.744c.329.244.552.605.627 1.009l4.588 27.052a1.591 1.591 0 0 1-1.307 1.838 1.597 1.597 0 0 1-1.837-1.307l-4.482-26.415-53.16-39.426-31.077 40.201 13.701 56.686 80.807 3.017-.266-1.551a1.59 1.59 0 0 1 1.307-1.837 1.59 1.59 0 0 1 1.837 1.306l.595 3.484c.085.478-.053.956-.372 1.317a1.59 1.59 0 0 1-1.2.541Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M148.59 293.204a1.592 1.592 0 0 1-1.594-1.593c0-.882.712-1.593 1.594-1.593l65.151-.17a1.59 1.59 0 0 1 1.593 1.593c0 .881-.712 1.593-1.593 1.593l-65.151.17Zm31.896 14.765h-.022l-22.931-.361a1.593 1.593 0 0 1 .021-3.186h.021l22.932.361a1.594 1.594 0 0 1-.021 3.186Zm-4.27 7.627-16.803-.085a1.585 1.585 0 0 1-1.583-1.604c0-.882.712-1.583 1.594-1.583l16.802.085c.882 0 1.594.722 1.583 1.604 0 .882-.711 1.583-1.593 1.583Zm-31.726-31.4a1.588 1.588 0 0 1-1.572-1.349l-4.291-27.69a1.557 1.557 0 0 1 .351-1.264c.297-.35.722-.562 1.178-.573l26.203-.648c.903 0 1.614.669 1.636 1.551a1.591 1.591 0 0 1-1.551 1.635l-24.397.606 4.015 25.894a1.582 1.582 0 0 1-1.328 1.817c-.085.01-.159.021-.244.021Zm110.567 103.92h-.021l-84.471-1.359a1.608 1.608 0 0 1-1.497-1.105l-11.472-36.048a1.594 1.594 0 0 1 1.031-1.997 1.584 1.584 0 0 1 1.996 1.03l11.121 34.955 81.263 1.306-3.356-13.606a1.598 1.598 0 0 1 3.102-.764l3.844 15.613c.117.478 0 .988-.297 1.37a1.586 1.586 0 0 1-1.243.605Zm-6.5-26.362c-.711 0-1.37-.489-1.55-1.211l-2.167-8.773a1.596 1.596 0 0 1 1.168-1.933 1.591 1.591 0 0 1 1.933 1.168l2.167 8.773a1.597 1.597 0 0 1-1.168 1.933 1.563 1.563 0 0 1-.383.043Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M239.571 325.29a1.588 1.588 0 0 1-1.582-1.476l-5.3-69.612-53.765 1.338a1.579 1.579 0 0 1-1.636-1.551 1.591 1.591 0 0 1 1.551-1.635l55.273-1.381c.828-.011 1.562.626 1.625 1.476l5.417 71.12a1.594 1.594 0 0 1-1.466 1.71h-.127l.01.011Zm51.216-178.384a1.55 1.55 0 0 1-.892-.276c-4.514-3.059-9.028-.542-9.219-.435a1.598 1.598 0 0 1-2.178-.585 1.59 1.59 0 0 1 .574-2.166c.255-.149 6.405-3.654 12.607.552a1.59 1.59 0 0 1 .425 2.209 1.582 1.582 0 0 1-1.317.701Zm-30.738-.625a1.55 1.55 0 0 1-.892-.276c-4.514-3.059-9.028-.542-9.219-.435a1.598 1.598 0 0 1-2.178-.585 1.59 1.59 0 0 1 .574-2.166c.255-.149 6.405-3.654 12.607.552a1.58 1.58 0 0 1 .425 2.209 1.582 1.582 0 0 1-1.317.701Z\"\n        fill={palette.lines}\n      />\n    </svg>\n  );\n};\n\nexport default ReadLettersMedium;\n"],"mappings":";;AAKA,IAAMA,qBAAyD,EAAE,OAAO,eAAe,YAAY;CACjG,MAAM,iBAA0B;AAC9B,UAAQ,OAAR;GACE,KAAK,YACH,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;GACH,KAAK,SACH,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;GACH,QACE,QAAO;IACL,QAAQ;IACR,SAAS;IACT,OAAO;IACR;;KAEH;AAEJ,QACE,qBAAC,OAAA;EAAI,GAAI;EAAe,SAAS,YAAY;;GAC1C;GACD,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;;GACE;;AAIV,IAAA,4BAAe"}

package/lib/Select.js

@@ -4,10 +4,9 @@ import { t as Icon_default } from "./Icon.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 renderLabel } from "./Label.js";
+import { n as renderLabel } from "./utils2.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
-import React from "react";
-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) => {
@@ -16,25 +15,25 @@ var getSelectMaxWidth = (characters) => {
 var getIconColor = (invalid, disabled) => {
 	return disabled ? getColor("neutral", 500) : getColor(invalid ? "cherry" : "blueberry", 600);
 };
-const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
-	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ...rest } = props;
+const Select = (props) => {
+	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ref, ...rest } = props;
 	const selectId = useIdWithFallback(selectIdProp);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onBlueberry = onColor === "onblueberry";
 	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,
@@ -72,7 +71,7 @@ const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
 			})]
 		})
 	});
-});
+};
 var Select_default$1 = Select;
 export { Select as n, Select_default$1 as t };
 

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends 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}\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.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\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    ...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":";;;;;;;;;;;;AAmDA,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,MAAa,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;CACxH,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,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;EAEjB;AC9IF,IAAA,mBDgJe"}
+{"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

@@ -1,33 +1,12 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
+import classNames from "classnames";
 import React, { useId } from "react";
-import cn from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
-var SingleSelectContext = React.createContext(null);
-const SingleSelect = ({ name, disabled, defaultValue, onValueChange, children }) => {
-	const [selected, setSelected] = React.useState(defaultValue);
-	const context = React.useMemo(() => ({
-		name,
-		disabled,
-		value: selected,
-		onValueChange: (v, e) => {
-			setSelected(v);
-			onValueChange?.(v, e);
-		}
-	}), [
-		name,
-		disabled,
-		selected,
-		onValueChange
-	]);
-	return /* @__PURE__ */ jsx(SingleSelectContext.Provider, {
-		value: context,
-		children
-	});
-};
+const SingleSelectContext = React.createContext(null);
 const useSingleSelect = () => React.useContext(SingleSelectContext);
-const SingleSelectItem = React.forwardRef((props, ref) => {
-	const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...rest } = props;
+const SingleSelectItem = (props) => {
+	const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;
 	const generatedId = useId();
 	const inputId = props.inputId ?? generatedId;
 	const group = useSingleSelect();
@@ -42,8 +21,8 @@ const SingleSelectItem = React.forwardRef((props, ref) => {
 		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
 	});
@@ -57,7 +36,7 @@ const SingleSelectItem = React.forwardRef((props, ref) => {
 		"aria-hidden": true
 	}), /* @__PURE__ */ jsx("span", { children: text })] });
 	const Component = asChild ? AsChildSlot_default : "button";
-	const childWithInjectedContent = childElement ? React.cloneElement(childElement, childElement.props, content) : null;
+	const childWithInjectedContent = childElement ? React.cloneElement(childElement, void 0, content) : null;
 	const componentProps = asChild ? {
 		ref: asChildSlotRef,
 		elementRef: ref,
@@ -91,9 +70,9 @@ const SingleSelectItem = React.forwardRef((props, ref) => {
 		className: styles["single-select-item"],
 		children: /* @__PURE__ */ jsx(Component, { ...componentProps })
 	});
-});
+};
 SingleSelectItem.displayName = "Dropdown.SingleSelectItem";
 var SingleSelectItem_default = SingleSelectItem;
-export { SingleSelectItem_default as n, SingleSelect as r, SingleSelectItem as t };
+export { SingleSelectItem_default as n, SingleSelectContext as r, SingleSelectItem as t };
 
 //# sourceMappingURL=SingleSelectItem.js.map

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":["SingleSelect: React.FC<SingleSelectProps>"],"sources":["../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\ntype SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nconst SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSingleSelect } from './SingleSelect';\nimport AsChildSlot, { AsChildSlotHandle } 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}\n\nexport const SingleSelectItem = React.forwardRef((props: SingleSelectItemProps, ref: React.Ref<HTMLElement>) => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...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, childElement.props, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref as React.Ref<HTMLElement>,\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 as React.Ref<HTMLButtonElement>,\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":";;;;;AAUA,IAAM,sBAAsB,MAAM,cAA8C,KAAK;AAUrF,MAAaA,gBAA6C,EAAE,MAAM,UAAU,cAAc,eAAe,eAAe;CACtH,MAAM,CAAC,UAAU,eAAe,MAAM,SAA6B,aAAa;CAEhF,MAAM,UAAU,MAAM,eACb;EACL;EACA;EACA,OAAO;EACP,gBAAgB,GAAG,MAAY;AAC7B,eAAY,EAAE;AACd,mBAAgB,GAAG,EAAE;;EAExB,GACD;EAAC;EAAM;EAAU;EAAU;EAAc,CAC1C;AAED,QAAO,oBAAC,oBAAoB,UAAA;EAAS,OAAO;EAAU;GAAwC;;AAGhG,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;ACX1G,MAAa,mBAAmB,MAAM,YAAY,OAA8B,QAAgC;CAC9G,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,GAAG,SAAS;CAE/F,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,aAAa,OAAO,QAAQ,GAAG;CAEhH,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;EAER;AAEF,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}
+{"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

@@ -6,8 +6,8 @@ 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 React, { useEffect, useId, useRef, useState } from "react";
-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";
 var useSafeNumberValue = (initial, min, max) => {
@@ -22,8 +22,8 @@ var useSafeNumberValue = (initial, min, max) => {
 	}, [min, max]);
 	return [value, setSafeValue];
 };
-const Slider = React.forwardRef((props, ref) => {
-	const { title, ariaLabel, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, labelLeft, labelRight, disabled = false, onChange, steps, step = 1, minValue = 0, maxValue = steps ? steps.length - 1 : 100, selected = true, testId, value, ...rest } = props;
+const Slider = (props) => {
+	const { title, ariaLabel, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, labelLeft, labelRight, disabled = false, onChange, steps, step = 1, minValue = 0, maxValue = steps ? steps.length - 1 : 100, selected = true, testId, value, ref, ...rest } = props;
 	const [isMoving, setIsMoving] = useState(false);
 	const [selectedState, setSelectedState] = useState(typeof value === "undefined" ? selected : true);
 	const [valueState, setValueState] = useSafeNumberValue(typeof value === "undefined" ? (maxValue - minValue) / 2 + minValue : value, minValue, maxValue);
@@ -230,13 +230,13 @@ const Slider = React.forwardRef((props, ref) => {
 						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,
@@ -261,7 +261,7 @@ const Slider = React.forwardRef((props, ref) => {
 			]
 		})]
 	});
-});
+};
 Slider.displayName = "Slider";
 var Slider_default$1 = Slider;
 export { Slider as n, Slider_default$1 as t };

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["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 React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } 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,\n    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}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\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    ...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":";;;;;;;;;;;;AAeA,IAAM,sBAAsB,SAAiB,KAAa,QAAmD;CAC3G,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;CAE3C,MAAM,gBAAgB,aAA2B;AAC/C,MAAI,WAAW,IACb,UAAS,IAAI;WACJ,WAAW,IACpB,UAAS,IAAI;MAEb,UAAS,SAAS;;AAItB,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,KAAK,IAAI,CAAC;AAEd,QAAO,CAAC,OAAO,aAAa;;AA2C9B,MAAa,SAAS,MAAM,YAAY,OAAoB,QAAqC;CAC/F,MAAM,EACJ,OACA,WACA,OACA,WACA,aAAa,iBACb,uBACA,WACA,YACA,WAAW,OACX,UACA,OACA,OAAO,GACP,WAAW,GACX,WAAW,QAAQ,MAAM,SAAS,IAAI,KACtC,WAAW,MACX,QACA,OACA,GAAG,SACD;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,eAAe,oBAAoB,SAAS,OAAO,UAAU,cAAc,WAAW,KAAK;CAClG,MAAM,CAAC,YAAY,iBAAiB,mBAClC,OAAO,UAAU,eAAe,WAAW,YAAY,IAAI,WAAW,OACtE,UACA,SACD;CAED,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,SAAS,OAAO;CACtB,MAAM,UAAU,WAAW;CAC3B,MAAM,cAAc,WAAW;CAC/B,MAAM,eAAe,iBAAiB;CACtC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,EAAE,OAAO,eAAe,QAAQ,SAAS,IAAI,EAAE,OAAO,GAAG;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;AAEjC,iBAAgB;EACd,MAAM,wBAA8B;AAClC,eAAY,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,gBAAgB;AAEvD,eAAmB;AACjB,YAAS,oBAAoB,aAAa,gBAAgB;;IAE3D,EAAE,CAAC;CAEN,MAAM,iCAAiC,mBAAmC;EAOxE,IAAI,WAHwB,kBAHN,SAAS,SAAS,uBAAuB,CAAC,KAAK,MAGP,cAC3C,WAAW,YAEgB;AAG9C,YADkB,KAAK,MAAM,UAAQ,KAAK,GACtB;AACpB,YAAQ,KAAK,IAAI,UAAU,KAAK,IAAI,UAAU,QAAM,CAAC;AAErD,SAAO;;AAGT,iBAAgB;EACd,MAAM,qBAAqB,MAA0B;AACnD,OAAI,CAAC,YAAY,SAEf,eADiB,8BAA8B,EAAE,QAAQ,CAClC;;AAI3B,WAAS,iBAAiB,eAAe,kBAAkB;AAE3D,eAAmB;AACjB,YAAS,oBAAoB,eAAe,kBAAkB;;IAE/D,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,UAAU,cAAc,OAAO,UAAU,aAAa;AACxD,mBAAgB;AAChB,iBAAc,MAAM;;IAErB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,OAAO,UAAU,eAAe,aAAa,cAC/C,kBAAiB,SAAS;IAE3B,CAAC,SAAS,CAAC;CAEd,MAAM,uBAA6B;AACjC,MAAI,kBAAkB,MACpB,kBAAiB,KAAK;;CAI1B,MAAMA,iBAA4D,MAAK;AACrE,MAAI,SAAU;EAEd,IAAI,OAAO;AAEX,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,QACE;;AAGJ,MAAI,MAAM;AACR,mBAAgB;AAChB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAMC,oBAA4D,MAAK;AACrE,MAAI,SAAU;AAGd,gBADiB,8BAA8B,EAAE,QAAQ,CAClC;AACvB,YAAU,SAAS,OAAO;;CAG5B,MAAMC,qBAA+D,MAAK;AACxE,MAAI,SAAU;AAEd,mBAAiB,EAAE;AACnB,cAAY,KAAK;AACjB,kBAAgB;AAEhB,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,YAAU,SAAS,OAAO;;CAG5B,MAAM,aAAa,aAAa,WAAY,cAAc,WAAW,aAAc,aAAa,YAAY;CAE5G,MAAM,yBAA6C;EACjD,MAAM,YAAY,QAAQ,KAAK,OAAO,aAAa,YAAY,KAAK,GAAG;AAEvE,MAAI,SAAS,cAAc,QAAQ,aAAa,KAAK,YAAY,MAAM,QAAQ;GAC7E,MAAM,SAAO,MAAM;GACnB,MAAM,YAAY,OAAK;GACvB,MAAM,QAAQ,OAAO,OAAK,UAAU,cAAc,OAAK,MAAM,UAAU,GAAG,KAAA;AAE1E,UAAO,aAAa,QAAQ,GAAG,UAAU,GAAG,UAAU,aAAa;;;CAMvE,MAAM,2BAA+C;AACnD,MAAI,SAAS,aAAa,WACxB,QAAO;GAAC;GAAS;GAAa;GAAa,CAAC,KAAK,IAAI;AAEvD,MAAI,SAAS,UACX,QAAO,CAAC,SAAS,YAAY,CAAC,KAAK,IAAI;AAEzC,MAAI,SAAS,WACX,QAAO,CAAC,SAAS,aAAa,CAAC,KAAK,IAAI;AAE1C,MAAI,MACF,QAAO;;CAIX,MAAM,sBAAsB,uBAAuB;EACjD,OAAO;EACP,IAAI,oBAAoB;EACxB,QAAQ;EACT,CAAC;CAEF,MAAM,uBAAuB,OAAe,gBAA0C;AACpF,SAAO,EAAE,MAAM,GAAI,SAAS,cAAc,KAAM,IAAI,IAAI;;AAG1D,iBAAgB;AACd,MAAI,iBAAiB,SACnB,UAAS,EACP,QAAQ;GACN,MAAM,MAAM;GACZ,OAAO;GACR,EACF,CAAmD;IAErD,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,sBAAuC;AAC3C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAK,gBACH,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;CAIV,MAAM,oBAAqC;AACzC,SAAO,OAAO,KAAK,OAAO,UAAU;AAClC,UAAO,oBAAC,OAAA;IAAyB,WAAW,OAAO;IAAwB,OAAO,oBAAoB,OAAO,MAAM,OAAO;MAAzG,SAAS,MAAoG;IAC9H;;CAGJ,MAAM,yBAA0C;AAC9C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAO,OAAK,UAAU,eACpB,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;AAIV,QACE,qBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;aACjF,oBAAC,SAAA;GACC,kBAAgB,kBAAkB;GAClC,WAAW,OAAO;GACR;GACV,KAAK;GACL,KAAK;GACK;GACV,WAAW;GACX,OAAO;GACP,KAAK;GACL,MAAK;GACL,GAAI;GACJ,GAAI;IACJ,EACF,qBAAC,OAAA;GAAI,WAAW,OAAO;GAAQ,eAAa;GAAQ,oBAAkB,YAAY;;IAC/E,SACC,oBAAC,eAAA;KAAM,WAAW,OAAO;KAAkB,YAAY;KAAM,QAAQ;KAAG,YAAY;KAAU,IAAI;eAC/F;MACK;IAEV,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,eAAe;MAEhB,qBAAC,OAAA;OACC,KAAK;OACL,WAAW,GAAW,OAAO,0BAA0B,YAAY,OAAO,mCAAmC;OAC7G,eAAe;kBAEf,oBAAC,OAAA;QAAI,WAAW,GAAW,OAAO,eAAe,YAAY,OAAO,2BAA2B;kBAAG,aAAa;SAAO,EACtH,oBAAC,OAAA;QACC,WAAW,GAAW,OAAO,gBAAgB;UAC1C,OAAO,8BAA8B;UACrC,OAAO,8BAA8B;UACrC,OAAO,6BAA6B;UACpC,OAAO,6BAA6B,CAAC,YAAY;SACnD,CAAC;QACF,OAAO,EACL,MAAM,GAAG,WAAW,KACrB;SACD,CAAA;QACE;MACL,kBAAkB;;MACf;KACJ,aAAa,eACb,qBAAC,QAAA;KAAK,WAAW,OAAO;gBACtB,oBAAC,QAAA;MAAK,IAAI;gBAAc;OAAiB,EACzC,oBAAC,QAAA;MAAK,IAAI;gBAAe;OAAkB,CAAA;MACtC;;IAEL,CAAA;GACO;EAEjB;AAEF,OAAO,cAAc;AC9YrB,IAAA,mBDgZe"}
+{"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

@@ -1,12 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
-var Spacer_default$1 = React.forwardRef(function SpacerForwardedRef(props, ref) {
-	const { size = "s", className, testId } = props;
+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",
@@ -25,7 +24,8 @@ var Spacer_default$1 = React.forwardRef(function SpacerForwardedRef(props, ref)
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Spacer
 	});
-});
+};
+var Spacer_default$1 = Spacer;
 export { Spacer_default$1 as t };
 
 //# sourceMappingURL=Spacer.js.map

package/lib/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\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}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = 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":";;;;;ACEA,IAAA,mBDgBe,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CACpH,MAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAqB1C,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;EACnH"}
+{"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

@@ -1,8 +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 React from "react";
-import cn from "classnames";
+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) {
@@ -37,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
 		})
@@ -122,10 +121,10 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 	}
 	return null;
 };
-var StatusDot_default$1 = React.forwardRef(function StatusDotForwardedRef(props, ref) {
-	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;
-	const statusDotClasses = cn(styles["statusdot"], className);
-	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+var StatusDot = (props) => {
+	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;
+	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,
@@ -144,7 +143,8 @@ var StatusDot_default$1 = React.forwardRef(function StatusDotForwardedRef(props,
 			children: text
 		})]
 	});
-});
+};
+var StatusDot_default$1 = StatusDot;
 export { StatusDotOnColor as n, StatusDotVariant as r, StatusDot_default$1 as t };
 
 //# sourceMappingURL=StatusDot.js.map