@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/Select.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { FormOnColor, AnalyticsId, IconSize, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getColor } from "./theme/currys/color.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { I as Icon } from "./Icon.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import { a as renderLabel } from "./Label.js";
+import selectStyles from "./components/Select/styles.module.scss";
+const getSelectMaxWidth = (characters) => {
+  const paddingWidth = "2rem";
+  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;
+};
+const getIconColor = (invalid, disabled) => {
+  const iconColor = invalid ? "cherry" : "blueberry";
+  return disabled ? getColor("neutral", 500) : getColor(iconColor, 600);
+};
+const Select = React__default.forwardRef(function SelectForwardedRef(props, ref) {
+  const {
+    className,
+    children,
+    concept = "normal",
+    disabled,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    label,
+    selectId,
+    name = selectId,
+    onColor = FormOnColor.onwhite,
+    testId,
+    width,
+    required,
+    value,
+    defaultValue,
+    autoComplete = "off",
+    wrapperClassName,
+    ...rest
+  } = props;
+  const uuid = useUuid(selectId);
+  const errorTextUuid = useUuid(errorTextId);
+  const onBlueberry = onColor === "onblueberry";
+  const invalid = onColor === "oninvalid" || !!errorText || !!error;
+  const iconColor = getIconColor(invalid, !!disabled);
+  const maxWidth = width ? getSelectMaxWidth(width) : void 0;
+  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 = classNames(selectStyles.select, {
+    [selectStyles["select--on-blueberry"]]: onBlueberry,
+    [selectStyles["select--invalid"]]: invalid
+  });
+  const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Select, className: selectWrapperClasses, style: { maxWidth }, children: [
+    renderLabel(label, uuid, onColor),
+    /* @__PURE__ */ jsxs("div", { className: selectInnerWrapperClasses, "data-testid": testId + "-inner-wrapper", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: selectStyles["select-arrow"],
+          svgIcon: ChevronDown,
+          color: iconColor,
+          size: IconSize.XSmall,
+          testId: testId + "-icon"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ...rest,
+          "aria-invalid": !!invalid,
+          id: uuid,
+          name,
+          className: selectClasses,
+          disabled,
+          ref,
+          required,
+          "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+          "aria-required": !!required,
+          value,
+          defaultValue,
+          autoComplete: autoComplete ? autoComplete : void 0,
+          children
+        }
+      )
+    ] })
+  ] }) });
+});
+export {
+  Select as S
+};
+//# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\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) => {\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,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = 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 uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\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={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, 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={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\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"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AAC5D,QAAM,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AACxH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IAAA;AAAA,IAEpD;AAAA,EAAA;AAGF,QAAM,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,YACvG,UAAA;AAAA,IAAA,YAAY,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAA,EAAI,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAE3C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

