@helsenorge/designsystem-react 9.4.1 → 9.4.3

package/RadioButton.js

@@ -1,104 +1,121 @@
-import { jsx as g } from "react/jsx-runtime";
-import U, { useState as q } from "react";
-import u from "classnames";
-import { FormOnColor as d, FormSize as M, AnalyticsId as G } from "./constants.js";
-import { usePseudoClasses as H } from "./hooks/usePseudoClasses.js";
-import { useUuid as J } from "./hooks/useUuid.js";
-import { getAriaDescribedBy as K } from "./utils/accessibility.js";
-import { isMutableRefObject as Q, mergeRefs as V } from "./utils/refs.js";
-import { u as X } from "./uuid.js";
-import { E as Y } from "./ErrorWrapper.js";
-import { g as Z, r as $ } from "./Label.js";
-import e from "./components/RadioButton/styles.module.scss";
-const me = (l, o, t, c) => {
-  const n = o === "oninvalid", a = l === c;
-  return u({
-    [e["radio-button-label__large--on-grey"]]: t && o === "ongrey" && !a,
-    [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !a && t,
-    [e["radio-button-label__large--selected"]]: t && a && !n,
-    [e["radio-button-label__large--selected-invalid"]]: t && a && n
+import { jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { g as getLabelText, r as renderLabelAsParent } from "./Label.js";
+import radioButtonStyles from "./components/RadioButton/styles.module.scss";
+const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
+  const onCherry = onColor === "oninvalid";
+  const checked = radioId === checkedRadioId;
+  return classNames({
+    [radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
+    [radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
+    [radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
+    [radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
   });
-}, ee = U.forwardRef((l, o) => {
+};
+const RadioButton = React.forwardRef((props, ref) => {
   const {
-    className: t,
-    defaultChecked: c,
-    onChange: n,
-    disabled: a,
-    label: _,
-    inputId: m = X(),
-    onColor: i = d.onwhite,
-    name: v = m,
-    size: R,
-    errorText: f,
-    error: k = !!f,
-    errorTextId: w,
-    errorWrapperClassName: B,
-    value: N = Z(_),
-    testId: x,
-    required: L,
-    labelClassNames: I,
-    ...T
-  } = l, p = k || i === d.oninvalid, y = i === d.ondark, h = i === d.onblueberry, j = i === d.oninvalid, r = R === M.large, [A, F] = q(), { refObject: O, isFocused: s } = H(Q(o) ? o : null), S = V([o, O]), C = J(w), W = u(e["radio-button-wrapper"], {
-    [e["radio-button-wrapper__large"]]: r,
-    [e["radio-button-wrapper__large--focused"]]: r && s,
-    [e["radio-button-wrapper__large--selected"]]: r && A && s,
-    [e["radio-button-wrapper__large--invalid"]]: r && j && s,
-    [e["radio-button-wrapper__large--on-blueberry"]]: r && h && s
-  }), z = u(
-    e["radio-button-label"],
+    className,
+    defaultChecked,
+    onChange,
+    disabled,
+    label,
+    inputId = uuid(),
+    onColor = FormOnColor.onwhite,
+    name = inputId,
+    size,
+    errorText,
+    error = !!errorText,
+    errorTextId,
+    errorWrapperClassName,
+    value = getLabelText(label),
+    testId,
+    required,
+    labelClassNames,
+    ...rest
+  } = props;
+  const invalid = error || onColor === FormOnColor.oninvalid;
+  const onDark = onColor === FormOnColor.ondark;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const onCherry = onColor === FormOnColor.oninvalid;
+  const isLarge = size === FormSize.large;
+  const [checked, changeChecked] = useState();
+  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const mergedRefs = mergeRefs([ref, refObject]);
+  const errorTextUuid = useUuid(errorTextId);
+  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 = classNames(
+    radioButtonStyles["radio-button-label"],
     {
-      [e["radio-button-label--disabled"]]: a,
-      [e["radio-button-label--on-dark"]]: y,
-      [e["radio-button-label--invalid"]]: p,
-      [e["radio-button-label__large"]]: r,
-      [e["radio-button-label__large--disabled"]]: r && a
+      [radioButtonStyles["radio-button-label--disabled"]]: disabled,
+      [radioButtonStyles["radio-button-label--on-dark"]]: onDark,
+      [radioButtonStyles["radio-button-label--invalid"]]: invalid,
+      [radioButtonStyles["radio-button-label__large"]]: isLarge,
+      [radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
     },
-    I
-  ), D = u(
-    e["radio-button"],
+    labelClassNames
+  );
+  const radioButtonClasses = classNames(
+    radioButtonStyles["radio-button"],
     {
-      [e["radio-button--on-dark"]]: y,
-      [e["radio-button--disabled"]]: a,
-      [e["radio-button--on-blueberry"]]: h,
-      [e["radio-button--invalid"]]: p,
-      [e["radio-button__large"]]: r,
-      [e["radio-button__large--disabled"]]: r && a,
-      [e["radio-button__large--invalid"]]: r && p
+      [radioButtonStyles["radio-button--on-dark"]]: onDark,
+      [radioButtonStyles["radio-button--disabled"]]: disabled,
+      [radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
+      [radioButtonStyles["radio-button--invalid"]]: invalid,
+      [radioButtonStyles["radio-button__large"]]: isLarge,
+      [radioButtonStyles["radio-button__large--disabled"]]: isLarge && disabled,
+      [radioButtonStyles["radio-button__large--invalid"]]: isLarge && invalid
     },
-    t
-  ), E = (b) => {
-    F(b.target.checked), n && n(b);
-  }, P = () => /* @__PURE__ */ g(
+    className
+  );
+  const change = (e) => {
+    changeChecked(e.target.checked);
+    onChange && onChange(e);
+  };
+  const getLabelContent = () => /* @__PURE__ */ jsx(
     "input",
     {
-      id: m,
-      name: v,
-      className: D,
+      id: inputId,
+      name,
+      className: radioButtonClasses,
       type: "radio",
-      disabled: a,
-      value: N,
-      ref: S,
-      defaultChecked: c,
-      "aria-describedby": K(l, C),
-      required: L,
-      ...T,
-      onChange: (b) => E(b)
+      disabled,
+      value,
+      ref: mergedRefs,
+      defaultChecked,
+      "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+      required,
+      ...rest,
+      onChange: (e) => change(e)
     }
   );
-  return /* @__PURE__ */ g(Y, { className: B, errorText: f, errorTextId: C, children: /* @__PURE__ */ g("div", { "data-testid": x, "data-analyticsid": G.RadioButton, className: W, children: $(
-    _,
-    P(),
-    m,
-    i,
-    z,
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.RadioButton, className: radioButtonWrapperClasses, children: renderLabelAsParent(
+    label,
+    getLabelContent(),
+    inputId,
+    onColor,
+    radioButtonLabelClasses,
     void 0,
-    e["radiobutton-sublabel-wrapper"],
-    r
+    radioButtonStyles["radiobutton-sublabel-wrapper"],
+    isLarge
   ) }) });
 });
-ee.displayName = "RadioButton";
+RadioButton.displayName = "RadioButton";
 export {
-  ee as R,
-  me as g
+  RadioButton as R,
+  getRadioLabelClasses as g
 };
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\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    error = !!errorText,\n    errorTextId,\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 errorTextUuid = useUuid(errorTextId);\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--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    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\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, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\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"],"names":["getRadioLabelClasses","radioId","onColor","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormOnColor","name","size","errorText","error","errorTextId","errorWrapperClassName","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","jsx","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":";;;;;;;;;;;;AA2CO,MAAMA,KAAuB,CAClCC,GACAC,GACAC,GACAC,MACuB;AACvB,QAAMC,IAAWH,MAAY,aACvBI,IAAUL,MAAYG;AAE5B,SAAOG,EAAW;AAAA,IAChB,CAACC,EAAkB,oCAAoC,CAAC,GAAGL,KAASD,MAAY,YAAY,CAACI;AAAA,IAC7F,CAACE,EAAkB,yCAAyC,CAAC,GAAGN,MAAY,iBAAiB,CAACI,KAAWH;AAAA,IACzG,CAACK,EAAkB,qCAAqC,CAAC,GAAGL,KAASG,KAAW,CAACD;AAAA,IACjF,CAACG,EAAkB,6CAA6C,CAAC,GAAGL,KAASG,KAAWD;AAAA,EAAA,CACzF;AACH,GAEaI,KAAcC,EAAM,WAAW,CAACC,GAAyBC,MAAqC;AACnG,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC,IAAUC,EAAK;AAAA,IACf,SAAAjB,IAAUkB,EAAY;AAAA,IACtB,MAAAC,IAAOH;AAAA,IACP,MAAAI;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ,CAAC,CAACD;AAAA,IACV,aAAAE;AAAA,IACA,uBAAAC;AAAA,IACA,OAAAC,IAAQC,EAAaX,CAAK;AAAA,IAC1B,QAAAY;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAArB,GACEsB,IAAUT,KAAStB,MAAYkB,EAAY,WAC3Cc,IAAShC,MAAYkB,EAAY,QACjCe,IAAcjC,MAAYkB,EAAY,aACtCf,IAAWH,MAAYkB,EAAY,WACnCgB,IAAUd,MAASe,EAAS,OAC5B,CAAC/B,GAASgC,CAAa,IAAIC,EAAkB,GAC7C,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,EAAmCC,EAAmB/B,CAAG,IAAIA,IAAM,IAAI,GAClGgC,IAAaC,EAAU,CAACjC,GAAK4B,CAAS,CAAC,GACvCM,IAAgBC,EAAQtB,CAAW,GAEnCuB,IAA4BzC,EAAWC,EAAkB,sBAAsB,GAAG;AAAA,IACtF,CAACA,EAAkB,6BAA6B,CAAC,GAAG4B;AAAA,IACpD,CAAC5B,EAAkB,sCAAsC,CAAC,GAAG4B,KAAWK;AAAA,IACxE,CAACjC,EAAkB,uCAAuC,CAAC,GAAG4B,KAAW9B,KAAWmC;AAAA,IACpF,CAACjC,EAAkB,sCAAsC,CAAC,GAAG4B,KAAW/B,KAAYoC;AAAA,IACpF,CAACjC,EAAkB,2CAA2C,CAAC,GAAG4B,KAAWD,KAAeM;AAAA,EAAA,CAC7F,GACKQ,IAA0B1C;AAAA,IAC9BC,EAAkB,oBAAoB;AAAA,IACtC;AAAA,MACE,CAACA,EAAkB,8BAA8B,CAAC,GAAGQ;AAAA,MACrD,CAACR,EAAkB,6BAA6B,CAAC,GAAG0B;AAAA,MACpD,CAAC1B,EAAkB,6BAA6B,CAAC,GAAGyB;AAAA,MACpD,CAACzB,EAAkB,2BAA2B,CAAC,GAAG4B;AAAA,MAClD,CAAC5B,EAAkB,qCAAqC,CAAC,GAAG4B,KAAWpB;AAAA,IACzE;AAAA,IACAe;AAAA,EAAA,GAEImB,IAAqB3C;AAAA,IACzBC,EAAkB,cAAc;AAAA,IAChC;AAAA,MACE,CAACA,EAAkB,uBAAuB,CAAC,GAAG0B;AAAA,MAC9C,CAAC1B,EAAkB,wBAAwB,CAAC,GAAGQ;AAAA,MAC/C,CAACR,EAAkB,4BAA4B,CAAC,GAAG2B;AAAA,MACnD,CAAC3B,EAAkB,uBAAuB,CAAC,GAAGyB;AAAA,MAC9C,CAACzB,EAAkB,qBAAqB,CAAC,GAAG4B;AAAA,MAC5C,CAAC5B,EAAkB,+BAA+B,CAAC,GAAG4B,KAAWpB;AAAA,MACjE,CAACR,EAAkB,8BAA8B,CAAC,GAAG4B,KAAWH;AAAA,IAClE;AAAA,IACApB;AAAA,EAAA,GAGIsC,IAAS,CAACC,MAAiD;AACjD,IAAAd,EAAAc,EAAE,OAAO,OAAO,GAC9BrC,KAAYA,EAASqC,CAAC;AAAA,EAAA,GAGlBC,IAAkB,MACtB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAIpC;AAAA,MACJ,MAAAG;AAAA,MACA,WAAW6B;AAAA,MACX,MAAK;AAAA,MACL,UAAAlC;AAAA,MACA,OAAAW;AAAA,MACA,KAAKiB;AAAA,MACL,gBAAA9B;AAAA,MACA,oBAAkByC,EAAmB5C,GAAOmC,CAAa;AAAA,MACzD,UAAAhB;AAAA,MACC,GAAGE;AAAA,MACJ,UAAU,CAACoB,MAAYD,EAAOC,CAAC;AAAA,IAAA;AAAA,EAAA;AAInC,SACG,gBAAAE,EAAAE,GAAA,EAAa,WAAW9B,GAAuB,WAAAH,GAAsB,aAAauB,GACjF,UAAC,gBAAAQ,EAAA,OAAA,EAAI,eAAazB,GAAQ,oBAAkB4B,EAAY,aAAa,WAAWT,GAC7E,UAAAU;AAAA,IACCzC;AAAA,IACAoC,EAAgB;AAAA,IAChBnC;AAAA,IACAhB;AAAA,IACA+C;AAAA,IACA;AAAA,IACAzC,EAAkB,8BAA8B;AAAA,IAChD4B;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;AAED3B,GAAY,cAAc;"}
+{"version":3,"file":"RadioButton.js","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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\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    error = !!errorText,\n    errorTextId,\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 errorTextUuid = useUuid(errorTextId);\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--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    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\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, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\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"],"names":[],"mappings":"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"}

package/Select.js

@@ -1,86 +1,103 @@
-import { jsx as l, jsxs as I } from "react/jsx-runtime";
-import H from "react";
-import i from "classnames";
-import { FormOnColor as U, AnalyticsId as V, IconSize as X, AVERAGE_CHARACTER_WIDTH_PX as $ } from "./constants.js";
-import { useUuid as h } from "./hooks/useUuid.js";
-import { getColor as v } from "./theme/currys/color.js";
-import { getAriaDescribedBy as G } from "./utils/accessibility.js";
-import { E as L } from "./ErrorWrapper.js";
-import { I as M } from "./Icon.js";
-import O from "./components/Icons/ChevronDown.js";
-import { a as P } from "./Label.js";
-import e from "./components/Select/styles.module.scss";
-const k = (t) => `calc(${t * $}px + 2rem)`, J = (t, r) => r ? v("neutral", 500) : v(t ? "cherry" : "blueberry", 600), ie = H.forwardRef(function(r, c) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React 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.forwardRef(function SelectForwardedRef(props, ref) {
   const {
-    className: y,
-    children: x,
-    concept: N = "normal",
-    disabled: a,
-    error: W,
-    errorText: d,
-    errorTextId: S,
-    errorWrapperClassName: g,
-    label: A,
-    selectId: p,
-    name: R = p,
-    onColor: s = U.onwhite,
-    testId: n,
-    width: m,
-    required: u,
-    value: T,
-    defaultValue: E,
-    autoComplete: f = "off",
-    wrapperClassName: D,
-    ..._
-  } = r, C = h(p), b = h(S), w = s === "onblueberry", o = s === "oninvalid" || !!d || !!W, j = J(o, !!a), q = m ? k(m) : void 0, z = i(
-    e["select-inner-wrapper"],
+    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"],
     {
-      [e["select-inner-wrapper--transparent"]]: N === "transparent",
-      [e["select-inner-wrapper--on-blueberry"]]: w,
-      [e["select-inner-wrapper--invalid"]]: o,
-      [e["select-inner-wrapper--disabled"]]: a
+      [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
     },
-    y
-  ), B = i(e.select, {
-    [e["select--on-blueberry"]]: w,
-    [e["select--invalid"]]: o
-  }), F = i(e["select-wrapper"], D);
-  return /* @__PURE__ */ l(L, { className: g, errorText: d, errorTextId: b, children: /* @__PURE__ */ I("div", { "data-testid": n, "data-analyticsid": V.Select, className: F, style: { maxWidth: q }, children: [
-    P(A, C, s),
-    /* @__PURE__ */ I("div", { className: z, "data-testid": n + "-inner-wrapper", children: [
-      /* @__PURE__ */ l(
-        M,
+    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: e["select-arrow"],
-          svgIcon: O,
-          color: j,
-          size: X.XSmall,
-          testId: n + "-icon"
+          className: selectStyles["select-arrow"],
+          svgIcon: ChevronDown,
+          color: iconColor,
+          size: IconSize.XSmall,
+          testId: testId + "-icon"
         }
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ jsx(
         "select",
         {
-          "aria-invalid": !!o,
-          id: C,
-          name: R,
-          className: B,
-          disabled: a,
-          ref: c,
-          required: u,
-          "aria-describedby": G(r, b),
-          "aria-required": !!u,
-          value: T,
-          defaultValue: E,
-          autoComplete: f || void 0,
-          ..._,
-          children: x
+          "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,
+          ...rest,
+          children
         }
       )
     ] })
   ] }) });
 });
 export {
-  ie as S
+  Select as S
 };
 //# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -1 +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            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            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","errorWrapperClassName","label","selectId","name","onColor","FormOnColor","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","jsxs","AnalyticsId","renderLabel","jsx","Icon","ChevronDown","IconSize","getAriaDescribedBy"],"mappings":"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"}
+{"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            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            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AACtD,QAAA,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AAClH,QAAA;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;AAEE,QAAA,OAAO,QAAQ,QAAQ;AACvB,QAAA,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,IACpD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,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,UAAC,qBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,SACvG,GAAA,UAAA;AAAA,IAAY,YAAA,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAI,EAAA,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,MACnB;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,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,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;"}