package/lib/SingleSelectItem.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useId } from "react";
+import classNames from "classnames";
+import { A as AsChildSlot } from "./AsChildSlot.js";
+import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
+const SingleSelectContext = React__default.createContext(null);
+const SingleSelect = ({ name, disabled, defaultValue, onValueChange, children }) => {
+  const [selected, setSelected] = React__default.useState(defaultValue);
+  const context = React__default.useMemo(
+    () => ({
+      name,
+      disabled,
+      value: selected,
+      onValueChange: (v, e) => {
+        setSelected(v);
+        onValueChange == null ? void 0 : onValueChange(v, e);
+      }
+    }),
+    [name, disabled, selected, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(SingleSelectContext.Provider, { value: context, children });
+};
+const useSingleSelect = () => React__default.useContext(SingleSelectContext);
+const SingleSelectItem = React__default.forwardRef((props, ref) => {
+  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...rest } = props;
+  const generatedId = useId();
+  const inputId = props.inputId ?? generatedId;
+  const group = useSingleSelect();
+  const optionValue = typeof value === "string" && value.length > 0 ? value : inputId;
+  const isSelected = group ? group.value === optionValue : false;
+  const isDisabled = !!disabled || !!(group == null ? void 0 : group.disabled);
+  const asChildSlotRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    var _a;
+    if (defaultSelected && group && typeof group.value === "undefined") {
+      (_a = group.onValueChange) == null ? void 0 : _a.call(group, optionValue);
+    }
+  }, [defaultSelected, group, optionValue]);
+  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
+  });
+  const childArray = React__default.Children.toArray(children).filter(React__default.isValidElement);
+  const childElement = childArray[0] ?? null;
+  const selectThis = (e) => {
+    var _a;
+    if (isDisabled) return;
+    if (group && group.value !== optionValue) {
+      (_a = group.onValueChange) == null ? void 0 : _a.call(group, optionValue, e);
+    }
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: dotClasses, "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { children: text })
+  ] });
+  const Component = asChild ? AsChildSlot : "button";
+  const componentProps = asChild ? {
+    ref: asChildSlotRef,
+    elementRef: ref,
+    className: contentClasses,
+    disabled: isDisabled,
+    onSelect: (e) => selectThis(e),
+    ariaCurrent: isSelected ? "true" : void 0,
+    children: childElement,
+    content
+  } : {
+    ...rest,
+    type: "button",
+    className: contentClasses,
+    disabled: isDisabled,
+    onClick: (e) => {
+      e.preventDefault();
+      selectThis(e);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        selectThis(e);
+      }
+    },
+    ref,
+    "aria-disabled": isDisabled || void 0,
+    "aria-current": isSelected ? "true" : void 0,
+    children: content
+  };
+  return /* @__PURE__ */ jsx("div", { "data-testid": testId, className: styles["single-select-item"], children: /* @__PURE__ */ jsx(Component, { ...componentProps }) });
+});
+SingleSelectItem.displayName = "Dropdown.SingleSelectItem";
+export {
+  SingleSelectItem as S,
+  SingleSelect as a
+};
+//# sourceMappingURL=SingleSelectItem.js.map

package/lib/SingleSelectItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectItem.js","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\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: childElement,\n        content,\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"],"names":["React"],"mappings":"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"}

package/lib/Slider.js

@@ -0,0 +1,305 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useSize } from "./hooks/useSize.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { mergeRefs, isMutableRefObject } from "./utils/refs.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/Slider/styles.module.scss";
+const useSafeNumberValue = (initial, min, max) => {
+  const [value, setValue] = useState(initial);
+  const setSafeValue = (newValue) => {
+    if (newValue > max) {
+      setValue(max);
+    } else if (newValue < min) {
+      setValue(min);
+    } else {
+      setValue(newValue);
+    }
+  };
+  useEffect(() => {
+    setSafeValue(initial);
+  }, [min, max]);
+  return [value, setSafeValue];
+};
+const Slider = React__default.forwardRef((props, ref) => {
+  const {
+    title,
+    ariaLabel,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    labelLeft,
+    labelRight,
+    disabled = false,
+    onChange,
+    steps,
+    step = 1,
+    minValue = 0,
+    maxValue = steps ? steps.length - 1 : 100,
+    selected = true,
+    testId,
+    value,
+    ...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
+  );
+  const errorTextUuid = useUuid(errorTextId);
+  const titleId = useUuid();
+  const labelLeftId = useUuid();
+  const labelRightId = useUuid();
+  const trackRef = useRef(null);
+  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const mergedRefs = mergeRefs([ref, refObject]);
+  const { width: trackWidth } = useSize(trackRef) || { width: 0 };
+  const largeStep = maxValue / 10;
+  const invalid = !!errorText || !!error;
+  useEffect(() => {
+    const handlePointerUp = () => {
+      setIsMoving(false);
+    };
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, []);
+  const getValueBasedOnMarkerPosition = (markerPosition) => {
+    var _a;
+    const trackPosition = ((_a = trackRef.current) == null ? void 0 : _a.getBoundingClientRect().x) ?? 0;
+    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;
+    const valueRange = maxValue - minValue;
+    let value2 = normalizedPosition * valueRange + minValue;
+    const stepCount = Math.round(value2 / step);
+    value2 = stepCount * step;
+    value2 = Math.max(minValue, Math.min(maxValue, value2));
+    return value2;
+  };
+  useEffect(() => {
+    const handlePointerMove = (e) => {
+      if (!disabled && isMoving) {
+        const newValue = getValueBasedOnMarkerPosition(e.clientX);
+        setValueState(newValue);
+      }
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [isMoving]);
+  useEffect(() => {
+    if (value !== valueState && typeof value !== "undefined") {
+      handleSelected();
+      setValueState(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (typeof value === "undefined" && selected !== selectedState) {
+      setSelectedState(selected);
+    }
+  }, [selected]);
+  const handleSelected = () => {
+    if (selectedState === false) {
+      setSelectedState(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    let flag = false;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        setValueState(valueState - step);
+        flag = true;
+        break;
+      case "PageDown":
+        setValueState(valueState - largeStep);
+        flag = true;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        setValueState(valueState + step);
+        flag = true;
+        break;
+      case "PageUp":
+        setValueState(valueState + largeStep);
+        flag = true;
+        break;
+      case "Home":
+        setValueState(minValue);
+        flag = true;
+        break;
+      case "End":
+        setValueState(maxValue);
+        flag = true;
+        break;
+    }
+    if (flag) {
+      handleSelected();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const handleTrackClick = (e) => {
+    var _a;
+    if (disabled) return;
+    const newValue = getValueBasedOnMarkerPosition(e.clientX);
+    setValueState(newValue);
+    (_a = refObject.current) == null ? void 0 : _a.focus();
+  };
+  const handlePointerDown = (e) => {
+    var _a;
+    if (disabled) return;
+    setIsMoving(true);
+    handleSelected();
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = refObject.current) == null ? void 0 : _a.focus();
+  };
+  const markerXPos = maxValue !== minValue ? trackWidth / (maxValue - minValue) * (valueState - minValue) : 0;
+  const getAriaValueText = () => {
+    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;
+    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {
+      const step2 = steps[stepIndex];
+      const emojiCode = step2.emojiUniCode;
+      const label = typeof step2.label !== "undefined" ? step2.label.toString() : void 0;
+      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;
+    }
+    return void 0;
+  };
+  const getAriaLabeledById = () => {
+    if (title && labelLeft && labelRight) {
+      return [titleId, labelLeftId, labelRightId].join(" ");
+    }
+    if (title && labelLeft) {
+      return [titleId, labelLeftId].join(" ");
+    }
+    if (title && labelRight) {
+      return [titleId, labelRightId].join(" ");
+    }
+    if (title) {
+      return titleId;
+    }
+  };
+  const ariaLabelAttributes = getAriaLabelAttributes({
+    label: ariaLabel,
+    id: getAriaLabeledById(),
+    prefer: "label"
+  });
+  const getXPositionStyling = (index, stepsLength) => {
+    return { left: `${index / (stepsLength - 1) * 100}%` };
+  };
+  useEffect(() => {
+    if (selectedState && onChange) {
+      onChange({
+        target: {
+          name: props.name,
+          value: valueState
+        }
+      });
+    }
+  }, [valueState, selectedState]);
+  const renderEmojies = () => {
+    return /* @__PURE__ */ jsx("div", { className: styles["slider__emoji-container"], children: steps == null ? void 0 : steps.map((step2, index) => {
+      return step2.emojiUniCode && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: styles["slider__emoji"],
+          style: getXPositionStyling(index, steps.length),
+          children: step2.emojiUniCode
+        },
+        "emoji" + index
+      );
+    }) });
+  };
+  const renderSteps = () => {
+    return steps == null ? void 0 : steps.map((_step, index) => {
+      return /* @__PURE__ */ jsx("div", { className: styles["slider__track__step"], style: getXPositionStyling(index, steps.length) }, "step" + index);
+    });
+  };
+  const renderStepLabels = () => {
+    return /* @__PURE__ */ jsx("div", { className: styles["slider__value-container"], children: steps == null ? void 0 : steps.map((step2, index) => {
+      return typeof step2.label !== "undefined" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: styles["slider__value"],
+          style: getXPositionStyling(index, steps.length),
+          children: step2.label
+        },
+        "label" + index
+      );
+    }) });
+  };
+  return /* @__PURE__ */ jsxs(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-valuetext": getAriaValueText(),
+        className: styles["sr-only-slider"],
+        disabled,
+        min: minValue,
+        max: maxValue,
+        onChange,
+        onKeyDown: handleKeyDown,
+        value: valueState,
+        ref: mergedRefs,
+        type: "range",
+        ...rest,
+        ...ariaLabelAttributes
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.slider, "data-testid": testId, "data-analyticsid": AnalyticsId.Slider, children: [
+      title && /* @__PURE__ */ jsx(Title, { className: styles["slider__title"], htmlMarkup: "h3", margin: 0, appearance: "title3", id: titleId, children: title }),
+      /* @__PURE__ */ jsxs("div", { className: styles["slider__content-container"], children: [
+        renderEmojies(),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: trackRef,
+            className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+            onClick: handleTrackClick,
+            onPointerDown: handlePointerDown,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]), children: renderSteps() }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(styles.slider__marker, {
+                    [styles["slider__marker--disabled"]]: disabled,
+                    [styles["slider__marker--selected"]]: selectedState,
+                    [styles["slider__marker--invalid"]]: invalid,
+                    [styles["slider__marker--focused"]]: !disabled && isFocused
+                  }),
+                  style: {
+                    left: `${markerXPos}px`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        renderStepLabels()
+      ] }),
+      (labelLeft || labelRight) && /* @__PURE__ */ jsxs("span", { className: styles.slider__options, children: [
+        /* @__PURE__ */ jsx("span", { id: labelLeftId, children: labelLeft }),
+        /* @__PURE__ */ jsx("span", { id: labelRightId, children: labelRight })
+      ] })
+    ] })
+  ] });
+});
+Slider.displayName = "Slider";
+export {
+  Slider as S
+};
+//# sourceMappingURL=Slider.js.map

package/lib/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\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,\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 errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\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    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={errorTextUuid}>\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          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\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"],"names":["React","value","step"],"mappings":"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"}

package/lib/Spacer.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import spacerStyles from "./components/Spacer/styles.module.scss";
+const Spacer = React__default.forwardRef(function SpacerForwardedRef(props, ref) {
+  const { size = "s", className, testId } = props;
+  const spacerClasses = classNames(
+    spacerStyles.spacer,
+    {
+      [spacerStyles["spacer--4xs"]]: size === "4xs",
+      [spacerStyles["spacer--3xs"]]: size === "3xs",
+      [spacerStyles["spacer--2xs"]]: size === "2xs",
+      [spacerStyles["spacer--xs"]]: size === "xs",
+      [spacerStyles["spacer--s"]]: size === "s",
+      [spacerStyles["spacer--m"]]: size === "m",
+      [spacerStyles["spacer--l"]]: size === "l",
+      [spacerStyles["spacer--xl"]]: size === "xl",
+      [spacerStyles["spacer--2xl"]]: size === "2xl",
+      [spacerStyles["spacer--3xl"]]: size === "3xl",
+      [spacerStyles["spacer--4xl"]]: size === "4xl",
+      [spacerStyles["spacer--5xl"]]: size === "5xl",
+      [spacerStyles["spacer--6xl"]]: size === "6xl"
+    },
+    className
+  );
+  return /* @__PURE__ */ jsx("span", { className: spacerClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.Spacer });
+});
+export {
+  Spacer as S
+};
+//# sourceMappingURL=Spacer.js.map

package/lib/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../src/components/Spacer/Spacer.tsx"],"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"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AACpH,QAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAC1C,QAAM,gBAAgB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,MACE,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,IAAA;AAAA,IAE1C;AAAA,EAAA;AAGF,SAAO,oBAAC,UAAK,WAAW,eAAe,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAAA,CAAQ;AAC9G,CAAC;"}